@uiw/react-color-editable-input-rgba/esm/index.js

Color Editable Input RGBA

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"];
import React from 'react';
import EditableInput from '@uiw/react-color-editable-input';
import { color as handleColor, hsvaToRgba, rgbaToHsva } from '@uiw/color-convert';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var EditableInputRGBA = /*#__PURE__*/React.forwardRef((props, ref) => {
  var {
      prefixCls = 'w-color-editable-input-rgba',
      hsva,
      placement = 'bottom',
      rProps = {},
      gProps = {},
      bProps = {},
      aProps = {},
      className,
      style,
      onChange
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  var rgba = hsva ? hsvaToRgba(hsva) : {};
  function handleBlur(evn) {
    var value = Number(evn.target.value);
    if (value && value > 255) {
      evn.target.value = '255';
    }
    if (value && value < 0) {
      evn.target.value = '0';
    }
  }
  var handleChange = (value, type, evn) => {
    if (typeof value === 'number') {
      if (type === 'a') {
        if (value < 0) value = 0;
        if (value > 100) value = 100;
        onChange && onChange(handleColor(rgbaToHsva(_extends({}, rgba, {
          a: value / 100
        }))));
      }
      if (value > 255) {
        value = 255;
        evn.target.value = '255';
      }
      if (value < 0) {
        value = 0;
        evn.target.value = '0';
      }
      if (type === 'r') {
        onChange && onChange(handleColor(rgbaToHsva(_extends({}, rgba, {
          r: value
        }))));
      }
      if (type === 'g') {
        onChange && onChange(handleColor(rgbaToHsva(_extends({}, rgba, {
          g: value
        }))));
      }
      if (type === 'b') {
        onChange && onChange(handleColor(rgbaToHsva(_extends({}, rgba, {
          b: value
        }))));
      }
    }
  };
  return /*#__PURE__*/_jsxs("div", _extends({
    ref: ref,
    className: [prefixCls, className || ''].filter(Boolean).join(' ')
  }, other, {
    style: _extends({
      fontSize: 11,
      display: 'flex'
    }, style),
    children: [/*#__PURE__*/_jsx(EditableInput, _extends({
      label: "R",
      value: rgba.r || 0,
      onBlur: handleBlur,
      placement: placement,
      onChange: (evn, val) => handleChange(val, 'r', evn)
    }, rProps, {
      style: _extends({}, rProps.style)
    })), /*#__PURE__*/_jsx(EditableInput, _extends({
      label: "G",
      value: rgba.g || 0,
      onBlur: handleBlur,
      placement: placement,
      onChange: (evn, val) => handleChange(val, 'g', evn)
    }, gProps, {
      style: _extends({
        marginLeft: 5
      }, rProps.style)
    })), /*#__PURE__*/_jsx(EditableInput, _extends({
      label: "B",
      value: rgba.b || 0,
      onBlur: handleBlur,
      placement: placement,
      onChange: (evn, val) => handleChange(val, 'b', evn)
    }, bProps, {
      style: _extends({
        marginLeft: 5
      }, bProps.style)
    })), aProps && /*#__PURE__*/_jsx(EditableInput, _extends({
      label: "A",
      value: rgba.a ? parseInt(String(rgba.a * 100), 10) : 0,
      onBlur: handleBlur,
      placement: placement,
      onChange: (evn, val) => handleChange(val, 'a', evn)
    }, aProps, {
      style: _extends({
        marginLeft: 5
      }, aProps.style)
    }))]
  }));
});
EditableInputRGBA.displayName = 'EditableInputRGBA';
export default EditableInputRGBA;