@sanity/default-layout
Version:
The default layout components for Sanity
119 lines (118 loc) • 6.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SideMenu = void 0;
var _components = require("@sanity/base/components");
var _ui = require("@sanity/ui");
var _icons = require("@sanity/icons");
var _react = _interopRequireWildcard(require("react"));
var _toolSwitcher = _interopRequireDefault(require("part:@sanity/default-layout/tool-switcher"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _datasetSelect = require("../datasetSelect");
var _spaces = require("../util/spaces");
var _config = require("../config");
var _templateObject, _templateObject2, _templateObject3; // @todo: remove the following line when part imports has been removed from this file
///<reference types="@sanity/types/parts" />
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var Root = (0, _styledComponents.default)(_ui.Layer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"])));
var Backdrop = (0, _styledComponents.default)(_ui.Box)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: ", ";\n background: var(--card-shadow-penumbra-color);\n transition: 200ms opacity ease-in-out;\n pointer-events: ", ";\n"])), _ref => {
var $open = _ref.$open;
return $open ? 1 : 0;
}, _ref2 => {
var $open = _ref2.$open;
return $open ? 'all' : 'none';
});
var InnerCard = (0, _styledComponents.default)(_ui.Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n pointer-events: all;\n flex-direction: column;\n min-width: 200px;\n max-width: 280px;\n transform: ", ";\n transition: 200ms transform ease-in-out;\n"])), _ref3 => {
var $open = _ref3.$open;
return $open ? 'translate3d(0, 0, 0)' : 'translate3d(calc(-100% - 1px), 0, 0)';
});
var SideMenu = /*#__PURE__*/(0, _react.memo)(function SideMenu(props) {
var activeToolName = props.activeToolName,
isOpen = props.isOpen,
onClose = props.onClose,
onSignOut = props.onSignOut,
onSwitchTool = props.onSwitchTool,
user = props.user;
var zIndex = (0, _components.useZIndex)();
var closeButtonRef = (0, _react.useRef)();
var tabIndex = isOpen ? 0 : -1;
(0, _ui.useGlobalKeyDown)(e => {
if (e.key === 'Escape' && isOpen) {
onClose();
}
});
(0, _react.useEffect)(() => {
if (isOpen) {
var _closeButtonRef$curre;
closeButtonRef === null || closeButtonRef === void 0 || (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
}
}, [isOpen]);
return /*#__PURE__*/_react.default.createElement(Root, {
zOffset: zIndex.drawer
}, /*#__PURE__*/_react.default.createElement(Backdrop, {
$open: isOpen,
onClick: onClose
}), /*#__PURE__*/_react.default.createElement(InnerCard, {
display: "flex",
height: "fill",
$open: isOpen,
shadow: 1
}, /*#__PURE__*/_react.default.createElement(_ui.Card, {
borderBottom: true
}, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
space: 3,
padding: [3, 3, 4]
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: "center"
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
flex: 1,
align: "center",
paddingRight: 2
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
flex: 1,
align: "center"
}, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_components.UserAvatar, {
size: "medium",
userId: "me"
})), /*#__PURE__*/_react.default.createElement(_ui.Box, {
flex: 1,
marginLeft: 2,
title: user.name || user.email
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
textOverflow: "ellipsis"
}, user.name || user.email)))), /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
ref: closeButtonRef,
icon: _icons.CloseIcon,
onClick: onClose,
tabIndex: tabIndex,
title: "Close menu",
mode: "bleed"
}))), _spaces.HAS_SPACES && /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_datasetSelect.DatasetSelect, {
tabIndex: tabIndex
})))), /*#__PURE__*/_react.default.createElement(_ui.Box, {
flex: 1,
overflow: "auto",
padding: [3, 3, 4]
}, /*#__PURE__*/_react.default.createElement(_toolSwitcher.default, {
activeToolName: activeToolName,
direction: "vertical",
isVisible: isOpen,
onSwitchTool: onSwitchTool,
tools: _config.tools
})), /*#__PURE__*/_react.default.createElement(_ui.Card, {
padding: [3, 3, 4],
borderTop: true
}, /*#__PURE__*/_react.default.createElement(_ui.Stack, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
justify: "flex-start",
iconRight: _icons.LeaveIcon,
text: "Sign out",
onClick: onSignOut,
tabIndex: tabIndex,
mode: "bleed"
})))));
});
exports.SideMenu = SideMenu;