@sanity/desk-tool
Version:
Tool for managing all sorts of content in a structured manner
97 lines (96 loc) • 5.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PaneHeader = void 0;
var _components = require("@sanity/base/components");
var _ui = require("@sanity/ui");
var _react = _interopRequireWildcard(require("react"));
var _ReferencedDocHeading = require("../paneItem/ReferencedDocHeading");
var _usePane2 = require("./usePane");
var _PaneHeader = require("./PaneHeader.styles");
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; }
/**
* @beta This API will change. DO NOT USE IN PRODUCTION.
*/
// eslint-disable-next-line complexity
var PaneHeader = /*#__PURE__*/(0, _react.forwardRef)(function PaneHeader(props, ref) {
var actions = props.actions,
backButton = props.backButton,
loading = props.loading,
subActions = props.subActions,
tabs = props.tabs,
title = props.title,
totalReferenceCount = props.totalReferenceCount;
var _usePane = (0, _usePane2.usePane)(),
collapse = _usePane.collapse,
collapsed = _usePane.collapsed,
expand = _usePane.expand,
paneElement = _usePane.rootElement;
var paneRect = (0, _ui.useElementRect)(paneElement || null);
var isDocumentReferenced = totalReferenceCount !== undefined && totalReferenceCount > 0;
var layoutStyle = (0, _react.useMemo)(() => ({
width: collapsed ? (paneRect === null || paneRect === void 0 ? void 0 : paneRect.height) || window.innerHeight : undefined
}), [collapsed, paneRect]);
var handleTitleClick = (0, _react.useCallback)(() => {
if (collapsed) return;
collapse();
}, [collapse, collapsed]);
var handleLayoutClick = (0, _react.useCallback)(() => {
if (!collapsed) return;
expand();
}, [collapsed, expand]);
var showReferencedDocumentIndicators = !collapsed && isDocumentReferenced;
return /*#__PURE__*/_react.default.createElement(_ui.LayerProvider, {
zOffset: 100
}, /*#__PURE__*/_react.default.createElement(_PaneHeader.Root, {
"data-collapsed": collapsed ? '' : undefined,
"data-testid": "pane-header",
ref: ref
}, /*#__PURE__*/_react.default.createElement(_components.LegacyLayerProvider, {
zOffset: "paneHeader"
}, /*#__PURE__*/_react.default.createElement(_ui.Card, {
"data-collapsed": collapsed ? '' : undefined,
tone: showReferencedDocumentIndicators ? 'primary' : 'inherit'
}, /*#__PURE__*/_react.default.createElement(_PaneHeader.Layout, {
onClick: handleLayoutClick,
padding: 2,
paddingBottom: tabs || subActions ? 1 : 2,
sizing: "border",
style: layoutStyle
}, backButton, /*#__PURE__*/_react.default.createElement(_PaneHeader.TitleBox, {
flex: 1,
onClick: handleTitleClick,
paddingLeft: backButton ? 1 : 3,
paddingTop: 3
}, loading && /*#__PURE__*/_react.default.createElement(_PaneHeader.TitleTextSkeleton, {
animated: true,
radius: 1
}), !loading && showReferencedDocumentIndicators ? /*#__PURE__*/_react.default.createElement(_ReferencedDocHeading.ReferencedDocHeading, {
totalReferenceCount: totalReferenceCount,
title: title
}) : /*#__PURE__*/_react.default.createElement(_ui.Box, {
paddingBottom: 3
}, /*#__PURE__*/_react.default.createElement(_PaneHeader.TitleText, {
textOverflow: "ellipsis",
weight: "semibold"
}, title))), actions && /*#__PURE__*/_react.default.createElement(_ui.Box, {
hidden: collapsed,
paddingLeft: 1
}, /*#__PURE__*/_react.default.createElement(_components.LegacyLayerProvider, {
zOffset: "paneHeader"
}, actions))), (tabs || subActions) && /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: "center",
hidden: collapsed,
paddingTop: 0,
paddingRight: 2,
paddingBottom: 2,
paddingLeft: 3,
overflow: "auto"
}, /*#__PURE__*/_react.default.createElement(_PaneHeader.TabsBox, {
flex: 1,
marginRight: subActions ? 3 : 0
}, /*#__PURE__*/_react.default.createElement("div", null, tabs)), subActions && /*#__PURE__*/_react.default.createElement(_ui.Box, null, subActions))))));
});
exports.PaneHeader = PaneHeader;