@fluentui/react-northstar
Version:
A themable React component library.
67 lines (64 loc) • 3 kB
JavaScript
import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-bindings';
import { Ref, isRefObject } from '@fluentui/react-component-ref';
import * as React from 'react';
import { getPlacement } from './positioningHelper';
import { usePopper } from './usePopper';
/**
* Popper relies on the 3rd party library [Popper.js](https://github.com/FezVrasta/popper.js) for positioning.
*
* @deprecated Please use "usePopper()" hook instead.
*/
export var Popper = /*#__PURE__*/function () {
var Popper = function Popper(props) {
var usesRenderProps = typeof props.children === 'function';
var proposedPlacement = getPlacement(props.align, props.position, props.rtl);
var latestPlacement = React.useRef(proposedPlacement);
var _React$useState = React.useState(proposedPlacement),
computedPlacement = _React$useState[0],
setComputedPlacement = _React$useState[1];
var popperRef = React.useRef(null);
var _usePopper = usePopper(Object.assign({}, props, {
popperRef: useMergedRefs(props.popperRef, popperRef),
onStateUpdate: function onStateUpdate(state) {
// PopperJS performs computations that might update the computed placement: auto positioning, flipping the
// placement in case the popper box should be rendered at the edge of the viewport and does not fit
if (state.placement !== latestPlacement.current) {
latestPlacement.current = state.placement;
// A state change has sense only if renderProps are passed, otherwise a state value is unused
if (usesRenderProps) {
setComputedPlacement(state.placement);
}
}
}
})),
targetRef = _usePopper.targetRef,
containerRef = _usePopper.containerRef,
arrowRef = _usePopper.arrowRef;
useIsomorphicLayoutEffect(function () {
var _props$pointerTargetR;
// A way to sync refs, is needed as Popper component accepts refs as params
// Does not make anything worse as Popper component does not have proper handing for ref updates ¯\_(ツ)_/¯
targetRef.current = isRefObject(props.targetRef) ? props.targetRef.current : props.targetRef;
arrowRef.current = (_props$pointerTargetR = props.pointerTargetRef) == null ? void 0 : _props$pointerTargetR.current;
});
var scheduleUpdate = React.useCallback(function () {
var _popperRef$current;
(_popperRef$current = popperRef.current) == null ? void 0 : _popperRef$current.updatePosition();
}, []);
var child = usesRenderProps ? props.children({
placement: computedPlacement,
scheduleUpdate: scheduleUpdate
}) : props.children;
return child ? /*#__PURE__*/React.createElement(Ref, {
innerRef: containerRef
}, React.Children.only(child)) : null;
};
Popper.defaultProps = {
enabled: true,
modifiers: [],
positionFixed: false,
positioningDependencies: []
};
return Popper;
}();
//# sourceMappingURL=Popper.js.map