1 line
4.3 KiB
JSON
1 line
4.3 KiB
JSON
{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport PopperJS from 'popper.js';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nvar initialPopperStyles = {\n position: 'absolute',\n top: '0',\n left: '0',\n opacity: '0',\n pointerEvents: 'none'\n};\nvar initialArrowStyles = {};\n/**\n * Position an element relative some reference element using Popper.js\n *\n * @param {HTMLElement} referenceElement The element\n * @param {HTMLElement} popperElement\n * @param {Object} options\n * @param {Object} options.modifiers Popper.js modifiers\n * @param {Boolean} options.enabled toggle the popper functionality on/off\n * @param {String} options.placement The popper element placement relative to the reference element\n * @param {Boolean} options.positionFixed use fixed positioning\n * @param {Boolean} options.eventsEnabled have Popper listen on window resize events to reposition the element\n */\n\nexport default function usePopper(referenceElement, popperElement, _temp) {\n var _ref = _temp === void 0 ? {} : _temp,\n _ref$enabled = _ref.enabled,\n enabled = _ref$enabled === void 0 ? true : _ref$enabled,\n _ref$placement = _ref.placement,\n placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,\n _ref$positionFixed = _ref.positionFixed,\n positionFixed = _ref$positionFixed === void 0 ? false : _ref$positionFixed,\n _ref$eventsEnabled = _ref.eventsEnabled,\n eventsEnabled = _ref$eventsEnabled === void 0 ? true : _ref$eventsEnabled,\n _ref$modifiers = _ref.modifiers,\n modifiers = _ref$modifiers === void 0 ? {} : _ref$modifiers;\n\n var popperInstanceRef = useRef();\n var hasArrow = !!(modifiers.arrow && modifiers.arrow.element);\n var scheduleUpdate = useCallback(function () {\n if (popperInstanceRef.current) {\n popperInstanceRef.current.scheduleUpdate();\n }\n }, []);\n\n var _useState = useState({\n placement: placement,\n scheduleUpdate: scheduleUpdate,\n outOfBoundaries: false,\n styles: initialPopperStyles,\n arrowStyles: initialArrowStyles\n }),\n state = _useState[0],\n setState = _useState[1]; // A placement difference in state means popper determined a new placement\n // apart from the props value. By the time the popper element is rendered with\n // the new position Popper has already measured it, if the place change triggers\n // a size change it will result in a misaligned popper. So we schedule an update to be sure.\n\n\n useEffect(function () {\n scheduleUpdate();\n }, [state.placement, scheduleUpdate]);\n /** Toggle Events */\n\n useEffect(function () {\n if (popperInstanceRef.current) {\n // eslint-disable-next-line no-unused-expressions\n eventsEnabled ? popperInstanceRef.current.enableEventListeners() : popperInstanceRef.current.disableEventListeners();\n }\n }, [eventsEnabled]);\n useEffect(function () {\n if (!enabled || referenceElement == null || popperElement == null) {\n return undefined;\n }\n\n var arrow = modifiers.arrow && _extends({}, modifiers.arrow, {\n element: modifiers.arrow.element\n });\n\n popperInstanceRef.current = new PopperJS(referenceElement, popperElement, {\n placement: placement,\n positionFixed: positionFixed,\n modifiers: _extends({}, modifiers, {\n arrow: arrow,\n applyStyle: {\n enabled: false\n },\n updateStateModifier: {\n enabled: true,\n order: 900,\n fn: function fn(data) {\n setState({\n scheduleUpdate: scheduleUpdate,\n styles: _extends({\n position: data.offsets.popper.position\n }, data.styles),\n arrowStyles: data.arrowStyles,\n outOfBoundaries: data.hide,\n placement: data.placement\n });\n }\n }\n })\n });\n return function () {\n if (popperInstanceRef.current !== null) {\n popperInstanceRef.current.destroy();\n popperInstanceRef.current = null;\n }\n }; // intentionally NOT re-running on new modifiers\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [enabled, placement, positionFixed, referenceElement, popperElement, hasArrow]);\n return state;\n}","map":null,"metadata":{},"sourceType":"module"} |