@spaced-out/ui-design-system
Version:
Sense UI components library
59 lines (58 loc) • 2.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SubMenuLink = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _Icon = require("../Icon");
var _Text = require("../Text");
var _Truncate = require("../Truncate");
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 SubMenuLink = exports.SubMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
menuLinkTitle,
menuLinkIcon,
menuLinkIconSize = 'medium',
menuLinkIconType,
menuKey,
selectedMenuKey,
disabled = false,
onChange
} = _ref;
const isMenuLinkSelected = selectedMenuKey === menuKey;
const onChangeHandler = () => {
if (!disabled) {
onChange && onChange(menuKey);
}
};
const onKeyDownHandler = e => {
if (e.key === 'Enter') {
onChangeHandler();
}
};
return /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_SubMenuModule.default.subMenuLinkWrapper)
}, /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_SubMenuModule.default.subMenuLink, {
[_SubMenuModule.default.highlightedMenu]: isMenuLinkSelected
}),
onKeyDown: onKeyDownHandler,
onClick: onChangeHandler,
ref: ref,
tabIndex: disabled ? '-1' : 0
}, /*#__PURE__*/React.createElement("div", {
className: _SubMenuModule.default.groupTitleWrapper
}, !!menuLinkIcon && /*#__PURE__*/React.createElement(_Icon.Icon, {
color: _Text.TEXT_COLORS.inverseSecondary,
name: menuLinkIcon,
size: menuLinkIconSize,
type: menuLinkIconType,
className: _SubMenuModule.default.menuLinkIcon
}), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
color: _Text.TEXT_COLORS.inverseSecondary,
className: _SubMenuModule.default.menuLinkTitle
}, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, menuLinkTitle)))));
});