@wordpress/block-editor/build/components/height-control/index.js

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/height-control/index.js
var height_control_exports = {};
__export(height_control_exports, {
  default: () => HeightControl
});
module.exports = __toCommonJS(height_control_exports);
var import_element = require("@wordpress/element");
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_use_settings = require("../use-settings");
var import_jsx_runtime = require("react/jsx-runtime");
var RANGE_CONTROL_CUSTOM_SETTINGS = {
  px: { max: 1e3, step: 1 },
  "%": { max: 100, step: 1 },
  vw: { max: 100, step: 1 },
  vh: { max: 100, step: 1 },
  em: { max: 50, step: 0.1 },
  rem: { max: 50, step: 0.1 },
  svw: { max: 100, step: 1 },
  lvw: { max: 100, step: 1 },
  dvw: { max: 100, step: 1 },
  svh: { max: 100, step: 1 },
  lvh: { max: 100, step: 1 },
  dvh: { max: 100, step: 1 },
  vi: { max: 100, step: 1 },
  svi: { max: 100, step: 1 },
  lvi: { max: 100, step: 1 },
  dvi: { max: 100, step: 1 },
  vb: { max: 100, step: 1 },
  svb: { max: 100, step: 1 },
  lvb: { max: 100, step: 1 },
  dvb: { max: 100, step: 1 },
  vmin: { max: 100, step: 1 },
  svmin: { max: 100, step: 1 },
  lvmin: { max: 100, step: 1 },
  dvmin: { max: 100, step: 1 },
  vmax: { max: 100, step: 1 },
  svmax: { max: 100, step: 1 },
  lvmax: { max: 100, step: 1 },
  dvmax: { max: 100, step: 1 }
};
function HeightControl({
  label = (0, import_i18n.__)("Height"),
  onChange,
  value
}) {
  const customRangeValue = parseFloat(value);
  const [availableUnits] = (0, import_use_settings.useSettings)("spacing.units");
  const units = (0, import_components.__experimentalUseCustomUnits)({
    availableUnits: availableUnits || [
      "%",
      "px",
      "em",
      "rem",
      "vh",
      "vw"
    ]
  });
  const selectedUnit = (0, import_element.useMemo)(
    () => (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(value),
    [value]
  )[1] || units[0]?.value || "px";
  const handleSliderChange = (next) => {
    onChange([next, selectedUnit].join(""));
  };
  const handleUnitChange = (newUnit) => {
    const [currentValue, currentUnit] = (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(value);
    if (["em", "rem"].includes(newUnit) && currentUnit === "px") {
      onChange((currentValue / 16).toFixed(2) + newUnit);
    } else if (["em", "rem"].includes(currentUnit) && newUnit === "px") {
      onChange(Math.round(currentValue * 16) + newUnit);
    } else if ([
      "%",
      "vw",
      "svw",
      "lvw",
      "dvw",
      "vh",
      "svh",
      "lvh",
      "dvh",
      "vi",
      "svi",
      "lvi",
      "dvi",
      "vb",
      "svb",
      "lvb",
      "dvb",
      "vmin",
      "svmin",
      "lvmin",
      "dvmin",
      "vmax",
      "svmax",
      "lvmax",
      "dvmax"
    ].includes(newUnit) && currentValue > 100) {
      onChange(100 + newUnit);
    }
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "block-editor-height-control", children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: label }),
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_components.__experimentalUnitControl,
        {
          value,
          units,
          onChange,
          onUnitChange: handleUnitChange,
          min: 0,
          size: "__unstable-large",
          label,
          hideLabelFromVision: true
        }
      ) }),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { marginX: 2, marginBottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_components.RangeControl,
        {
          __next40pxDefaultSize: true,
          value: customRangeValue,
          min: 0,
          max: RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.max ?? 100,
          step: RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.step ?? 0.1,
          withInputField: false,
          onChange: handleSliderChange,
          __nextHasNoMarginBottom: true,
          label,
          hideLabelFromVision: true
        }
      ) }) })
    ] })
  ] });
}
//# sourceMappingURL=index.js.map