You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					123 lines
				
				4.6 KiB
			
		
		
			
		
	
	
					123 lines
				
				4.6 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								"use strict";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								Object.defineProperty(exports, "__esModule", {
							 | 
						||
| 
								 | 
							
								  value: true
							 | 
						||
| 
								 | 
							
								});
							 | 
						||
| 
								 | 
							
								exports.usePopper = void 0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var React = _interopRequireWildcard(require("react"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var ReactDOM = _interopRequireWildcard(require("react-dom"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _core = require("@popperjs/core");
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _utils = require("./utils");
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var EMPTY_MODIFIERS = [];
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var usePopper = function usePopper(referenceElement, popperElement, options) {
							 | 
						||
| 
								 | 
							
								  if (options === void 0) {
							 | 
						||
| 
								 | 
							
								    options = {};
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  var prevOptions = React.useRef(null);
							 | 
						||
| 
								 | 
							
								  var optionsWithDefaults = {
							 | 
						||
| 
								 | 
							
								    onFirstUpdate: options.onFirstUpdate,
							 | 
						||
| 
								 | 
							
								    placement: options.placement || 'bottom',
							 | 
						||
| 
								 | 
							
								    strategy: options.strategy || 'absolute',
							 | 
						||
| 
								 | 
							
								    modifiers: options.modifiers || EMPTY_MODIFIERS
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  var _React$useState = React.useState({
							 | 
						||
| 
								 | 
							
								    styles: {
							 | 
						||
| 
								 | 
							
								      popper: {
							 | 
						||
| 
								 | 
							
								        position: optionsWithDefaults.strategy,
							 | 
						||
| 
								 | 
							
								        left: '0',
							 | 
						||
| 
								 | 
							
								        top: '0'
							 | 
						||
| 
								 | 
							
								      },
							 | 
						||
| 
								 | 
							
								      arrow: {
							 | 
						||
| 
								 | 
							
								        position: 'absolute'
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    },
							 | 
						||
| 
								 | 
							
								    attributes: {}
							 | 
						||
| 
								 | 
							
								  }),
							 | 
						||
| 
								 | 
							
								      state = _React$useState[0],
							 | 
						||
| 
								 | 
							
								      setState = _React$useState[1];
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  var updateStateModifier = React.useMemo(function () {
							 | 
						||
| 
								 | 
							
								    return {
							 | 
						||
| 
								 | 
							
								      name: 'updateState',
							 | 
						||
| 
								 | 
							
								      enabled: true,
							 | 
						||
| 
								 | 
							
								      phase: 'write',
							 | 
						||
| 
								 | 
							
								      fn: function fn(_ref) {
							 | 
						||
| 
								 | 
							
								        var state = _ref.state;
							 | 
						||
| 
								 | 
							
								        var elements = Object.keys(state.elements);
							 | 
						||
| 
								 | 
							
								        ReactDOM.flushSync(function () {
							 | 
						||
| 
								 | 
							
								          setState({
							 | 
						||
| 
								 | 
							
								            styles: (0, _utils.fromEntries)(elements.map(function (element) {
							 | 
						||
| 
								 | 
							
								              return [element, state.styles[element] || {}];
							 | 
						||
| 
								 | 
							
								            })),
							 | 
						||
| 
								 | 
							
								            attributes: (0, _utils.fromEntries)(elements.map(function (element) {
							 | 
						||
| 
								 | 
							
								              return [element, state.attributes[element]];
							 | 
						||
| 
								 | 
							
								            }))
							 | 
						||
| 
								 | 
							
								          });
							 | 
						||
| 
								 | 
							
								        });
							 | 
						||
| 
								 | 
							
								      },
							 | 
						||
| 
								 | 
							
								      requires: ['computeStyles']
							 | 
						||
| 
								 | 
							
								    };
							 | 
						||
| 
								 | 
							
								  }, []);
							 | 
						||
| 
								 | 
							
								  var popperOptions = React.useMemo(function () {
							 | 
						||
| 
								 | 
							
								    var newOptions = {
							 | 
						||
| 
								 | 
							
								      onFirstUpdate: optionsWithDefaults.onFirstUpdate,
							 | 
						||
| 
								 | 
							
								      placement: optionsWithDefaults.placement,
							 | 
						||
| 
								 | 
							
								      strategy: optionsWithDefaults.strategy,
							 | 
						||
| 
								 | 
							
								      modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, {
							 | 
						||
| 
								 | 
							
								        name: 'applyStyles',
							 | 
						||
| 
								 | 
							
								        enabled: false
							 | 
						||
| 
								 | 
							
								      }])
							 | 
						||
| 
								 | 
							
								    };
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if ((0, _reactFastCompare["default"])(prevOptions.current, newOptions)) {
							 | 
						||
| 
								 | 
							
								      return prevOptions.current || newOptions;
							 | 
						||
| 
								 | 
							
								    } else {
							 | 
						||
| 
								 | 
							
								      prevOptions.current = newOptions;
							 | 
						||
| 
								 | 
							
								      return newOptions;
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
							 | 
						||
| 
								 | 
							
								  var popperInstanceRef = React.useRef();
							 | 
						||
| 
								 | 
							
								  (0, _utils.useIsomorphicLayoutEffect)(function () {
							 | 
						||
| 
								 | 
							
								    if (popperInstanceRef.current) {
							 | 
						||
| 
								 | 
							
								      popperInstanceRef.current.setOptions(popperOptions);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }, [popperOptions]);
							 | 
						||
| 
								 | 
							
								  (0, _utils.useIsomorphicLayoutEffect)(function () {
							 | 
						||
| 
								 | 
							
								    if (referenceElement == null || popperElement == null) {
							 | 
						||
| 
								 | 
							
								      return;
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    var createPopper = options.createPopper || _core.createPopper;
							 | 
						||
| 
								 | 
							
								    var popperInstance = createPopper(referenceElement, popperElement, popperOptions);
							 | 
						||
| 
								 | 
							
								    popperInstanceRef.current = popperInstance;
							 | 
						||
| 
								 | 
							
								    return function () {
							 | 
						||
| 
								 | 
							
								      popperInstance.destroy();
							 | 
						||
| 
								 | 
							
								      popperInstanceRef.current = null;
							 | 
						||
| 
								 | 
							
								    };
							 | 
						||
| 
								 | 
							
								  }, [referenceElement, popperElement, options.createPopper]);
							 | 
						||
| 
								 | 
							
								  return {
							 | 
						||
| 
								 | 
							
								    state: popperInstanceRef.current ? popperInstanceRef.current.state : null,
							 | 
						||
| 
								 | 
							
								    styles: state.styles,
							 | 
						||
| 
								 | 
							
								    attributes: state.attributes,
							 | 
						||
| 
								 | 
							
								    update: popperInstanceRef.current ? popperInstanceRef.current.update : null,
							 | 
						||
| 
								 | 
							
								    forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.usePopper = usePopper;
							 |