@wordpress/editor/build/components/entities-saved-states/index.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EntitiesSavedStatesExtensible = EntitiesSavedStatesExtensible;
exports.default = EntitiesSavedStates;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _entityTypeList = _interopRequireDefault(require("./entity-type-list"));
var _useIsDirty = require("./hooks/use-is-dirty");
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function identity(values) {
  return values;
}

/**
 * Renders the component for managing saved states of entities.
 *
 * @param {Object}   props              The component props.
 * @param {Function} props.close        The function to close the dialog.
 * @param {Function} props.renderDialog The function to render the dialog.
 *
 * @return {JSX.Element} The rendered component.
 */
function EntitiesSavedStates({
  close,
  renderDialog = undefined
}) {
  const isDirtyProps = (0, _useIsDirty.useIsDirty)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(EntitiesSavedStatesExtensible, {
    close: close,
    renderDialog: renderDialog,
    ...isDirtyProps
  });
}

/**
 * Renders a panel for saving entities with dirty records.
 *
 * @param {Object}   props                       The component props.
 * @param {string}   props.additionalPrompt      Additional prompt to display.
 * @param {Function} props.close                 Function to close the panel.
 * @param {Function} props.onSave                Function to call when saving entities.
 * @param {boolean}  props.saveEnabled           Flag indicating if save is enabled.
 * @param {string}   props.saveLabel             Label for the save button.
 * @param {Function} props.renderDialog          Function to render a custom dialog.
 * @param {Array}    props.dirtyEntityRecords    Array of dirty entity records.
 * @param {boolean}  props.isDirty               Flag indicating if there are dirty entities.
 * @param {Function} props.setUnselectedEntities Function to set unselected entities.
 * @param {Array}    props.unselectedEntities    Array of unselected entities.
 *
 * @return {JSX.Element} The rendered component.
 */
function EntitiesSavedStatesExtensible({
  additionalPrompt = undefined,
  close,
  onSave = identity,
  saveEnabled: saveEnabledProp = undefined,
  saveLabel = (0, _i18n.__)('Save'),
  renderDialog = undefined,
  dirtyEntityRecords,
  isDirty,
  setUnselectedEntities,
  unselectedEntities
}) {
  const saveButtonRef = (0, _element.useRef)();
  const {
    saveDirtyEntities
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  // To group entities by type.
  const partitionedSavables = dirtyEntityRecords.reduce((acc, record) => {
    const {
      name
    } = record;
    if (!acc[name]) {
      acc[name] = [];
    }
    acc[name].push(record);
    return acc;
  }, {});

  // Sort entity groups.
  const {
    site: siteSavables,
    wp_template: templateSavables,
    wp_template_part: templatePartSavables,
    ...contentSavables
  } = partitionedSavables;
  const sortedPartitionedSavables = [siteSavables, templateSavables, templatePartSavables, ...Object.values(contentSavables)].filter(Array.isArray);
  const saveEnabled = saveEnabledProp !== null && saveEnabledProp !== void 0 ? saveEnabledProp : isDirty;
  // Explicitly define this with no argument passed.  Using `close` on
  // its own will use the event object in place of the expected saved entities.
  const dismissPanel = (0, _element.useCallback)(() => close(), [close]);
  const [saveDialogRef, saveDialogProps] = (0, _compose.__experimentalUseDialog)({
    onClose: () => dismissPanel()
  });
  const dialogLabel = (0, _compose.useInstanceId)(EntitiesSavedStatesExtensible, 'label');
  const dialogDescription = (0, _compose.useInstanceId)(EntitiesSavedStatesExtensible, 'description');
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ref: saveDialogRef,
    ...saveDialogProps,
    className: "entities-saved-states__panel",
    role: renderDialog ? 'dialog' : undefined,
    "aria-labelledby": renderDialog ? dialogLabel : undefined,
    "aria-describedby": renderDialog ? dialogDescription : undefined,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
      className: "entities-saved-states__panel-header",
      gap: 2,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        isBlock: true,
        as: _components.Button,
        ref: saveButtonRef,
        variant: "primary",
        disabled: !saveEnabled,
        accessibleWhenDisabled: true,
        onClick: () => saveDirtyEntities({
          onSave,
          dirtyEntityRecords,
          entitiesToSkip: unselectedEntities,
          close
        }),
        className: "editor-entities-saved-states__save-button",
        children: saveLabel
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        isBlock: true,
        as: _components.Button,
        variant: "secondary",
        onClick: dismissPanel,
        children: (0, _i18n.__)('Cancel')
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "entities-saved-states__text-prompt",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "entities-saved-states__text-prompt--header-wrapper",
        id: renderDialog ? dialogLabel : undefined,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
          className: "entities-saved-states__text-prompt--header",
          children: (0, _i18n.__)('Are you ready to save?')
        }), additionalPrompt]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        id: renderDialog ? dialogDescription : undefined,
        children: isDirty ? (0, _element.createInterpolateElement)((0, _i18n.sprintf)( /* translators: %d: number of site changes waiting to be saved. */
        (0, _i18n._n)('There is <strong>%d site change</strong> waiting to be saved.', 'There are <strong>%d site changes</strong> waiting to be saved.', sortedPartitionedSavables.length), sortedPartitionedSavables.length), {
          strong: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {})
        }) : (0, _i18n.__)('Select the items you want to save.')
      })]
    }), sortedPartitionedSavables.map(list => {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_entityTypeList.default, {
        list: list,
        unselectedEntities: unselectedEntities,
        setUnselectedEntities: setUnselectedEntities
      }, list[0].name);
    })]
  });
}
//# sourceMappingURL=index.js.map