@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
440 lines (423 loc) • 19.2 kB
JavaScript
import { forwardRef, useState, createElement } from 'react';
import classnames from 'classnames';
import { n as noop } from './index-DzZtLRHp.js';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import Tooltip from './Tooltip.js';
import AppSwitcherIcon from '@bigbinary/neeto-icons/AppSwitcher';
import Typography from './Typography.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import Help from '@bigbinary/neeto-icons/Help';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import Book from '@bigbinary/neeto-icons/Book';
import Keyboard from '@bigbinary/neeto-icons/Keyboard';
import Gift from '@bigbinary/neeto-icons/Gift';
import ChatEmpty from '@bigbinary/neeto-icons/ChatEmpty';
import { values } from 'ramda';
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-DVlE9xuu.js';
import './index-DyUNP5G9.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 'i18next';
import '@tippyjs/react';
import 'tippy.js';
import '@bigbinary/neeto-hotkeys';
import './overlayManager.js';
import './usePrefersReducedMotion-n4ZJtExQ.js';
import 'avvvatars-react';
var FeaturedTooltip = function FeaturedTooltip(_ref) {
var label = _ref.label,
description = _ref.description;
return /*#__PURE__*/jsxs("div", {
className: "neeto-ui-flex neeto-ui-flex-col sidebar-featured-tooltip",
children: [/*#__PURE__*/jsx(Typography, {
className: "neeto-ui-text-center sidebar-featured-tooltip__title",
lineHeight: "tight",
style: "h5",
weight: "semibold",
children: label
}), description && /*#__PURE__*/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__*/jsx(FeaturedTooltip, {
description: description,
icon: icon,
label: label
}) : label;
return /*#__PURE__*/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__*/jsx(NavIconWrapper, {
tooltipStyle: tooltipStyle,
icon: /*#__PURE__*/jsx(AppSwitcherIcon, {}),
label: "Product switcher",
children: /*#__PURE__*/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__*/jsx("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon",
children: /*#__PURE__*/jsx(AppSwitcherIcon, {
size: 24
})
})
})
});
};
/* eslint-disable react/display-name */
var HelpSection = /*#__PURE__*/forwardRef(function (_, ref) {
return /*#__PURE__*/jsx("button", {
ref: ref,
className: "neeto-ui-sidebar__link neeto-ui-sidebar__link--button shadow-none",
"data-testid": "help-button",
children: /*#__PURE__*/jsx("span", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon",
children: /*#__PURE__*/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__*/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 ? 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__*/jsx("li", {
className: "neeto-ui-help-sublist__item",
children: /*#__PURE__*/jsxs("button", _objectSpread$3(_objectSpread$3({
onClick: onClick,
className: "neeto-ui-help-sublist__item-btn"
}, otherProps), {}, {
children: [icon && /*#__PURE__*/jsx("span", {
className: "neeto-ui-help-sublist__item-btn-icon",
children: /*#__PURE__*/jsx(IconSVG, {})
}), /*#__PURE__*/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__*/jsx(HelpLinkSection, {
links: values(helpLinks)
});
};
/* eslint-disable react/display-name */
var ProfileSection = /*#__PURE__*/forwardRef(function (_ref, ref) {
var profileInfo = _ref.profileInfo,
onClick = _ref.onClick;
var dataTestid = profileInfo["data-testid"] || "profile-section";
return /*#__PURE__*/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__*/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__*/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__*/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__*/jsx("li", {
className: "neeto-ui-profile-sublist__item",
children: /*#__PURE__*/jsxs("button", _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
onClick: onClick
}, otherProps)), {}, {
className: "neeto-ui-profile-sublist__item-btn",
children: [icon && /*#__PURE__*/jsx("span", {
className: "neeto-ui-profile-sublist__item-btn-icon",
children: /*#__PURE__*/jsx(IconSVG, {})
}), /*#__PURE__*/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__*/jsxs("div", {
className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-profile-popup",
children: [/*#__PURE__*/jsxs("div", {
className: classnames("neeto-ui-relative neeto-ui-flex neeto-ui-items-center neeto-ui-p-3"),
children: [/*#__PURE__*/jsx("div", {
className: "top-0 left-0",
children: /*#__PURE__*/jsx(Avatar, {
size: "large",
user: profileInfo
})
}), /*#__PURE__*/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__*/jsx(Typography, {
className: "neeto-ui-m-0",
component: "h2",
lineHeight: "tight",
style: "h5",
title: name,
weight: "semibold",
children: truncate(name, 18)
}), email && /*#__PURE__*/jsx(Typography, {
className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-600",
lineHeight: "tight",
style: "body3",
children: email
})]
})]
}), /*#__PURE__*/jsx("div", {
className: "neeto-ui-sidebar__profile-wrapper-custom-content",
children: customContent
}), topLinks && /*#__PURE__*/jsx(LinkSection, {
links: topLinks
}), bottomLinks && /*#__PURE__*/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 = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isProfileDropdownOpen = _useState2[0],
setIsProfileDropdownOpen = _useState2[1];
return /*#__PURE__*/jsxs("div", {
className: "neeto-ui-sidebar__footer",
children: [helpLinks && /*#__PURE__*/jsx("div", {
children: /*#__PURE__*/jsx(Tooltip, {
interactive: true,
className: "neeto-ui-help-popup-wrapper",
content: /*#__PURE__*/jsx(HelpSectionTooltip, {
helpSectionProps: helpLinks
}),
hideOnClick: false,
position: "right",
theme: "light",
children: /*#__PURE__*/jsx(HelpSection, {})
})
}), showAppSwitcher && /*#__PURE__*/jsx(AppSwitcher, {
onAppSwitcherToggle: onAppSwitcherToggle,
tooltipStyle: tooltipStyle
}), profileInfo && /*#__PURE__*/jsx("div", {
children: /*#__PURE__*/jsx(Tooltip, {
interactive: true,
className: "neeto-ui-profile-popup-wrapper",
content: /*#__PURE__*/jsx(ProfileSectionTooltip, {
profileInfo: profileInfo
}),
hideOnClick: false,
position: "right",
theme: "light",
children: /*#__PURE__*/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__*/jsx("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-sidebar__header",
"data-testid": "sidebar-info",
children: /*#__PURE__*/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__*/jsx(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 = useLocation();
return /*#__PURE__*/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__*/createElement(NavIconWrapper, {
description: description,
label: label,
tooltipStyle: tooltipStyle,
icon: /*#__PURE__*/jsx(IconSVG, {
color: "#68737D"
}),
key: mainIndex
}, /*#__PURE__*/jsx(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__*/jsx("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-sidebar__link-icon",
"data-testid": label,
children: /*#__PURE__*/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 ? noop : _ref$onAppSwitcherTog;
return /*#__PURE__*/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__*/jsx(Header, {
organizationInfo: organizationInfo
}), /*#__PURE__*/jsx(Links, {
navLinks: navLinks,
tooltipStyle: tooltipStyle
}), /*#__PURE__*/jsx(Footer, {
helpLinks: helpLinks,
onAppSwitcherToggle: onAppSwitcherToggle,
profileInfo: profileInfo,
showAppSwitcher: showAppSwitcher,
tooltipStyle: tooltipStyle
})]
});
};
export { Sidebar as default };
//# sourceMappingURL=Sidebar.js.map