@wix/design-system
Version:
@wix/design-system
519 lines (517 loc) • 24.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _SidebarSt = require("./Sidebar.st.css.js");
var _SidebarItem = require("./SidebarItem");
var _SidebarPersistentHeader = require("./SidebarPersistentHeader");
var _SidebarPersistentFooter = require("./SidebarPersistentFooter");
var _SidebarBackButton = require("./SidebarBackButton");
var _SidebarAPI = require("./SidebarAPI");
var _constants = require("./constants");
var _SidebarContentWrapper = require("./SidebarContentWrapper");
var _context = require("../WixDesignSystemProvider/context");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Sidebar/Sidebar.jsx",
_this = void 0;
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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var CollapsibeInnerMenuOpenChildren = function CollapsibeInnerMenuOpenChildren(props) {
var children = props.children,
waitForOtherMenuToClose = props.waitForOtherMenuToClose,
skin = props.skin,
isAlreadyOpen = props.isAlreadyOpen;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": "open-inner-menu-children",
className: isAlreadyOpen ? '' : (0, _SidebarSt.st)(waitForOtherMenuToClose ? _SidebarSt.classes.innerMenuWrapperInToPlaceAfterClosingOther : _SidebarSt.classes.innerMenuWrapperInToPlace),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(_SidebarContentWrapper.SidebarContentWrapper, {
containerClasses: (0, _SidebarSt.st)(_SidebarSt.classes.innerMenu),
containerDataHook: _constants.dataHooks.drivenInChildren,
skin: skin,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 7
}
}, children));
};
var CollapsibeInnerMenuCloseChildren = function CollapsibeInnerMenuCloseChildren(props) {
var children = props.children;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": "closed-inner-menu-children",
className: (0, _SidebarSt.st)(_SidebarSt.classes.innerMenuWrapperOutOfPlace),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _SidebarSt.st)(_SidebarSt.classes.innerMenu),
"data-hook": _constants.dataHooks.drivenOutChildren,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 7
}
}, children));
};
var CollapsibeInnerMenuCloseParent = function CollapsibeInnerMenuCloseParent(props) {
var isAlreadyClosed = props.isAlreadyClosed,
children = props.children;
var closeParentClass = (0, _SidebarSt.st)(isAlreadyClosed ? _SidebarSt.classes.closedInnerMenu : _SidebarSt.classes.closingInnerMenu);
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": "closed-inner-menu",
className: closeParentClass,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 5
}
}, children);
};
var CollapsibeInnerMenuOpenParent = function CollapsibeInnerMenuOpenParent(props) {
var isAlreadyOpen = props.isAlreadyOpen,
children = props.children,
waitForOtherMenuToClose = props.waitForOtherMenuToClose;
var openParentClass = waitForOtherMenuToClose ? (0, _SidebarSt.st)(_SidebarSt.classes.openingInnerMenuAfterClosingOther) : (0, _SidebarSt.st)(isAlreadyOpen ? _SidebarSt.classes.openInnerMenu : _SidebarSt.classes.openingInnerMenu);
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": "open-inner-menu",
className: openParentClass,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 5
}
}, children);
};
/** A sidebar navigation component */
var Sidebar = /*#__PURE__*/function (_Component) {
function Sidebar(props) {
var _this2;
(0, _classCallCheck2["default"])(this, Sidebar);
_this2 = _callSuper(this, Sidebar, [props]);
_this2._getInnerMenuCollapsibleState = function (options) {
var menuToClose = options.menuToClose,
menuToOpen = options.menuToOpen,
selected = options.selected;
var expandedInnerMenu;
var openMenuChildren = _this2.itemKeyToChildren[menuToOpen] && (_this2.itemKeyToChildren[menuToOpen].children || []);
var closeMenuChildren = _this2.itemKeyToChildren[menuToClose] && (_this2.itemKeyToChildren[menuToClose].children || []);
var collapsibleOnScreenChildren = _this2.firstLevelItems.reduce(function (accumulator, child) {
var shouldExpand = menuToOpen && child.props.itemKey === menuToOpen && openMenuChildren.length > 0;
var shouldCollapse = _this2.state.expandedInnerMenu && menuToClose && closeMenuChildren.length > 0 && child.props.itemKey === menuToClose && _this2.state.expandedInnerMenu === menuToClose;
var waitForOtherMenuToClose = _this2.state.expandedInnerMenu && menuToClose && _this2.state.expandedInnerMenu === menuToClose && menuToClose !== menuToOpen;
if (shouldExpand) {
expandedInnerMenu = menuToOpen;
return [].concat((0, _toConsumableArray2["default"])(accumulator), [/*#__PURE__*/_react["default"].createElement(CollapsibeInnerMenuOpenParent, {
key: "open-parent-".concat(menuToOpen),
isAlreadyOpen: _this2._isAlreadyOpen(menuToOpen),
waitForOtherMenuToClose: waitForOtherMenuToClose,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 13
}
}, child), /*#__PURE__*/_react["default"].createElement(CollapsibeInnerMenuOpenChildren, {
key: "open-children-".concat(menuToOpen),
waitForOtherMenuToClose: waitForOtherMenuToClose,
skin: _this2.props.skin,
isAlreadyOpen: _this2._isAlreadyOpen(menuToOpen),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 13
}
}, openMenuChildren)]);
}
if (shouldCollapse) {
return [].concat((0, _toConsumableArray2["default"])(accumulator), [/*#__PURE__*/_react["default"].createElement(CollapsibeInnerMenuCloseParent, {
key: "closed-parent-".concat(menuToClose),
isAlreadyClosed: _this2._isAlreadyClosed(selected, menuToClose),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 13
}
}, child), /*#__PURE__*/_react["default"].createElement(CollapsibeInnerMenuCloseChildren, {
key: "closed-children-".concat(menuToClose),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 13
}
}, closeMenuChildren)]);
}
return [].concat((0, _toConsumableArray2["default"])(accumulator), [child]);
}, []);
return {
collapsibleOnScreenChildren: collapsibleOnScreenChildren,
expandedInnerMenu: expandedInnerMenu
};
};
_this2._shouldCollapseInnerMenu = function (itemKey) {
return _this2.state.expandedInnerMenu === itemKey && (itemKey === _this2.state.selectedKey && _this2.state.expandedInnerMenu || itemKey !== _this2.state.selectedKey);
};
_this2._shouldExpandInnerMenu = function (parentKey, itemKey) {
return parentKey === _this2.state.lastSelectedKey && !_this2.state.expandedInnerMenu || _this2.itemKeyToParentKey[itemKey] === parentKey || parentKey !== _this2.state.lastSelectedKey;
};
_this2._navigateTo = function (itemKey) {
if (_this2._isChild(itemKey)) {
_this2._selectItem(itemKey);
_this2.sidebarContext = _this2._getSidebarContext();
return;
}
if (_this2._isParent(itemKey)) {
_this2._openInnerMenu(itemKey);
_this2.sidebarContext = _this2._getSidebarContext();
return;
}
if (itemKey) {
_this2._closeInnerMenu(itemKey);
_this2.sidebarContext = _this2._getSidebarContext();
return;
}
};
_this2._getSidebarContext = function () {
return {
itemClicked: _this2._navigateTo,
backClicked: function backClicked() {
_this2._closeInnerMenu();
_this2.sidebarContext = _this2._getSidebarContext();
},
getSelectedKey: function getSelectedKey() {
return _this2.state.selectedKey;
},
getSkin: function getSkin() {
return _this2.props.skin;
},
getIsMenuExpanded: function getIsMenuExpanded() {
return _this2.state.expandedInnerMenu;
}
};
};
_this2.sidebarContext = _this2._getSidebarContext();
_this2._getInnerChildSelectedState = function (itemKey) {
var collapsibleInnerMenuState = _this2._getInnerMenuCollapsibleState({
menuToClose: _this2.state.lastSelectedKey,
menuToOpen: _this2.itemKeyToParentKey[itemKey],
selected: itemKey
});
if (_this2.itemKeyToParentKey[itemKey] !== _this2.state.lastSelectedKey) {
return _objectSpread({
drivenInChildren: _this2.itemKeyToChildren[_this2.itemKeyToParentKey[itemKey]].children,
selectedKey: itemKey,
lastSelectedKey: _this2.itemKeyToParentKey[itemKey]
}, collapsibleInnerMenuState);
} else {
return _objectSpread(_objectSpread({}, collapsibleInnerMenuState), {}, {
selectedKey: itemKey
});
}
};
_this2._getInnerMenuOpenState = function (itemKey) {
var _this2$itemKeyToChild = _this2.itemKeyToChildren[itemKey],
children = _this2$itemKeyToChild.children,
selectedKey = _this2$itemKeyToChild.selectedKey;
var selected = _this2.itemKeyToParentKey[_this2.state.lastSelectedKey] === itemKey ? _this2.state.lastSelectedKey : selectedKey;
var parentKey = _this2.itemKeyToParentKey[selected];
var parentItemKeyToOpen = _this2._getItemToOpenKey(parentKey, itemKey);
var parentItemKeyToClose = _this2._getItemToCloseKey(_this2.state.lastSelectedKey);
return _objectSpread(_objectSpread({}, _this2._getInnerMenuCollapsibleState({
menuToClose: parentItemKeyToClose,
menuToOpen: parentItemKeyToOpen,
selected: selected
})), {}, {
drivenInChildren: children,
drivenOutChildren: [],
selectedKey: selected,
lastSelectedKey: itemKey
});
};
_this2._getItemToCloseKey = function (itemKey) {
if (_this2._shouldCollapseInnerMenu(itemKey)) {
return _this2.itemKeyToParentKey[itemKey] || itemKey;
}
if (_this2._shouldCollapseInnerMenu(_this2.state.lastSelectedKey)) {
return _this2.itemKeyToParentKey[_this2.state.lastSelectedKey] || _this2.state.lastSelectedKey;
}
return undefined;
};
_this2._getItemToOpenKey = function (parentKey, itemKey) {
return _this2._shouldExpandInnerMenu(parentKey, itemKey) ? parentKey : undefined;
};
_this2._getInnerMenuCloseState = function (itemKey, updateCollapsibleOnlyOnChange) {
var selectedKey = _this2.state.lastSelectedKey || itemKey;
var parentItemKeyToClose = _this2._getItemToCloseKey(selectedKey);
return _objectSpread(_objectSpread({}, _this2._getInnerMenuCollapsibleState({
menuToClose: parentItemKeyToClose,
selected: selectedKey
})), {}, {
selectedKey: itemKey || _this2.state.lastSelectedKey,
lastSelectedKey: selectedKey,
drivenInChildren: [],
drivenOutChildren: _this2.state.drivenInChildren
});
};
_this2._getItemWithKey = function (item, itemKey) {
return item.props.itemKey ? item : /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
itemKey: itemKey
}));
};
_this2._getChildrenWithKeys = function (child) {
return child.props.innerMenu && child.props.innerMenu.map(function (innerChild, index) {
return _this2._getItemWithKey(innerChild, child.props.itemKey + index);
}) || [];
};
_this2._isParent = function (itemKey) {
return _this2.itemKeyToChildren[itemKey];
};
_this2._isChild = function (itemKey) {
return _this2.itemKeyToParentKey[itemKey];
};
_this2._isAlreadyOpen = function (menuToOpen) {
return _this2.state.lastSelectedKey === menuToOpen && _this2.itemKeyToParentKey[_this2.props.selectedKey] === menuToOpen && _this2.state.expandedInnerMenu === menuToOpen;
};
_this2._isAlreadyClosed = function (selected, menuToClose) {
return _this2.itemKeyToParentKey[selected] !== menuToClose;
};
_this2._selectItem = function (itemKey) {
return _this2.setState(_this2._getInnerChildSelectedState(itemKey));
};
_this2._openInnerMenu = function (itemKey) {
return _this2.setState(_this2._getInnerMenuOpenState(itemKey));
};
_this2._closeInnerMenu = function (itemKey) {
return _this2.setState(_this2._getInnerMenuCloseState(itemKey));
};
_this2.itemKeyToChildren = {};
_this2.itemKeyToParentKey = {};
_this2.firstLevelItems = [];
_this2.state = {
persistentTopChildren: [],
drivenOutChildren: [],
onScreenChildren: [],
collapsibleOnScreenChildren: [],
drivenInChildren: [],
persistentBottomChildren: [],
selectedKey: '',
lastSelectedKey: '',
expandedInnerMenu: undefined
};
return _this2;
}
(0, _inherits2["default"])(Sidebar, _Component);
return (0, _createClass2["default"])(Sidebar, [{
key: "UNSAFE_componentWillMount",
value: function UNSAFE_componentWillMount() {
this._setInnerMenus(this.props);
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(props) {
this._setInnerMenus(props);
}
}, {
key: "_setInnerMenus",
value: function _setInnerMenus(props) {
var _this3 = this;
var persistentTopChildren = [];
var persistentBottomChildren = [];
var onScreenChildren = [];
var findEnabledChild = function findEnabledChild(item) {
return item.props.innerMenu && item.props.innerMenu.find(function (c) {
return c.type === _SidebarItem.SidebarItem && !c.props.disable;
});
};
var handleChild = function handleChild(child) {
if (child.type === _SidebarItem.SidebarItem) {
var enabledChild = findEnabledChild(child);
var innerChildrenWithKeys = _this3._getChildrenWithKeys(child);
_this3.itemKeyToChildren[child.props.itemKey] = {
selectedKey: enabledChild ? enabledChild.props.itemKey : child.props.itemKey,
children: innerChildrenWithKeys
};
if (child.props.innerMenu) {
innerChildrenWithKeys.forEach(function (innerChild) {
if (innerChild.type !== _SidebarBackButton.SidebarBackButton) {
_this3.itemKeyToParentKey[innerChild.props.itemKey] = child.props.itemKey;
}
});
}
onScreenChildren.push(child);
} else if (child.type === _SidebarPersistentHeader.SidebarPersistentHeader) {
persistentTopChildren.push(child);
} else if (child.type === _SidebarPersistentFooter.SidebarPersistentFooter) {
persistentBottomChildren.push(child);
} else {
onScreenChildren.push(child);
}
};
if (props.children) {
if (props.children.length) {
props.children.forEach(function (child) {
if (child) {
if (child.length > 0) {
child.forEach(handleChild);
} else {
handleChild(child);
}
}
});
} else {
handleChild(props.children);
}
}
this.firstLevelItems = onScreenChildren.slice();
var newState = {
persistentTopChildren: persistentTopChildren,
persistentBottomChildren: persistentBottomChildren,
onScreenChildren: onScreenChildren,
selectedKey: props.selectedKey
};
var selectedItemParentKey = this.itemKeyToParentKey[props.selectedKey];
if (selectedItemParentKey) {
this.setState(_objectSpread(_objectSpread({}, newState), {}, {
drivenInChildren: this.itemKeyToChildren[selectedItemParentKey].children,
lastSelectedKey: selectedItemParentKey
}, this._getInnerMenuCollapsibleState({
menuToClose: this.itemKeyToParentKey[this.props.selectedKey] || this.props.selectedKey,
menuToOpen: selectedItemParentKey,
selected: props.selectedKey
})));
} else {
var updateCollapsibleOnlyOnChange = true;
this.setState(_objectSpread(_objectSpread({}, newState), {}, {
drivenInChildren: []
}, this._getInnerMenuCloseState(props.selectedKey, updateCollapsibleOnlyOnChange)));
}
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var _this$props = this.props,
isHidden = _this$props.isHidden,
skin = _this$props.skin;
var css = _objectSpread(_objectSpread({}, _SidebarSt.classes), this.props.classNames);
var sliderClasses = (0, _SidebarSt.st)(css.slider, {
skin: skin
}, this.state.drivenInChildren.length !== 0 && css.sliderOutToLeft, this.state.drivenInChildren.length === 0 && this.state.drivenOutChildren.length !== 0 && css.sliderInFromLeft);
var collapsibleSliderClasses = (0, _SidebarSt.st)(css.slider, {
skin: skin
});
var sliderOutToRightClasses = (0, _SidebarSt.st)(css.slider, {
skin: skin
}, !this.props.isHidden && css.sliderOutToRight);
var sliderInFromRightClasses = (0, _SidebarSt.st)(css.slider, {
skin: skin
}, !this.props.isHidden && css.sliderInFromRight);
var rootClasses = (0, _SidebarSt.st)(css.sideBar || _SidebarSt.classes.root, {
hidden: isHidden,
skin: skin
});
return /*#__PURE__*/_react["default"].createElement(_context.WixDesignSystemContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 487,
columnNumber: 7
}
}, function (_ref) {
var sidebarExperimentCollapsible = _ref.sidebarExperimentCollapsible;
return /*#__PURE__*/_react["default"].createElement(_SidebarAPI.SidebarContext.Provider, {
value: _this4.sidebarContext,
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 490,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: rootClasses,
"data-hook": _this4.props.dataHook,
"data-skin": skin,
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 491,
columnNumber: 15
}
}, _this4.state.persistentTopChildren, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _SidebarSt.st)(css.content),
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 498,
columnNumber: 17
}
}, !sidebarExperimentCollapsible && _this4.state.drivenInChildren.length === 0 && _this4.state.drivenOutChildren.length !== 0 && /*#__PURE__*/_react["default"].createElement("div", {
className: sliderOutToRightClasses,
"data-hook": _constants.dataHooks.drivenOutChildren,
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 502,
columnNumber: 23
}
}, _this4.state.drivenOutChildren), /*#__PURE__*/_react["default"].createElement(_SidebarContentWrapper.SidebarContentWrapper, {
containerClasses: sidebarExperimentCollapsible ? collapsibleSliderClasses : sliderClasses,
skin: skin,
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 510,
columnNumber: 19
}
}, sidebarExperimentCollapsible ? _this4.state.collapsibleOnScreenChildren : _this4.state.onScreenChildren), !sidebarExperimentCollapsible && _this4.state.drivenInChildren.length !== 0 && /*#__PURE__*/_react["default"].createElement(_SidebarContentWrapper.SidebarContentWrapper, {
key: "collapsiblle",
containerClasses: sliderInFromRightClasses,
containerDataHook: _constants.dataHooks.drivenInChildren,
skin: skin,
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 525,
columnNumber: 23
}
}, _this4.state.drivenInChildren)), _this4.state.persistentBottomChildren));
});
}
}]);
}(_react.Component);
Sidebar.displayName = 'Sidebar';
Sidebar.Item = _SidebarItem.SidebarItem;
Sidebar.PersistentHeader = _SidebarPersistentHeader.SidebarPersistentHeader;
Sidebar.PersistentFooter = _SidebarPersistentFooter.SidebarPersistentFooter;
Sidebar.BackButton = _SidebarBackButton.SidebarBackButton;
Sidebar.defaultProps = {
skin: _constants.sidebarSkins.dark,
isHidden: false
};
var _default = exports["default"] = Sidebar;