@spaced-out/ui-design-system
Version:
Sense UI components library
316 lines (315 loc) • 9.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SideMenuLink = exports.MENU_NAME_LIST = void 0;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _qa = require("../../utils/qa");
var _Button = require("../Button");
var _ConditionalWrapper = require("../ConditionalWrapper");
var _Icon = require("../Icon");
var _Link = require("../Link");
var _StatusIndicator = require("../StatusIndicator");
var _Text = require("../Text");
var _Tooltip = require("../Tooltip");
var _SideMenuLinkModule = _interopRequireDefault(require("./SideMenuLink.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
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 MENU_NAME_LIST = exports.MENU_NAME_LIST = Object.freeze({
dashboard: {
title: 'Dashboard',
iconName: 'house',
iconType: 'duotone'
},
engage: {
title: 'Engage',
iconName: 'bullseye-pointer',
iconType: 'duotone'
},
journeys: {
title: 'Journeys',
iconName: 'bullseye-pointer',
iconType: 'duotone'
},
automation: {
title: 'Automation',
iconName: 'bullseye-pointer',
iconType: 'duotone'
},
trm: {
title: 'TRM',
iconName: 'screen-users',
iconType: 'duotone'
},
analytics: {
title: 'Analytics & Data',
iconName: 'chart-column',
iconType: 'duotone'
},
messaging: {
title: 'Messaging',
iconName: 'messages',
iconType: 'duotone'
},
messages: {
title: 'Messaging',
iconName: 'messages',
iconType: 'duotone'
},
chatbot: {
title: 'Chatbot',
iconName: 'message-bot',
iconType: 'duotone'
},
referral: {
title: 'Referrals',
iconName: 'user-check',
iconType: 'duotone'
},
referrals: {
title: 'Referrals',
iconName: 'user-check',
iconType: 'duotone'
},
records: {
title: 'Records',
iconName: 'folder-open',
iconType: 'duotone'
},
'database-cleanup': {
title: 'Bulk Cleanup',
iconName: 'retweet',
iconType: 'duotone'
},
support: {
title: 'Support',
iconName: 'headset',
iconType: 'duotone'
},
audit: {
title: 'Audit',
iconName: 'print-magnifying-glass',
iconType: 'duotone'
},
schedule: {
title: 'Timeline',
iconName: 'timeline',
iconType: 'duotone'
},
people: {
title: 'People',
iconName: 'people-group',
iconType: 'duotone'
},
contacts: {
title: 'Contacts',
iconName: 'address-card',
iconType: 'duotone'
},
meetings: {
title: 'Meetings',
iconName: 'calendars',
iconType: 'duotone'
},
contacts3: {
title: 'Contacts',
iconName: 'browser',
iconType: 'duotone'
},
senseai: {
title: 'AI Copilot',
iconName: 'sparkles',
iconType: 'duotone'
},
'sense-jd-ai': {
title: 'Jd generator',
iconName: 'sparkles',
iconType: 'duotone'
},
tracking: {
title: 'Tracking',
iconName: 'user-check',
iconType: 'duotone'
},
jobs: {
title: 'Jobs',
iconName: 'briefcase',
iconType: 'duotone'
},
drive: {
title: 'Events',
iconName: 'briefcase',
iconType: 'duotone'
},
conversations: {
title: 'Conversations',
iconName: 'message-smile',
iconType: 'duotone'
},
pages: {
title: 'Pages',
iconName: 'pager',
iconType: 'duotone'
},
sourcing: {
title: 'Sourcing',
iconName: 'browser',
iconType: 'duotone'
},
earnings: {
title: 'Earnings',
iconName: 'wallet',
iconType: 'duotone'
},
settings: {
title: 'Settings',
iconName: 'gear',
iconType: 'duotone'
},
configuration: {
title: 'Configuration',
iconName: 'gear',
iconType: 'duotone'
},
supportLinks: {
title: 'Support Links',
iconName: 'circle-question',
iconType: 'duotone'
},
voiceflow: {
title: 'Voiceflow',
iconName: 'phone-volume',
iconType: 'duotone'
},
broadcast: {
title: 'Broadcast',
iconName: 'bullhorn',
iconType: 'duotone'
},
liveAgentTransfer: {
title: 'Live Agent Transfer',
iconName: 'user-headset',
iconType: 'duotone'
},
dataManagement: {
title: 'Data Management',
iconName: 'database',
iconType: 'duotone'
}
});
const SideMenuLink = exports.SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
classNames,
pageNameKey,
disabled,
opened,
selectedValue,
onChange,
tabIndex = 0,
tooltip,
isGroupMenuLink = false,
linkComponent: LinkComponent,
rightSlot,
to,
customTitle,
status,
testId,
...restButtonProps
} = _ref;
const selected = selectedValue === pageNameKey;
const inActive = !onChange;
const onChangeHandler = e => {
onChange?.(e, pageNameKey);
};
const linkTitle = customTitle || MENU_NAME_LIST[pageNameKey].title;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
condition: to !== undefined,
wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
to: to,
tabIndex: -1,
linkComponent: LinkComponent,
className: (0, _classify.default)(_SideMenuLinkModule.default.linkComponent, {
[_SideMenuLinkModule.default.closed]: !opened
}),
onClick: onChangeHandler,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'link'
}),
children: children
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
condition: Boolean(!opened && !inActive),
wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
body: linkTitle,
...tooltip,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'tooltip'
}),
children: children
}),
children: /*#__PURE__*/(0, _react.createElement)(_Button.UnstyledButton, {
...restButtonProps,
className: (0, _classify.default)(_SideMenuLinkModule.default.linkWrapper, {
[_SideMenuLinkModule.default.selected]: selected,
[_SideMenuLinkModule.default.disabled]: disabled,
[_SideMenuLinkModule.default.inActive]: inActive,
[_SideMenuLinkModule.default.closed]: !opened
}, classNames?.wrapper),
onClick: onChangeHandler,
ref: ref,
tabIndex: disabled ? -1 : tabIndex,
disabled: disabled,
key: pageNameKey,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'button'
})
}, pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _SideMenuLinkModule.default.iconContainer,
children: [status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusIndicator.StatusIndicator, {
status: status,
classNames: {
wrapper: _SideMenuLinkModule.default.statusIndicatorBlock
},
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'status-indicator'
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
type: MENU_NAME_LIST[pageNameKey].iconType,
name: MENU_NAME_LIST[pageNameKey].iconName,
size: "medium",
color: _Text.TEXT_COLORS.inverseSecondary,
className: _SideMenuLinkModule.default.menuIcon,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'icon'
})
})]
}) : null, opened ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _SideMenuLinkModule.default.menuLabelContainer,
children: [pageNameKey && MENU_NAME_LIST[pageNameKey] ? isGroupMenuLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleSmall, {
className: _SideMenuLinkModule.default.groupMenuLinkText,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'title'
}),
children: linkTitle
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMedium, {
className: _SideMenuLinkModule.default.menuLinkText,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'title'
}),
children: linkTitle
}) : null, rightSlot ? rightSlot : null]
}) : null)
})
});
});
SideMenuLink.displayName = 'SideMenuLink';