wix-style-react
Version:
wix-style-react
486 lines (484 loc) • 21 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _SidebarSt = require("./Sidebar.st.css");
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("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Sidebar/Sidebar.js";
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 CollapsibeInnerMenuOpenChildren = props => {
var {
children,
waitForOtherMenuToClose,
skin,
isAlreadyOpen
} = props;
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(_SidebarContentWrapper.SidebarContentWrapper, {
containerClasses: (0, _SidebarSt.st)(_SidebarSt.classes.innerMenu),
containerDataHook: _constants.dataHooks.drivenInChildren,
skin: skin,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 7
}
}, children));
};
var CollapsibeInnerMenuCloseChildren = props => {
var {
children
} = props;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": "closed-inner-menu-children",
className: (0, _SidebarSt.st)(_SidebarSt.classes.innerMenuWrapperOutOfPlace),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SidebarSt.st)(_SidebarSt.classes.innerMenu),
"data-hook": _constants.dataHooks.drivenOutChildren,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 7
}
}, children));
};
var CollapsibeInnerMenuCloseParent = props => {
var {
isAlreadyClosed,
children
} = props;
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 5
}
}, children);
};
var CollapsibeInnerMenuOpenParent = props => {
var {
isAlreadyOpen,
children,
waitForOtherMenuToClose
} = props;
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 5
}
}, children);
};
/** A sidebar navigation component */
class Sidebar extends _react.Component {
constructor(props) {
super(props);
this._getInnerMenuCollapsibleState = options => {
var {
menuToClose,
menuToOpen,
selected
} = options;
var expandedInnerMenu = undefined;
var openMenuChildren = this.itemKeyToChildren[menuToOpen] && (this.itemKeyToChildren[menuToOpen].children || []);
var closeMenuChildren = this.itemKeyToChildren[menuToClose] && (this.itemKeyToChildren[menuToClose].children || []);
var collapsibleOnScreenChildren = this.firstLevelItems.reduce((accumalator, child) => {
var shouldExpand = menuToOpen && child.props.itemKey === menuToOpen && openMenuChildren.length > 0;
var shouldCollapse = this.state.expandedInnerMenu && menuToClose && closeMenuChildren.length > 0 && child.props.itemKey === menuToClose && this.state.expandedInnerMenu === menuToClose;
var waitForOtherMenuToClose = this.state.expandedInnerMenu && menuToClose && this.state.expandedInnerMenu === menuToClose && menuToClose !== menuToOpen;
if (shouldExpand) {
expandedInnerMenu = menuToOpen;
return [...accumalator, /*#__PURE__*/_react.default.createElement(CollapsibeInnerMenuOpenParent, {
key: "open-parent-".concat(menuToOpen),
isAlreadyOpen: this._isAlreadyOpen(menuToOpen),
waitForOtherMenuToClose: waitForOtherMenuToClose,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 13
}
}, child), /*#__PURE__*/_react.default.createElement(CollapsibeInnerMenuOpenChildren, {
key: "open-children-".concat(menuToOpen),
waitForOtherMenuToClose: waitForOtherMenuToClose,
skin: this.props.skin,
isAlreadyOpen: this._isAlreadyOpen(menuToOpen),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 13
}
}, openMenuChildren)];
}
if (shouldCollapse) {
return [...accumalator, /*#__PURE__*/_react.default.createElement(CollapsibeInnerMenuCloseParent, {
key: "closed-parent-".concat(menuToClose),
isAlreadyClosed: this._isAlreadyClosed(selected, menuToClose),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 13
}
}, child), /*#__PURE__*/_react.default.createElement(CollapsibeInnerMenuCloseChildren, {
key: "closed-children-".concat(menuToClose),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 13
}
}, closeMenuChildren)];
}
return [...accumalator, child];
}, []);
return {
collapsibleOnScreenChildren,
expandedInnerMenu
};
};
this._shouldCollapseInnerMenu = itemKey => this.state.expandedInnerMenu === itemKey && (itemKey === this.state.selectedKey && this.state.expandedInnerMenu || itemKey !== this.state.selectedKey);
this._shouldExpandInnerMenu = (parentKey, itemKey) => parentKey === this.state.lastSelectedKey && !this.state.expandedInnerMenu || this.itemKeyToParentKey[itemKey] === parentKey || parentKey !== this.state.lastSelectedKey;
this._navigateTo = itemKey => {
if (this._isChild(itemKey)) {
this._selectItem(itemKey);
this.sidebarContext = this._getSidebarContext();
return;
}
if (this._isParent(itemKey)) {
this._openInnerMenu(itemKey);
this.sidebarContext = this._getSidebarContext();
return;
}
if (itemKey) {
this._closeInnerMenu(itemKey);
this.sidebarContext = this._getSidebarContext();
return;
}
};
this._getSidebarContext = () => {
return {
itemClicked: this._navigateTo,
backClicked: () => {
this._closeInnerMenu();
this.sidebarContext = this._getSidebarContext();
},
getSelectedKey: () => this.state.selectedKey,
getSkin: () => this.props.skin,
getIsMenuExpanded: () => this.state.expandedInnerMenu
};
};
this.sidebarContext = this._getSidebarContext();
this._getInnerChildSelectedState = itemKey => {
var collapsibleInnerMenuState = this._getInnerMenuCollapsibleState({
menuToClose: this.state.lastSelectedKey,
menuToOpen: this.itemKeyToParentKey[itemKey],
selected: itemKey
});
if (this.itemKeyToParentKey[itemKey] !== this.state.lastSelectedKey) {
return _objectSpread({
drivenInChildren: this.itemKeyToChildren[this.itemKeyToParentKey[itemKey]].children,
selectedKey: itemKey,
lastSelectedKey: this.itemKeyToParentKey[itemKey]
}, collapsibleInnerMenuState);
} else {
return _objectSpread(_objectSpread({}, collapsibleInnerMenuState), {}, {
selectedKey: itemKey
});
}
};
this._getInnerMenuOpenState = itemKey => {
var {
children,
selectedKey
} = this.itemKeyToChildren[itemKey];
var selected = this.itemKeyToParentKey[this.state.lastSelectedKey] === itemKey ? this.state.lastSelectedKey : selectedKey;
var parentKey = this.itemKeyToParentKey[selected];
var parentItemKeyToOpen = this._getItemToOpenKey(parentKey, itemKey);
var parentItemKeyToClose = this._getItemToCloseKey(this.state.lastSelectedKey);
return _objectSpread(_objectSpread({}, this._getInnerMenuCollapsibleState({
menuToClose: parentItemKeyToClose,
menuToOpen: parentItemKeyToOpen,
selected
})), {}, {
drivenInChildren: children,
drivenOutChildren: [],
selectedKey: selected,
lastSelectedKey: itemKey
});
};
this._getItemToCloseKey = itemKey => {
if (this._shouldCollapseInnerMenu(itemKey)) {
return this.itemKeyToParentKey[itemKey] || itemKey;
}
if (this._shouldCollapseInnerMenu(this.state.lastSelectedKey)) {
return this.itemKeyToParentKey[this.state.lastSelectedKey] || this.state.lastSelectedKey;
}
return undefined;
};
this._getItemToOpenKey = (parentKey, itemKey) => this._shouldExpandInnerMenu(parentKey, itemKey) ? parentKey : undefined;
this._getInnerMenuCloseState = (itemKey, updateCollapsibleOnlyOnChange) => {
var selectedKey = this.state.lastSelectedKey || itemKey;
var parentItemKeyToClose = this._getItemToCloseKey(selectedKey);
return _objectSpread(_objectSpread({}, this._getInnerMenuCollapsibleState({
menuToClose: parentItemKeyToClose,
selected: selectedKey
})), {}, {
selectedKey: itemKey || this.state.lastSelectedKey,
lastSelectedKey: selectedKey,
drivenInChildren: [],
drivenOutChildren: this.state.drivenInChildren
});
};
this._getItemWithKey = (item, itemKey) => item.props.itemKey ? item : /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
itemKey
}));
this._getChildrenWithKeys = child => child.props.innerMenu && child.props.innerMenu.map((innerChild, index) => this._getItemWithKey(innerChild, child.props.itemKey + index)) || [];
this._isParent = itemKey => this.itemKeyToChildren[itemKey];
this._isChild = itemKey => this.itemKeyToParentKey[itemKey];
this._isAlreadyOpen = menuToOpen => this.state.lastSelectedKey === menuToOpen && this.itemKeyToParentKey[this.props.selectedKey] === menuToOpen && this.state.expandedInnerMenu === menuToOpen;
this._isAlreadyClosed = (selected, menuToClose) => this.itemKeyToParentKey[selected] !== menuToClose;
this._selectItem = itemKey => this.setState(this._getInnerChildSelectedState(itemKey));
this._openInnerMenu = itemKey => this.setState(this._getInnerMenuOpenState(itemKey));
this._closeInnerMenu = itemKey => this.setState(this._getInnerMenuCloseState(itemKey));
this.itemKeyToChildren = {};
this.itemKeyToParentKey = {};
this.firstLevelItems = [];
this.state = {
persistentTopChildren: [],
drivenOutChildren: [],
onScreenChildren: [],
collapsibleOnScreenChildren: [],
drivenInChildren: [],
persistentBottomChildren: [],
selectedKey: '',
lastSelectedKey: '',
expandedInnerMenu: undefined
};
}
UNSAFE_componentWillMount() {
this._setInnerMenus(this.props);
}
UNSAFE_componentWillReceiveProps(props) {
this._setInnerMenus(props);
}
_setInnerMenus(props) {
var persistentTopChildren = [];
var persistentBottomChildren = [];
var onScreenChildren = [];
var findEnabledChild = item => item.props.innerMenu && item.props.innerMenu.find(c => c.type === _SidebarItem.SidebarItem && !c.props.disable);
var handleChild = child => {
if (child.type === _SidebarItem.SidebarItem) {
var enabledChild = findEnabledChild(child);
var innerChildrenWithKeys = this._getChildrenWithKeys(child);
this.itemKeyToChildren[child.props.itemKey] = {
selectedKey: enabledChild ? enabledChild.props.itemKey : child.props.itemKey,
children: innerChildrenWithKeys
};
if (child.props.innerMenu) {
innerChildrenWithKeys.forEach(innerChild => {
if (innerChild.type !== _SidebarBackButton.SidebarBackButton) {
this.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(child => {
if (child) {
if (child.length > 0) {
child.forEach(handleChild);
} else {
handleChild(child);
}
}
});
} else {
handleChild(props.children);
}
}
this.firstLevelItems = onScreenChildren.slice();
var newState = {
persistentTopChildren,
persistentBottomChildren,
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.selctedKey,
menuToOpen: selectedItemParentKey,
selected: props.selectedKey
})));
} else {
var updateCollapsibleOnlyOnChange = true;
this.setState(_objectSpread(_objectSpread({}, newState), {}, {
drivenInChildren: []
}, this._getInnerMenuCloseState(props.selectedKey, updateCollapsibleOnlyOnChange)));
}
}
render() {
var {
isHidden,
skin
} = this.props;
var css = _objectSpread(_objectSpread({}, _SidebarSt.classes), this.props.classNames);
var sliderClasses = (0, _SidebarSt.st)(css.slider, {
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
});
var sliderOutToRightClasses = (0, _SidebarSt.st)(css.slider, {
skin
}, !this.props.isHidden && css.sliderOutToRight);
var sliderInFromRightClasses = (0, _SidebarSt.st)(css.slider, {
skin
}, !this.props.isHidden && css.sliderInFromRight);
var rootClasses = (0, _SidebarSt.st)(css.sideBar || _SidebarSt.classes.root, {
hidden: isHidden,
skin
});
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 506,
columnNumber: 7
}
}, _ref => {
var {
sidebarExperimentCollapsible
} = _ref;
return /*#__PURE__*/_react.default.createElement(_SidebarAPI.SidebarContext.Provider, {
value: this.sidebarContext,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 509,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: rootClasses,
"data-hook": this.props.dataHook,
"data-skin": skin,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 510,
columnNumber: 15
}
}, this.state.persistentTopChildren, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SidebarSt.st)(css.content),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 517,
columnNumber: 17
}
}, !sidebarExperimentCollapsible && this.state.drivenInChildren.length === 0 && this.state.drivenOutChildren.length !== 0 && /*#__PURE__*/_react.default.createElement("div", {
className: sliderOutToRightClasses,
"data-hook": _constants.dataHooks.drivenOutChildren,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 521,
columnNumber: 23
}
}, this.state.drivenOutChildren), /*#__PURE__*/_react.default.createElement(_SidebarContentWrapper.SidebarContentWrapper, {
containerClasses: sidebarExperimentCollapsible ? collapsibleSliderClasses : sliderClasses,
skin: skin,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 529,
columnNumber: 19
}
}, sidebarExperimentCollapsible ? this.state.collapsibleOnScreenChildren : this.state.onScreenChildren), !sidebarExperimentCollapsible && this.state.drivenInChildren.length !== 0 && /*#__PURE__*/_react.default.createElement(_SidebarContentWrapper.SidebarContentWrapper, {
key: "collapsiblle",
containerClasses: sliderInFromRightClasses,
containerDataHook: _constants.dataHooks.drivenInChildren,
skin: skin,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 544,
columnNumber: 23
}
}, this.state.drivenInChildren)), this.state.persistentBottomChildren));
});
}
}
Sidebar.displayName = 'Sidebar';
Sidebar.Item = _SidebarItem.SidebarItem;
Sidebar.PersistentHeader = _SidebarPersistentHeader.SidebarPersistentHeader;
Sidebar.PersistentFooter = _SidebarPersistentFooter.SidebarPersistentFooter;
Sidebar.BackButton = _SidebarBackButton.SidebarBackButton;
Sidebar.propTypes = {
/** classNames overrides */
classNames: _propTypes.default.string,
/** The dataHook of the Sidebar */
dataHook: _propTypes.default.string,
/** Sidebar menu children */
children: _propTypes.default.node,
/** Sidebar indicator for animating out or in */
isHidden: _propTypes.default.bool,
/** Sets the skin of the Sidebar */
skin: _propTypes.default.oneOf(['dark', 'light'])
};
Sidebar.defaultProps = {
skin: _constants.sidebarSkins.dark,
isHidden: false
};
var _default = exports.default = Sidebar;
//# sourceMappingURL=Sidebar.js.map