@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 {
      prefixCls = 'w-color-editable-input-hsla',
      hsva,
      hProps = {},
      sProps = {},
      lProps = {},
      aProps = {},
      className,
      onChange
    } = props,
    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;