@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
442 lines (424 loc) • 20 kB
JavaScript
;
var React = require('react');
var classnames = require('classnames');
var index = require('./index-DFhZ7eXY.js');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var Tooltip = require('./Tooltip.js');
var AppSwitcherIcon = require('@bigbinary/neeto-icons/AppSwitcher');
var Typography = require('./Typography.js');
var jsxRuntime = require('react/jsx-runtime');
var Help = require('@bigbinary/neeto-icons/Help');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Book = require('@bigbinary/neeto-icons/Book');
var Keyboard = require('@bigbinary/neeto-icons/Keyboard');
var Gift = require('@bigbinary/neeto-icons/Gift');
var ChatEmpty = require('@bigbinary/neeto-icons/ChatEmpty');
var ramda = require('ramda');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var Avatar = require('./Avatar.js');
var logos = require('@bigbinary/neeto-icons/logos');
var reactRouterDom = require('react-router-dom');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('@bigbinary/neeto-cist');
require('qs');
require('./en-BfFI1Si2.js');
require('./index-D0rucYPS.js');
require('@babel/runtime/helpers/toConsumableArray');
require('dayjs');
require('dayjs/plugin/localeData');
require('dayjs/plugin/utc');
require('dayjs/plugin/weekday');
require('dayjs/plugin/weekOfYear');
require('i18next');
require('@tippyjs/react');
require('tippy.js');
require('@bigbinary/neeto-hotkeys');
require('./overlayManager.js');
require('./usePrefersReducedMotion-DIgi-Aj7.js');
require('avvvatars-react');
var FeaturedTooltip = function FeaturedTooltip(_ref) {
var label = _ref.label,
description = _ref.description;
return /*#__PURE__*/jsxRuntime.jsxs("div", {
className: "neeto-ui-flex neeto-ui-flex-col sidebar-featured-tooltip",
children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
className: "neeto-ui-text-center sidebar-featured-tooltip__title",
lineHeight: "tight",
style: "h5",
weight: "semibold",
children: label
}), description && /*#__PURE__*/jsxRuntime.jsx(Typography, {
className: "neeto-ui-text-center neeto-ui-text-gray-400 sidebar-featured-tooltip__description",
lineHeight: "normal",
style: "body3",
children: description
})]
});
};
var TOOLTIP_STYLES$1 = {
featured: "featured"
};
var NavIconWrapper = function NavIconWrapper(_ref) {
var tooltipStyle = _ref.tooltipStyle,
description = _ref.description,
icon = _ref.icon,
label = _ref.label,
children = _ref.children;
var tooltipContent = tooltipStyle === TOOLTIP_STYLES$1.featured ? /*#__PURE__*/jsxRuntime.jsx(FeaturedTooltip, {
description: description,
icon: icon,
label: label
}) : label;
return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
content: tooltipContent,
delay: [400, 40],
duration: [200, 200],
position: "right",
className: classnames({
"sidebar-featured-tooltip__content": tooltipStyle === TOOLTIP_STYLES$1.featured
}),
children: children
});
};
var AppSwitcher = function AppSwitcher(_ref) {
var tooltipStyle = _ref.tooltipStyle,
onAppSwitcherToggle = _ref.onAppSwitcherToggle;
return /*#__PURE__*/jsxRuntime.jsx(NavIconWrapper, {
tooltipStyle: tooltipStyle,
icon: /*#__PURE__*/jsxRuntime.jsx(AppSwitcherIcon, {}),
label: "Product switcher",
children: /*#__PURE__*/jsxRuntime.jsx("button", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-start neeto-ui-w-full neeto-ui-select-none neeto-ui-sidebar__link neeto-ui-sidebar__link--app-switcher neeto-ui-sidebar__link--button shadow-none",
"data-testid": "app-switcher-button",
onClick: onAppSwitcherToggle,
children: /*#__PURE__*/jsxRuntime.jsx("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon",
children: /*#__PURE__*/jsxRuntime.jsx(AppSwitcherIcon, {
size: 24
})
})
})
});
};
/* eslint-disable react/display-name */
var HelpSection = /*#__PURE__*/React.forwardRef(function (_, ref) {
return /*#__PURE__*/jsxRuntime.jsx("button", {
ref: ref,
className: "neeto-ui-sidebar__link neeto-ui-sidebar__link--button shadow-none",
"data-testid": "help-button",
children: /*#__PURE__*/jsxRuntime.jsx("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon",
children: /*#__PURE__*/jsxRuntime.jsx(Help, {
size: 24
})
})
});
});
HelpSection.displayName = "HelpSection";
var _excluded$2 = ["onClick", "label", "icon"];
function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var HelpLinkSection = function HelpLinkSection(_ref) {
var links = _ref.links;
return /*#__PURE__*/jsxRuntime.jsx("ul", {
children: links === null || links === void 0 ? void 0 : links.map(function (_ref2, idx) {
var _ref2$onClick = _ref2.onClick,
onClick = _ref2$onClick === void 0 ? index.noop : _ref2$onClick,
_ref2$label = _ref2.label,
label = _ref2$label === void 0 ? "" : _ref2$label,
_ref2$icon = _ref2.icon,
icon = _ref2$icon === void 0 ? null : _ref2$icon,
otherProps = _objectWithoutProperties(_ref2, _excluded$2);
var IconSVG = icon;
return /*#__PURE__*/jsxRuntime.jsx("li", {
className: "neeto-ui-help-sublist__item",
children: /*#__PURE__*/jsxRuntime.jsxs("button", _objectSpread$3(_objectSpread$3({
onClick: onClick,
className: "neeto-ui-help-sublist__item-btn"
}, otherProps), {}, {
children: [icon && /*#__PURE__*/jsxRuntime.jsx("span", {
className: "neeto-ui-help-sublist__item-btn-icon",
children: /*#__PURE__*/jsxRuntime.jsx(IconSVG, {})
}), /*#__PURE__*/jsxRuntime.jsx(Typography, {
className: "neeto-ui-help-sublist__item-btn-label",
component: "span",
style: "body2",
weight: "normal",
children: label
})]
}))
}, idx);
})
});
};
function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var HelpSectionTooltip = function HelpSectionTooltip(_ref) {
var helpSectionProps = _ref.helpSectionProps;
var documentationProps = helpSectionProps.documentationProps,
keyboardShortcutProps = helpSectionProps.keyboardShortcutProps,
liveChatProps = helpSectionProps.liveChatProps,
changelogProps = helpSectionProps.changelogProps;
var helpLinks = [documentationProps && _objectSpread$2(_objectSpread$2({}, documentationProps), {}, {
label: "Documentation",
icon: Book,
"data-testid": "help-link-documentation-button"
}), keyboardShortcutProps && _objectSpread$2(_objectSpread$2({}, keyboardShortcutProps), {}, {
label: "Keyboard shortcuts",
icon: Keyboard,
"data-testid": "help-link-keyboard-shortcut-button"
}), liveChatProps && _objectSpread$2(_objectSpread$2({}, liveChatProps), {}, {
label: "Chat with us",
icon: ChatEmpty,
"data-testid": "help-link-live-chat-button"
}), changelogProps && _objectSpread$2(_objectSpread$2({}, changelogProps), {}, {
label: "What's new?",
icon: Gift,
"data-testid": "help-link-changelog-button"
})].filter(Boolean);
return /*#__PURE__*/jsxRuntime.jsx(HelpLinkSection, {
links: ramda.values(helpLinks)
});
};
/* eslint-disable react/display-name */
var ProfileSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var profileInfo = _ref.profileInfo,
onClick = _ref.onClick;
var dataTestid = profileInfo["data-testid"] || "profile-section";
return /*#__PURE__*/jsxRuntime.jsx("button", {
onClick: onClick,
ref: ref,
className: "neeto-ui-w-full neeto-ui-text-left neeto-ui-sidebar__profile-wrapper",
"data-testid": dataTestid,
children: /*#__PURE__*/jsxRuntime.jsx("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-flex-shrink-0 neeto-ui-w-full neeto-ui-sidebar__profile",
children: /*#__PURE__*/jsxRuntime.jsx(Avatar, {
className: "neeto-ui-flex-shrink-0",
size: "large",
user: profileInfo
})
})
});
});
ProfileSection.displayName = "ProfileSection";
var _excluded$1 = ["onClick", "label", "icon"];
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var LinkSection = function LinkSection(_ref) {
var links = _ref.links;
return /*#__PURE__*/jsxRuntime.jsx("ul", {
className: "neeto-ui-profile-sublist",
children: links === null || links === void 0 ? void 0 : links.map(function (_ref2, idx) {
var onClick = _ref2.onClick,
label = _ref2.label,
_ref2$icon = _ref2.icon,
icon = _ref2$icon === void 0 ? null : _ref2$icon,
otherProps = _objectWithoutProperties(_ref2, _excluded$1);
var IconSVG = icon;
return /*#__PURE__*/jsxRuntime.jsx("li", {
className: "neeto-ui-profile-sublist__item",
children: /*#__PURE__*/jsxRuntime.jsxs("button", _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
onClick: onClick
}, otherProps)), {}, {
className: "neeto-ui-profile-sublist__item-btn",
children: [icon && /*#__PURE__*/jsxRuntime.jsx("span", {
className: "neeto-ui-profile-sublist__item-btn-icon",
children: /*#__PURE__*/jsxRuntime.jsx(IconSVG, {})
}), /*#__PURE__*/jsxRuntime.jsx(Typography, {
className: "neeto-ui-profile-sublist__item-btn-label",
component: "span",
style: "body2",
weight: "normal",
children: label
})]
}))
}, idx);
})
});
};
var truncate = function truncate(str, length) {
return str && str.length > length ? "".concat(str.substring(0, length - 3), "...") : str;
};
var ProfileSectionTooltip = function ProfileSectionTooltip(_ref) {
var profileInfo = _ref.profileInfo;
var name = profileInfo.name,
email = profileInfo.email,
topLinks = profileInfo.topLinks,
bottomLinks = profileInfo.bottomLinks,
customContent = profileInfo.customContent;
return /*#__PURE__*/jsxRuntime.jsxs("div", {
className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-profile-popup",
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
className: classnames("neeto-ui-relative neeto-ui-flex neeto-ui-items-center neeto-ui-p-3"),
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
className: "top-0 left-0",
children: /*#__PURE__*/jsxRuntime.jsx(Avatar, {
size: "large",
user: profileInfo
})
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-grow neeto-ui-min-w-0 neeto-ui-pl-3",
children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
className: "neeto-ui-m-0",
component: "h2",
lineHeight: "tight",
style: "h5",
title: name,
weight: "semibold",
children: truncate(name, 18)
}), email && /*#__PURE__*/jsxRuntime.jsx(Typography, {
className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-600",
lineHeight: "tight",
style: "body3",
children: email
})]
})]
}), /*#__PURE__*/jsxRuntime.jsx("div", {
className: "neeto-ui-sidebar__profile-wrapper-custom-content",
children: customContent
}), topLinks && /*#__PURE__*/jsxRuntime.jsx(LinkSection, {
links: topLinks
}), bottomLinks && /*#__PURE__*/jsxRuntime.jsx(LinkSection, {
links: bottomLinks
})]
});
};
var Footer = function Footer(_ref) {
var profileInfo = _ref.profileInfo,
tooltipStyle = _ref.tooltipStyle,
_ref$showAppSwitcher = _ref.showAppSwitcher,
showAppSwitcher = _ref$showAppSwitcher === void 0 ? false : _ref$showAppSwitcher,
onAppSwitcherToggle = _ref.onAppSwitcherToggle,
helpLinks = _ref.helpLinks;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
isProfileDropdownOpen = _useState2[0],
setIsProfileDropdownOpen = _useState2[1];
return /*#__PURE__*/jsxRuntime.jsxs("div", {
className: "neeto-ui-sidebar__footer",
children: [helpLinks && /*#__PURE__*/jsxRuntime.jsx("div", {
children: /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
interactive: true,
className: "neeto-ui-help-popup-wrapper",
content: /*#__PURE__*/jsxRuntime.jsx(HelpSectionTooltip, {
helpSectionProps: helpLinks
}),
hideOnClick: false,
position: "right",
theme: "light",
children: /*#__PURE__*/jsxRuntime.jsx(HelpSection, {})
})
}), showAppSwitcher && /*#__PURE__*/jsxRuntime.jsx(AppSwitcher, {
onAppSwitcherToggle: onAppSwitcherToggle,
tooltipStyle: tooltipStyle
}), profileInfo && /*#__PURE__*/jsxRuntime.jsx("div", {
children: /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
interactive: true,
className: "neeto-ui-profile-popup-wrapper",
content: /*#__PURE__*/jsxRuntime.jsx(ProfileSectionTooltip, {
profileInfo: profileInfo
}),
hideOnClick: false,
position: "right",
theme: "light",
children: /*#__PURE__*/jsxRuntime.jsx(ProfileSection, {
profileInfo: profileInfo,
onClick: function onClick() {
setIsProfileDropdownOpen(!isProfileDropdownOpen);
}
})
})
})]
});
};
var Header = function Header(_ref) {
var organizationInfo = _ref.organizationInfo;
var LogoSVG = organizationInfo === null || organizationInfo === void 0 ? void 0 : organizationInfo.logo;
return /*#__PURE__*/jsxRuntime.jsx("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-sidebar__header",
"data-testid": "sidebar-info",
children: /*#__PURE__*/jsxRuntime.jsx("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-flex-shrink-0 neeto-ui-sidebar__logo",
children: LogoSVG || /*#__PURE__*/jsxRuntime.jsx(logos.Neeto, {})
})
});
};
var _excluded = ["label", "to", "icon", "description"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Links = function Links(_ref) {
var _ref$navLinks = _ref.navLinks,
navLinks = _ref$navLinks === void 0 ? [] : _ref$navLinks,
tooltipStyle = _ref.tooltipStyle;
var location = reactRouterDom.useLocation();
return /*#__PURE__*/jsxRuntime.jsx("div", {
className: "neeto-ui-sidebar__links",
children: navLinks.map(function (_ref2, mainIndex) {
var label = _ref2.label,
to = _ref2.to,
icon = _ref2.icon,
description = _ref2.description,
otherProps = _objectWithoutProperties(_ref2, _excluded);
var IconSVG = icon;
var url = new URL(to, window.location.href);
var _isActive = location.pathname.startsWith(url.pathname);
return /*#__PURE__*/React.createElement(NavIconWrapper, {
description: description,
label: label,
tooltipStyle: tooltipStyle,
icon: /*#__PURE__*/jsxRuntime.jsx(IconSVG, {
color: "#68737D"
}),
key: mainIndex
}, /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.NavLink, _objectSpread(_objectSpread({
to: to,
activeClassName: "active",
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none neeto-ui-sidebar__link",
isActive: function isActive() {
return _isActive;
}
}, otherProps), {}, {
children: icon && /*#__PURE__*/jsxRuntime.jsx("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon",
"data-testid": label,
children: /*#__PURE__*/jsxRuntime.jsx(IconSVG, {})
})
})));
})
});
};
var TOOLTIP_STYLES = {
featured: "featured"
};
var Sidebar = function Sidebar(_ref) {
var organizationInfo = _ref.organizationInfo,
_ref$navLinks = _ref.navLinks,
navLinks = _ref$navLinks === void 0 ? [] : _ref$navLinks,
_ref$tooltipStyle = _ref.tooltipStyle,
tooltipStyle = _ref$tooltipStyle === void 0 ? TOOLTIP_STYLES.featured : _ref$tooltipStyle,
profileInfo = _ref.profileInfo,
helpLinks = _ref.helpLinks,
_ref$showAppSwitcher = _ref.showAppSwitcher,
showAppSwitcher = _ref$showAppSwitcher === void 0 ? false : _ref$showAppSwitcher,
_ref$onAppSwitcherTog = _ref.onAppSwitcherToggle,
onAppSwitcherToggle = _ref$onAppSwitcherTog === void 0 ? index.noop : _ref$onAppSwitcherTog;
return /*#__PURE__*/jsxRuntime.jsxs("div", {
"data-testid": "sidebar-wrapper",
className: classnames("neeto-ui-sidebar neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-shrink-0 neeto-ui-overflow-y-auto neeto-ui-overflow-x-hidden", "neeto-ui-sidebar--collapsed"),
children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
organizationInfo: organizationInfo
}), /*#__PURE__*/jsxRuntime.jsx(Links, {
navLinks: navLinks,
tooltipStyle: tooltipStyle
}), /*#__PURE__*/jsxRuntime.jsx(Footer, {
helpLinks: helpLinks,
onAppSwitcherToggle: onAppSwitcherToggle,
profileInfo: profileInfo,
showAppSwitcher: showAppSwitcher,
tooltipStyle: tooltipStyle
})]
});
};
module.exports = Sidebar;
//# sourceMappingURL=Sidebar.js.map