@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
198 lines (191 loc) • 8.38 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.EntitiesSavedStatesExtensible = EntitiesSavedStatesExtensible;
exports.default = EntitiesSavedStates;
var _clsx = _interopRequireDefault(require("clsx"));
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");
/**
* External dependencies
*/
/**
* 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 {boolean} props.renderDialog Whether to render the component with modal dialog behavior.
* @param {string} props.variant Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
*
* @return {React.ReactNode} The rendered component.
*/
function EntitiesSavedStates({
close,
renderDialog,
variant
}) {
const isDirtyProps = (0, _useIsDirty.useIsDirty)();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(EntitiesSavedStatesExtensible, {
close: close,
renderDialog: renderDialog,
variant: variant,
...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 {boolean} props.renderDialog Whether to render the component with modal dialog behavior.
* @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.
* @param {string} props.variant Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
*
* @return {React.ReactNode} The rendered component.
*/
function EntitiesSavedStatesExtensible({
additionalPrompt = undefined,
close,
onSave = identity,
saveEnabled: saveEnabledProp = undefined,
saveLabel = (0, _i18n.__)('Save'),
renderDialog,
dirtyEntityRecords,
isDirty,
setUnselectedEntities,
unselectedEntities,
variant = 'default'
}) {
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 dialogLabelId = (0, _compose.useInstanceId)(EntitiesSavedStatesExtensible, 'entities-saved-states__panel-label');
const dialogDescriptionId = (0, _compose.useInstanceId)(EntitiesSavedStatesExtensible, 'entities-saved-states__panel-description');
const selectItemsToSaveDescription = !!dirtyEntityRecords.length ? (0, _i18n.__)('Select the items you want to save.') : undefined;
const isInline = variant === 'inline';
const actionButtons = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: isInline ? false : true,
as: _components.Button,
variant: isInline ? 'tertiary' : 'secondary',
size: isInline ? undefined : 'compact',
onClick: dismissPanel,
children: (0, _i18n.__)('Cancel')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: isInline ? false : true,
as: _components.Button,
ref: saveButtonRef,
variant: "primary",
size: isInline ? undefined : 'compact',
disabled: !saveEnabled,
accessibleWhenDisabled: true,
onClick: () => saveDirtyEntities({
onSave,
dirtyEntityRecords,
entitiesToSkip: unselectedEntities,
close
}),
className: "editor-entities-saved-states__save-button",
children: saveLabel
})]
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: renderDialog ? saveDialogRef : undefined,
...(renderDialog && saveDialogProps),
className: (0, _clsx.default)('entities-saved-states__panel', {
'is-inline': isInline
}),
role: renderDialog ? 'dialog' : undefined,
"aria-labelledby": renderDialog ? dialogLabelId : undefined,
"aria-describedby": renderDialog ? dialogDescriptionId : undefined,
children: [!isInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Flex, {
className: "entities-saved-states__panel-header",
gap: 2,
children: actionButtons
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "entities-saved-states__text-prompt",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "entities-saved-states__text-prompt--header-wrapper",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
id: renderDialog ? dialogLabelId : undefined,
className: "entities-saved-states__text-prompt--header",
children: (0, _i18n.__)('Are you ready to save?')
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
id: renderDialog ? dialogDescriptionId : undefined,
children: [additionalPrompt, /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: "entities-saved-states__text-prompt--changes-count",
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.', dirtyEntityRecords.length), dirtyEntityRecords.length), {
strong: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {})
}) : selectItemsToSaveDescription
})]
})]
}), sortedPartitionedSavables.map(list => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_entityTypeList.default, {
list: list,
unselectedEntities: unselectedEntities,
setUnselectedEntities: setUnselectedEntities
}, list[0].name);
}), isInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Flex, {
direction: "row",
justify: "flex-end",
className: "entities-saved-states__panel-footer",
children: actionButtons
})]
});
}
//# sourceMappingURL=index.js.map