@wordpress/components
Version:
UI components for WordPress.
88 lines (87 loc) • 2.34 kB
JavaScript
// packages/components/src/color-picker/hsl-input.tsx
import { colord } from "colord";
import { useState, useEffect, useMemo } from "@wordpress/element";
import { InputWithSlider } from "./input-with-slider";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var HslInput = ({
color,
onChange,
enableAlpha
}) => {
const colorPropHSLA = useMemo(() => color.toHsl(), [color]);
const [internalHSLA, setInternalHSLA] = useState({
...colorPropHSLA
});
const isInternalColorSameAsReceivedColor = color.isEqual(colord(internalHSLA));
useEffect(() => {
if (!isInternalColorSameAsReceivedColor) {
setInternalHSLA(colorPropHSLA);
}
}, [colorPropHSLA, isInternalColorSameAsReceivedColor]);
const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;
const updateHSLAValue = (partialNewValue) => {
const nextOnChangeValue = colord({
...colorValue,
...partialNewValue
});
if (!color.isEqual(nextOnChangeValue)) {
onChange(nextOnChangeValue);
} else {
setInternalHSLA((prevHSLA) => ({
...prevHSLA,
...partialNewValue
}));
}
};
return /* @__PURE__ */ _jsxs(_Fragment, {
children: [/* @__PURE__ */ _jsx(InputWithSlider, {
min: 0,
max: 359,
label: "Hue",
abbreviation: "H",
value: colorValue.h,
onChange: (nextH) => {
updateHSLAValue({
h: nextH
});
}
}), /* @__PURE__ */ _jsx(InputWithSlider, {
min: 0,
max: 100,
label: "Saturation",
abbreviation: "S",
value: colorValue.s,
onChange: (nextS) => {
updateHSLAValue({
s: nextS
});
}
}), /* @__PURE__ */ _jsx(InputWithSlider, {
min: 0,
max: 100,
label: "Lightness",
abbreviation: "L",
value: colorValue.l,
onChange: (nextL) => {
updateHSLAValue({
l: nextL
});
}
}), enableAlpha && /* @__PURE__ */ _jsx(InputWithSlider, {
min: 0,
max: 100,
label: "Alpha",
abbreviation: "A",
value: Math.trunc(100 * colorValue.a),
onChange: (nextA) => {
updateHSLAValue({
a: nextA / 100
});
}
})]
});
};
export {
HslInput
};
//# sourceMappingURL=hsl-input.js.map