@wordpress/block-editor/build/components/dimensions-tool/scale-tool.cjs

Generic block editor.

"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/block-editor/src/components/dimensions-tool/scale-tool.js
var scale_tool_exports = {};
__export(scale_tool_exports, {
  default: () => ScaleTool
});
module.exports = __toCommonJS(scale_tool_exports);
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_jsx_runtime = require("react/jsx-runtime");
var DEFAULT_SCALE_OPTIONS = [
  {
    value: "fill",
    label: (0, import_i18n._x)("Fill", "Scale option for dimensions control"),
    help: (0, import_i18n.__)("Fill the space by stretching the content.")
  },
  {
    value: "contain",
    label: (0, import_i18n._x)("Contain", "Scale option for dimensions control"),
    help: (0, import_i18n.__)("Fit the content to the space without clipping.")
  },
  {
    value: "cover",
    label: (0, import_i18n._x)("Cover", "Scale option for dimensions control"),
    help: (0, import_i18n.__)("Fill the space by clipping what doesn't fit.")
  },
  {
    value: "none",
    label: (0, import_i18n._x)("None", "Scale option for dimensions control"),
    help: (0, import_i18n.__)(
      "Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding."
    )
  },
  {
    value: "scale-down",
    label: (0, import_i18n._x)("Scale down", "Scale option for dimensions control"),
    help: (0, import_i18n.__)(
      "Scale down the content to fit the space if it is too big. Content that is too small will have additional padding."
    )
  }
];
function ScaleTool({
  panelId,
  value,
  onChange,
  options = DEFAULT_SCALE_OPTIONS,
  defaultValue = DEFAULT_SCALE_OPTIONS[0].value,
  isShownByDefault = true
}) {
  const displayValue = value ?? "fill";
  const scaleHelp = (0, import_element.useMemo)(() => {
    return options.reduce((acc, option) => {
      acc[option.value] = option.help;
      return acc;
    }, {});
  }, [options]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.__experimentalToolsPanelItem,
    {
      label: (0, import_i18n.__)("Scale"),
      isShownByDefault,
      hasValue: () => displayValue !== defaultValue,
      onDeselect: () => onChange(defaultValue),
      panelId,
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_components.__experimentalToggleGroupControl,
        {
          label: (0, import_i18n.__)("Scale"),
          isBlock: true,
          help: scaleHelp[displayValue],
          value: displayValue,
          onChange,
          size: "__unstable-large",
          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.__experimentalToggleGroupControlOption,
            {
              ...option
            },
            option.value
          ))
        }
      )
    }
  );
}
//# sourceMappingURL=scale-tool.cjs.map