wix-style-react
Version:
wix-style-react
214 lines (209 loc) • 9.85 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.useExpandAnimationState = exports.useCallOnExpandedStateChange = exports.AccordionMenu = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _SidebarNextContext = require("../../SidebarNext/SidebarNextContext");
var _SidebarItemButtonNext = _interopRequireDefault(require("../../SidebarItemNext/SidebarItemButtonNext"));
var _constants = require("../constants");
var _SidebarSubMenuNextSt = require("../SidebarSubMenuNext.st.css");
var _ContextMenuPopover = require("./ContextMenuPopover");
var _hooks = require("./hooks");
var _common = require("./common");
var _excluded = ["title", "suffix", "prefix", "children", "dataHook", "itemKey", "disabled", "onClick", "onExpand", "onCollapse", "onQuickNavOpen"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SidebarSubMenuNext/components/AccordionMenu.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 AccordionMenu = _ref => {
var {
title,
suffix,
prefix,
children,
dataHook,
itemKey,
disabled,
onClick,
onExpand,
onCollapse,
onQuickNavOpen
} = _ref,
asComponentProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var context = (0, _react.useContext)(_SidebarNextContext.SidebarNextContext);
var expanded = !disabled && context.isExpanded(itemKey);
var selected = context.selectedPath.includes(itemKey);
// We differentiate between logical and visual expanded states:
// - logical state refers to collapsed/expanded state due to user interaction
// (e.g. clicking on a sub menu item, or external state change on
// SidebarNext `selectedKey` prop which causes the sub menu to expand)
// - visual state refers to logical state + sidebar minimization state. When
// the sidebar is minimized, all sub menu items are visually collapsed, but
// the logical state is preserved and restored when the sidebar is no
// longer minimized.
var visuallyExpanded = context.minimized ? false : expanded;
var expandAnimationState = useExpandAnimationState(visuallyExpanded);
// TODO: we report the visual state changes, is this the desired behavior?
useCallOnExpandedStateChange(visuallyExpanded, context.expandTrigger, onExpand, onCollapse);
var handleClick = (0, _react.useCallback)(event => {
if (selected) {
context.setExpanded(itemKey, !expanded);
event.preventDefault();
}
// @ts-ignore
onClick == null || onClick(event, itemKey); // FIXME: this was never typed but implemented originally
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[context.setExpanded, itemKey, expanded, selected, onClick]);
var [quickNavOpen, setQuickNavOpen] = (0, _react.useState)(false); // only for data attr
var quickNavHandleRef = (0, _react.useRef)(null);
var closeQuickNav = (0, _react.useCallback)(() => {
var _quickNavHandleRef$cu;
(_quickNavHandleRef$cu = quickNavHandleRef.current) == null || _quickNavHandleRef$cu.hide();
}, []);
var handleQuickNavShow = () => {
setQuickNavOpen(true);
onQuickNavOpen == null || onQuickNavOpen();
};
var handleQuickNavHide = () => {
setQuickNavOpen(false);
};
var triggerElement = /*#__PURE__*/_react.default.createElement(_SidebarItemButtonNext.default, (0, _extends2.default)({
prefix: prefix,
suffix: (0, _common.getSuffixWithChevron)(suffix),
onClick: handleClick,
disabled: disabled,
itemKey: itemKey,
dataHook: (0, _constants.getCompoundDataHook)(dataHook, _constants.dataHooks.sidebarItem),
className: (0, _SidebarSubMenuNextSt.st)(_SidebarSubMenuNextSt.classes.subMenu, {
selected,
animation: expandAnimationState
// animationWithDelay: shouldNextMenuOpenWithDelay,
}),
"aria-expanded": visuallyExpanded
}, asComponentProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 5
}
}), title);
if (_react.default.Children.count(children) > 0) {
triggerElement = /*#__PURE__*/_react.default.createElement(_ContextMenuPopover.ContextMenuPopover, {
dataHook: (0, _constants.getCompoundDataHook)(dataHook, _constants.dataHooks.submenuPopover),
ref: quickNavHandleRef,
element: triggerElement,
content: /*#__PURE__*/_react.default.createElement(_SidebarNextContext.SidebarNextContext.Provider, {
value: _objectSpread(_objectSpread({}, context), {}, {
level: context.level + 1,
parent: 'inContextMenu',
inert: true,
// popover items are not focusable
isParentWithPrefix: !!prefix,
closeQuickNav,
minimized: false
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 11
}
}, children),
disabled: disabled || visuallyExpanded,
onShow: handleQuickNavShow,
onHide: handleQuickNavHide,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 7
}
});
}
return /*#__PURE__*/_react.default.createElement("li", {
className: (0, _SidebarSubMenuNextSt.st)(_SidebarSubMenuNextSt.classes.root, {
skin: context.skin
}),
"aria-level": context.level,
"data-hook": dataHook,
"data-open": visuallyExpanded,
"data-quick-nav-open": quickNavOpen,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 5
}
}, triggerElement, /*#__PURE__*/_react.default.createElement("ul", {
className: (0, _SidebarSubMenuNextSt.st)(_SidebarSubMenuNextSt.classes.subMenuItems, {
animation: expandAnimationState
// animationWithDelay: shouldNextMenuOpenWithDelay,
}),
"aria-hidden": !visuallyExpanded,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_SidebarNextContext.SidebarNextContext.Provider, {
value: _objectSpread(_objectSpread({}, context), {}, {
level: context.level + 1,
parent: 'subMenu',
inert: context.inert || !visuallyExpanded,
isParentWithPrefix: !!prefix
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 9
}
}, children)));
};
exports.AccordionMenu = AccordionMenu;
var useCallOnExpandedStateChange = (expanded, expandTrigger, onExpand, onCollapse) => {
var stateRef = (0, _react.useRef)(null);
if (stateRef.current === null) {
stateRef.current = {
expanded: false
};
}
(0, _react.useEffect)(() => {
var state = stateRef.current;
state.expandTrigger = expandTrigger;
state.onExpand = onExpand;
state.onCollapse = onCollapse;
});
(0, _react.useEffect)(() => {
var state = stateRef.current;
if (state.expanded !== expanded) {
// The desired behavior is to only fire callbacks on state changes, and
// not when the callbacks themselves change. Which means that we need to
// exclude them from the dependency array and use a ref to access the
// latest callbacks.
state.expanded = expanded;
if (expanded) {
state.onExpand == null || state.onExpand(state.expandTrigger);
} else {
state.onCollapse == null || state.onCollapse(state.expandTrigger);
}
}
}, [expanded]);
};
exports.useCallOnExpandedStateChange = useCallOnExpandedStateChange;
var useExpandAnimationState = expanded => {
// FIXME: this causes double render, maybe we can get rid of it somehow?
var prevExpanded = (0, _hooks.usePrevious)(expanded, false);
if (prevExpanded !== expanded) {
return expanded ? _constants.SIDEBAR_SUBMENU_ANIMATION_TYPES.OPENING : _constants.SIDEBAR_SUBMENU_ANIMATION_TYPES.CLOSING;
}
return expanded ? _constants.SIDEBAR_SUBMENU_ANIMATION_TYPES.OPENING : _constants.SIDEBAR_SUBMENU_ANIMATION_TYPES.CLOSED;
};
exports.useExpandAnimationState = useExpandAnimationState;
//# sourceMappingURL=AccordionMenu.js.map