@spaced-out/ui-design-system
Version:
Sense UI components library
222 lines (221 loc) • 6.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TabSlot = exports.RightSlot = exports.PageTitle = exports.PageName = exports.PAGE_NAME_LIST = void 0;
var React = _interopRequireWildcard(require("react"));
var _color = require("../../styles/variables/_color");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _Button = require("../Button");
var _Icon = require("../Icon");
var _Text = require("../Text");
var _Tooltip = require("../Tooltip");
var _PageTitleModule = _interopRequireDefault(require("./PageTitle.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 PAGE_NAME_LIST = exports.PAGE_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'
},
workflows: {
title: 'Workflows',
iconName: 'bullseye-pointer',
iconType: 'duotone'
},
trm: {
title: 'TRM',
iconName: 'screen-users',
iconType: 'duotone'
},
analytics: {
title: 'Analytics',
iconName: 'chart-column',
iconType: 'duotone'
},
messaging: {
title: 'Messaging',
iconName: 'messages',
iconType: 'duotone'
},
chatbot: {
title: 'Chatbot',
iconName: 'message-bot',
iconType: 'duotone'
},
referrals: {
title: 'Referrals',
iconName: 'user-check',
iconType: 'duotone'
},
records: {
title: 'Records',
iconName: 'folder-open',
iconType: 'duotone'
},
bulkCleanup: {
title: 'Bulk Cleanup',
iconName: 'retweet',
iconType: 'duotone'
},
support: {
title: 'Support',
iconName: 'headset',
iconType: 'duotone'
},
audit: {
title: 'Audit',
iconName: 'print-magnifying-glass',
iconType: 'duotone'
},
timeline: {
title: 'Timeline',
iconName: 'timeline',
iconType: 'duotone'
},
people: {
title: 'People',
iconName: 'people-group',
iconType: 'duotone'
},
jobs: {
title: 'Jobs',
iconName: 'briefcase',
iconType: 'duotone'
},
contacts: {
title: 'Contacts',
iconName: 'address-card',
iconType: 'duotone'
},
meetings: {
title: 'Meetings',
iconName: 'calendars',
iconType: 'duotone'
},
contacts3: {
title: 'Contacts',
iconName: 'browser',
iconType: 'duotone'
},
tracking: {
title: 'Tracking',
iconName: 'user-check',
iconType: 'duotone'
},
earnings: {
title: 'Earnings',
iconName: 'wallet',
iconType: 'duotone'
},
settings: {
title: 'Settings',
iconName: 'gear',
iconType: 'duotone'
},
broadcast: {
title: 'Broadcast',
iconName: 'bullhorn',
iconType: 'duotone'
}
});
const TabSlot = _ref => {
let {
children,
className,
...props
} = _ref;
return /*#__PURE__*/React.createElement("div", _extends({}, props, {
className: (0, _classify.default)(_PageTitleModule.default.tabSlot, className)
}), children);
};
exports.TabSlot = TabSlot;
TabSlot.displayName = 'TabSlot';
const RightSlot = _ref2 => {
let {
children,
...props
} = _ref2;
return /*#__PURE__*/React.createElement("div", props, children);
};
exports.RightSlot = RightSlot;
RightSlot.displayName = 'RightSlot';
const PageName = _ref3 => {
let {
children,
...props
} = _ref3;
return /*#__PURE__*/React.createElement("div", _extends({}, props, {
className: _PageTitleModule.default.pageTitle
}), children);
};
exports.PageName = PageName;
PageName.displayName = 'PageName';
const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
let {
classNames,
children,
pageNameKey,
showBackButton,
onBack
} = _ref4;
const getNamedComp = comp => {
const childrenArray = React.Children.toArray(children);
if (childrenArray.length) {
const nodes = [];
for (const child of childrenArray) {
if (child?.type?.displayName === comp) {
nodes.push(child);
}
}
return nodes.length > 1 ? nodes : nodes[0];
}
return null;
};
const handleBack = () => {
onBack && onBack();
};
return /*#__PURE__*/React.createElement("div", {
"data-testid": "PageTitle",
className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper),
ref: ref
}, /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_PageTitleModule.default.leftSlot, classNames?.leftSlot)
}, /*#__PURE__*/React.createElement("div", {
className: _PageTitleModule.default.headerWithBackBtn
}, showBackButton && /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
title: "Navigate Back",
delayMotionDuration: "slow",
placement: "top-start"
}, /*#__PURE__*/React.createElement(_Button.Button, {
onClick: handleBack,
type: "tertiary",
iconLeftName: "chevron-left",
ariaLabel: "Navigate Back Button"
})), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
type: PAGE_NAME_LIST[pageNameKey].iconType,
name: PAGE_NAME_LIST[pageNameKey].iconName,
size: "medium",
color: _Text.TEXT_COLORS.primary,
style: {
'--fa-primary-color': _color.colorIconPrimary,
'--fa-secondary-color': _color.colorIconSecondary,
'--fa-primary-opacity': '1.0',
'--fa-secondary-opacity': '1.0'
}
})) : getNamedComp('PageName')), getNamedComp('TabSlot')), /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_PageTitleModule.default.rightSlot, classNames?.rightSlot)
}, getNamedComp('RightSlot')));
});