@wordpress/editor/build/hooks/push-changes-to-global-styles/apply-globally-modal.cjs

Enhanced block editor for WordPress posts.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/editor/src/hooks/push-changes-to-global-styles/apply-globally-modal.js
var apply_globally_modal_exports = {};
__export(apply_globally_modal_exports, {
  default: () => ApplyGloballyModal
});
module.exports = __toCommonJS(apply_globally_modal_exports);
var import_components = require("@wordpress/components");
var import_dataviews = require("@wordpress/dataviews");
var import_i18n = require("@wordpress/i18n");
var import_blocks = require("@wordpress/blocks");
var import_element = require("@wordpress/element");
var import_hooks = require("../../components/global-styles/hooks.cjs");
var import_use_review_rows = require("./use-review-rows.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var DEFAULT_LAYOUTS = { pickerTable: {} };
var getItemId = (row) => row.id;
function ApplyGloballyModal({
  name,
  rows,
  onApply,
  onRequestClose
}) {
  const { merged } = (0, import_hooks.useGlobalStyles)();
  const reviewRows = (0, import_use_review_rows.useReviewRows)(rows, merged, name);
  const [selection, setSelection] = (0, import_element.useState)(
    () => reviewRows.map((row) => row.id)
  );
  const [view, setView] = (0, import_element.useState)(() => ({
    type: "pickerTable",
    titleField: "label",
    fields: ["current", "new"],
    page: 1,
    perPage: reviewRows.length,
    layout: { enableMoving: false }
  }));
  const fields = (0, import_element.useMemo)(
    () => [
      {
        id: "label",
        label: (0, import_i18n.__)("Style"),
        enableSorting: false,
        enableHiding: false,
        filterBy: false,
        getValue: ({ item }) => item.label,
        render: ({ item }) => item.label
      },
      {
        id: "current",
        label: (0, import_i18n.__)("Current"),
        enableSorting: false,
        enableHiding: false,
        filterBy: false,
        getValue: ({ item }) => item.formattedCurrentValue,
        render: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "editor-push-changes-to-global-styles-modal__value", children: item.formattedCurrentValue })
      },
      {
        id: "new",
        label: (0, import_i18n.__)("New"),
        enableSorting: false,
        enableHiding: false,
        filterBy: false,
        getValue: ({ item }) => item.formattedNewValue,
        render: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "editor-push-changes-to-global-styles-modal__value", children: item.formattedNewValue })
      }
    ],
    []
  );
  const actions = (0, import_element.useMemo)(
    () => [
      {
        id: "apply",
        label: (0, import_i18n.__)("Apply"),
        isPrimary: true,
        supportsBulk: true,
        callback(items) {
          onApply(items);
          onRequestClose();
        }
      }
    ],
    [onApply, onRequestClose]
  );
  const blockTitle = (0, import_blocks.getBlockType)(name)?.title;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_components.Modal,
    {
      title: (0, import_i18n.sprintf)(
        // translators: %s: Title of the block e.g. 'Heading'.
        (0, import_i18n.__)("Apply %s styles globally"),
        blockTitle
      ),
      onRequestClose,
      size: "large",
      className: "editor-push-changes-to-global-styles-modal",
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.sprintf)(
          // translators: %s: Title of the block e.g. 'Heading'.
          (0, import_i18n.__)(
            "Choose which styles to make default for all %s blocks."
          ),
          blockTitle
        ) }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
          import_dataviews.DataViewsPicker,
          {
            data: reviewRows,
            fields,
            view,
            onChangeView: setView,
            actions,
            selection,
            onChangeSelection: setSelection,
            getItemId,
            paginationInfo: {
              totalItems: reviewRows.length,
              totalPages: 1
            },
            defaultLayouts: DEFAULT_LAYOUTS,
            search: false,
            itemListLabel: (0, import_i18n.__)("Styles to apply"),
            children: [
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dataviews.DataViewsPicker.Layout, {}),
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dataviews.DataViewsPicker.Footer, {})
            ]
          }
        )
      ]
    }
  );
}
//# sourceMappingURL=apply-globally-modal.cjs.map