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

"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;