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

Color Editable Input HSLA

"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 _reactColorEditableInputRgba = _interopRequireDefault(require("@uiw/react-color-editable-input-rgba"));
var _colorConvert = require("@uiw/color-convert");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "hsva", "hProps", "sProps", "lProps", "aProps", "className", "onChange"];
var EditableInputHSLA = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-editable-input-hsla' : _props$prefixCls,
    hsva = props.hsva,
    _props$hProps = props.hProps,
    hProps = _props$hProps === void 0 ? {} : _props$hProps,
    _props$sProps = props.sProps,
    sProps = _props$sProps === void 0 ? {} : _props$sProps,
    _props$lProps = props.lProps,
    lProps = _props$lProps === void 0 ? {} : _props$lProps,
    _props$aProps = props.aProps,
    aProps = _props$aProps === void 0 ? {} : _props$aProps,
    className = props.className,
    onChange = props.onChange,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var hsla = hsva ? (0, _colorConvert.hsvaToHsla)(hsva) : {
    h: 0,
    s: 0,
    l: 0,
    a: 0
  };
  var handleChange = function handleChange(value, type, evn) {
    if (typeof value === 'number') {
      if (type === 'h') {
        if (value < 0) value = 0;
        if (value > 360) value = 360;
        onChange && onChange((0, _colorConvert.color)((0, _colorConvert.hslaToHsva)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsla), {}, {
          h: value
        }))));
      }
      if (type === 's') {
        if (value < 0) value = 0;
        if (value > 100) value = 100;
        onChange && onChange((0, _colorConvert.color)((0, _colorConvert.hslaToHsva)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsla), {}, {
          s: value
        }))));
      }
      if (type === 'l') {
        if (value < 0) value = 0;
        if (value > 100) value = 100;
        onChange && onChange((0, _colorConvert.color)((0, _colorConvert.hslaToHsva)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsla), {}, {
          l: value
        }))));
      }
      if (type === 'a') {
        if (value < 0) value = 0;
        if (value > 1) value = 1;
        onChange && onChange((0, _colorConvert.color)((0, _colorConvert.hslaToHsva)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsla), {}, {
          a: value
        }))));
      }
    }
  };
  var aPropsObj = aProps == false ? false : (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    label: 'A',
    value: Math.round(hsla.a * 100) / 100
  }, aProps), {}, {
    onChange: function onChange(evn, val) {
      return handleChange(val, 'a', evn);
    }
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorEditableInputRgba["default"], (0, _objectSpread2["default"])({
    ref: ref,
    hsva: hsva,
    rProps: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
      label: 'H',
      value: Math.round(hsla.h)
    }, hProps), {}, {
      onChange: function onChange(evn, val) {
        return handleChange(val, 'h', evn);
      }
    }),
    gProps: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
      label: 'S',
      value: "".concat(Math.round(hsla.s), "%")
    }, sProps), {}, {
      onChange: function onChange(evn, val) {
        return handleChange(val, 's', evn);
      }
    }),
    bProps: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
      label: 'L',
      value: "".concat(Math.round(hsla.l), "%")
    }, lProps), {}, {
      onChange: function onChange(evn, val) {
        return handleChange(val, 'l', evn);
      }
    }),
    aProps: aPropsObj,
    className: [prefixCls, className || ''].filter(Boolean).join(' ')
  }, other));
});
EditableInputHSLA.displayName = 'EditableInputHSLA';
var _default = exports["default"] = EditableInputHSLA;
module.exports = exports.default;