@wordpress/components
Version:
UI components for WordPress.
74 lines (73 loc) • 1.47 kB
JavaScript
/**
* External dependencies
*/
import { colord } from 'colord';
/**
* Internal dependencies
*/
import { InputWithSlider } from './input-with-slider';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const RgbInput = ({
color,
onChange,
enableAlpha
}) => {
const {
r,
g,
b,
a
} = color.toRgb();
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(InputWithSlider, {
min: 0,
max: 255,
label: "Red",
abbreviation: "R",
value: r,
onChange: nextR => onChange(colord({
r: nextR,
g,
b,
a
}))
}), /*#__PURE__*/_jsx(InputWithSlider, {
min: 0,
max: 255,
label: "Green",
abbreviation: "G",
value: g,
onChange: nextG => onChange(colord({
r,
g: nextG,
b,
a
}))
}), /*#__PURE__*/_jsx(InputWithSlider, {
min: 0,
max: 255,
label: "Blue",
abbreviation: "B",
value: b,
onChange: nextB => onChange(colord({
r,
g,
b: nextB,
a
}))
}), enableAlpha && /*#__PURE__*/_jsx(InputWithSlider, {
min: 0,
max: 100,
label: "Alpha",
abbreviation: "A",
value: Math.trunc(a * 100),
onChange: nextA => onChange(colord({
r,
g,
b,
a: nextA / 100
}))
})]
});
};
//# sourceMappingURL=rgb-input.js.map