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