baseui
Version:
A React Component library implementing the Base design language
187 lines (180 loc) • 8.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = AppNavBar;
var React = _interopRequireWildcard(require("react"));
var _overrides = require("../helpers/overrides");
var _styles = require("../styles");
var _focusVisible = require("../utils/focusVisible");
var _constants = require("./constants");
var _mobileMenu = _interopRequireDefault(require("./mobile-menu"));
var _userMenu = _interopRequireDefault(require("./user-menu"));
var _styledComponents = require("./styled-components");
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.
*/
// @ts-ignore
function MainMenuItem(props) {
const {
item,
kind = _constants.KIND.primary,
mapItemToNode,
onSelect,
overrides = {}
} = props;
const [focusVisible, setFocusVisible] = React.useState(false);
// @ts-ignore
function handleFocus(event) {
if ((0, _focusVisible.isFocusVisible)(event)) {
setFocusVisible(true);
}
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
// @ts-ignore
function handleBlur(event) {
if (focusVisible) {
setFocusVisible(false);
}
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
// @ts-ignore
function handleClick(event) {
if (onSelect) {
onSelect(item);
}
}
// @ts-ignore
function handleKeyDown(event) {
if (event.key === 'Enter' && onSelect) {
onSelect(item);
}
}
const [MainMenuItemElement, mainMenuItemElementProps] = (0, _overrides.getOverrides)(overrides.MainMenuItem, _styledComponents.StyledMainMenuItem);
return /*#__PURE__*/React.createElement(MainMenuItemElement, _extends({
$active: item.active,
$isFocusVisible: focusVisible,
$kind: kind,
"aria-selected": item.active,
onFocus: handleFocus,
onBlur: handleBlur,
onClick: handleClick,
onKeyDown: handleKeyDown,
tabIndex: 0
}, mainMenuItemElementProps), mapItemToNode(item));
}
// @ts-ignore
function SecondaryMenu(props) {
const {
items = [],
mapItemToNode,
onSelect,
overrides = {}
} = props;
const [SecondaryMenuContainer, secondaryMenuContainerProps] = (0, _overrides.getOverrides)(overrides.SecondaryMenuContainer, _styledComponents.StyledSecondaryMenuContainer);
return /*#__PURE__*/React.createElement(SecondaryMenuContainer, _extends({
role: "navigation",
"aria-label": "Secondary navigation"
}, secondaryMenuContainerProps), items.map((item, index) =>
/*#__PURE__*/
// Replace with a menu item renderer
React.createElement(MainMenuItem, {
mapItemToNode: mapItemToNode,
item: item,
kind: _constants.KIND.secondary,
key: index,
onSelect: onSelect,
overrides: overrides
})));
}
function AppNavBar(props) {
const [css, theme] = (0, _styles.useStyletron)();
const {
title,
mapItemToNode = _utils.defaultMapItemToNode,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onMainItemSelect = item => {},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onUserItemSelect = item => {},
overrides = {},
userItems = [],
username,
usernameSubtitle,
userImgUrl
} = props;
const mainItems = React.useMemo(() => {
if (props.isMainItemActive) {
return (0, _utils.mapItemsActive)(props.mainItems || [], props.isMainItemActive);
}
return props.mainItems || [];
}, [props.mainItems, props.isMainItemActive]);
const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
const [Spacing, spacingProps] = (0, _overrides.getOverrides)(overrides.Spacing, _styledComponents.StyledSpacing);
const [AppName, appNameProps] = (0, _overrides.getOverrides)(overrides.AppName, _styledComponents.StyledAppName);
const [PrimaryMenuContainer, primaryMenuContainerProps] = (0, _overrides.getOverrides)(overrides.PrimaryMenuContainer, _styledComponents.StyledPrimaryMenuContainer);
const [DesktopMenuContainer, desktopMenuContainerProps] = (0, _overrides.getOverrides)(overrides.DesktopMenuContainer, _styledComponents.StyledDesktopMenuContainer);
const [DesktopMenu, desktopMenuProps] = (0, _overrides.getOverrides)(overrides.DesktopMenu, _styledComponents.StyledDesktopMenu);
let secondaryMenu;
let desktopSubNavPosition = _constants.POSITION.horizontal;
let mobileSubNavPosition = _constants.POSITION.vertical;
return /*#__PURE__*/React.createElement(Root, _extends({}, rootProps, {
"data-baseweb": "app-nav-bar"
}), /*#__PURE__*/React.createElement("div", {
className: css({
[`@media screen and (min-width: ${theme.breakpoints.large}px)`]: {
display: 'none'
}
})
}, /*#__PURE__*/React.createElement(Spacing, spacingProps, mainItems.length || userItems.length ? /*#__PURE__*/React.createElement(_mobileMenu.default, props) : null, /*#__PURE__*/React.createElement(AppName, appNameProps, title)), secondaryMenu &&
// @ts-expect-error todo(flow->ts) always false
mobileSubNavPosition === _constants.POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
items: secondaryMenu,
mapItemToNode: mapItemToNode,
onSelect: onMainItemSelect,
overrides: overrides
})), /*#__PURE__*/React.createElement("div", {
className: css({
[`@media screen and (max-width: ${theme.breakpoints.large - 1}px)`]: {
display: 'none'
}
})
}, /*#__PURE__*/React.createElement(DesktopMenuContainer, desktopMenuContainerProps, /*#__PURE__*/React.createElement(DesktopMenu, desktopMenuProps, /*#__PURE__*/React.createElement(AppName, appNameProps, title), /*#__PURE__*/React.createElement(PrimaryMenuContainer, _extends({
role: "navigation",
"aria-label": "Main navigation"
}, primaryMenuContainerProps), mainItems.map((item, index) => {
// For an active top level menu get the secondary navigation and its positioning
if (item.active && item.children && item.children.length) {
secondaryMenu = item.children;
if (item.navPosition) {
desktopSubNavPosition = item.navPosition.desktop || desktopSubNavPosition;
mobileSubNavPosition = item.navPosition.mobile || mobileSubNavPosition;
}
}
return /*#__PURE__*/React.createElement(MainMenuItem, {
item: item,
key: index,
mapItemToNode: mapItemToNode,
onSelect: onMainItemSelect,
overrides: overrides
});
})), userItems.length ? /*#__PURE__*/React.createElement(_userMenu.default, {
mapItemToNode: mapItemToNode,
onItemSelect: onUserItemSelect,
overrides: overrides,
username: username,
usernameSubtitle: usernameSubtitle,
userImgUrl: userImgUrl,
userItems: userItems
}) : null)), secondaryMenu && desktopSubNavPosition === _constants.POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
items: secondaryMenu,
mapItemToNode: mapItemToNode,
onSelect: onMainItemSelect,
overrides: overrides
})));
}