@spaced-out/ui-design-system
Version:
Sense UI components library
275 lines (274 loc) • 8.16 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SideMenuLink = exports.MENU_NAME_LIST = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
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"));
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); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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,
...restButtonProps
} = _ref;
const selected = selectedValue === pageNameKey;
const inActive = !onChange;
const onChangeHandler = e => {
onChange && onChange(e, pageNameKey);
};
const linkTitle = customTitle || MENU_NAME_LIST[pageNameKey].title;
return /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
condition: to !== undefined,
wrapper: children => /*#__PURE__*/React.createElement(_Link.Link, {
to: to,
tabIndex: -1,
linkComponent: LinkComponent,
className: (0, _classify.default)(_SideMenuLinkModule.default.linkComponent, {
[_SideMenuLinkModule.default.closed]: !opened
}),
onClick: onChangeHandler
}, children)
}, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
condition: Boolean(!opened && !inActive),
wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({
body: linkTitle
}, tooltip), children)
}, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, 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
}), pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement("div", {
className: _SideMenuLinkModule.default.iconContainer
}, status && /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
status: status,
classNames: {
wrapper: _SideMenuLinkModule.default.statusIndicatorBlock
}
}), /*#__PURE__*/React.createElement(_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
})) : null, opened ? /*#__PURE__*/React.createElement("div", {
className: _SideMenuLinkModule.default.menuLabelContainer
}, pageNameKey && MENU_NAME_LIST[pageNameKey] ? isGroupMenuLink ? /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
className: _SideMenuLinkModule.default.groupMenuLinkText
}, linkTitle) : /*#__PURE__*/React.createElement(_Text.BodyMedium, {
className: _SideMenuLinkModule.default.menuLinkText
}, linkTitle) : null, rightSlot ? rightSlot : null) : null)));
});
SideMenuLink.displayName = 'SideMenuLink';