baseui
Version:
A React Component library implementing the Base design language
113 lines (111 loc) • 5.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _selector = require("./selector");
var _panel = require("./panel");
var _styledComponents = require("./styled-components");
var _overrides = require("../helpers/overrides");
var _list = require("../list");
var _mobileHeader = require("../mobile-header");
var _icon = require("../icon");
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.
*/
const MAX_SELECTORS = 5;
const BottomNavigation = ({
activeKey = 0,
onChange,
children,
overrides = {}
}) => {
const [Root, RootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
const [SelectorList, SelectorListProps] = (0, _overrides.getOverrides)(overrides.SelectorList, _styledComponents.StyledSelectorList);
const [OverflowPanel, OverflowPanelProps] = (0, _overrides.getOverrides)(overrides.OverflowPanel, _styledComponents.StyledOverflowPanel);
const [OverflowPanelList, OverflowPanelListProps] = (0, _overrides.getOverrides)(overrides.OverflowPanelList, _styledComponents.StyledOverflowPanelList);
const [displayOverflow, setDisplayOverflow] = React.useState(false);
const NavItemPanelRefs = React.useRef([]);
function scrollToTop(idx) {
// @ts-expect-error todo(ts-migration) TS2339 Property 'scrollTo' does not exist on type 'never'.
NavItemPanelRefs.current[idx].scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
function handleNavItemChange(activeKey) {
if (displayOverflow) {
setDisplayOverflow(false);
}
// @ts-expect-error todo(ts-migration) TS2722 Cannot invoke an object which is possibly 'undefined'.
onChange({
activeKey
});
}
const renderSelectors = navItems => navItems.map((navItem, idx) => {
const isActive = activeKey === idx && !displayOverflow;
return /*#__PURE__*/React.createElement(_selector.Selector, {
title: navItem.props.title,
icon: navItem.props.icon,
isActive: isActive,
onChange: () => {
isActive ? scrollToTop(idx) : handleNavItemChange(idx);
},
overrides: navItem.props.overrides,
key: idx
});
});
const OverflowSelector = () => /*#__PURE__*/React.createElement(_selector.Selector, {
title: "More",
icon: _icon.Overflow,
onChange: () => setDisplayOverflow(true),
isActive: displayOverflow || activeKey > 4,
overrides: {
Title: overrides.OverflowTitle,
Selector: overrides.OverflowSelector
},
key: 'more'
});
const navItems = React.Children.toArray(children);
return /*#__PURE__*/React.createElement(Root, RootProps, navItems.map((navItem, idx) => {
if (!navItem) return;
const isActive = activeKey === idx && !displayOverflow;
return /*#__PURE__*/React.createElement(_panel.Panel, {
isActive: isActive
// @ts-expect-error todo(ts-migration) TS2345 Argument of type 'unknown' is not assignable to parameter of type 'never'.
,
ref: element => NavItemPanelRefs.current.push(element),
overrides: navItem.props.overrides,
key: idx,
"aria-labelledby": `tabs-${navItem.props.title}-tabpanel-${idx}`
}, navItem.props.children);
}), displayOverflow && /*#__PURE__*/React.createElement(OverflowPanel, OverflowPanelProps, /*#__PURE__*/React.createElement(_mobileHeader.MobileHeader, {
title: "More",
expanded: true
}), /*#__PURE__*/React.createElement(OverflowPanelList, OverflowPanelListProps, navItems.slice(MAX_SELECTORS - 1).map((navItem, overflowIdx) => {
const {
icon: Icon,
title
} = navItem.props;
const idx = overflowIdx + MAX_SELECTORS - 1;
return /*#__PURE__*/React.createElement(_list.ListItem, {
artwork: props => /*#__PURE__*/React.createElement(Icon, props),
endEnhancer: () => /*#__PURE__*/React.createElement(_icon.ChevronRight, {
title: ""
}),
onClick: () => {
activeKey === idx && !displayOverflow ? scrollToTop(idx) : handleNavItemChange(idx);
},
key: overflowIdx
}, /*#__PURE__*/React.createElement(_list.ListItemLabel, null, title));
}))), /*#__PURE__*/React.createElement(SelectorList, _extends({
role: "tablist"
}, SelectorListProps), navItems.length > 5 ? /*#__PURE__*/React.createElement(React.Fragment, null, renderSelectors(navItems.slice(0, 4)), /*#__PURE__*/React.createElement(OverflowSelector, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderSelectors(navItems))));
};
var _default = exports.default = BottomNavigation;