@wordpress/components/build-module/custom-gradient-picker/index.mjs

UI components for WordPress.

// packages/components/src/custom-gradient-picker/index.tsx
import { __ } from "@wordpress/i18n";
import { useRef } from "@wordpress/element";
import AnglePickerControl from "../angle-picker-control/index.mjs";
import CustomGradientBar from "./gradient-bar/index.mjs";
import { Flex } from "../flex/index.mjs";
import SelectControl from "../select-control/index.mjs";
import { VStack } from "../v-stack/index.mjs";
import { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from "./utils.mjs";
import { serializeGradient } from "./serializer.mjs";
import { DEFAULT_LINEAR_GRADIENT_ANGLE, GRADIENT_OPTIONS, HORIZONTAL_GRADIENT_ORIENTATION } from "./constants.mjs";
import { AccessoryWrapper, SelectWrapper } from "./styles/custom-gradient-picker-styles.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var GradientAnglePicker = ({
  gradientAST,
  hasGradient,
  onChange
}) => {
  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
  const onAngleChange = (newAngle) => {
    onChange(serializeGradient({
      ...gradientAST,
      orientation: {
        type: "angular",
        value: `${newAngle}`
      }
    }));
  };
  return /* @__PURE__ */ _jsx(AnglePickerControl, {
    onChange: onAngleChange,
    value: hasGradient ? angle : ""
  });
};
var GradientTypePicker = ({
  gradientAST,
  hasGradient,
  onChange
}) => {
  const {
    type
  } = gradientAST;
  const lastLinearOrientationAngle = useRef(Number(HORIZONTAL_GRADIENT_ORIENTATION.value));
  if (type === "linear-gradient" && gradientAST.orientation) {
    lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);
  }
  const onSetLinearGradient = () => {
    onChange(serializeGradient({
      ...gradientAST,
      orientation: {
        type: "angular",
        value: `${lastLinearOrientationAngle.current}`
      },
      type: "linear-gradient"
    }));
  };
  const onSetRadialGradient = () => {
    const {
      orientation,
      ...restGradientAST
    } = gradientAST;
    onChange(serializeGradient({
      ...restGradientAST,
      type: "radial-gradient"
    }));
  };
  const handleOnChange = (next) => {
    if (next === "linear-gradient") {
      onSetLinearGradient();
    }
    if (next === "radial-gradient") {
      onSetRadialGradient();
    }
  };
  return /* @__PURE__ */ _jsx(SelectControl, {
    className: "components-custom-gradient-picker__type-picker",
    label: __("Type"),
    labelPosition: "top",
    onChange: handleOnChange,
    options: GRADIENT_OPTIONS,
    size: "__unstable-large",
    value: hasGradient ? type : void 0
  });
};
function CustomGradientPicker({
  value,
  onChange,
  enableAlpha = true,
  __experimentalIsRenderedInSidebar = false
}) {
  const {
    gradientAST,
    hasGradient
  } = getGradientAstWithDefault(value);
  const background = getLinearGradientRepresentation(gradientAST);
  const controlPoints = gradientAST.colorStops.map((colorStop) => {
    return {
      color: getStopCssColor(colorStop),
      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
      // TypeScript doesn't know that `colorStop.length` is not undefined here.
      // @ts-expect-error
      position: parseInt(colorStop.length.value)
    };
  });
  return /* @__PURE__ */ _jsxs(VStack, {
    spacing: 4,
    className: "components-custom-gradient-picker",
    children: [/* @__PURE__ */ _jsx(CustomGradientBar, {
      __experimentalIsRenderedInSidebar,
      disableAlpha: !enableAlpha,
      background,
      hasGradient,
      value: controlPoints,
      onChange: (newControlPoints) => {
        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));
      }
    }), /* @__PURE__ */ _jsxs(Flex, {
      gap: 3,
      className: "components-custom-gradient-picker__ui-line",
      children: [/* @__PURE__ */ _jsx(SelectWrapper, {
        children: /* @__PURE__ */ _jsx(GradientTypePicker, {
          gradientAST,
          hasGradient,
          onChange
        })
      }), /* @__PURE__ */ _jsx(AccessoryWrapper, {
        children: gradientAST.type === "linear-gradient" && /* @__PURE__ */ _jsx(GradientAnglePicker, {
          gradientAST,
          hasGradient,
          onChange
        })
      })]
    })]
  });
}
var custom_gradient_picker_default = CustomGradientPicker;
export {
  CustomGradientPicker,
  custom_gradient_picker_default as default
};
//# sourceMappingURL=index.mjs.map