@wordpress/block-editor/build-module/components/border-radius-control/index.js

Generic block editor.

// packages/block-editor/src/components/border-radius-control/index.js
import {
  BaseControl,
  __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
  __experimentalUseCustomUnits as useCustomUnits,
  __experimentalVStack as VStack,
  __experimentalHStack as HStack
} from "@wordpress/components";
import { useState, useMemo } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import LinkedButton from "./linked-button";
import { useSettings } from "../use-settings";
import { hasDefinedValues, hasMixedValues } from "./utils";
import SingleInputControl from "./single-input-control";
import {
  DEFAULT_VALUES,
  RANGE_CONTROL_MAX_SIZE,
  EMPTY_ARRAY
} from "./constants";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function useBorderRadiusSizes(presets) {
  const defaultSizes = presets?.default ?? EMPTY_ARRAY;
  const customSizes = presets?.custom ?? EMPTY_ARRAY;
  const themeSizes = presets?.theme ?? EMPTY_ARRAY;
  return useMemo(() => {
    const sizes = [
      { name: __("None"), slug: "0", size: 0 },
      ...customSizes,
      ...themeSizes,
      ...defaultSizes
    ];
    return sizes.length > RANGE_CONTROL_MAX_SIZE ? [
      {
        name: __("Default"),
        slug: "default",
        size: void 0
      },
      ...sizes
    ] : sizes;
  }, [customSizes, themeSizes, defaultSizes]);
}
function BorderRadiusControl({ onChange, values, presets }) {
  const [isLinked, setIsLinked] = useState(
    !hasDefinedValues(values) || !hasMixedValues(values)
  );
  const options = useBorderRadiusSizes(presets);
  const [selectedUnits, setSelectedUnits] = useState({
    flat: typeof values === "string" ? parseQuantityAndUnitFromRawValue(values)[1] : void 0,
    topLeft: parseQuantityAndUnitFromRawValue(values?.topLeft)[1],
    topRight: parseQuantityAndUnitFromRawValue(values?.topRight)[1],
    bottomLeft: parseQuantityAndUnitFromRawValue(values?.bottomLeft)[1],
    bottomRight: parseQuantityAndUnitFromRawValue(
      values?.bottomRight
    )[1]
  });
  const [availableUnits] = useSettings("spacing.units");
  const units = useCustomUnits({
    availableUnits: availableUnits || ["px", "em", "rem"]
  });
  const toggleLinked = () => setIsLinked(!isLinked);
  return /* @__PURE__ */ jsxs("fieldset", { className: "components-border-radius-control", children: [
    /* @__PURE__ */ jsxs(HStack, { className: "components-border-radius-control__header", children: [
      /* @__PURE__ */ jsx(BaseControl.VisualLabel, { as: "legend", children: __("Radius") }),
      /* @__PURE__ */ jsx(LinkedButton, { onClick: toggleLinked, isLinked })
    ] }),
    isLinked ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
      SingleInputControl,
      {
        onChange,
        selectedUnits,
        setSelectedUnits,
        values,
        units,
        corner: "all",
        presets: options
      }
    ) }) : /* @__PURE__ */ jsx(VStack, { children: [
      "topLeft",
      "topRight",
      "bottomLeft",
      "bottomRight"
    ].map((corner) => /* @__PURE__ */ jsx(
      SingleInputControl,
      {
        onChange,
        selectedUnits,
        setSelectedUnits,
        values: values || DEFAULT_VALUES,
        units,
        corner,
        presets: options
      },
      corner
    )) })
  ] });
}
export {
  BorderRadiusControl as default
};
//# sourceMappingURL=index.js.map