@wordpress/components
Version:
UI components for WordPress.
114 lines (113 loc) • 3.66 kB
JavaScript
// packages/components/src/color-picker/component.tsx
import { colord, extend, getFormat } from "colord";
import namesPlugin from "colord/plugins/names";
import { useCallback, useState, useMemo } from "@wordpress/element";
import { useDebounce } from "@wordpress/compose";
import { __ } from "@wordpress/i18n";
import { useContextSystem, contextConnect } from "../context";
import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from "./styles";
import { ColorCopyButton } from "./color-copy-button";
import { ColorInput } from "./color-input";
import { Picker } from "./picker";
import { useControlledValue } from "../utils/hooks";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
extend([namesPlugin]);
var options = [{
label: "RGB",
value: "rgb"
}, {
label: "HSL",
value: "hsl"
}, {
label: "Hex",
value: "hex"
}];
var UnconnectedColorPicker = (props, forwardedRef) => {
const {
enableAlpha = false,
color: colorProp,
onChange,
defaultValue = "#fff",
copyFormat,
...divProps
} = useContextSystem(props, "ColorPicker");
const [color, setColor] = useControlledValue({
onChange,
value: colorProp,
defaultValue
});
const safeColordColor = useMemo(() => {
return colord(color || "");
}, [color]);
const debouncedSetColor = useDebounce(setColor);
const handleChange = useCallback((nextValue) => {
debouncedSetColor(nextValue.toHex());
}, [debouncedSetColor]);
const [colorType, setColorType] = useState(copyFormat || "hex");
const maybeHandlePaste = useCallback((event) => {
const pastedText = event.clipboardData?.getData("text")?.trim();
if (!pastedText) {
return;
}
const parsedColor = colord(pastedText);
if (!parsedColor.isValid()) {
return;
}
handleChange(parsedColor);
const supportedFormats = {
hex: "hex",
rgb: "rgb",
hsl: "hsl"
};
const detectedFormat = String(getFormat(pastedText));
const newColorType = supportedFormats[detectedFormat];
if (newColorType) {
setColorType(newColorType);
}
event.stopPropagation();
event.preventDefault();
}, [handleChange, setColorType]);
return /* @__PURE__ */ _jsxs(ColorfulWrapper, {
ref: forwardedRef,
...divProps,
onPasteCapture: maybeHandlePaste,
children: [/* @__PURE__ */ _jsx(Picker, {
onChange: handleChange,
color: safeColordColor,
enableAlpha
}), /* @__PURE__ */ _jsxs(AuxiliaryColorArtefactWrapper, {
children: [/* @__PURE__ */ _jsxs(AuxiliaryColorArtefactHStackHeader, {
justify: "space-between",
children: [/* @__PURE__ */ _jsx(SelectControl, {
__nextHasNoMarginBottom: true,
size: "compact",
options,
value: colorType,
onChange: (nextColorType) => setColorType(nextColorType),
label: __("Color format"),
hideLabelFromVision: true,
variant: "minimal"
}), /* @__PURE__ */ _jsx(ColorCopyButton, {
color: safeColordColor,
colorType: copyFormat || colorType
})]
}), /* @__PURE__ */ _jsx(ColorInputWrapper, {
direction: "column",
gap: 2,
children: /* @__PURE__ */ _jsx(ColorInput, {
colorType,
color: safeColordColor,
onChange: handleChange,
enableAlpha
})
})]
})]
});
};
var ColorPicker = contextConnect(UnconnectedColorPicker, "ColorPicker");
var component_default = ColorPicker;
export {
ColorPicker,
component_default as default
};
//# sourceMappingURL=component.js.map