baseui
Version:
A React Component library implementing the Base design language
267 lines (265 loc) • 9.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SideNavigation = SideNavigation;
exports.SideNavigationHeader = SideNavigationHeader;
exports.SideNavigationItem = SideNavigationItem;
exports.SideNavigationSection = SideNavigationSection;
var _react = _interopRequireWildcard(require("react"));
var _reactUid = require("react-uid");
var _overrides = require("../helpers/overrides");
var _chevronDown = _interopRequireDefault(require("../icon/chevron-down"));
var _chevronUp = _interopRequireDefault(require("../icon/chevron-up"));
var _index = require("../styles/index");
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.
*/
const SideNavigationContext = /*#__PURE__*/(0, _react.createContext)({
activeItemId: null
});
const StyledList = (0, _index.styled)('ul', ({
$open = true
}) => ({
display: $open ? 'block' : 'none',
margin: 0,
padding: 0
}));
StyledList.displayName = "StyledList";
const StyledListItem = (0, _index.styled)('li', {
listStyleType: 'none'
});
StyledListItem.displayName = "StyledListItem";
function SideNavigation(props) {
const {
activeItemId = null,
children,
overrides = {}
} = props;
const [List, listProps] = (0, _overrides.getOverrides)(overrides.List, StyledList);
return /*#__PURE__*/_react.default.createElement(SideNavigationContext.Provider, {
value: {
activeItemId
}
}, /*#__PURE__*/_react.default.createElement(List, listProps, children));
}
const StyledStartWrapper = (0, _index.styled)('div', () => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start'
}));
StyledStartWrapper.displayName = "StyledStartWrapper";
const StyledEndWrapper = (0, _index.styled)('div', ({
$theme
}) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
width: $theme.sizing.scale900
}));
StyledEndWrapper.displayName = "StyledEndWrapper";
const StyledStartEnhancerWrapper = (0, _index.styled)('div', ({
$theme
}) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
width: $theme.sizing.scale950
}));
StyledStartEnhancerWrapper.displayName = "StyledStartEnhancerWrapper";
const StyledAction = (0, _index.styled)('a', props => {
const {
$active,
$clickable,
$disabled,
$indent,
$theme
} = props;
const {
colors,
sizing,
typography
} = $theme;
const paddingLeft = parseInt(sizing.scale600) + parseInt(sizing.scale950) * Math.max($indent, 0) + 'px';
let style = {
alignItems: 'center',
background: 'none',
borderTop: 'none',
borderRight: 'none',
borderBottom: 'none',
borderLeft: $active ? `solid ${sizing.scale100} ${colors.contentPrimary}` : `solid ${sizing.scale100} transparent`,
boxShadow: $active ? 'inset 999px 999px 0px rgb(0 0 0 / 8%)' : 'none',
boxSizing: 'border-box',
color: !$clickable || $active ? colors.contentPrimary : colors.contentSecondary,
display: 'flex',
font: 'inherit',
justifyContent: 'space-between',
overflowWrap: 'anywhere',
paddingTop: sizing.scale550,
paddingRight: sizing.scale600,
paddingBottom: sizing.scale550,
paddingLeft,
textDecoration: 'none',
width: '100%',
...typography.LabelMedium
};
if ($clickable) {
style[':hover'] = {
boxShadow: 'inset 999px 999px 0px rgb(0 0 0 / 4%)',
cursor: 'pointer'
};
}
if ($disabled) {
style.color = colors.contentStateDisabled;
style.cursor = 'not-allowed';
}
return style;
});
StyledAction.displayName = "StyledAction";
function Item(props) {
const {
ariaControls,
ariaExpanded,
active = false,
disabled = false,
endEnhancer,
href,
indent = 0,
label,
onClick,
overrides = {},
startEnhancer
} = props;
if (!label) {
return null;
}
const [Action, actionProps] = (0, _overrides.getOverrides)(overrides.Action, StyledAction);
const [EndWrapper, endWrapperProps] = (0, _overrides.getOverrides)(overrides.EndWrapper, StyledEndWrapper);
const [StartEnhancerWrapper, startEnhancerWrapperProps] = (0, _overrides.getOverrides)(overrides.StartEnhancerWrapper, StyledStartEnhancerWrapper);
const [StartWrapper, startWrapperProps] = (0, _overrides.getOverrides)(overrides.StartWrapper, StyledStartWrapper);
const clickable = Boolean((onClick || href) && !disabled);
const actionElement = clickable ? href ? 'a' : 'button' : 'div';
return /*#__PURE__*/_react.default.createElement(Action, _extends({
$active: active,
$as: actionElement,
$clickable: clickable,
$disabled: disabled,
$indent: indent,
"aria-controls": ariaControls,
"aria-expanded": ariaExpanded,
href: href,
onClick: onClick,
type: actionElement === 'button' ? 'button' : undefined
}, actionProps), /*#__PURE__*/_react.default.createElement(StartWrapper, startWrapperProps, startEnhancer && /*#__PURE__*/_react.default.createElement(StartEnhancerWrapper, startEnhancerWrapperProps, startEnhancer), label), endEnhancer && /*#__PURE__*/_react.default.createElement(EndWrapper, endWrapperProps, endEnhancer));
}
function SideNavigationHeader({
children,
overrides: {
ListItem,
...overrides
} = {},
...props
}) {
const [OverridedListItem, listItemProps] = (0, _overrides.getOverrides)(ListItem, StyledListItem);
return /*#__PURE__*/_react.default.createElement(OverridedListItem, listItemProps, /*#__PURE__*/_react.default.createElement(Item, _extends({}, props, {
label: children,
overrides: overrides
})));
}
function SideNavigationItem({
children,
id,
overrides: {
ListItem,
...overrides
} = {},
...props
}) {
const {
activeItemId
} = _react.default.useContext(SideNavigationContext);
const [OverridedListItem, listItemProps] = (0, _overrides.getOverrides)(ListItem, StyledListItem);
return /*#__PURE__*/_react.default.createElement(OverridedListItem, listItemProps, /*#__PURE__*/_react.default.createElement(Item, _extends({}, props, {
label: children,
active: activeItemId === id,
overrides: overrides
})));
}
function SideNavigationSection(props) {
const {
active = false,
children,
forceOpen = false,
indent = 0,
overrides: {
List,
ListItem,
...overrides
} = {},
startEnhancer,
title
} = props;
const [, theme] = (0, _index.useStyletron)();
const {
activeItemId
} = (0, _react.useContext)(SideNavigationContext);
const [open, setOpen] = (0, _react.useState)(false);
const uid = (0, _reactUid.useUID)();
(0, _react.useEffect)(() => {
let childIsActive = false;
if (activeItemId != null) {
let stack = _react.default.Children.toArray(children);
while (stack.length) {
const current = stack.pop();
if ( /*#__PURE__*/(0, _react.isValidElement)(current)) {
if (current.props.id === activeItemId) {
childIsActive = true;
break;
}
if (current.props.children) {
stack = stack.concat(_react.default.Children.toArray(current.props.children));
}
}
}
}
if (childIsActive) {
setOpen(true);
} else {
setOpen(false);
}
}, [activeItemId, children]);
(0, _react.useEffect)(() => {
if (forceOpen) {
setOpen(true);
}
}, [forceOpen]);
if (_react.default.Children.toArray(children).filter(_react.default.isValidElement).length === 0) {
return null;
}
const Chevron = open ? _chevronUp.default : _chevronDown.default;
const [OverridedList, overridedListProps] = (0, _overrides.getOverrides)(List, StyledList);
const [OverridedListItem, overridedListItemProps] = (0, _overrides.getOverrides)(ListItem, StyledListItem);
return /*#__PURE__*/_react.default.createElement(OverridedListItem, overridedListItemProps, /*#__PURE__*/_react.default.createElement(Item, {
ariaControls: uid,
ariaExpanded: open,
endEnhancer: /*#__PURE__*/_react.default.createElement(Chevron, {
title: "",
size: theme.sizing.scale800
}),
label: title,
indent: indent,
onClick: () => setOpen(prev => !prev),
overrides: overrides,
startEnhancer: startEnhancer
}), /*#__PURE__*/_react.default.createElement(OverridedList, _extends({
id: uid,
$open: open
}, overridedListProps), _react.default.Children.map(children, child => child === null ? null : /*#__PURE__*/_react.default.cloneElement(child, {
indent: indent + 1
}))));
}