@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
389 lines (371 loc) • 17.5 kB
JavaScript
;
var React = require('react');
var classnames = require('classnames');
var index = require('./index--BeRLo6L.js');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var Tooltip = require('./Tooltip.js');
var neetoIcons = require('@bigbinary/neeto-icons');
var Typography = require('./Typography.js');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var ramda = require('ramda');
var _extends = require('@babel/runtime/helpers/extends');
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-K2ZIAV2F.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('@tippyjs/react');
require('tippy.js');
require('avvvatars-react');
var FeaturedTooltip = function FeaturedTooltip(_ref) {
var label = _ref.label,
description = _ref.description;
return /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-flex neeto-ui-flex-col sidebar-featured-tooltip"
}, /*#__PURE__*/React.createElement(Typography, {
className: "neeto-ui-text-center sidebar-featured-tooltip__title",
lineHeight: "tight",
style: "h5",
weight: "semibold"
}, label), description && /*#__PURE__*/React.createElement(Typography, {
className: "neeto-ui-text-center neeto-ui-text-gray-400 sidebar-featured-tooltip__description",
lineHeight: "normal",
style: "body3"
}, description));
};
var TOOLTIP_STYLES$1 = {
"default": "default",
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__*/React.createElement(FeaturedTooltip, {
description: description,
icon: icon,
label: label
}) : label;
return /*#__PURE__*/React.createElement(Tooltip, {
content: tooltipContent,
delay: [400, 40],
duration: [200, 200],
position: "right",
className: classnames({
"sidebar-featured-tooltip__content": tooltipStyle === TOOLTIP_STYLES$1.featured
})
}, children);
};
var AppSwitcher = function AppSwitcher(_ref) {
var tooltipStyle = _ref.tooltipStyle,
onAppSwitcherToggle = _ref.onAppSwitcherToggle;
return /*#__PURE__*/React.createElement(NavIconWrapper, {
tooltipStyle: tooltipStyle,
icon: /*#__PURE__*/React.createElement(neetoIcons.AppSwitcher, null),
label: "Product switcher"
}, /*#__PURE__*/React.createElement("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-cy": "app-switcher-button",
onClick: onAppSwitcherToggle
}, /*#__PURE__*/React.createElement("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon"
}, /*#__PURE__*/React.createElement(neetoIcons.AppSwitcher, {
size: 24
}))));
};
/* eslint-disable react/display-name */
var HelpSection = /*#__PURE__*/React.forwardRef(function (_, ref) {
return /*#__PURE__*/React.createElement("button", {
ref: ref,
className: "neeto-ui-sidebar__link neeto-ui-sidebar__link--button shadow-none",
"data-cy": "help-button"
}, /*#__PURE__*/React.createElement("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon"
}, /*#__PURE__*/React.createElement(neetoIcons.Help, {
size: 24
})));
});
HelpSection.displayName = "HelpSection";
var _excluded$2 = ["onClick", "label", "icon"];
var HelpLinkSection = function HelpLinkSection(_ref) {
var links = _ref.links;
return /*#__PURE__*/React.createElement("ul", null, 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__*/React.createElement("li", {
className: "neeto-ui-help-sublist__item",
key: idx
}, /*#__PURE__*/React.createElement("button", _extends({
onClick: onClick,
className: "neeto-ui-help-sublist__item-btn"
}, otherProps), icon && /*#__PURE__*/React.createElement("span", {
className: "neeto-ui-help-sublist__item-btn-icon"
}, /*#__PURE__*/React.createElement(IconSVG, null)), /*#__PURE__*/React.createElement(Typography, {
className: "neeto-ui-help-sublist__item-btn-label",
component: "span",
style: "body2",
weight: "normal"
}, label)));
}));
};
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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$1(_objectSpread$1({}, documentationProps), {}, {
label: "Documentation",
icon: neetoIcons.Book,
"data-cy": "help-link-documentation-button"
}), keyboardShortcutProps && _objectSpread$1(_objectSpread$1({}, keyboardShortcutProps), {}, {
label: "Keyboard shortcuts",
icon: neetoIcons.Keyboard,
"data-cy": "help-link-keyboard-shortcut-button"
}), liveChatProps && _objectSpread$1(_objectSpread$1({}, liveChatProps), {}, {
label: "Chat with us",
icon: neetoIcons.ChatEmpty,
"data-cy": "help-link-live-chat-button"
}), changelogProps && _objectSpread$1(_objectSpread$1({}, changelogProps), {}, {
label: "What's new?",
icon: neetoIcons.Gift,
"data-cy": "help-link-changelog-button"
})].filter(Boolean);
return /*#__PURE__*/React.createElement(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 dataCy = profileInfo["data-cy"] || "profile-section";
return /*#__PURE__*/React.createElement("button", {
onClick: onClick,
ref: ref,
className: "neeto-ui-w-full neeto-ui-text-left neeto-ui-sidebar__profile-wrapper",
"data-cy": dataCy
}, /*#__PURE__*/React.createElement("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-flex-shrink-0 neeto-ui-w-full neeto-ui-sidebar__profile"
}, /*#__PURE__*/React.createElement(Avatar, {
className: "neeto-ui-flex-shrink-0",
size: "large",
user: profileInfo
})));
});
ProfileSection.displayName = "ProfileSection";
var _excluded$1 = ["onClick", "label", "icon"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var LinkSection = function LinkSection(_ref) {
var links = _ref.links;
return /*#__PURE__*/React.createElement("ul", {
className: "neeto-ui-profile-sublist"
}, 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__*/React.createElement("li", {
className: "neeto-ui-profile-sublist__item",
key: idx
}, /*#__PURE__*/React.createElement("button", _extends({}, _objectSpread({
onClick: onClick
}, otherProps), {
className: "neeto-ui-profile-sublist__item-btn"
}), icon && /*#__PURE__*/React.createElement("span", {
className: "neeto-ui-profile-sublist__item-btn-icon"
}, /*#__PURE__*/React.createElement(IconSVG, null)), /*#__PURE__*/React.createElement(Typography, {
className: "neeto-ui-profile-sublist__item-btn-label",
component: "span",
style: "body2",
weight: "normal"
}, label)));
}));
};
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__*/React.createElement("div", {
className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-profile-popup"
}, /*#__PURE__*/React.createElement("div", {
className: classnames("neeto-ui-relative neeto-ui-flex neeto-ui-items-center neeto-ui-p-3")
}, /*#__PURE__*/React.createElement("div", {
className: "top-0 left-0"
}, /*#__PURE__*/React.createElement(Avatar, {
size: "large",
user: profileInfo
})), /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-grow neeto-ui-min-w-0 neeto-ui-pl-3"
}, /*#__PURE__*/React.createElement(Typography, {
className: "neeto-ui-m-0",
component: "h2",
lineHeight: "tight",
style: "h5",
title: name,
weight: "semibold"
}, truncate(name, 18)), email && /*#__PURE__*/React.createElement(Typography, {
className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-600",
lineHeight: "tight",
style: "body3"
}, email))), /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-sidebar__profile-wrapper-custom-content"
}, customContent), topLinks && /*#__PURE__*/React.createElement(LinkSection, {
links: topLinks
}), bottomLinks && /*#__PURE__*/React.createElement(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__*/React.createElement("div", {
className: "neeto-ui-sidebar__footer"
}, helpLinks && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
interactive: true,
className: "neeto-ui-help-popup-wrapper",
content: /*#__PURE__*/React.createElement(HelpSectionTooltip, {
helpSectionProps: helpLinks
}),
hideOnClick: false,
position: "right",
theme: "light"
}, /*#__PURE__*/React.createElement(HelpSection, null))), showAppSwitcher && /*#__PURE__*/React.createElement(AppSwitcher, {
onAppSwitcherToggle: onAppSwitcherToggle,
tooltipStyle: tooltipStyle
}), profileInfo && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
interactive: true,
className: "neeto-ui-profile-popup-wrapper",
content: /*#__PURE__*/React.createElement(ProfileSectionTooltip, {
profileInfo: profileInfo
}),
hideOnClick: false,
position: "right",
theme: "light"
}, /*#__PURE__*/React.createElement(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__*/React.createElement("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-sidebar__header",
"data-cy": "sidebar-info"
}, /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-flex-shrink-0 neeto-ui-sidebar__logo"
}, LogoSVG || /*#__PURE__*/React.createElement(logos.Neeto, null)));
};
var _excluded = ["label", "to", "icon", "description"];
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__*/React.createElement("div", {
className: "neeto-ui-sidebar__links"
}, 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__*/React.createElement(IconSVG, {
color: "#68737D"
}),
key: mainIndex
}, /*#__PURE__*/React.createElement(reactRouterDom.NavLink, _extends({
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), icon && /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon",
"data-testid": label
}, /*#__PURE__*/React.createElement(IconSVG, null))));
}));
};
var TOOLTIP_STYLES = {
"default": "default",
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__*/React.createElement("div", {
"data-cy": "sidebar-wrapper",
"data-testid": "sidebar",
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")
}, /*#__PURE__*/React.createElement(Header, {
organizationInfo: organizationInfo
}), /*#__PURE__*/React.createElement(Links, {
navLinks: navLinks,
tooltipStyle: tooltipStyle
}), /*#__PURE__*/React.createElement(Footer, {
helpLinks: helpLinks,
onAppSwitcherToggle: onAppSwitcherToggle,
profileInfo: profileInfo,
showAppSwitcher: showAppSwitcher,
tooltipStyle: tooltipStyle
}));
};
module.exports = Sidebar;
//# sourceMappingURL=Sidebar.js.map