@wordpress/components/build/color-picker/rgb-input.js

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RgbInput = void 0;
var _colord = require("colord");
var _inputWithSlider = require("./input-with-slider");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const RgbInput = ({
  color,
  onChange,
  enableAlpha
}) => {
  const {
    r,
    g,
    b,
    a
  } = color.toRgb();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
      min: 0,
      max: 255,
      label: "Red",
      abbreviation: "R",
      value: r,
      onChange: nextR => onChange((0, _colord.colord)({
        r: nextR,
        g,
        b,
        a
      }))
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
      min: 0,
      max: 255,
      label: "Green",
      abbreviation: "G",
      value: g,
      onChange: nextG => onChange((0, _colord.colord)({
        r,
        g: nextG,
        b,
        a
      }))
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
      min: 0,
      max: 255,
      label: "Blue",
      abbreviation: "B",
      value: b,
      onChange: nextB => onChange((0, _colord.colord)({
        r,
        g,
        b: nextB,
        a
      }))
    }), enableAlpha && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
      min: 0,
      max: 100,
      label: "Alpha",
      abbreviation: "A",
      value: Math.trunc(a * 100),
      onChange: nextA => onChange((0, _colord.colord)({
        r,
        g,
        b,
        a: nextA / 100
      }))
    })]
  });
};
exports.RgbInput = RgbInput;
//# sourceMappingURL=rgb-input.js.map