@activecollab/components
Version:
ActiveCollab Components
304 lines (290 loc) • 18.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledPagePaper = exports.PresentationShell = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _MainLogo = require("./MainLogo");
var _tokens = require("./tokens");
var _IconButton = require("../../components/IconButton");
var _Icons = require("../../components/Icons");
var _Modal = require("../../components/Modal");
var _Paper = require("../../components/Paper");
var _Tooltip = require("../../components/Tooltip");
var _Typography = require("../../components/Typography");
var _utils = require("../../utils");
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 _interopRequireWildcard(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 (var _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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
var MENU_ITEMS = [{
icon: _Icons.RocketIcon,
text: "Getting Started"
}, {
icon: _Icons.ProjectsIcon,
text: "Projects",
active: true
}, {
icon: _Icons.MyWorkIcon,
text: "My Work"
}, {
icon: _Icons.ActivityIcon,
text: "Activity"
}, {
icon: _Icons.CalendarIcon,
text: "Calendar"
}, {
icon: _Icons.PeopleIcon,
text: "People"
}, {
icon: _Icons.ReportTimeIcon,
text: "Time"
}, {
icon: _Icons.ReportsIcon,
text: "Reports"
}, {
icon: _Icons.InvoicesIcon,
text: "Invoices"
}, {
icon: _Icons.EstimatesIcon,
text: "Estimates"
}];
/* ------------------------------------------------------------------ */
/* Layout shell (mirrors Layout.js) */
/* ------------------------------------------------------------------ */
var StyledLayout = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledLayout",
componentId: "sc-12j90o1-0"
})(["height:100vh;display:flex;flex-direction:column;background-color:var(--body-bg-main);"]);
var StyledContentRow = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledContentRow",
componentId: "sc-12j90o1-1"
})(["position:relative;display:flex;flex-direction:row-reverse;flex:1 1 0%;flex-grow:1;overflow-y:auto;"]);
var StyledRightWindow = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledRightWindow",
componentId: "sc-12j90o1-2"
})(["position:relative;display:flex;flex-direction:column;flex:1 1 0%;flex-grow:1;width:100%;height:100%;overflow-y:auto;padding:0 16px;@media (min-width:", "){padding-right:32px;}"], _tokens.SM);
/* ------------------------------------------------------------------ */
/* Main menu (mirrors MainMenu.js + MainMenu.less) */
/* ------------------------------------------------------------------ */
var StyledMainMenu = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledMainMenu",
componentId: "sc-12j90o1-3"
})(["position:relative;z-index:1;display:none;flex-direction:column;height:100%;margin-right:4px;flex-shrink:0;width:240px;transition:width ", ";@media (min-width:", "){display:flex;}&.collapsed{width:72px;}.menu-item-text,.menu-section,#logotype{transition:all ", ";}&.collapsed .menu-item-text{opacity:0;visibility:hidden;width:0;margin-left:0;}&.collapsed .menu-section{transform:scaleY(0);opacity:0;max-height:0;margin-bottom:0;}&.collapsed #logotype{transform:translateX(-5%);opacity:0;}&.collapsed .collapse-expand-menu svg{transform:rotate(180deg);}&:not(.mobile){@media (max-width:1279.98px){width:72px;.menu-item-text{opacity:0;visibility:hidden;width:0;margin-left:0;}.menu-section{transform:scaleY(0);opacity:0;max-height:0;margin-bottom:0;}#logotype{transform:translateX(-5%);opacity:0;}}}&.mobile{display:flex;position:absolute;left:0;top:0;width:240px;background-color:var(--page-paper-main);}"], _tokens.TRANSITION, _tokens.SM, _tokens.TRANSITION);
var StyledMenuHeader = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledMenuHeader",
componentId: "sc-12j90o1-4"
})(["position:relative;height:68px;display:flex;align-items:center;flex-shrink:0;overflow:hidden;.main-logo{position:absolute;left:20px;color:var(--color-secondary);path{fill:var(--color-secondary);}}.collapse-expand-menu{position:absolute;right:4px;display:none;@media (min-width:", "){display:flex;}}"], _tokens.XL);
var StyledMenuScroll = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledMenuScroll",
componentId: "sc-12j90o1-5"
})(["display:flex;flex-direction:column;flex-grow:1;min-height:0;margin:12px 0;overflow-y:auto;overflow-x:hidden;"]);
var StyledMenuSection = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledMenuSection",
componentId: "sc-12j90o1-6"
})(["display:flex;align-items:center;margin:0 12px 8px;padding:0 4px 0 12px;"]);
var StyledMenuItem = _styledComponents.default.a.withConfig({
displayName: "PresentationShell__StyledMenuItem",
componentId: "sc-12j90o1-7"
})(["display:flex;align-items:center;height:40px;padding:0 4px 0 12px;margin:0 12px 2px;border-radius:8px;cursor:pointer;text-decoration:none;svg{flex-shrink:0;fill:var(--color-theme-700);opacity:0.7;}.menu-item-text{margin-left:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;}&:hover{transition:all ", ";background-color:var(--color-theme-300);svg{fill:var(--color-theme-900);opacity:1;}.menu-item-text{color:var(--color-theme-900);}}&.active{background-color:var(--color-secondary-200);svg{fill:var(--color-secondary);opacity:1;}.menu-item-text{color:var(--color-secondary);}}"], _tokens.TRANSITION);
var StyledMobileMenuClose = (0, _styledComponents.default)(_IconButton.IconButton).withConfig({
displayName: "PresentationShell__StyledMobileMenuClose",
componentId: "sc-12j90o1-8"
})(["position:absolute;right:16px;"]);
/* ------------------------------------------------------------------ */
/* Top bars */
/* ------------------------------------------------------------------ */
var StyledMobileMenuHeader = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledMobileMenuHeader",
componentId: "sc-12j90o1-9"
})(["display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background-color:var(--color-primary);z-index:50;@media (min-width:", "){display:none;}.mobile-menu-icon{fill:var(--color-theme-300);}"], _tokens.SM);
var StyledIconRow = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledIconRow",
componentId: "sc-12j90o1-10"
})(["display:flex;align-items:center;"]);
var StyledTopRightControls = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledTopRightControls",
componentId: "sc-12j90o1-11"
})(["position:absolute;top:0;right:0;display:none;align-items:center;justify-content:flex-end;padding:12px 32px 12px 0;@media (min-width:", "){display:flex;}"], _tokens.SM);
var StyledHeaderAvatar = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledHeaderAvatar",
componentId: "sc-12j90o1-12"
})(["width:28px;height:28px;border-radius:50%;background-color:var(--color-secondary);color:var(--only-white);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;margin:0 8px;flex-shrink:0;cursor:pointer;", " &{color:var(--page-paper-main);}"], _utils.DARK_THEME_SELECTOR);
/* ------------------------------------------------------------------ */
/* Page region (mirrors Page.jsx / PageBody.jsx) */
/* ------------------------------------------------------------------ */
var StyledPage = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledPage",
componentId: "sc-12j90o1-13"
})(["display:flex;flex-direction:column;flex-grow:1;"]);
var StyledPageBody = _styledComponents.default.div.withConfig({
displayName: "PresentationShell__StyledPageBody",
componentId: "sc-12j90o1-14"
})(["display:flex;flex-direction:column;flex-grow:1;margin-bottom:32px;min-height:0;"]);
/** The paper card that holds page content (used by list view & empty pages). */
var StyledPagePaper = exports.StyledPagePaper = (0, _styledComponents.default)(_Paper.Paper).withConfig({
displayName: "PresentationShell__StyledPagePaper",
componentId: "sc-12j90o1-15"
})(["flex-grow:1;width:100%;"]);
/* ------------------------------------------------------------------ */
/* Mocked layout building blocks */
/* ------------------------------------------------------------------ */
var MenuItemsMock = function MenuItemsMock(_ref) {
var _ref$mobile = _ref.mobile,
mobile = _ref$mobile === void 0 ? false : _ref$mobile;
return /*#__PURE__*/_react.default.createElement(StyledMenuScroll, null, /*#__PURE__*/_react.default.createElement(StyledMenuSection, {
className: "menu-section"
}, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
weight: "bold",
color: "tertiary"
}, "MENU")), MENU_ITEMS.map(function (_ref2) {
var Icon = _ref2.icon,
text = _ref2.text,
active = _ref2.active;
return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
key: text,
title: text,
placement: "right",
disable: mobile
}, /*#__PURE__*/_react.default.createElement(StyledMenuItem, {
className: active ? "active" : undefined
}, /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
weight: "medium",
color: "secondary",
whitespace: "no-wrap",
className: "menu-item-text"
}, text)));
}));
};
var MainMenuMock = function MainMenuMock(_ref3) {
var collapsed = _ref3.collapsed,
onToggleCollapsed = _ref3.onToggleCollapsed,
footer = _ref3.footer;
return /*#__PURE__*/_react.default.createElement(StyledMainMenu, {
className: collapsed ? "collapsed" : undefined,
"data-testid": "main-menu"
}, /*#__PURE__*/_react.default.createElement(StyledMenuHeader, null, /*#__PURE__*/_react.default.createElement("a", {
className: "main-logo"
}, /*#__PURE__*/_react.default.createElement(_MainLogo.MainLogo, null)), /*#__PURE__*/_react.default.createElement("div", {
className: "collapse-expand-menu"
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray",
size: "small",
onClick: onToggleCollapsed
}, /*#__PURE__*/_react.default.createElement(_Icons.CollapsIcon, null)))), /*#__PURE__*/_react.default.createElement(MenuItemsMock, null), footer);
};
var MainMenuMobileMock = function MainMenuMobileMock(_ref4) {
var open = _ref4.open,
close = _ref4.close,
footer = _ref4.footer;
return open ? /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
open: open,
onClose: close
}, /*#__PURE__*/_react.default.createElement(StyledMainMenu, {
className: "mobile",
"data-testid": "main-menu-mobile"
}, /*#__PURE__*/_react.default.createElement(StyledMenuHeader, null, /*#__PURE__*/_react.default.createElement("a", {
className: "main-logo"
}, /*#__PURE__*/_react.default.createElement(_MainLogo.MainLogo, null)), /*#__PURE__*/_react.default.createElement(StyledMobileMenuClose, {
onClick: close,
variant: "text gray"
}, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, null))), /*#__PURE__*/_react.default.createElement(MenuItemsMock, {
mobile: true
}), footer)) : null;
};
var MobileMenuHeaderMock = function MobileMenuHeaderMock(_ref5) {
var onOpenMobileMenu = _ref5.onOpenMobileMenu;
return /*#__PURE__*/_react.default.createElement(StyledMobileMenuHeader, null, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
size: "big",
variant: "circle raised",
onClick: onOpenMobileMenu
}, /*#__PURE__*/_react.default.createElement(_Icons.MobileMenuIcon, {
className: "mobile-menu-icon"
})), /*#__PURE__*/_react.default.createElement(StyledIconRow, null, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray"
}, /*#__PURE__*/_react.default.createElement(_Icons.SearchIcon, null)), /*#__PURE__*/_react.default.createElement(StyledHeaderAvatar, null, "JS"), /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray"
}, /*#__PURE__*/_react.default.createElement(_Icons.NotificationBellIcon, null))));
};
var TopRightControlsMock = function TopRightControlsMock() {
return /*#__PURE__*/_react.default.createElement(StyledTopRightControls, null, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray"
}, /*#__PURE__*/_react.default.createElement(_Icons.ClockStopwatchIndicatorIcon, null)), /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray"
}, /*#__PURE__*/_react.default.createElement(_Icons.SearchIcon, null)), /*#__PURE__*/_react.default.createElement(StyledHeaderAvatar, null, "JS"), /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray"
}, /*#__PURE__*/_react.default.createElement(_Icons.NotificationBellIcon, null)));
};
/* ------------------------------------------------------------------ */
/* PresentationShell */
/* ------------------------------------------------------------------ */
/**
* The full application shell shared by every presentation mock-up: the main
* menu on the left (auto-collapsing below 1280px, modal below 640px), the
* top-right controls and the scrollable page area. Pass the page header via
* `header` and the body via `children`.
*/
var PresentationShell = exports.PresentationShell = function PresentationShell(_ref6) {
var header = _ref6.header,
children = _ref6.children,
floating = _ref6.floating,
menuFooter = _ref6.menuFooter;
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
mobileMenuOpen = _useState2[0],
setMobileMenuOpen = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = _slicedToArray(_useState3, 2),
collapsed = _useState4[0],
setCollapsed = _useState4[1];
var _useState5 = (0, _react.useState)(),
_useState6 = _slicedToArray(_useState5, 2),
isMobileView = _useState6[0],
setIsMobileView = _useState6[1];
var ref = (0, _react.useRef)(null);
var dimensions = (0, _utils.useResizeObserver)(ref);
var width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width;
(0, _react.useEffect)(function () {
if (width) {
if (width < _tokens.BREAKPOINT) {
setIsMobileView(true);
} else {
setIsMobileView(false);
setMobileMenuOpen(false);
}
}
}, [width]);
var handleOpenMobileMenu = (0, _react.useCallback)(function () {
return setMobileMenuOpen(true);
}, []);
var handleCloseMobileMenu = (0, _react.useCallback)(function () {
return setMobileMenuOpen(false);
}, []);
var handleToggleCollapsed = (0, _react.useCallback)(function () {
return setCollapsed(function (prev) {
return !prev;
});
}, []);
return /*#__PURE__*/_react.default.createElement(StyledLayout, {
ref: ref
}, isMobileView ? /*#__PURE__*/_react.default.createElement(MobileMenuHeaderMock, {
onOpenMobileMenu: handleOpenMobileMenu
}) : null, /*#__PURE__*/_react.default.createElement(StyledContentRow, null, /*#__PURE__*/_react.default.createElement(StyledRightWindow, {
id: "right-window"
}, /*#__PURE__*/_react.default.createElement(StyledPage, null, header, /*#__PURE__*/_react.default.createElement(StyledPageBody, null, children)), isMobileView === false ? /*#__PURE__*/_react.default.createElement(TopRightControlsMock, null) : null), isMobileView ? /*#__PURE__*/_react.default.createElement(MainMenuMobileMock, {
open: mobileMenuOpen,
close: handleCloseMobileMenu,
footer: menuFooter
}) : /*#__PURE__*/_react.default.createElement(MainMenuMock, {
collapsed: collapsed,
onToggleCollapsed: handleToggleCollapsed,
footer: menuFooter
})), floating);
};
PresentationShell.displayName = "PresentationShell";
//# sourceMappingURL=PresentationShell.js.map