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