@sanity/desk-tool/lib/panes/document/documentPanel/DocumentPanel.js

Tool for managing all sorts of content in a structured manner

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DocumentPanel = void 0;
var _ui = require("@sanity/ui");
var _react = _interopRequireWildcard(require("react"));
var _components = require("@sanity/base/components");
var _hooks = require("@sanity/base/hooks");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _internal = require("@sanity/base/_internal");
var _reactHooks = require("@sanity/react-hooks");
var _pane = require("../../../components/pane");
var _usePaneLayout2 = require("../../../components/pane/usePaneLayout");
var _deskTool = require("../../../contexts/deskTool");
var _useDocumentPane2 = require("../useDocumentPane");
var _inspectDialog = require("../inspectDialog");
var _header = require("./header");
var _documentViews = require("./documentViews");
var _PermissionCheckBanner = require("./PermissionCheckBanner");
var _ReferenceChangedBanner = require("./ReferenceChangedBanner");
var _templateObject;
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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
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) } })); }
function getSchemaType(typeName) {
  var schemaMod = require('part:@sanity/base/schema');
  var schema = schemaMod.default || schemaMod;
  var type = schema.get(typeName);
  if (!type) return null;
  return type;
}
var Scroller = (0, _styledComponents.default)(_components.ScrollContainer)(_ref => {
  var $disabled = _ref.$disabled;
  if ($disabled) {
    return {
      height: '100%'
    };
  }
  return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 100%;\n    overflow: auto;\n    position: relative;\n    scroll-behavior: smooth;\n    outline: none;\n  "])));
});
var DocumentPanel = function DocumentPanel(props) {
  var footerHeight = props.footerHeight,
    rootElement = props.rootElement,
    isInspectOpen = props.isInspectOpen;
  var _useDocumentPane = (0, _useDocumentPane2.useDocumentPane)(),
    activeViewId = _useDocumentPane.activeViewId,
    displayed = _useDocumentPane.displayed,
    documentId = _useDocumentPane.documentId,
    documentSchema = _useDocumentPane.documentSchema,
    value = _useDocumentPane.value,
    views = _useDocumentPane.views,
    ready = _useDocumentPane.ready,
    documentType = _useDocumentPane.documentType;
  var _usePaneLayout = (0, _usePaneLayout2.usePaneLayout)(),
    layoutCollapsed = _usePaneLayout.collapsed;
  var parentPortal = (0, _ui.usePortal)();
  var _useDeskTool = (0, _deskTool.useDeskTool)(),
    features = _useDeskTool.features;
  var _useState = (0, _react.useState)(null),
    _useState2 = _slicedToArray(_useState, 2),
    headerElement = _useState2[0],
    setHeaderElement = _useState2[1];
  var headerRect = (0, _ui.useElementRect)(headerElement);
  var portalRef = (0, _react.useRef)(null);
  var _useState3 = (0, _react.useState)(null),
    _useState4 = _slicedToArray(_useState3, 2),
    documentScrollElement = _useState4[0],
    setDocumentScrollElement = _useState4[1];
  var editState = (0, _reactHooks.useEditState)(documentId, documentType, 'low');
  var requiredPermission = value._createdAt ? 'update' : 'create';
  var liveEdit = (0, _react.useMemo)(() => {
    var _getSchemaType;
    return Boolean((_getSchemaType = getSchemaType(documentType)) === null || _getSchemaType === void 0 ? void 0 : _getSchemaType.liveEdit);
  }, [documentType]);
  var docId = value._id ? value._id : 'dummy-id';
  var docPermissionsInput = (0, _react.useMemo)(() => {
    return _objectSpread(_objectSpread({}, value), {}, {
      _id: liveEdit ? (0, _internal.getPublishedId)(docId) : (0, _internal.getDraftId)(docId)
    });
  }, [liveEdit, value, docId]);
  var _useDocumentValuePerm = (0, _hooks.unstable_useDocumentValuePermissions)({
      document: docPermissionsInput,
      permission: requiredPermission
    }),
    _useDocumentValuePerm2 = _slicedToArray(_useDocumentValuePerm, 2),
    permissions = _useDocumentValuePerm2[0],
    isPermissionsLoading = _useDocumentValuePerm2[1];
  var activeView = (0, _react.useMemo)(() => views.find(view => view.id === activeViewId) || views[0] || {
    type: 'form'
  }, [activeViewId, views]);

  // Use a local portal container when split panes is supported
  var portalElement = features.splitPanes ? portalRef.current || parentPortal.element : parentPortal.element;

  // Calculate the height of the header
  var margins = (0, _react.useMemo)(() => {
    if (layoutCollapsed) {
      return [(headerRect === null || headerRect === void 0 ? void 0 : headerRect.height) || 0, 0, footerHeight ? footerHeight + 2 : 2, 0];
    }
    return [0, 0, 2, 0];
  }, [layoutCollapsed, footerHeight, headerRect]);
  var formViewHidden = activeView.type !== 'form';
  var activeViewNode = (0, _react.useMemo)(() => activeView.type === 'component' && activeView.component && /*#__PURE__*/(0, _react.createElement)(activeView.component, {
    document: {
      draft: (editState === null || editState === void 0 ? void 0 : editState.draft) || null,
      displayed: displayed || value,
      historical: displayed,
      published: (editState === null || editState === void 0 ? void 0 : editState.published) || null
    },
    documentId,
    options: activeView.options,
    schemaType: documentSchema
  }), [activeView, displayed, documentId, documentSchema, editState === null || editState === void 0 ? void 0 : editState.draft, editState === null || editState === void 0 ? void 0 : editState.published, value]);

  // Scroll to top as `documentId` changes
  (0, _react.useEffect)(() => {
    if (!(documentScrollElement !== null && documentScrollElement !== void 0 && documentScrollElement.scrollTo)) return;
    documentScrollElement.scrollTo(0, 0);
  }, [documentId, documentScrollElement]);
  var inspectDialog = (0, _react.useMemo)(() => {
    return isInspectOpen ? /*#__PURE__*/_react.default.createElement(_inspectDialog.InspectDialog, {
      value: displayed || value
    }) : null;
  }, [isInspectOpen, displayed, value]);
  return /*#__PURE__*/_react.default.createElement(_ui.Flex, {
    direction: "column",
    flex: 2,
    overflow: layoutCollapsed ? undefined : 'hidden'
  }, /*#__PURE__*/_react.default.createElement(_header.DocumentPanelHeader, {
    rootElement: rootElement,
    ref: setHeaderElement
  }), /*#__PURE__*/_react.default.createElement(_pane.PaneContent, null, /*#__PURE__*/_react.default.createElement(_ui.PortalProvider, {
    element: portalElement,
    __unstable_elements: {
      documentScrollElement: documentScrollElement
    }
  }, /*#__PURE__*/_react.default.createElement(_ui.BoundaryElementProvider, {
    element: documentScrollElement
  }, activeView.type === 'form' && !isPermissionsLoading && ready && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PermissionCheckBanner.PermissionCheckBanner, {
    granted: Boolean(permissions === null || permissions === void 0 ? void 0 : permissions.granted),
    requiredPermission: requiredPermission
  }), /*#__PURE__*/_react.default.createElement(_ReferenceChangedBanner.ReferenceChangedBanner, null)), /*#__PURE__*/_react.default.createElement(Scroller, {
    $disabled: layoutCollapsed || false,
    "data-testid": "document-panel-scroller",
    ref: setDocumentScrollElement
  }, /*#__PURE__*/_react.default.createElement(_documentViews.FormView, {
    hidden: formViewHidden,
    key: documentId + (ready ? '_ready' : '_pending'),
    margins: margins,
    granted: Boolean(permissions === null || permissions === void 0 ? void 0 : permissions.granted)
  }), activeViewNode), inspectDialog, /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": "document-panel-portal",
    ref: portalRef
  })))));
};
exports.DocumentPanel = DocumentPanel;