1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import PropTypes from 'prop-types';
|
4 | import React, { useState } from 'react';
|
5 | import ReactDOM from 'react-dom';
|
6 | import useCallbackRef from '@restart/hooks/useCallbackRef';
|
7 | import useMergedRefs from '@restart/hooks/useMergedRefs';
|
8 | import { placements } from './popper';
|
9 | import usePopper, { toModifierMap } from './usePopper';
|
10 | import useRootClose from './useRootClose';
|
11 | import useWaitForDOMRef from './useWaitForDOMRef';
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | var Overlay = React.forwardRef(function (props, outerRef) {
|
18 | var _modifiers$preventOve, _modifiers$arrow;
|
19 |
|
20 | var flip = props.flip,
|
21 | placement = props.placement,
|
22 | _props$containerPaddi = props.containerPadding,
|
23 | containerPadding = _props$containerPaddi === void 0 ? 5 : _props$containerPaddi,
|
24 | _props$popperConfig = props.popperConfig,
|
25 | popperConfig = _props$popperConfig === void 0 ? {} : _props$popperConfig,
|
26 | Transition = props.transition;
|
27 |
|
28 | var _useCallbackRef = useCallbackRef(),
|
29 | rootElement = _useCallbackRef[0],
|
30 | attachRef = _useCallbackRef[1];
|
31 |
|
32 | var _useCallbackRef2 = useCallbackRef(),
|
33 | arrowElement = _useCallbackRef2[0],
|
34 | attachArrowRef = _useCallbackRef2[1];
|
35 |
|
36 | var mergedRef = useMergedRefs(attachRef, outerRef);
|
37 | var container = useWaitForDOMRef(props.container);
|
38 | var target = useWaitForDOMRef(props.target);
|
39 |
|
40 | var _useState = useState(!props.show),
|
41 | exited = _useState[0],
|
42 | setExited = _useState[1];
|
43 |
|
44 | var modifiers = toModifierMap(popperConfig.modifiers);
|
45 |
|
46 | var _usePopper = usePopper(target, rootElement, _extends({}, popperConfig, {
|
47 | placement: placement || 'bottom',
|
48 | modifiers: _extends({}, modifiers, {
|
49 | eventListeners: {
|
50 | enabled: !!props.show
|
51 | },
|
52 | preventOverflow: _extends({}, modifiers.preventOverflow, {
|
53 | options: _extends({
|
54 | padding: containerPadding || 5
|
55 | }, (_modifiers$preventOve = modifiers.preventOverflow) == null ? void 0 : _modifiers$preventOve.options)
|
56 | }),
|
57 | arrow: _extends({}, modifiers.arrow, {
|
58 | enabled: !!arrowElement,
|
59 | options: _extends({}, (_modifiers$arrow = modifiers.arrow) == null ? void 0 : _modifiers$arrow.options, {
|
60 | element: arrowElement
|
61 | })
|
62 | }),
|
63 | flip: _extends({
|
64 | enabled: !!flip
|
65 | }, modifiers.flip)
|
66 | })
|
67 | })),
|
68 | styles = _usePopper.styles,
|
69 | arrowStyles = _usePopper.arrowStyles,
|
70 | popper = _objectWithoutPropertiesLoose(_usePopper, ["styles", "arrowStyles"]);
|
71 |
|
72 | if (props.show) {
|
73 | if (exited) setExited(false);
|
74 | } else if (!props.transition && !exited) {
|
75 | setExited(true);
|
76 | }
|
77 |
|
78 | var handleHidden = function handleHidden() {
|
79 | setExited(true);
|
80 |
|
81 | if (props.onExited) {
|
82 | props.onExited.apply(props, arguments);
|
83 | }
|
84 | };
|
85 |
|
86 |
|
87 | var mountOverlay = props.show || Transition && !exited;
|
88 | useRootClose(rootElement, props.onHide, {
|
89 | disabled: !props.rootClose || props.rootCloseDisabled,
|
90 | clickTrigger: props.rootCloseEvent
|
91 | });
|
92 |
|
93 | if (!mountOverlay) {
|
94 |
|
95 | return null;
|
96 | }
|
97 |
|
98 | var child = props.children(_extends({}, popper, {
|
99 | show: !!props.show,
|
100 | props: {
|
101 | style: styles,
|
102 | ref: mergedRef
|
103 | },
|
104 | arrowProps: {
|
105 | style: arrowStyles,
|
106 | ref: attachArrowRef
|
107 | }
|
108 | }));
|
109 |
|
110 | if (Transition) {
|
111 | var onExit = props.onExit,
|
112 | onExiting = props.onExiting,
|
113 | onEnter = props.onEnter,
|
114 | onEntering = props.onEntering,
|
115 | onEntered = props.onEntered;
|
116 | child = React.createElement(Transition, {
|
117 | "in": props.show,
|
118 | appear: true,
|
119 | onExit: onExit,
|
120 | onExiting: onExiting,
|
121 | onExited: handleHidden,
|
122 | onEnter: onEnter,
|
123 | onEntering: onEntering,
|
124 | onEntered: onEntered
|
125 | }, child);
|
126 | }
|
127 |
|
128 | return container ? ReactDOM.createPortal(child, container) : null;
|
129 | });
|
130 | Overlay.displayName = 'Overlay';
|
131 | Overlay.propTypes = {
|
132 | |
133 |
|
134 |
|
135 | show: PropTypes.bool,
|
136 |
|
137 |
|
138 | placement: PropTypes.oneOf(placements),
|
139 |
|
140 | |
141 |
|
142 |
|
143 |
|
144 | target: PropTypes.any,
|
145 |
|
146 | |
147 |
|
148 |
|
149 |
|
150 | container: PropTypes.any,
|
151 |
|
152 | |
153 |
|
154 |
|
155 |
|
156 |
|
157 | flip: PropTypes.bool,
|
158 |
|
159 | |
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 | children: PropTypes.func.isRequired,
|
180 |
|
181 | |
182 |
|
183 |
|
184 |
|
185 | containerPadding: PropTypes.number,
|
186 |
|
187 | |
188 |
|
189 |
|
190 | popperConfig: PropTypes.object,
|
191 |
|
192 | |
193 |
|
194 |
|
195 | rootClose: PropTypes.bool,
|
196 |
|
197 | |
198 |
|
199 |
|
200 | rootCloseEvent: PropTypes.oneOf(['click', 'mousedown']),
|
201 |
|
202 | |
203 |
|
204 |
|
205 | rootCloseDisabled: PropTypes.bool,
|
206 |
|
207 | |
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 | onHide: function onHide(props) {
|
215 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
216 | args[_key - 1] = arguments[_key];
|
217 | }
|
218 |
|
219 | if (props.rootClose) {
|
220 | var _PropTypes$func;
|
221 |
|
222 | return (_PropTypes$func = PropTypes.func).isRequired.apply(_PropTypes$func, [props].concat(args));
|
223 | }
|
224 |
|
225 | return PropTypes.func.apply(PropTypes, [props].concat(args));
|
226 | },
|
227 |
|
228 | |
229 |
|
230 |
|
231 |
|
232 |
|
233 | transition: PropTypes.elementType,
|
234 |
|
235 | |
236 |
|
237 |
|
238 | onEnter: PropTypes.func,
|
239 |
|
240 | |
241 |
|
242 |
|
243 | onEntering: PropTypes.func,
|
244 |
|
245 | |
246 |
|
247 |
|
248 | onEntered: PropTypes.func,
|
249 |
|
250 | |
251 |
|
252 |
|
253 | onExit: PropTypes.func,
|
254 |
|
255 | |
256 |
|
257 |
|
258 | onExiting: PropTypes.func,
|
259 |
|
260 | |
261 |
|
262 |
|
263 | onExited: PropTypes.func
|
264 | };
|
265 | export default Overlay; |
\ | No newline at end of file |