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

UI components for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { colord } from 'colord';
/**
 * Internal dependencies
 */

import { InputWithSlider } from './input-with-slider';
export const RgbInput = _ref => {
  let {
    color,
    onChange,
    enableAlpha
  } = _ref;
  const {
    r,
    g,
    b,
    a
  } = color.toRgb();
  return createElement(Fragment, null, createElement(InputWithSlider, {
    min: 0,
    max: 255,
    label: "Red",
    abbreviation: "R",
    value: r,
    onChange: nextR => onChange(colord({
      r: nextR,
      g,
      b,
      a
    }))
  }), createElement(InputWithSlider, {
    min: 0,
    max: 255,
    label: "Green",
    abbreviation: "G",
    value: g,
    onChange: nextG => onChange(colord({
      r,
      g: nextG,
      b,
      a
    }))
  }), createElement(InputWithSlider, {
    min: 0,
    max: 255,
    label: "Blue",
    abbreviation: "B",
    value: b,
    onChange: nextB => onChange(colord({
      r,
      g,
      b: nextB,
      a
    }))
  }), enableAlpha && createElement(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