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

Color Editable Input HSLA

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "hsva", "hProps", "sProps", "lProps", "aProps", "className", "onChange"];
import React from 'react';
import EditableInputRGBA from '@uiw/react-color-editable-input-rgba';
import { color as handleColor, hsvaToHsla, hslaToHsva } from '@uiw/color-convert';
import { jsx as _jsx } from "react/jsx-runtime";
var EditableInputHSLA = /*#__PURE__*/React.forwardRef((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 = _objectWithoutPropertiesLoose(props, _excluded);
  var hsla = hsva ? hsvaToHsla(hsva) : {
    h: 0,
    s: 0,
    l: 0,
    a: 0
  };
  var handleChange = (value, type, evn) => {
    if (typeof value === 'number') {
      if (type === 'h') {
        if (value < 0) value = 0;
        if (value > 360) value = 360;
        onChange && onChange(handleColor(hslaToHsva(_extends({}, hsla, {
          h: value
        }))));
      }
      if (type === 's') {
        if (value < 0) value = 0;
        if (value > 100) value = 100;
        onChange && onChange(handleColor(hslaToHsva(_extends({}, hsla, {
          s: value
        }))));
      }
      if (type === 'l') {
        if (value < 0) value = 0;
        if (value > 100) value = 100;
        onChange && onChange(handleColor(hslaToHsva(_extends({}, hsla, {
          l: value
        }))));
      }
      if (type === 'a') {
        if (value < 0) value = 0;
        if (value > 1) value = 1;
        onChange && onChange(handleColor(hslaToHsva(_extends({}, hsla, {
          a: value
        }))));
      }
    }
  };
  var aPropsObj = aProps == false ? false : _extends({
    label: 'A',
    value: Math.round(hsla.a * 100) / 100
  }, aProps, {
    onChange: (evn, val) => handleChange(val, 'a', evn)
  });
  return /*#__PURE__*/_jsx(EditableInputRGBA, _extends({
    ref: ref,
    hsva: hsva,
    rProps: _extends({
      label: 'H',
      value: Math.round(hsla.h)
    }, hProps, {
      onChange: (evn, val) => handleChange(val, 'h', evn)
    }),
    gProps: _extends({
      label: 'S',
      value: Math.round(hsla.s) + "%"
    }, sProps, {
      onChange: (evn, val) => handleChange(val, 's', evn)
    }),
    bProps: _extends({
      label: 'L',
      value: Math.round(hsla.l) + "%"
    }, lProps, {
      onChange: (evn, val) => handleChange(val, 'l', evn)
    }),
    aProps: aPropsObj,
    className: [prefixCls, className || ''].filter(Boolean).join(' ')
  }, other));
});
EditableInputHSLA.displayName = 'EditableInputHSLA';
export default EditableInputHSLA;