1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 |
|
4 | import React, { useState, useRef, useEffect, cloneElement } from 'react';
|
5 | import classNames from 'classnames';
|
6 | import Overlay from '@alifd/overlay';
|
7 |
|
8 | import Animate from '../animate';
|
9 |
|
10 | import { log } from '../util';
|
11 |
|
12 | var Popup = function Popup(props) {
|
13 | var _classNames;
|
14 |
|
15 | if (!useState || !useRef || !useEffect) {
|
16 | log.warning('need react version > 16.8.0');
|
17 | return null;
|
18 | }
|
19 |
|
20 | var _props$prefix = props.prefix,
|
21 | prefix = _props$prefix === undefined ? 'next-' : _props$prefix,
|
22 | _props$animation = props.animation,
|
23 | panimation = _props$animation === undefined ? { in: 'expandInDown', out: 'expandOutUp' } : _props$animation,
|
24 | defaultVisible = props.defaultVisible,
|
25 | _props$onVisibleChang = props.onVisibleChange,
|
26 | onVisibleChange = _props$onVisibleChang === undefined ? function () {} : _props$onVisibleChang,
|
27 | trigger = props.trigger,
|
28 | _props$triggerType = props.triggerType,
|
29 | triggerType = _props$triggerType === undefined ? 'hover' : _props$triggerType,
|
30 | overlay = props.overlay,
|
31 | onPosition = props.onPosition,
|
32 | children = props.children,
|
33 | className = props.className,
|
34 | style = props.style,
|
35 | wrapperClassName = props.wrapperClassName,
|
36 | triggerClickKeycode = props.triggerClickKeycode,
|
37 | align = props.align,
|
38 | beforeOpen = props.beforeOpen,
|
39 | onOpen = props.onOpen,
|
40 | afterOpen = props.afterOpen,
|
41 | beforeClose = props.beforeClose,
|
42 | onClose = props.onClose,
|
43 | afterClose = props.afterClose,
|
44 | others = _objectWithoutProperties(props, ['prefix', 'animation', 'defaultVisible', 'onVisibleChange', 'trigger', 'triggerType', 'overlay', 'onPosition', 'children', 'className', 'style', 'wrapperClassName', 'triggerClickKeycode', 'align', 'beforeOpen', 'onOpen', 'afterOpen', 'beforeClose', 'onClose', 'afterClose']);
|
45 |
|
46 | var _useState = useState(defaultVisible),
|
47 | visible = _useState[0],
|
48 | setVisible = _useState[1];
|
49 |
|
50 | var _useState2 = useState(panimation),
|
51 | animation = _useState2[0],
|
52 | setAnimation = _useState2[1];
|
53 |
|
54 | var _useState3 = useState(true),
|
55 | isAnimationEnd = _useState3[0],
|
56 | markAnimationEnd = _useState3[1];
|
57 |
|
58 | var overlayRef = useRef(null);
|
59 |
|
60 | useEffect(function () {
|
61 | if ('visible' in props) {
|
62 | setVisible(props.visible);
|
63 | }
|
64 | }, [props.visible]);
|
65 |
|
66 | useEffect(function () {
|
67 | if ('animation' in props && animation !== panimation) {
|
68 | setAnimation(panimation);
|
69 | }
|
70 | }, [panimation]);
|
71 |
|
72 | var handleVisibleChange = function handleVisibleChange(visible) {
|
73 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
74 | args[_key - 1] = arguments[_key];
|
75 | }
|
76 |
|
77 | if (!('visible' in props)) {
|
78 | setVisible(visible);
|
79 | }
|
80 |
|
81 | onVisibleChange.apply(undefined, [visible].concat(args));
|
82 | };
|
83 |
|
84 | var triggerNode = overlay ? children : trigger;
|
85 | var overlayNode = overlay ? overlay : children;
|
86 |
|
87 | var handleEnter = function handleEnter() {
|
88 | markAnimationEnd(false);
|
89 | typeof beforeOpen === 'function' && beforeOpen(overlayRef.current);
|
90 | };
|
91 | var handleEntering = function handleEntering() {
|
92 | typeof onOpen === 'function' && onOpen(overlayRef.current);
|
93 | };
|
94 | var handleEntered = function handleEntered() {
|
95 | typeof afterOpen === 'function' && afterOpen(overlayRef.current);
|
96 | };
|
97 | var handleExit = function handleExit() {
|
98 | typeof beforeClose === 'function' && beforeClose(overlayRef.current);
|
99 | };
|
100 | var handleExiting = function handleExiting() {
|
101 | typeof onClose === 'function' && onClose(overlayRef.current);
|
102 | };
|
103 | var handleExited = function handleExited() {
|
104 | markAnimationEnd(true);
|
105 | typeof afterClose === 'function' && afterClose(overlayRef.current);
|
106 | };
|
107 |
|
108 | overlayNode = React.createElement(
|
109 | Animate.OverlayAnimate,
|
110 | {
|
111 | visible: visible,
|
112 | animation: animation,
|
113 | timeout: 200,
|
114 | onEnter: handleEnter,
|
115 | onEntering: handleEntering,
|
116 | onEntered: handleEntered,
|
117 | onExit: handleExit,
|
118 | onExiting: handleExiting,
|
119 | onExited: handleExited,
|
120 | style: style
|
121 | },
|
122 | overlayNode ? cloneElement(overlayNode, {
|
123 | className: classNames([prefix + 'overlay-inner', className, overlayNode && overlayNode.props && overlayNode.props.className])
|
124 | }) : React.createElement('span', null)
|
125 | );
|
126 |
|
127 | var handlePosition = function handlePosition(result) {
|
128 |
|
129 | _extends(result, { align: result.config.points });
|
130 |
|
131 | var placement = result.config.placement;
|
132 | if (placement && typeof placement === 'string') {
|
133 | if (animation.in === 'expandInDown' && animation.out === 'expandOutUp' && placement.match(/t/)) {
|
134 | setAnimation({
|
135 | in: 'expandInUp',
|
136 | out: 'expandOutDown'
|
137 | });
|
138 | } else if (animation.in === 'expandInUp' && animation.out === 'expandOutDown' && placement.match(/b/)) {
|
139 | setAnimation({
|
140 | in: 'expandInDown',
|
141 | out: 'expandOutUp'
|
142 | });
|
143 | }
|
144 | }
|
145 |
|
146 | typeof onPosition === 'function' && onPosition(result);
|
147 | };
|
148 |
|
149 | var wraperCls = classNames((_classNames = {}, _classNames[prefix + 'overlay-wrapper v2'] = true, _classNames[wrapperClassName] = wrapperClassName, _classNames.opened = visible, _classNames));
|
150 |
|
151 |
|
152 | var v1Props = {};
|
153 | if (align) {
|
154 | v1Props.points = align.split(' ');
|
155 | }
|
156 |
|
157 | var maskRender = function maskRender(node) {
|
158 | return React.createElement(
|
159 | Animate.OverlayAnimate,
|
160 | {
|
161 | visible: visible,
|
162 | animation: animation ? { in: 'fadeIn', out: 'fadeOut' } : false,
|
163 | timeout: 200,
|
164 | unmountOnExit: true
|
165 | },
|
166 | node
|
167 | );
|
168 | };
|
169 |
|
170 | return React.createElement(
|
171 | Overlay.Popup,
|
172 | _extends({}, others, v1Props, {
|
173 | wrapperClassName: wraperCls,
|
174 | overlay: overlayNode,
|
175 | visible: visible,
|
176 | isAnimationEnd: isAnimationEnd,
|
177 | triggerType: triggerType,
|
178 | onVisibleChange: handleVisibleChange,
|
179 | onPosition: handlePosition,
|
180 | triggerClickKeyCode: triggerClickKeycode,
|
181 | maskRender: maskRender,
|
182 | ref: overlayRef
|
183 | }),
|
184 | triggerNode
|
185 | );
|
186 | };
|
187 |
|
188 | export default Popup; |
\ | No newline at end of file |