@wordpress/editor/build/components/post-saved-state/index.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PostSavedState;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _components = require("@wordpress/components");

var _compose = require("@wordpress/compose");

var _data = require("@wordpress/data");

var _i18n = require("@wordpress/i18n");

var _icons = require("@wordpress/icons");

var _keycodes = require("@wordpress/keycodes");

var _postSwitchToDraftButton = _interopRequireDefault(require("../post-switch-to-draft-button"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Component showing whether the post is saved or not and providing save
 * buttons.
 *
 * @param {Object} props               Component props.
 * @param {?boolean} props.forceIsDirty  Whether to force the post to be marked
 * as dirty.
 * @param {?boolean} props.forceIsSaving Whether to force the post to be marked
 * as being saved.
 * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
 * @return {import('@wordpress/element').WPComponent} The component.
 */
function PostSavedState({
  forceIsDirty,
  forceIsSaving,
  showIconLabels = false
}) {
  const [forceSavedMessage, setForceSavedMessage] = (0, _element.useState)(false);
  const isLargeViewport = (0, _compose.useViewportMatch)('small');
  const {
    isAutosaving,
    isDirty,
    isNew,
    isPending,
    isPublished,
    isSaveable,
    isSaving,
    isScheduled,
    hasPublishAction
  } = (0, _data.useSelect)(select => {
    var _getCurrentPost$_link, _getCurrentPost, _getCurrentPost$_link2;

    const {
      isEditedPostNew,
      isCurrentPostPublished,
      isCurrentPostScheduled,
      isEditedPostDirty,
      isSavingPost,
      isEditedPostSaveable,
      getCurrentPost,
      isAutosavingPost,
      getEditedPostAttribute
    } = select('core/editor');
    return {
      isAutosaving: isAutosavingPost(),
      isDirty: forceIsDirty || isEditedPostDirty(),
      isNew: isEditedPostNew(),
      isPending: 'pending' === getEditedPostAttribute('status'),
      isPublished: isCurrentPostPublished(),
      isSaving: forceIsSaving || isSavingPost(),
      isSaveable: isEditedPostSaveable(),
      isScheduled: isCurrentPostScheduled(),
      hasPublishAction: (_getCurrentPost$_link = (_getCurrentPost = getCurrentPost()) === null || _getCurrentPost === void 0 ? void 0 : (_getCurrentPost$_link2 = _getCurrentPost._links) === null || _getCurrentPost$_link2 === void 0 ? void 0 : _getCurrentPost$_link2['wp:action-publish']) !== null && _getCurrentPost$_link !== void 0 ? _getCurrentPost$_link : false
    };
  }, [forceIsDirty, forceIsSaving]);
  const {
    savePost
  } = (0, _data.useDispatch)('core/editor');
  const wasSaving = (0, _compose.usePrevious)(isSaving);
  (0, _element.useEffect)(() => {
    let timeoutId;

    if (wasSaving && !isSaving) {
      setForceSavedMessage(true);
      timeoutId = setTimeout(() => {
        setForceSavedMessage(false);
      }, 1000);
    }

    return () => clearTimeout(timeoutId);
  }, [isSaving]);

  if (isSaving) {
    // TODO: Classes generation should be common across all return
    // paths of this function, including proper naming convention for
    // the "Save Draft" button.
    const classes = (0, _classnames.default)('editor-post-saved-state', 'is-saving', (0, _components.__unstableGetAnimateClassName)({
      type: 'loading'
    }), {
      'is-autosaving': isAutosaving
    });
    return (0, _element.createElement)("span", {
      className: classes
    }, (0, _element.createElement)(_icons.Icon, {
      icon: _icons.cloud
    }), isAutosaving ? (0, _i18n.__)('Autosaving') : (0, _i18n.__)('Saving'));
  }

  if (isPublished || isScheduled) {
    return (0, _element.createElement)(_postSwitchToDraftButton.default, null);
  }

  if (!isSaveable) {
    return null;
  }

  if (forceSavedMessage || !isNew && !isDirty) {
    return (0, _element.createElement)("span", {
      className: "editor-post-saved-state is-saved"
    }, (0, _element.createElement)(_icons.Icon, {
      icon: _icons.check
    }), (0, _i18n.__)('Saved'));
  } // Once the post has been submitted for review this button
  // is not needed for the contributor role.


  if (!hasPublishAction && isPending) {
    return null;
  }
  /* translators: button label text should, if possible, be under 16 characters. */


  const label = isPending ? (0, _i18n.__)('Save as pending') : (0, _i18n.__)('Save draft');
  /* translators: button label text should, if possible, be under 16 characters. */

  const shortLabel = (0, _i18n.__)('Save');

  if (!isLargeViewport) {
    return (0, _element.createElement)(_components.Button, {
      className: "editor-post-save-draft",
      label: label,
      onClick: () => savePost(),
      shortcut: _keycodes.displayShortcut.primary('s'),
      icon: _icons.cloudUpload
    }, showIconLabels && shortLabel);
  }

  return (0, _element.createElement)(_components.Button, {
    className: "editor-post-save-draft",
    onClick: () => savePost(),
    shortcut: _keycodes.displayShortcut.primary('s'),
    isTertiary: true
  }, label);
}
//# sourceMappingURL=index.js.map