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

Color Editable Input RGBA

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _reactColorEditableInput = _interopRequireDefault(require("@uiw/react-color-editable-input"));
var _colorConvert = require("@uiw/color-convert");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"];
var EditableInputRGBA = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-editable-input-rgba' : _props$prefixCls,
    hsva = props.hsva,
    _props$placement = props.placement,
    placement = _props$placement === void 0 ? 'bottom' : _props$placement,
    _props$rProps = props.rProps,
    rProps = _props$rProps === void 0 ? {} : _props$rProps,
    _props$gProps = props.gProps,
    gProps = _props$gProps === void 0 ? {} : _props$gProps,
    _props$bProps = props.bProps,
    bProps = _props$bProps === void 0 ? {} : _props$bProps,
    _props$aProps = props.aProps,
    aProps = _props$aProps === void 0 ? {} : _props$aProps,
    className = props.className,
    style = props.style,
    onChange = props.onChange,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var rgba = hsva ? (0, _colorConvert.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 = function handleChange(value, type, evn) {
    if (typeof value === 'number') {
      if (type === 'a') {
        if (value < 0) value = 0;
        if (value > 100) value = 100;
        onChange && onChange((0, _colorConvert.color)((0, _colorConvert.rgbaToHsva)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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((0, _colorConvert.color)((0, _colorConvert.rgbaToHsva)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rgba), {}, {
          r: value
        }))));
      }
      if (type === 'g') {
        onChange && onChange((0, _colorConvert.color)((0, _colorConvert.rgbaToHsva)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rgba), {}, {
          g: value
        }))));
      }
      if (type === 'b') {
        onChange && onChange((0, _colorConvert.color)((0, _colorConvert.rgbaToHsva)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rgba), {}, {
          b: value
        }))));
      }
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    ref: ref,
    className: [prefixCls, className || ''].filter(Boolean).join(' ')
  }, other), {}, {
    style: (0, _objectSpread2["default"])({
      fontSize: 11,
      display: 'flex'
    }, style),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorEditableInput["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
      label: "R",
      value: rgba.r || 0,
      onBlur: handleBlur,
      placement: placement,
      onChange: function onChange(evn, val) {
        return handleChange(val, 'r', evn);
      }
    }, rProps), {}, {
      style: (0, _objectSpread2["default"])({}, rProps.style)
    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorEditableInput["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
      label: "G",
      value: rgba.g || 0,
      onBlur: handleBlur,
      placement: placement,
      onChange: function onChange(evn, val) {
        return handleChange(val, 'g', evn);
      }
    }, gProps), {}, {
      style: (0, _objectSpread2["default"])({
        marginLeft: 5
      }, rProps.style)
    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorEditableInput["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
      label: "B",
      value: rgba.b || 0,
      onBlur: handleBlur,
      placement: placement,
      onChange: function onChange(evn, val) {
        return handleChange(val, 'b', evn);
      }
    }, bProps), {}, {
      style: (0, _objectSpread2["default"])({
        marginLeft: 5
      }, bProps.style)
    })), aProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorEditableInput["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
      label: "A",
      value: rgba.a ? parseInt(String(rgba.a * 100), 10) : 0,
      onBlur: handleBlur,
      placement: placement,
      onChange: function onChange(evn, val) {
        return handleChange(val, 'a', evn);
      }
    }, aProps), {}, {
      style: (0, _objectSpread2["default"])({
        marginLeft: 5
      }, aProps.style)
    }))]
  }));
});
EditableInputRGBA.displayName = 'EditableInputRGBA';
var _default = exports["default"] = EditableInputRGBA;
module.exports = exports.default;