@wix/design-system
Version:
@wix/design-system
162 lines (161 loc) • 6.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.usePopover = usePopover;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@floating-ui/react");
var _PopoverNext = require("../PopoverNext.constants");
var _ZIndex = require("../../common/ZIndex");
var _usePositioning = require("./usePositioning");
var _deprecationLog = _interopRequireDefault(require("../../utils/deprecationLog"));
var _useTransition = require("./useTransition");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var formatWidth = value => typeof value === 'number' ? "".concat(value, "px") : value;
function usePopover(_ref) {
var _transitionSettings$d, _transitionSettings$c, _transitionSettings$o;
var {
dataHook,
open = false,
onOpenChange: _onOpenChange,
focusManagerEnabled = true,
appendTo = _PopoverNext.APPEND_TO.parent,
dynamicWidth = false,
zIndex = _ZIndex.ZIndex.popover,
width,
minWidth,
maxWidth,
excludeClass,
moveBy,
flip: shouldFlip = true,
placement = 'bottom',
fixed = false,
rootRef,
showDelay = 0,
hideDelay = 0,
timeout: duration = 0,
skin,
transitionSettings,
onClickOutside,
overlay = false
} = _ref;
(0, _react.useEffect)(() => {
if (showDelay) {
(0, _deprecationLog.default)('<PopoverNext /> - prop `showDelay` is deprecated. Use transitionSettings instead.');
}
if (hideDelay) {
(0, _deprecationLog.default)('<PopoverNext /> - prop `hideDelay` is deprecated. Use transitionSettings instead.');
}
if (duration) {
(0, _deprecationLog.default)('<PopoverNext /> - prop `timeout` is deprecated. Use transitionSettings instead.');
}
}, [showDelay, hideDelay, duration]);
var positioning = (0, _usePositioning.usePositioning)({
flip: shouldFlip,
fixed,
placement,
appendTo,
rootRef
});
var data = (0, _react2.useFloating)({
open,
onOpenChange: (newOpen, _, reason) => _onOpenChange(newOpen, reason),
whileElementsMounted: (referenceEl, floatingEl, update) => (0, _react2.autoUpdate)(referenceEl, floatingEl, update, {
animationFrame: true
}),
placement: positioning.placement,
middleware: [(0, _react2.size)({
apply(_ref2) {
var {
rects,
elements
} = _ref2;
var styles = {
overflow: 'hidden',
wordBreak: 'normal'
};
if (width) {
styles.width = formatWidth(width);
if (minWidth) {
styles.minWidth = formatWidth(minWidth);
}
if (maxWidth) {
styles.maxWidth = formatWidth(maxWidth);
}
} else if (dynamicWidth) {
styles.minWidth = "".concat(rects.reference.width, "px");
if (maxWidth) {
styles.maxWidth = formatWidth(maxWidth);
}
} else {
if (minWidth) {
styles.minWidth = formatWidth(minWidth);
}
if (maxWidth) {
styles.maxWidth = formatWidth(maxWidth);
}
}
if (appendTo === 'window') {
styles.minWidth = !!minWidth ? formatWidth(minWidth) : 'fit-content';
styles.width = !!width ? formatWidth(width) : formatWidth(rects.reference.width);
if (maxWidth) {
styles.maxWidth = formatWidth(maxWidth);
}
}
Object.assign(elements.floating.style, styles);
}
}), !!positioning.flip ? (0, _react2.flip)(positioning.flip) : undefined, !!positioning.autoPlacement ? (0, _react2.autoPlacement)(positioning.autoPlacement) : undefined, (0, _react2.shift)(positioning.shift), (0, _react2.offset)({
mainAxis: moveBy == null ? void 0 : moveBy.y,
crossAxis: moveBy == null ? void 0 : moveBy.x
})].filter(Boolean)
});
var context = data.context;
var click = (0, _react2.useClick)(context);
var dismiss = (0, _react2.useDismiss)(context, {
outsidePress: event => {
var classes = event.target.classList;
if (excludeClass && classes.contains(excludeClass)) {
return false;
}
onClickOutside == null || onClickOutside(event);
return true;
},
escapeKey: true
});
var role = (0, _react2.useRole)(context);
var interactions = (0, _react2.useInteractions)([click, dismiss, role]);
var convertToTransitionSettings = duration => {
if (!duration || typeof duration === 'number') {
return duration;
}
return {
open: duration.enter,
close: duration.exit
};
};
var {
isMounted,
styles: transitionStyles
} = (0, _useTransition.useTransition)(_objectSpread(_objectSpread({}, transitionSettings), {}, {
duration: (_transitionSettings$d = transitionSettings == null ? void 0 : transitionSettings.duration) !== null && _transitionSettings$d !== void 0 ? _transitionSettings$d : convertToTransitionSettings(duration),
closeDelay: (_transitionSettings$c = transitionSettings == null ? void 0 : transitionSettings.closeDelay) !== null && _transitionSettings$c !== void 0 ? _transitionSettings$c : hideDelay,
openDelay: (_transitionSettings$o = transitionSettings == null ? void 0 : transitionSettings.openDelay) !== null && _transitionSettings$o !== void 0 ? _transitionSettings$o : showDelay,
context
}));
return (0, _react.useMemo)(() => ({
dataHook,
focusManagerEnabled,
interactions,
context,
appendTo,
zIndex,
open: isMounted,
popoverStyles: _objectSpread({}, context.floatingStyles),
transitionStyles,
portalRoot: positioning.portalRoot,
skin,
overlay
}), [dataHook, focusManagerEnabled, interactions, context, isMounted, zIndex, appendTo, positioning, transitionStyles, skin, overlay]);
}
//# sourceMappingURL=usePopover.js.map