baseui
Version:
A React Component library implementing the Base design language
189 lines (186 loc) • 7.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = MobileMenu;
var React = _interopRequireWildcard(require("react"));
var _button = require("../button");
var _drawer = require("../drawer");
var _overrides = require("../helpers/overrides");
var _arrowLeft = _interopRequireDefault(require("../icon/arrow-left"));
var _menu = _interopRequireDefault(require("../icon/menu"));
var _list = require("../list");
var _menu2 = require("../menu");
var _styledComponents = require("./styled-components");
var _userProfileTile = _interopRequireDefault(require("./user-profile-tile"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const USER_TITLE_ITEM = 'USER_TITLE_ITEM';
const USER_MENU_ITEM = 'USER_MENU_ITEM';
const PARENT_MENU_ITEM = 'PARENT_MENU_ITEM';
// eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
const MobileNavMenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
item,
mapItemToNode = _utils.defaultMapItemToNode,
overrides = {},
...restProps
} = props;
const [UserMenuProfileListItem, userMenuProfileListItemProps] = (0, _overrides.getOverrides)(overrides.UserMenuProfileListItem, _styledComponents.StyledUserMenuProfileListItem);
if (item.PARENT_MENU_ITEM) {
return /*#__PURE__*/React.createElement(_list.MenuAdapter, _extends({}, restProps, {
ref: ref,
artwork: item.navExitIcon || _arrowLeft.default,
artworkSize: _list.ARTWORK_SIZES.LARGE
}), /*#__PURE__*/React.createElement(_list.ListItemLabel, null, item.label));
}
if (item.USER_TITLE_ITEM) {
// Replace with a user menu item renderer
return /*#__PURE__*/React.createElement(UserMenuProfileListItem, _extends({}, restProps, userMenuProfileListItemProps, {
ref: ref
}), /*#__PURE__*/React.createElement(_userProfileTile.default, _extends({}, item.item, {
overrides: overrides
})));
}
return (
/*#__PURE__*/
// Replace with a main menu item renderer
React.createElement(_list.MenuAdapter, _extends({}, restProps, {
ref: ref,
artwork: item.icon || null,
artworkSize: _list.ARTWORK_SIZES.LARGE
}), /*#__PURE__*/React.createElement(_list.ListItemLabel, null, mapItemToNode(item)))
);
});
function MobileMenu(props) {
const {
mainItems = [],
userItems = [],
mapItemToNode,
overrides = {},
...rest
} = props;
const items = [...(userItems.length ? [{
item: {
...rest
},
label: props.username,
[USER_TITLE_ITEM]: true,
children: userItems.map(item => {
return {
...item,
[USER_MENU_ITEM]: true
};
})
}] : []), ...mainItems];
const [isOpen, setIsOpen] = React.useState(false);
const [currentNavItems, setCurrentNavItems] = React.useState(items);
const [ancestorNavItems, setAncestorNavItems] = React.useState([]);
const toggleMenu = () => {
setIsOpen(!isOpen);
};
const [SideMenuButton, sideMenuButtonProps] = (0, _overrides.getOverrides)(overrides.SideMenuButton, _button.Button);
sideMenuButtonProps.overrides = (0, _overrides.mergeOverrides)({
BaseButton: {
component: _styledComponents.StyledSideMenuButton
}
}, sideMenuButtonProps.overrides);
const [MobileDrawer, drawerProps] = (0, _overrides.getOverrides)(overrides.MobileDrawer, _drawer.Drawer);
drawerProps.overrides = (0, _overrides.mergeOverrides)({
DrawerBody: {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
style: ({
$theme
}) => {
return {
marginTop: '0px',
marginBottom: '0px',
marginLeft: '0px',
marginRight: '0px'
};
}
},
// Removes the close icon from the drawer
Close: () => null
}, drawerProps.overrides);
const [MobileMenu, menuProps] = (0, _overrides.getOverrides)(overrides.MobileMenu, _menu2.StatefulMenu);
menuProps.overrides = (0, _overrides.mergeOverrides)({
List: {
style: {
paddingTop: '0',
paddingBottom: '0',
minHeight: '100vh',
boxShadow: 'none'
}
},
// eslint-disable-next-line react/display-name
ListItem: /*#__PURE__*/React.forwardRef((listItemProps, ref) => {
return /*#__PURE__*/React.createElement(MobileNavMenuItem, _extends({
ref: ref
}, listItemProps, {
mapItemToNode: mapItemToNode,
overrides: overrides
}));
})
}, menuProps.overrides);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SideMenuButton, _extends({
onClick: toggleMenu
}, sideMenuButtonProps), /*#__PURE__*/React.createElement(_menu.default, {
size: '24px'
})), /*#__PURE__*/React.createElement(MobileDrawer, _extends({
anchor: _drawer.ANCHOR.left,
isOpen: isOpen,
onClose: toggleMenu,
size: '75%'
}, drawerProps), /*#__PURE__*/React.createElement(MobileMenu, _extends({
items: currentNavItems
// @ts-ignore
,
onItemSelect: ({
item
}) => {
if (item.PARENT_MENU_ITEM) {
// Remove current parent item selected to return to
// from the ancestors list (`ancestorNavItems[ancestorArrLength - 1]`)
const updatedAncestorNavItems = ancestorNavItems.slice(0, ancestorNavItems.length - 1);
const isTopLevel = !updatedAncestorNavItems.length;
if (isTopLevel) {
// Set to the initial `navItems` value
setCurrentNavItems(items);
} else {
const newParentItem = {
// @ts-ignore
...updatedAncestorNavItems[updatedAncestorNavItems.length - 1],
[PARENT_MENU_ITEM]: true
};
setCurrentNavItems([newParentItem, ...newParentItem.children]);
}
setAncestorNavItems(updatedAncestorNavItems);
return;
}
if (item.USER_MENU_ITEM && props.onUserItemSelect) {
props.onUserItemSelect(item);
} else if (!item.USER_TITLE_ITEM && props.onMainItemSelect) {
props.onMainItemSelect(item);
}
if (item.children && item.children.length) {
const parentItem = {
...item,
[PARENT_MENU_ITEM]: true
};
// @ts-ignore
setAncestorNavItems([...ancestorNavItems, item]);
setCurrentNavItems([parentItem, ...item.children]);
return;
}
toggleMenu();
}
}, menuProps))));
}