1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = void 0;
|
9 |
|
10 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11 |
|
12 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
13 |
|
14 | var _react = _interopRequireDefault(require("react"));
|
15 |
|
16 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
17 |
|
18 | var _popper = _interopRequireDefault(require("popper.js"));
|
19 |
|
20 | var _utils = require("@material-ui/utils");
|
21 |
|
22 | var _styles = require("@material-ui/styles");
|
23 |
|
24 | var _Portal = _interopRequireDefault(require("../Portal"));
|
25 |
|
26 | var _createChainedFunction = _interopRequireDefault(require("../utils/createChainedFunction"));
|
27 |
|
28 | var _setRef = _interopRequireDefault(require("../utils/setRef"));
|
29 |
|
30 | var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
|
31 |
|
32 | var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
|
33 |
|
34 | function flipPlacement(placement, theme) {
|
35 | var direction = theme && theme.direction || 'ltr';
|
36 |
|
37 | if (direction === 'ltr') {
|
38 | return placement;
|
39 | }
|
40 |
|
41 | switch (placement) {
|
42 | case 'bottom-end':
|
43 | return 'bottom-start';
|
44 |
|
45 | case 'bottom-start':
|
46 | return 'bottom-end';
|
47 |
|
48 | case 'top-end':
|
49 | return 'top-start';
|
50 |
|
51 | case 'top-start':
|
52 | return 'top-end';
|
53 |
|
54 | default:
|
55 | return placement;
|
56 | }
|
57 | }
|
58 |
|
59 | function getAnchorEl(anchorEl) {
|
60 | return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
|
61 | }
|
62 |
|
63 | var useEnhancedEffect = typeof window !== 'undefined' ? _react.default.useLayoutEffect : _react.default.useEffect;
|
64 | var defaultPopperOptions = {};
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | var Popper = _react.default.forwardRef(function Popper(props, ref) {
|
70 | var anchorEl = props.anchorEl,
|
71 | children = props.children,
|
72 | container = props.container,
|
73 | _props$disablePortal = props.disablePortal,
|
74 | disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
|
75 | _props$keepMounted = props.keepMounted,
|
76 | keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
|
77 | modifiers = props.modifiers,
|
78 | open = props.open,
|
79 | _props$placement = props.placement,
|
80 | initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,
|
81 | _props$popperOptions = props.popperOptions,
|
82 | popperOptions = _props$popperOptions === void 0 ? defaultPopperOptions : _props$popperOptions,
|
83 | popperRefProp = props.popperRef,
|
84 | _props$transition = props.transition,
|
85 | transition = _props$transition === void 0 ? false : _props$transition,
|
86 | other = (0, _objectWithoutProperties2.default)(props, ["anchorEl", "children", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition"]);
|
87 |
|
88 | var tooltipRef = _react.default.useRef(null);
|
89 |
|
90 | var ownRef = (0, _useForkRef.default)(tooltipRef, ref);
|
91 |
|
92 | var popperRef = _react.default.useRef(null);
|
93 |
|
94 | var handlePopperRef = (0, _useForkRef.default)(popperRef, popperRefProp);
|
95 |
|
96 | var handlePopperRefRef = _react.default.useRef(handlePopperRef);
|
97 |
|
98 | useEnhancedEffect(function () {
|
99 | handlePopperRefRef.current = handlePopperRef;
|
100 | }, [handlePopperRef]);
|
101 |
|
102 | _react.default.useImperativeHandle(popperRefProp, function () {
|
103 | return popperRef.current;
|
104 | }, []);
|
105 |
|
106 | var _React$useState = _react.default.useState(true),
|
107 | exited = _React$useState[0],
|
108 | setExited = _React$useState[1];
|
109 |
|
110 | var theme = (0, _styles.useTheme)();
|
111 | var rtlPlacement = flipPlacement(initialPlacement, theme);
|
112 | |
113 |
|
114 |
|
115 |
|
116 |
|
117 | var _React$useState2 = _react.default.useState(rtlPlacement),
|
118 | placement = _React$useState2[0],
|
119 | setPlacement = _React$useState2[1];
|
120 |
|
121 | _react.default.useEffect(function () {
|
122 | if (popperRef.current) {
|
123 | popperRef.current.update();
|
124 | }
|
125 | });
|
126 |
|
127 | var handleOpen = _react.default.useCallback(function () {
|
128 | if (!tooltipRef.current || !anchorEl || !open) {
|
129 | return;
|
130 | }
|
131 |
|
132 | if (popperRef.current) {
|
133 | popperRef.current.destroy();
|
134 | handlePopperRefRef.current(null);
|
135 | }
|
136 |
|
137 | var handlePopperUpdate = function handlePopperUpdate(data) {
|
138 | setPlacement(data.placement);
|
139 | };
|
140 |
|
141 | var resolvedAnchorEl = getAnchorEl(anchorEl);
|
142 |
|
143 | if (process.env.NODE_ENV !== 'production') {
|
144 | var containerWindow = (0, _ownerWindow.default)(resolvedAnchorEl);
|
145 |
|
146 | if (resolvedAnchorEl instanceof containerWindow.Element) {
|
147 | var box = resolvedAnchorEl.getBoundingClientRect();
|
148 |
|
149 | if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
150 | console.warn(['Material-UI: the `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
|
151 | }
|
152 | }
|
153 | }
|
154 |
|
155 | var popper = new _popper.default(getAnchorEl(anchorEl), tooltipRef.current, (0, _extends2.default)({
|
156 | placement: rtlPlacement
|
157 | }, popperOptions, {
|
158 | modifiers: (0, _extends2.default)({}, disablePortal ? {} : {
|
159 |
|
160 | preventOverflow: {
|
161 | boundariesElement: 'window'
|
162 | }
|
163 | }, {}, modifiers, {}, popperOptions.modifiers),
|
164 |
|
165 |
|
166 | onCreate: (0, _createChainedFunction.default)(handlePopperUpdate, popperOptions.onCreate),
|
167 | onUpdate: (0, _createChainedFunction.default)(handlePopperUpdate, popperOptions.onUpdate)
|
168 | }));
|
169 | handlePopperRefRef.current(popper);
|
170 | }, [anchorEl, disablePortal, modifiers, open, rtlPlacement, popperOptions]);
|
171 |
|
172 | var handleRef = _react.default.useCallback(function (node) {
|
173 | (0, _setRef.default)(ownRef, node);
|
174 | handleOpen();
|
175 | }, [ownRef, handleOpen]);
|
176 |
|
177 | var handleEnter = function handleEnter() {
|
178 | setExited(false);
|
179 | };
|
180 |
|
181 | var handleClose = function handleClose() {
|
182 | if (!popperRef.current) {
|
183 | return;
|
184 | }
|
185 |
|
186 | popperRef.current.destroy();
|
187 | handlePopperRefRef.current(null);
|
188 | };
|
189 |
|
190 | var handleExited = function handleExited() {
|
191 | setExited(true);
|
192 | handleClose();
|
193 | };
|
194 |
|
195 | _react.default.useEffect(function () {
|
196 |
|
197 | handleOpen();
|
198 | }, [handleOpen]);
|
199 |
|
200 | _react.default.useEffect(function () {
|
201 | return function () {
|
202 | handleClose();
|
203 | };
|
204 | }, []);
|
205 |
|
206 | _react.default.useEffect(function () {
|
207 | if (!open && !transition) {
|
208 |
|
209 | handleClose();
|
210 | }
|
211 | }, [open, transition]);
|
212 |
|
213 | if (!keepMounted && !open && (!transition || exited)) {
|
214 | return null;
|
215 | }
|
216 |
|
217 | var childProps = {
|
218 | placement: placement
|
219 | };
|
220 |
|
221 | if (transition) {
|
222 | childProps.TransitionProps = {
|
223 | in: open,
|
224 | onEnter: handleEnter,
|
225 | onExited: handleExited
|
226 | };
|
227 | }
|
228 |
|
229 | return _react.default.createElement(_Portal.default, {
|
230 | disablePortal: disablePortal,
|
231 | container: container
|
232 | }, _react.default.createElement("div", (0, _extends2.default)({
|
233 | ref: handleRef,
|
234 | role: "tooltip"
|
235 | }, other, {
|
236 | style: (0, _extends2.default)({
|
237 |
|
238 | position: 'fixed',
|
239 |
|
240 | top: 0,
|
241 | left: 0
|
242 | }, other.style)
|
243 | }), typeof children === 'function' ? children(childProps) : children));
|
244 | });
|
245 |
|
246 | process.env.NODE_ENV !== "production" ? Popper.propTypes = {
|
247 | |
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 | anchorEl: (0, _utils.chainPropTypes)(_propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]), function (props) {
|
257 | if (props.open) {
|
258 | var resolvedAnchorEl = getAnchorEl(props.anchorEl);
|
259 | var containerWindow = (0, _ownerWindow.default)(resolvedAnchorEl);
|
260 |
|
261 | if (resolvedAnchorEl instanceof containerWindow.Element) {
|
262 | var box = resolvedAnchorEl.getBoundingClientRect();
|
263 |
|
264 | if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
|
265 | return new Error(['Material-UI: the `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
|
266 | }
|
267 | } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.clientWidth !== 'number' || typeof resolvedAnchorEl.clientHeight !== 'number' || typeof resolvedAnchorEl.getBoundingClientRect !== 'function') {
|
268 | return new Error(['Material-UI: the `anchorEl` prop provided to the component is invalid.', 'It should be an HTML Element instance or a referenceObject:', 'https://popper.js.org/popper-documentation.html#referenceObject.'].join('\n'));
|
269 | }
|
270 | }
|
271 |
|
272 | return null;
|
273 | }),
|
274 |
|
275 | |
276 |
|
277 |
|
278 | children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
|
279 |
|
280 | |
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 | container: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
|
287 |
|
288 | |
289 |
|
290 |
|
291 |
|
292 | disablePortal: _propTypes.default.bool,
|
293 |
|
294 | |
295 |
|
296 |
|
297 |
|
298 |
|
299 | keepMounted: _propTypes.default.bool,
|
300 |
|
301 | |
302 |
|
303 |
|
304 |
|
305 |
|
306 |
|
307 |
|
308 |
|
309 |
|
310 | modifiers: _propTypes.default.object,
|
311 |
|
312 | |
313 |
|
314 |
|
315 | open: _propTypes.default.bool.isRequired,
|
316 |
|
317 | |
318 |
|
319 |
|
320 | placement: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
321 |
|
322 | |
323 |
|
324 |
|
325 | popperOptions: _propTypes.default.object,
|
326 |
|
327 | |
328 |
|
329 |
|
330 | popperRef: _utils.refType,
|
331 |
|
332 | |
333 |
|
334 |
|
335 | transition: _propTypes.default.bool
|
336 | } : void 0;
|
337 | var _default = Popper;
|
338 | exports.default = _default; |
\ | No newline at end of file |