@spaced-out/ui-design-system
Version:
Sense UI components library
106 lines (105 loc) • 4.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SubMenuGroup = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _FocusManagerWithArrowKeyNavigation = require("../FocusManagerWithArrowKeyNavigation");
var _Icon = require("../Icon");
var _StatusIndicator = require("../StatusIndicator");
var _Text = require("../Text");
var _SubMenuModule = _interopRequireDefault(require("./SubMenu.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
const SubMenuGroup = _ref => {
let {
children,
groupTitle,
groupIcon,
groupIconSize,
groupIconType,
collapsible = false,
disabled = false,
onChange,
selectedMenuKey,
status,
classNames
} = _ref;
const isSubMenuGroupChildSelected = React.Children.toArray(children).some(child => child.props.menuKey === selectedMenuKey);
const [collapsed, setCollapsed] = React.useState(!isSubMenuGroupChildSelected);
const collapseHandler = () => {
collapsible && setCollapsed(!collapsed);
};
const onMenuItemChangeHandler = value => {
onChange && onChange(value);
};
const onKeyDownHandlerHeader = e => {
if (e.key === 'Enter') {
collapseHandler();
}
};
const childrenWithProps = React.Children.map(children, child => {
if (/*#__PURE__*/React.isValidElement(child)) {
const {
disabled: disabledChild
} = child.props;
return /*#__PURE__*/React.cloneElement(child, {
selectedMenuKey,
onChange: onMenuItemChangeHandler,
disabled: disabledChild || disabled
});
}
return child;
});
React.useEffect(() => {
setCollapsed(!isSubMenuGroupChildSelected);
}, [selectedMenuKey]);
return /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupWrapper, classNames?.wrapper)
}, /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupHeader, {
[_SubMenuModule.default.collapsible]: collapsible
}, {
[_SubMenuModule.default.highlightedMenu]: isSubMenuGroupChildSelected
}, {
[_SubMenuModule.default.collapsed]: !collapsed
}, classNames?.groupHeader),
onClick: collapseHandler,
onKeyDown: onKeyDownHandlerHeader,
tabIndex: disabled ? '-1' : 0
}, /*#__PURE__*/React.createElement("div", {
className: _SubMenuModule.default.groupTitleWrapper
}, (!!groupIcon || !!status) && /*#__PURE__*/React.createElement("div", {
className: _SubMenuModule.default.groupIconWrapper
}, !!groupIcon && /*#__PURE__*/React.createElement(_Icon.Icon, {
color: _Text.TEXT_COLORS.inverseSecondary,
name: groupIcon,
type: groupIconType,
size: groupIconSize,
className: _SubMenuModule.default.groupIcon
}), !!status && collapsed && /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_SubMenuModule.default.statusIndicatorWrapper)
}, /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
status: status,
className: _SubMenuModule.default.statusIndicatorWrapper
}))), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
color: _Text.TEXT_COLORS.inverseSecondary,
className: _SubMenuModule.default.groupTitle
}, groupTitle)), collapsible && /*#__PURE__*/React.createElement(_Icon.Icon, {
color: _Text.TEXT_COLORS.inverseSecondary,
name: collapsed ? 'chevron-down' : 'chevron-up',
size: "small"
})), /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_SubMenuModule.default.subMenuGroup, {
[_SubMenuModule.default.collapsed]: collapsible && collapsed
}, classNames?.menuGroup)
}, /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.FocusManagerWithArrowKeyNavigation, {
classNames: {
wrapper: (0, _classify.default)(_SubMenuModule.default.subMenuFocusWrapper)
},
focusItemOnOpen: true,
loop: true
}, childrenWithProps)));
};
exports.SubMenuGroup = SubMenuGroup;