@sanity/default-layout
Version:
The default layout components for Sanity
256 lines (250 loc) • 15.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Navbar = void 0;
var _react = _interopRequireWildcard(require("react"));
var _icons = require("@sanity/icons");
var _ui = require("@sanity/ui");
var _components = require("@sanity/base/components");
var _router = require("@sanity/base/router");
var _hooks = require("@sanity/base/hooks");
var _configSanity = _interopRequireDefault(require("config:sanity"));
var sidecar = _interopRequireWildcard(require("part:@sanity/default-layout/sidecar?"));
var _toolSwitcher = _interopRequireDefault(require("part:@sanity/default-layout/tool-switcher"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _internal = require("@sanity/base/_internal");
var _spaces = require("../util/spaces");
var _datasetSelect = require("../datasetSelect");
var _useDefaultLayoutRouter = require("../useDefaultLayoutRouter");
var _config = require("../config");
var _versionedClient = require("../versionedClient");
var _Branding = _interopRequireDefault(require("./branding/Branding"));
var _changelog = require("./changelog");
var _search = require("./search/contexts/search");
var _search2 = require("./search");
var _ = require(".");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // @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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
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.Card)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n top: 0;\n position: relative;\n z-index: 1;\n min-height: auto;\n"])));
var BrandingButton = (0, _styledComponents.default)(_ui.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n --card-fg-color: inherit !important;\n display: block;\n"])));
var LeftFlex = (0, _styledComponents.default)(_ui.Flex)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: max-content;\n"])));
var CenterBox = (0, _styledComponents.default)(_ui.Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
var RightFlex = (0, _styledComponents.default)(_ui.Flex)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
var SpacingBox = (0, _styledComponents.default)(_ui.Box)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n &:empty {\n margin: 0;\n }\n"])));
/**
* `Navbar` is the main navigation of Studio apps.
*
* The navbar layout consists of 3 wrappers:
* ```
* | LeftFlex | CenterBox | RightFlex |
* ```
*
* LARGE screens:
* ```
* | LeftFlex | RightFlex |
* | Branding, DatasetSelect, CreateDocument, Search, Tools | Status, Hints, Presence, LoginStatus |
* ```
*
* MEDIUM screens:
* ```
* | LeftFlex | RightFlex |
* | OpenMenu, Branding, CreateDocument, Search | Status, Presence |
* ```
*
* SMALL screens:
* ```
* | LeftFlex | CenterBox | RightFlex |
* | OpenMenu, CreateDocument | Branding | Presence, Search |
* ```
*/
var newDocumentOptions = (0, _internal.getNewDocumentOptions)();
var Navbar = /*#__PURE__*/(0, _react.memo)(function Navbar(props) {
var createMenuIsOpen = props.createMenuIsOpen,
isTemplatePermissionsLoading = props.isTemplatePermissionsLoading,
onCreateButtonClick = props.onCreateButtonClick,
onSearchFullscreenOpen = props.onSearchFullscreenOpen,
onToggleMenu = props.onToggleMenu,
onUserLogout = props.onUserLogout,
searchFullscreenOpen = props.searchFullscreenOpen,
setCreateButtonElement = props.setCreateButtonElement,
templatePermissions = props.templatePermissions;
var _useState = (0, _react.useState)(null),
_useState2 = _slicedToArray(_useState, 2),
searchFullscreenOpenButtonElement = _useState2[0],
setSearchOpenButtonElement = _useState2[1];
var _useCurrentUser = (0, _hooks.useCurrentUser)(),
currentUser = _useCurrentUser.value;
var mediaIndex = (0, _ui.useMediaIndex)();
var router = (0, _useDefaultLayoutRouter.useDefaultLayoutRouter)();
var _versionedClient$conf = _versionedClient.versionedClient.config(),
projectId = _versionedClient$conf.projectId;
var noDocumentOptions = (newDocumentOptions === null || newDocumentOptions === void 0 ? void 0 : newDocumentOptions.length) === 0;
var canCreateSome = (0, _react.useMemo)(() => {
if (isTemplatePermissionsLoading) return false;
return templatePermissions.some(permission => permission.granted);
}, [templatePermissions, isTemplatePermissionsLoading]);
var rootState = (0, _react.useMemo)(() => _spaces.HAS_SPACES && router.state.space ? {
space: router.state.space
} : {}, [router.state.space]);
var shouldRender = (0, _react.useMemo)(() => ({
brandingCenter: mediaIndex <= 1,
changelog: mediaIndex > 1,
collapsedPresenceMenu: mediaIndex <= 1,
hints: mediaIndex > 1 && sidecar && sidecar.isSidecarEnabled && sidecar.isSidecarEnabled(),
loginStatus: mediaIndex > 1,
searchFullscreen: mediaIndex <= 1,
spaces: _spaces.HAS_SPACES && mediaIndex >= 3,
tools: mediaIndex >= 3
}), [mediaIndex]);
// Diable fullscreen search and re-focus search button
var handleSearchFullscreenClose = (0, _react.useCallback)(() => {
onSearchFullscreenOpen(false);
searchFullscreenOpenButtonElement === null || searchFullscreenOpenButtonElement === void 0 ? void 0 : searchFullscreenOpenButtonElement.focus();
}, [onSearchFullscreenOpen, searchFullscreenOpenButtonElement]);
// Enable fullscreen search (passthrough)
var handleSearchFullscreenOpen = (0, _react.useCallback)(() => {
onSearchFullscreenOpen(true);
}, [onSearchFullscreenOpen]);
// Disable fullscreen search on media query change (if already open)
(0, _react.useEffect)(() => {
if (onSearchFullscreenOpen && !shouldRender.searchFullscreen) {
onSearchFullscreenOpen(false);
}
}, [onSearchFullscreenOpen, shouldRender.searchFullscreen]);
var LinkComponent = (0, _react.useCallback)(linkProps => {
return /*#__PURE__*/_react.default.createElement(_router.StateLink, _extends({
state: rootState
}, linkProps));
}, [rootState]);
var createTooltipContent = (0, _react.useMemo)(() => {
if (noDocumentOptions) {
return /*#__PURE__*/_react.default.createElement(_ui.Text, {
size: 1
}, "You need a schema to create a new document");
}
if (canCreateSome) {
return /*#__PURE__*/_react.default.createElement(_ui.Text, {
size: 1
}, "Create new document");
}
return /*#__PURE__*/_react.default.createElement(_components.InsufficientPermissionsMessage, {
currentUser: currentUser,
operationLabel: "create any document"
});
}, [canCreateSome, currentUser, noDocumentOptions]);
return /*#__PURE__*/_react.default.createElement(Root, {
$onSearchFullscreenOpen: searchFullscreenOpen,
"data-ui": "Navbar",
padding: 2,
scheme: "dark"
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: "center",
justify: "space-between"
}, /*#__PURE__*/_react.default.createElement(LeftFlex, {
flex: shouldRender.brandingCenter ? undefined : 1,
align: "center"
}, !shouldRender.tools && /*#__PURE__*/_react.default.createElement(SpacingBox, {
marginRight: 1
}, /*#__PURE__*/_react.default.createElement(_ui.Button, {
"aria-label": "Open menu",
icon: _icons.MenuIcon,
mode: "bleed",
onClick: onToggleMenu,
title: "Open menu"
})), !shouldRender.brandingCenter && /*#__PURE__*/_react.default.createElement(SpacingBox, {
marginRight: 1
}, /*#__PURE__*/_react.default.createElement(BrandingButton, {
forwardedAs: LinkComponent,
mode: "bleed"
}, /*#__PURE__*/_react.default.createElement(_Branding.default, {
projectName: _configSanity.default && _configSanity.default.project.name
}))), shouldRender.spaces && /*#__PURE__*/_react.default.createElement(_ui.Flex, {
marginRight: 2
}, /*#__PURE__*/_react.default.createElement(_datasetSelect.DatasetSelect, null)), /*#__PURE__*/_react.default.createElement(_components.LegacyLayerProvider, {
zOffset: "navbarPopover"
}, /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
portal: true,
scheme: "light",
content: /*#__PURE__*/_react.default.createElement(_ui.Box, {
padding: 2
}, createTooltipContent)
}, /*#__PURE__*/_react.default.createElement(SpacingBox, {
marginRight: shouldRender.brandingCenter ? undefined : 2
}, /*#__PURE__*/_react.default.createElement(_ui.Button, {
"aria-label": "Create new document",
"data-testid": "default-layout-global-create-button",
disabled: !canCreateSome,
icon: _icons.ComposeIcon,
mode: "bleed",
onClick: onCreateButtonClick,
ref: setCreateButtonElement,
selected: createMenuIsOpen
})))), /*#__PURE__*/_react.default.createElement(_components.LegacyLayerProvider, {
zOffset: "navbarPopover"
}, /*#__PURE__*/_react.default.createElement(_search.SearchProvider, {
currentUser: currentUser
}, shouldRender.searchFullscreen && /*#__PURE__*/_react.default.createElement(_search2.SearchDialog, {
onClose: handleSearchFullscreenClose,
onOpen: handleSearchFullscreenOpen,
open: searchFullscreenOpen
}), !shouldRender.searchFullscreen && /*#__PURE__*/_react.default.createElement(_search2.SearchField, null))), shouldRender.tools && /*#__PURE__*/_react.default.createElement(_ui.Card, {
borderRight: true,
flex: 1,
marginX: 2,
overflow: "visible",
paddingRight: 1
}, /*#__PURE__*/_react.default.createElement(_components.LegacyLayerProvider, {
zOffset: "navbarPopover"
}, /*#__PURE__*/_react.default.createElement(_toolSwitcher.default, {
direction: "horizontal",
tools: _config.tools
})))), shouldRender.brandingCenter && /*#__PURE__*/_react.default.createElement(CenterBox, {
marginX: 1
}, /*#__PURE__*/_react.default.createElement(BrandingButton, {
forwardedAs: LinkComponent,
mode: "bleed"
}, /*#__PURE__*/_react.default.createElement(_Branding.default, {
projectName: _configSanity.default && _configSanity.default.project.name
}))), /*#__PURE__*/_react.default.createElement(RightFlex, {
align: "center"
}, shouldRender.changelog && /*#__PURE__*/_react.default.createElement(SpacingBox, {
marginRight: 1
}, /*#__PURE__*/_react.default.createElement(_changelog.ChangelogContainer, null)), shouldRender.hints && /*#__PURE__*/_react.default.createElement(_ui.Box, {
marginRight: 1
}, sidecar && /*#__PURE__*/(0, _react.createElement)(sidecar.SidecarToggleButton)), /*#__PURE__*/_react.default.createElement(_components.LegacyLayerProvider, {
zOffset: "navbarPopover"
}, /*#__PURE__*/_react.default.createElement(SpacingBox, {
marginRight: 1
}, /*#__PURE__*/_react.default.createElement(_.PresenceMenu, {
collapse: shouldRender.collapsedPresenceMenu,
maxAvatars: 4,
projectId: projectId
}))), shouldRender.tools && /*#__PURE__*/_react.default.createElement(_components.LegacyLayerProvider, {
zOffset: "navbarPopover"
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: "center"
}, /*#__PURE__*/_react.default.createElement(_.LoginStatus, {
currentUser: currentUser,
onLogout: onUserLogout,
projectId: projectId
}))), shouldRender.searchFullscreen && /*#__PURE__*/_react.default.createElement(_ui.Button, {
"aria-label": "Open search",
icon: _icons.SearchIcon,
mode: "bleed",
onClick: handleSearchFullscreenOpen,
ref: setSearchOpenButtonElement
}))));
});
exports.Navbar = Navbar;