@sanity/desk-tool/lib/panes/document/statusBar/sparkline/DocumentSparkline.js

Tool for managing all sorts of content in a structured manner

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DocumentSparkline = void 0;
var _ui = require("@sanity/ui");
var _react = _interopRequireWildcard(require("react"));
var _reactHooks = require("@sanity/react-hooks");
var _useDocumentPane2 = require("../../useDocumentPane");
var _DocumentBadges = require("./DocumentBadges");
var _PublishStatus = require("./PublishStatus");
var _ReviewChangesButton = require("./ReviewChangesButton");
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 _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; }
var SYNCING_TIMEOUT = 1000;
var SAVED_TIMEOUT = 3000;
var DocumentSparkline = /*#__PURE__*/(0, _react.memo)(function DocumentSparkline() {
  var _editState$published;
  var _useDocumentPane = (0, _useDocumentPane2.useDocumentPane)(),
    changesOpen = _useDocumentPane.changesOpen,
    documentId = _useDocumentPane.documentId,
    documentType = _useDocumentPane.documentType,
    handleHistoryClose = _useDocumentPane.handleHistoryClose,
    handleHistoryOpen = _useDocumentPane.handleHistoryOpen,
    historyController = _useDocumentPane.historyController,
    value = _useDocumentPane.value;
  var editState = (0, _reactHooks.useEditState)(documentId, documentType, 'low');
  var syncState = (0, _reactHooks.useSyncState)(documentId, documentType);
  var lastUpdated = value === null || value === void 0 ? void 0 : value._updatedAt;
  var lastPublished = editState === null || editState === void 0 || (_editState$published = editState.published) === null || _editState$published === void 0 ? void 0 : _editState$published._updatedAt;
  var showingRevision = historyController.onOlderRevision();
  var liveEdit = Boolean(editState === null || editState === void 0 ? void 0 : editState.liveEdit);
  var published = Boolean(editState === null || editState === void 0 ? void 0 : editState.published);
  var changed = Boolean(editState === null || editState === void 0 ? void 0 : editState.draft);
  var _useState = (0, _react.useState)(null),
    _useState2 = _slicedToArray(_useState, 2),
    rootFlexElement = _useState2[0],
    setRootFlexElement = _useState2[1];
  var rootFlexRect = (0, _ui.useElementRect)(rootFlexElement);
  var collapsed = !rootFlexRect || (rootFlexRect === null || rootFlexRect === void 0 ? void 0 : rootFlexRect.width) < 300;
  var _useState3 = (0, _react.useState)(null),
    _useState4 = _slicedToArray(_useState3, 2),
    status = _useState4[0],
    setStatus = _useState4[1];

  // eslint-disable-next-line consistent-return
  (0, _react.useEffect)(() => {
    if (status === 'syncing') {
      // status changed to 'syncing', schedule an update to set it to 'saved'
      var timerId = setTimeout(() => setStatus('saved'), SYNCING_TIMEOUT);
      return () => clearTimeout(timerId);
    }
    if (status === 'saved') {
      // status changed to 'saved', schedule an update to clear it
      var _timerId = setTimeout(() => setStatus(null), SAVED_TIMEOUT);
      return () => clearTimeout(_timerId);
    }
  }, [status, lastUpdated]);
  (0, _react.useLayoutEffect)(() => {
    // clear sync status when documentId changes
    setStatus(null);
  }, [documentId]);

  // set status to 'syncing' when lastUpdated changes and we go from not syncing to syncing
  (0, _react.useLayoutEffect)(() => {
    if (syncState.isSyncing) {
      setStatus('syncing');
    }
  }, [syncState.isSyncing, lastUpdated]);
  var reviewButton = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ReviewChangesButton.ReviewChangesButton, {
    lastUpdated: lastUpdated,
    status: status || (changed ? 'changes' : undefined),
    onClick: changesOpen ? handleHistoryClose : handleHistoryOpen,
    disabled: showingRevision,
    selected: changesOpen,
    collapsed: collapsed
  }), [changed, changesOpen, handleHistoryClose, handleHistoryOpen, lastUpdated, showingRevision, status, collapsed]);
  var publishStatus = (0, _react.useMemo)(() => (liveEdit || published) && /*#__PURE__*/_react.default.createElement(_ui.Box, {
    marginRight: 1
  }, /*#__PURE__*/_react.default.createElement(_PublishStatus.PublishStatus, {
    disabled: showingRevision,
    lastPublished: lastPublished,
    lastUpdated: lastUpdated,
    liveEdit: liveEdit,
    collapsed: collapsed
  })), [collapsed, lastPublished, lastUpdated, liveEdit, published, showingRevision]);
  return /*#__PURE__*/_react.default.createElement(_ui.Flex, {
    align: "center",
    "data-ui": "DocumentSparkline",
    ref: setRootFlexElement
  }, publishStatus, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
    align: "center",
    flex: 1
  }, reviewButton, !collapsed && /*#__PURE__*/_react.default.createElement(_ui.Box, {
    marginLeft: 3
  }, /*#__PURE__*/_react.default.createElement(_DocumentBadges.DocumentBadges, null))));
});
exports.DocumentSparkline = DocumentSparkline;