@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
387 lines (370 loc) • 18 kB
JavaScript
import React__default, { forwardRef, useState } from 'react';
import classnames from 'classnames';
import { n as noop } from './index-Dxaw6gl9.js';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import Tooltip from './Tooltip.js';
import { AppSwitcher as AppSwitcher$1, Help, Book, Keyboard, ChatEmpty, Gift } from '@bigbinary/neeto-icons';
import Typography from './Typography.js';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { values } from 'ramda';
import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import Avatar from './Avatar.js';
import { Neeto } from '@bigbinary/neeto-icons/logos';
import { useLocation, NavLink } from 'react-router-dom';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@bigbinary/neeto-cist';
import 'qs';
import './en-CIkXIYyl.js';
import '@babel/runtime/helpers/toConsumableArray';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';
import '@tippyjs/react';
import 'tippy.js';
import 'avvvatars-react';
var FeaturedTooltip = function FeaturedTooltip(_ref) {
var label = _ref.label,
description = _ref.description;
return /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-flex neeto-ui-flex-col sidebar-featured-tooltip"
}, /*#__PURE__*/React__default.createElement(Typography, {
className: "neeto-ui-text-center sidebar-featured-tooltip__title",
lineHeight: "tight",
style: "h5",
weight: "semibold"
}, label), description && /*#__PURE__*/React__default.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__default.createElement(FeaturedTooltip, {
description: description,
icon: icon,
label: label
}) : label;
return /*#__PURE__*/React__default.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__default.createElement(NavIconWrapper, {
tooltipStyle: tooltipStyle,
icon: /*#__PURE__*/React__default.createElement(AppSwitcher$1, null),
label: "Product switcher"
}, /*#__PURE__*/React__default.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__default.createElement("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon"
}, /*#__PURE__*/React__default.createElement(AppSwitcher$1, {
size: 24
}))));
};
/* eslint-disable react/display-name */
var HelpSection = /*#__PURE__*/forwardRef(function (_, ref) {
return /*#__PURE__*/React__default.createElement("button", {
ref: ref,
className: "neeto-ui-sidebar__link neeto-ui-sidebar__link--button shadow-none",
"data-cy": "help-button"
}, /*#__PURE__*/React__default.createElement("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon"
}, /*#__PURE__*/React__default.createElement(Help, {
size: 24
})));
});
HelpSection.displayName = "HelpSection";
var _excluded$2 = ["onClick", "label", "icon"];
var HelpLinkSection = function HelpLinkSection(_ref) {
var links = _ref.links;
return /*#__PURE__*/React__default.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 ? 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__default.createElement("li", {
className: "neeto-ui-help-sublist__item",
key: idx
}, /*#__PURE__*/React__default.createElement("button", _extends({
onClick: onClick,
className: "neeto-ui-help-sublist__item-btn"
}, otherProps), icon && /*#__PURE__*/React__default.createElement("span", {
className: "neeto-ui-help-sublist__item-btn-icon"
}, /*#__PURE__*/React__default.createElement(IconSVG, null)), /*#__PURE__*/React__default.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: Book,
"data-cy": "help-link-documentation-button"
}), keyboardShortcutProps && _objectSpread$1(_objectSpread$1({}, keyboardShortcutProps), {}, {
label: "Keyboard shortcuts",
icon: Keyboard,
"data-cy": "help-link-keyboard-shortcut-button"
}), liveChatProps && _objectSpread$1(_objectSpread$1({}, liveChatProps), {}, {
label: "Chat with us",
icon: ChatEmpty,
"data-cy": "help-link-live-chat-button"
}), changelogProps && _objectSpread$1(_objectSpread$1({}, changelogProps), {}, {
label: "What's new?",
icon: Gift,
"data-cy": "help-link-changelog-button"
})].filter(Boolean);
return /*#__PURE__*/React__default.createElement(HelpLinkSection, {
links: values(helpLinks)
});
};
/* eslint-disable react/display-name */
var ProfileSection = /*#__PURE__*/forwardRef(function (_ref, ref) {
var profileInfo = _ref.profileInfo,
onClick = _ref.onClick;
var dataCy = profileInfo["data-cy"] || "profile-section";
return /*#__PURE__*/React__default.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__default.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__default.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__default.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__default.createElement("li", {
className: "neeto-ui-profile-sublist__item",
key: idx
}, /*#__PURE__*/React__default.createElement("button", _extends({}, _objectSpread({
onClick: onClick
}, otherProps), {
className: "neeto-ui-profile-sublist__item-btn"
}), icon && /*#__PURE__*/React__default.createElement("span", {
className: "neeto-ui-profile-sublist__item-btn-icon"
}, /*#__PURE__*/React__default.createElement(IconSVG, null)), /*#__PURE__*/React__default.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__default.createElement("div", {
className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-profile-popup"
}, /*#__PURE__*/React__default.createElement("div", {
className: classnames("neeto-ui-relative neeto-ui-flex neeto-ui-items-center neeto-ui-p-3")
}, /*#__PURE__*/React__default.createElement("div", {
className: "top-0 left-0"
}, /*#__PURE__*/React__default.createElement(Avatar, {
size: "large",
user: profileInfo
})), /*#__PURE__*/React__default.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__default.createElement(Typography, {
className: "neeto-ui-m-0",
component: "h2",
lineHeight: "tight",
style: "h5",
title: name,
weight: "semibold"
}, truncate(name, 18)), email && /*#__PURE__*/React__default.createElement(Typography, {
className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-600",
lineHeight: "tight",
style: "body3"
}, email))), /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-sidebar__profile-wrapper-custom-content"
}, customContent), topLinks && /*#__PURE__*/React__default.createElement(LinkSection, {
links: topLinks
}), bottomLinks && /*#__PURE__*/React__default.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 = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isProfileDropdownOpen = _useState2[0],
setIsProfileDropdownOpen = _useState2[1];
return /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-sidebar__footer"
}, helpLinks && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Tooltip, {
interactive: true,
className: "neeto-ui-help-popup-wrapper",
content: /*#__PURE__*/React__default.createElement(HelpSectionTooltip, {
helpSectionProps: helpLinks
}),
hideOnClick: false,
position: "right",
theme: "light"
}, /*#__PURE__*/React__default.createElement(HelpSection, null))), showAppSwitcher && /*#__PURE__*/React__default.createElement(AppSwitcher, {
onAppSwitcherToggle: onAppSwitcherToggle,
tooltipStyle: tooltipStyle
}), profileInfo && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Tooltip, {
interactive: true,
className: "neeto-ui-profile-popup-wrapper",
content: /*#__PURE__*/React__default.createElement(ProfileSectionTooltip, {
profileInfo: profileInfo
}),
hideOnClick: false,
position: "right",
theme: "light"
}, /*#__PURE__*/React__default.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__default.createElement("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-sidebar__header",
"data-cy": "sidebar-info"
}, /*#__PURE__*/React__default.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__default.createElement(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 = useLocation();
return /*#__PURE__*/React__default.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__default.createElement(NavIconWrapper, {
description: description,
label: label,
tooltipStyle: tooltipStyle,
icon: /*#__PURE__*/React__default.createElement(IconSVG, {
color: "#68737D"
}),
key: mainIndex
}, /*#__PURE__*/React__default.createElement(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__default.createElement("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon",
"data-testid": label
}, /*#__PURE__*/React__default.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 ? noop : _ref$onAppSwitcherTog;
return /*#__PURE__*/React__default.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__default.createElement(Header, {
organizationInfo: organizationInfo
}), /*#__PURE__*/React__default.createElement(Links, {
navLinks: navLinks,
tooltipStyle: tooltipStyle
}), /*#__PURE__*/React__default.createElement(Footer, {
helpLinks: helpLinks,
onAppSwitcherToggle: onAppSwitcherToggle,
profileInfo: profileInfo,
showAppSwitcher: showAppSwitcher,
tooltipStyle: tooltipStyle
}));
};
export { Sidebar as default };
//# sourceMappingURL=Sidebar.js.map