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.
76 lines
2.6 KiB
76 lines
2.6 KiB
3 years ago
|
import * as React from 'react';
|
||
|
|
import { ManagerReferenceNodeContext } from './Manager';
|
||
|
|
import { unwrapArray, setRef } from './utils';
|
||
|
|
import { usePopper } from './usePopper';
|
||
|
|
|
||
|
|
var NOOP = function NOOP() {
|
||
|
|
return void 0;
|
||
|
|
};
|
||
|
|
|
||
|
|
var NOOP_PROMISE = function NOOP_PROMISE() {
|
||
|
|
return Promise.resolve(null);
|
||
|
|
};
|
||
|
|
|
||
|
|
var EMPTY_MODIFIERS = [];
|
||
|
|
export function Popper(_ref) {
|
||
|
|
var _ref$placement = _ref.placement,
|
||
|
|
placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
|
||
|
|
_ref$strategy = _ref.strategy,
|
||
|
|
strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
|
||
|
|
_ref$modifiers = _ref.modifiers,
|
||
|
|
modifiers = _ref$modifiers === void 0 ? EMPTY_MODIFIERS : _ref$modifiers,
|
||
|
|
referenceElement = _ref.referenceElement,
|
||
|
|
onFirstUpdate = _ref.onFirstUpdate,
|
||
|
|
innerRef = _ref.innerRef,
|
||
|
|
children = _ref.children;
|
||
|
|
var referenceNode = React.useContext(ManagerReferenceNodeContext);
|
||
|
|
|
||
|
|
var _React$useState = React.useState(null),
|
||
|
|
popperElement = _React$useState[0],
|
||
|
|
setPopperElement = _React$useState[1];
|
||
|
|
|
||
|
|
var _React$useState2 = React.useState(null),
|
||
|
|
arrowElement = _React$useState2[0],
|
||
|
|
setArrowElement = _React$useState2[1];
|
||
|
|
|
||
|
|
React.useEffect(function () {
|
||
|
|
setRef(innerRef, popperElement);
|
||
|
|
}, [innerRef, popperElement]);
|
||
|
|
var options = React.useMemo(function () {
|
||
|
|
return {
|
||
|
|
placement: placement,
|
||
|
|
strategy: strategy,
|
||
|
|
onFirstUpdate: onFirstUpdate,
|
||
|
|
modifiers: [].concat(modifiers, [{
|
||
|
|
name: 'arrow',
|
||
|
|
enabled: arrowElement != null,
|
||
|
|
options: {
|
||
|
|
element: arrowElement
|
||
|
|
}
|
||
|
|
}])
|
||
|
|
};
|
||
|
|
}, [placement, strategy, onFirstUpdate, modifiers, arrowElement]);
|
||
|
|
|
||
|
|
var _usePopper = usePopper(referenceElement || referenceNode, popperElement, options),
|
||
|
|
state = _usePopper.state,
|
||
|
|
styles = _usePopper.styles,
|
||
|
|
forceUpdate = _usePopper.forceUpdate,
|
||
|
|
update = _usePopper.update;
|
||
|
|
|
||
|
|
var childrenProps = React.useMemo(function () {
|
||
|
|
return {
|
||
|
|
ref: setPopperElement,
|
||
|
|
style: styles.popper,
|
||
|
|
placement: state ? state.placement : placement,
|
||
|
|
hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null,
|
||
|
|
isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null,
|
||
|
|
arrowProps: {
|
||
|
|
style: styles.arrow,
|
||
|
|
ref: setArrowElement
|
||
|
|
},
|
||
|
|
forceUpdate: forceUpdate || NOOP,
|
||
|
|
update: update || NOOP_PROMISE
|
||
|
|
};
|
||
|
|
}, [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]);
|
||
|
|
return unwrapArray(children)(childrenProps);
|
||
|
|
}
|