wix-style-react
Version:
wix-style-react
317 lines (297 loc) • 11.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SidebarNext = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _ToggleButton = require("./components/ToggleButton");
var _SidebarNextContext = require("./SidebarNextContext");
var _SidebarNextSt = require("./SidebarNext.st.css");
var _constants = require("./constants");
var _SidebarSkeleton = _interopRequireDefault(require("./components/SidebarSkeleton"));
var _utils = require("./utils");
var _useMemoizedIdentity = require("./hooks/useMemoizedIdentity");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SidebarNext/SidebarNextNext.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 DEFAULT_SKIN = _constants.sidebarSkins.dark;
var DEFAULT_WIDTH = 228;
var MINIMIZED_WIDTH = 54;
var SidebarNext = exports.SidebarNext = /*#__PURE__*/(0, _react.memo)(_ref => {
var {
skin = DEFAULT_SKIN,
width: orgWidth = DEFAULT_WIDTH,
isLoading = true,
dataHook,
className,
ariaLabel,
selectedKey,
header,
footer,
hidden = false,
minimized = false,
enableMinimizeToggle,
minimizeToggleTooltip,
onMinimizeToggleClick,
zIndex,
children
} = _ref;
var [width, setWidth] = (0, _react.useState)(orgWidth);
var [contentWidth, setContentWidth] = (0, _react.useState)(orgWidth);
var scrollAreaRef = (0, _react.useRef)(null);
var structure = (0, _useMemoizedIdentity.useMemoizedIdentity)((0, _utils.extractItemNodes)(children));
var widthForCalc = typeof width === 'number' ? "".concat(width, "px") : width;
var hiddenMarginLeft = "calc(-1 * ".concat(widthForCalc, ")");
var {
selectedPath,
expandTrigger,
isExpanded,
setExpanded
} = useSidebarSelectionState(selectedKey, structure);
var maxDepth = (0, _react.useMemo)(() => (0, _utils.getMaxDepth)(structure.items), [structure.items]);
// Sidebar with maximum depth of 1 or 2 is styled differently (legacy mode)
var legacy = maxDepth < 3;
(0, _react.useEffect)(() => {
var timer;
if (minimized) {
setWidth(MINIMIZED_WIDTH);
timer = setTimeout(() => {
setContentWidth(MINIMIZED_WIDTH);
}, 500);
} else {
setWidth(orgWidth);
setContentWidth(orgWidth);
}
return () => {
if (timer) clearTimeout(timer);
};
}, [minimized, orgWidth]);
var sidebarContextValue = (0, _useMemoizedIdentity.useMemoizedIdentity)({
skin,
legacy,
hidden,
minimized,
inert: false,
level: 1,
parent: 'sidebar',
scrollAreaRef,
selectedPath,
expandTrigger,
isExpanded,
setExpanded
});
return /*#__PURE__*/_react.default.createElement(_SidebarNextContext.SidebarNextContext.Provider, {
value: sidebarContextValue,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SidebarNextSt.st)(_SidebarNextSt.classes.root, {
hidden
}, className),
style: _objectSpread({
width,
zIndex
}, hidden ? {
marginLeft: hiddenMarginLeft
} : {}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("section", {
className: (0, _SidebarNextSt.st)(_SidebarNextSt.classes.section, {
skin,
hidden
}),
"aria-label": "Sidebar" // FIXME: translations?
,
"data-hook": dataHook,
"data-skin": skin,
"data-hidden": hidden,
"data-selected": selectedKey,
"data-width": width,
"data-minimized": minimized,
"data-selected-key": selectedKey,
"data-is-selected-expanded": isExpanded(selectedKey),
"data-margin-left": hiddenMarginLeft,
style: {
width
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 11
}
}, enableMinimizeToggle && /*#__PURE__*/_react.default.createElement(_ToggleButton.ToggleButton, {
minimized: minimized,
minimizeToggleTooltip: minimizeToggleTooltip,
onMinimizeToggleClick: onMinimizeToggleClick,
skin: skin,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 185,
columnNumber: 15
}
}), /*#__PURE__*/_react.default.createElement("header", {
"data-hook": _constants.dataHooks.header,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 13
}
}, header), /*#__PURE__*/_react.default.createElement("div", {
className: _SidebarNextSt.classes.content,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("nav", {
ref: scrollAreaRef,
"data-hook": _constants.dataHooks.scrollArea,
className: (0, _SidebarNextSt.st)(_SidebarNextSt.classes.scrollArea, {
skin
}),
"aria-label": ariaLabel,
style: {
width: contentWidth
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 15
}
}, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
// ref={scrollAreaContentRef}
style: {
overflow: 'hidden'
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 19
}
}, /*#__PURE__*/_react.default.createElement(_SidebarSkeleton.default, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 21
}
})) : /*#__PURE__*/_react.default.createElement("ul", {
// ref={scrollAreaContentRef}
className: _SidebarNextSt.classes.listItems,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 19
}
}, children))), /*#__PURE__*/_react.default.createElement("footer", {
"data-hook": _constants.dataHooks.footer,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 13
}
}, footer))));
});
var useSidebarSelectionState = (selectedKey, structure) => {
var selectedItemPath = (0, _utils.getItemPath)(structure.keyToParentKey, selectedKey);
var selectedMenuPath = (0, _utils.getMenuPath)(structure.keyToParentKey, selectedKey);
var [expandedState, setExpandedState] = (0, _react.useState)(() => ({
expandedPath: selectedMenuPath,
userCollapsedKeys: {},
trigger: 'select'
}));
var isExpanded = (0, _react.useCallback)(itemKey => {
if (itemKey === undefined) {
return false;
}
var withinExpandedPath = expandedState.expandedPath.includes(itemKey);
var collapsedByUser = expandedState.userCollapsedKeys[itemKey];
return withinExpandedPath && !collapsedByUser;
}, [expandedState.expandedPath, expandedState.userCollapsedKeys]);
// We only allow toggling menus that are within the selected path. Menus
// outside of the selected path can only be expanded by changing `selectedKey`
// prop. This replicates previous two-level sidebar behavior.
var setExpanded = (0, _react.useCallback)((itemKey, expanded) => {
setExpandedState(prev => {
if (!prev.expandedPath.includes(itemKey)) {
return prev;
}
return _objectSpread(_objectSpread({}, prev), {}, {
userCollapsedKeys: _objectSpread(_objectSpread({}, prev.userCollapsedKeys), {}, {
[itemKey]: !expanded
}),
trigger: 'click'
});
});
}, []);
// Handle `selectedKey` change
(0, _react.useEffect)(() => {
if (!(0, _isEqual.default)(expandedState.expandedPath, selectedMenuPath)) {
setExpandedState(prev => ({
expandedPath: selectedMenuPath,
userCollapsedKeys: (0, _utils.pick)(prev.userCollapsedKeys, selectedMenuPath),
trigger: 'select'
}));
}
}, [expandedState.expandedPath, selectedMenuPath]);
return {
selectedPath: selectedItemPath,
expandTrigger: expandedState.trigger,
isExpanded,
setExpanded
};
};
SidebarNext.displayName = 'SidebarNext';
// FIXME: prop types on memoized component
// SidebarNext.propTypes = {
// /** The dataHook of the Sidebar */
// dataHook: PropTypes.string,
// /** The classes of the Sidebar */
// className: PropTypes.string,
// /** Sidebar menu children */
// children: PropTypes.node,
// /** Sets the skin of the Sidebar */
// skin: PropTypes.oneOf(['dark', 'light', 'neutral']),
// /** Renders header element */
// header: PropTypes.node,
// /** Renders footer element */
// footer: PropTypes.node,
// /** Controls if the sidebar is shown or hidden, using an animation to switch between the two */
// hidden: PropTypes.bool,
// /** The selected item key */
// selectedKey: PropTypes.string,
// /** Control whether the sidebar displays a loading animation, true by default */
// isLoading: PropTypes.bool,
// /** Define a string that labels the current element in case where a text label is not visible on the screen */
// ariaLabel: PropTypes.string,
// /** Defines the width */
// width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
// /** Enables minimized mode */
// minimized: PropTypes.bool,
// /** Enables toggle button */
// enableMinimizeToggle: PropTypes.bool,
// /** Defines the tooltip content of minimization toggle. */
// minimizeToggleTooltip: PropTypes.string,
// /** Defines a callback function which is called every time a minimize toggle button is clicked. */
// onMinimizeToggleClick: PropTypes.func,
// };
//# sourceMappingURL=SidebarNextNext.js.map