@kdcloudjs/kdesign 1.6.40 → 1.7.1

package/es/alert/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/anchor/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/avatar/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/badge/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/base-data/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/button/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/card/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/carousel/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/cascader/cascader.js

@@ -169,6 +169,17 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
     });
   }, [currentOptions, fieldNames.label, isMultiple]);
+  var values = useMemo(function () {
+    return !isMultiple ? _mapInstanceProperty(currentOptions).call(currentOptions, function (_ref3) {
+      var value = _ref3.value;
+      return value;
+    }) : _mapInstanceProperty(currentOptions).call(currentOptions, function (option) {
+      return _mapInstanceProperty(option).call(option, function (_ref4) {
+        var value = _ref4.value;
+        return value;
+      });
+    });
+  }, [currentOptions, isMultiple]);
   var allowClear = allProps.allowClear && value.length > 0;
   var locatorProps = {
     style: style,
@@ -256,7 +267,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: wrapperRef
     }, Array.isArray(currentOptions) && /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(currentOptions).call(currentOptions, function (option, index) {
       return /*#__PURE__*/React.createElement("span", {
-        key: _JSON$stringify(labels[index]),
+        key: _JSON$stringify(values[index]),
         className: classNames("".concat(prefixCls, "-selection-tag"))
       }, (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/React.createElement(Tag, {
         type: "edit",
@@ -331,8 +342,8 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue, newMultipleOptions);
   };
   var onChange = function onChange(selectedOptions) {
-    var selectedValue = _mapInstanceProperty(selectedOptions).call(selectedOptions, function (_ref3) {
-      var value = _ref3[fieldNames.value];
+    var selectedValue = _mapInstanceProperty(selectedOptions).call(selectedOptions, function (_ref5) {
+      var value = _ref5[fieldNames.value];
       return value;
     });
     setCurrentOptions(selectedOptions);

package/es/cascader/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/cascader/util.js

@@ -7,9 +7,9 @@ import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -193,9 +193,18 @@ export var getChecked = function getChecked(checkedKeys, key) {
   return checkedKeys === null || checkedKeys === void 0 ? void 0 : _includesInstanceProperty(checkedKeys).call(checkedKeys, key);
 };
 var getCheckedNodes = function getCheckedNodes(flatNodes, checkedKeys) {
-  return _filterInstanceProperty(flatNodes).call(flatNodes, function (node) {
-    return checkedKeys === null || checkedKeys === void 0 ? void 0 : _includesInstanceProperty(checkedKeys).call(checkedKeys, node.value);
-  });
+  var result = [];
+  for (var i = 0; i < checkedKeys.length; i++) {
+    var key = checkedKeys[i];
+    for (var j = 0; j < flatNodes.length; j++) {
+      var obj = flatNodes[j];
+      if (obj.value === key) {
+        result.push(obj);
+        break;
+      }
+    }
+  }
+  return result;
 };
 export var addKeys = function addKeys() {
   var _context6;

package/es/checkbox/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/city-picker/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/collapse/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/color-picker/color-picker-panel.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IColorPickerPanelProps } from './interface';
+declare const ColorPickerPanel: FC<IColorPickerPanelProps>;
+export default ColorPickerPanel;

package/es/color-picker/color-picker-panel.js

@@ -0,0 +1,239 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+/* eslint-disable */
+import React, { useContext, useRef } from 'react';
+import { Input, Select, Switch } from '../index';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider';
+import { systemPresetColor } from './constant/systemPresetColor';
+import { colorFormat, valOfCorrespondingType, strFixed, getColorObj, highlightPresetColorIndex, presetColorToHEX } from './utils/colorFormat';
+import { defaultSystemColor } from './constant/defaultColor';
+import { validateColor } from './utils/validateColor';
+import { toLowerCase } from './utils/convertLetters';
+import Color from 'color';
+import { ChromePicker } from 'react-color';
+import devWarning from '../_utils/devwarning';
+import useOnClickOutside from './utils/hooks/useOnClickOutside';
+var ColorPickerPanel = function ColorPickerPanel(props) {
+  var _context;
+  var setCorrectColorValue = props.setCorrectColorValue,
+    setInputColorValue = props.setInputColorValue,
+    setAlpha = props.setAlpha,
+    setAlphaNoVerifyVal = props.setAlphaNoVerifyVal,
+    setIsFollow = props.setIsFollow,
+    setClickedColorIndex = props.setClickedColorIndex,
+    setShowPanel = props.setShowPanel,
+    setColTypeArr = props.setColTypeArr,
+    setCurrentColorType = props.setCurrentColorType,
+    onChange = props.onChange,
+    alpha = props.alpha,
+    alphaNoVerifyVal = props.alphaNoVerifyVal,
+    clickedColorIndex = props.clickedColorIndex,
+    colTypeArr = props.colTypeArr,
+    correctColorValue = props.correctColorValue,
+    currentColorType = props.currentColorType,
+    functionalColor = props.functionalColor,
+    functionalColorName = props.functionalColorName,
+    switchName = props.switchName,
+    inputRef = props.inputRef,
+    isFollow = props.isFollow,
+    presetColor = props.presetColor,
+    showSwitch = props.showSwitch,
+    showColorTransfer = props.showColorTransfer,
+    showPresetColor = props.showPresetColor,
+    showColorPickerBox = props.showColorPickerBox,
+    value = props.value;
+  var panelInputRef = useRef(null);
+  var panelClsRef = useRef(null);
+  var Option = Select.Option;
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    locale = _useContext.locale;
+  var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
+  var panelCls = classNames("".concat(colorPickerPrefixCls, "-panel"));
+  var panelChromePickerCls = classNames("".concat(colorPickerPrefixCls, "-panel-chrome"));
+  var panelFollowThemeCls = classNames("".concat(colorPickerPrefixCls, "-panel-switch"));
+  var panelInputCls = classNames("".concat(colorPickerPrefixCls, "-panel-input"), _defineProperty({}, "".concat(colorPickerPrefixCls, "-panel-input-no-recommend"), !showPresetColor));
+  var transparentCls = classNames("".concat(colorPickerPrefixCls, "-panel-transparent"));
+  var colorDivContainerCls = classNames("".concat(colorPickerPrefixCls, "-panel-colorDivContainer"));
+  var colorLiClick = function colorLiClick(index, colorValue) {
+    var formatArr = colorFormat(colorValue, alpha);
+    var formatValue = toLowerCase(formatArr[valOfCorrespondingType(currentColorType)].value);
+    setIsFollow(false);
+    if (isFollow) {
+      setAlpha(1);
+      setAlphaNoVerifyVal(100 + '%');
+    }
+    if (value === undefined) {
+      setInputColorValue(formatValue);
+      setCorrectColorValue(formatValue);
+      setColTypeArr(formatArr);
+    }
+    setClickedColorIndex(index);
+    onChange && onChange(formatValue, colTypeArr);
+  };
+  var handleTypeChange = function handleTypeChange(selectValue, option) {
+    setCurrentColorType(option.label);
+    if (value === undefined) {
+      setCorrectColorValue(selectValue);
+      setInputColorValue(selectValue);
+    }
+    onChange && onChange(selectValue, colTypeArr);
+  };
+  var setPanelState = function setPanelState(formatArr, correctColorValue, inputColorValue, alpha, alphaStr) {
+    setColTypeArr(formatArr);
+    setCorrectColorValue(correctColorValue);
+    setInputColorValue(inputColorValue);
+    alpha && setAlpha(alpha);
+    alphaStr && setAlphaNoVerifyVal(alphaStr);
+  };
+  var handleAlphaChange = function handleAlphaChange(e) {
+    var regPercentage = /^(0|[1-9][0-9]?|100)%$/;
+    var regDot = /^(0(\.\d+)?|1(\.0+)?)$/;
+    var val = e.target.value;
+    var formatArr, outValue;
+    if (value === undefined) {
+      setAlphaNoVerifyVal(e.target.value);
+      if (regPercentage.test(val)) {
+        console.log(1);
+        formatArr = colorFormat(correctColorValue, +val.replace('%', '') / 100, 'all', true);
+        outValue = formatArr[valOfCorrespondingType(currentColorType)].value;
+        setPanelState(formatArr, outValue, outValue, +val.replace('%', '') / 100);
+        setClickedColorIndex(highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)));
+      } else if (regDot.test(val)) {
+        console.log(2);
+        formatArr = colorFormat(correctColorValue, +val, 'all', true);
+        outValue = formatArr[valOfCorrespondingType(currentColorType)].value;
+        setPanelState(formatArr, outValue, outValue, strFixed(val, 2));
+        setClickedColorIndex(highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)));
+      } else {
+        console.log(3);
+        formatArr = colorFormat(correctColorValue, 1, 'all', true);
+        outValue = formatArr[valOfCorrespondingType(currentColorType)].value;
+        setPanelState(formatArr, outValue, outValue, 1);
+      }
+      onChange && onChange(outValue, formatArr);
+    }
+  };
+  var handleAlphaBlur = function handleAlphaBlur(e) {
+    var regPercentage = /^(0|[1-9][0-9]?|100)%$/;
+    var regDot = /^(0(\.\d+)?|1(\.0+)?)$/;
+    var val = e.target.value;
+    if (regPercentage.test(val)) {
+      setAlphaNoVerifyVal(val);
+    } else if (regDot.test(val)) {
+      setAlphaNoVerifyVal(strFixed(+val * 100) + '%');
+    } else {
+      setAlphaNoVerifyVal('100%');
+    }
+  };
+  var handleSwitchChange = function handleSwitchChange(switchValue) {
+    var formatArr;
+    if (functionalColor) {
+      var inputValType = validateColor(functionalColor);
+      if (inputValType) {
+        if (value === undefined) {
+          setIsFollow(switchValue);
+          if (switchValue) {
+            formatArr = colorFormat(functionalColor, alpha);
+            setPanelState(formatArr, formatArr[valOfCorrespondingType(currentColorType)].value, functionalColorName, strFixed(Color(getColorObj(functionalColor)).alpha(), 2), strFixed(Color(getColorObj(functionalColor)).alpha(), 2) * 100 + '%');
+            setClickedColorIndex(highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)));
+          } else {
+            formatArr = colorFormat(defaultSystemColor, 1, 'all', true);
+            setPanelState(formatArr, defaultSystemColor, '', 1, 100 + '%');
+            setClickedColorIndex(-1);
+          }
+        }
+      }
+      devWarning(!inputValType, 'color-picker', "'themeColor' must be hexadecimal, RGB, HSB, HSL or color English name");
+    }
+    if (switchValue) {
+      onChange && onChange(functionalColorName, formatArr);
+    } else {
+      onChange && onChange(defaultSystemColor, formatArr);
+    }
+  };
+  var handleChromeChange = function handleChromeChange(color) {
+    var formatArr = colorFormat(color.hex, color.rgb.a);
+    var colorObj = formatArr[valOfCorrespondingType(currentColorType)];
+    if (value === undefined) {
+      setIsFollow(false);
+      setPanelState(formatArr, colorObj.value, colorObj.value, color.rgb.a, (color.rgb.a * 100).toFixed() + '%');
+      setClickedColorIndex(highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)));
+    }
+    onChange && onChange(colorObj.value, formatArr);
+  };
+  var checkUserPresetColor = function checkUserPresetColor(colorArr) {
+    if (!colorArr) return false;
+    var isTrueFormat = colorArr.every(function (hexColor) {
+      return ['HEX', 'HSB', 'RGB', 'HSL', 'colorName'].indexOf(validateColor(hexColor)) !== -1;
+    });
+    devWarning(!isTrueFormat, 'color-picker', "'presetColor' must be Array of the HEX string type");
+    return isTrueFormat;
+  };
+  useOnClickOutside([panelClsRef, inputRef], function () {
+    setShowPanel(false);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: panelCls,
+    ref: panelClsRef
+  }, showColorPickerBox && /*#__PURE__*/React.createElement(ChromePicker, {
+    className: panelChromePickerCls,
+    color: colTypeArr[2].value,
+    onChange: handleChromeChange
+  }), functionalColor && showSwitch && /*#__PURE__*/React.createElement("div", {
+    className: panelFollowThemeCls
+  }, /*#__PURE__*/React.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), /*#__PURE__*/React.createElement(Switch, {
+    checked: isFollow,
+    onChange: handleSwitchChange
+  })), showColorTransfer && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: panelInputCls,
+    ref: panelInputRef
+  }, /*#__PURE__*/React.createElement(Select, {
+    disabled: isFollow,
+    borderType: "bordered",
+    value: correctColorValue,
+    placeholder: "#",
+    onChange: handleTypeChange,
+    showSearch: true,
+    optionLabelProp: "value",
+    getPopupContainer: function getPopupContainer() {
+      return panelInputRef.current;
+    }
+  }, _mapInstanceProperty(colTypeArr).call(colTypeArr, function (obj, i) {
+    return /*#__PURE__*/React.createElement(Option, {
+      title: obj.value,
+      value: obj.value,
+      className: classNames({
+        'active-option': obj.type === currentColorType && obj.value === correctColorValue
+      }),
+      key: i
+    }, obj.type);
+  }))), /*#__PURE__*/React.createElement(Input, {
+    className: transparentCls,
+    onChange: handleAlphaChange,
+    onBlur: handleAlphaBlur,
+    borderType: "bordered",
+    value: alphaNoVerifyVal,
+    disabled: isFollow
+  })), showPresetColor && /*#__PURE__*/React.createElement("div", {
+    className: colorDivContainerCls
+  }, _mapInstanceProperty(_context = checkUserPresetColor(presetColor) && presetColorToHEX(presetColor) || systemPresetColor).call(_context, function (colorValue, i) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: i,
+      style: {
+        backgroundColor: "".concat(colorValue)
+      },
+      onClick: function onClick() {
+        colorLiClick(i, colorValue);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames('square', {
+        'square-click': clickedColorIndex === i
+      })
+    }));
+  })));
+};
+ColorPickerPanel.displayName = 'ColorPickerPanel';
+export default ColorPickerPanel;

package/es/color-picker/color-picker.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IColorPickerProps } from './interface';
+declare const ColorPicker: FC<Partial<IColorPickerProps>>;
+export default ColorPicker;

package/es/color-picker/color-picker.js

@@ -0,0 +1,201 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import React, { useContext, useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider';
+import { Input, Icon } from '../index';
+import { validateColor } from './utils/validateColor';
+import { colorTypes } from './constant/colorTypes';
+import ColorPickerPanel from './color-picker-panel';
+import { colorFormat, strFixed, getColorObj, valOfCorrespondingType, highlightPresetColorIndex, presetColorToHEX } from './utils/colorFormat';
+import { toLowerCase } from './utils/convertLetters';
+import { defaultSystemColor } from './constant/defaultColor';
+import Color from 'color';
+import { getCompProps } from '../_utils';
+import usePopper from '../_utils/usePopper';
+import { systemPresetColor } from './constant/systemPresetColor';
+var ColorPicker = function ColorPicker(props) {
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var colorPickerProps = getCompProps('ColorPicker', userDefaultProps, props);
+  var value = colorPickerProps.value,
+    className = colorPickerProps.className,
+    style = colorPickerProps.style,
+    functionalColor = colorPickerProps.functionalColor,
+    functionalColorName = colorPickerProps.functionalColorName,
+    switchName = colorPickerProps.switchName,
+    showSwitch = colorPickerProps.showSwitch,
+    showColorTransfer = colorPickerProps.showColorTransfer,
+    showPresetColor = colorPickerProps.showPresetColor,
+    showColorPickerBox = colorPickerProps.showColorPickerBox,
+    borderType = colorPickerProps.borderType,
+    presetColor = colorPickerProps.presetColor,
+    placeholder = colorPickerProps.placeholder,
+    defaultValue = colorPickerProps.defaultValue,
+    defaultOpen = colorPickerProps.defaultOpen,
+    suffixIcon = colorPickerProps.suffixIcon,
+    onChange = colorPickerProps.onChange;
+  var _useState = useState(defaultValue || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputColorValue = _useState2[0],
+    setInputColorValue = _useState2[1];
+  var _useState3 = useState(defaultValue || defaultSystemColor),
+    _useState4 = _slicedToArray(_useState3, 2),
+    correctColorValue = _useState4[0],
+    setCorrectColorValue = _useState4[1];
+  var _useState5 = useState('HEX'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentColorType = _useState6[0],
+    setCurrentColorType = _useState6[1];
+  var _useState7 = useState(colorTypes),
+    _useState8 = _slicedToArray(_useState7, 2),
+    colTypeArr = _useState8[0],
+    setColTypeArr = _useState8[1];
+  var _useState9 = useState(defaultOpen),
+    _useState10 = _slicedToArray(_useState9, 2),
+    showPanel = _useState10[0],
+    setShowPanel = _useState10[1];
+  var _useState11 = useState(1),
+    _useState12 = _slicedToArray(_useState11, 2),
+    alpha = _useState12[0],
+    setAlpha = _useState12[1];
+  var _useState13 = useState(alpha * 100 + '%'),
+    _useState14 = _slicedToArray(_useState13, 2),
+    alphaNoVerifyVal = _useState14[0],
+    setAlphaNoVerifyVal = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isFollow = _useState16[0],
+    setIsFollow = _useState16[1];
+  var _useState17 = useState(),
+    _useState18 = _slicedToArray(_useState17, 2),
+    clickedColorIndex = _useState18[0],
+    setClickedColorIndex = _useState18[1];
+  var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
+  var popUpLayer = getPrefixCls(prefixCls, 'color-picker-pop');
+  var containerCls = classNames("".concat(colorPickerPrefixCls, "-container"));
+  var inputCls = classNames("".concat(colorPickerPrefixCls, "-input"), className);
+  var inputRef = useRef(null);
+  var setIconColor = function setIconColor(value) {
+    value === functionalColorName ? setIsFollow(true) : setIsFollow(false);
+    var inpValue = value === functionalColorName ? functionalColor : value;
+    var inputValType = validateColor(inpValue);
+    var setState = function setState(formatArr, correctColorValue, alpha, alphaStr) {
+      setColTypeArr(formatArr);
+      setCorrectColorValue(correctColorValue);
+      setAlpha(alpha);
+      setAlphaNoVerifyVal(alphaStr);
+    };
+    if (inputValType) {
+      var formatArr = colorFormat(inpValue, strFixed(Color(getColorObj(inpValue)).alpha(), 2));
+      setState(formatArr, formatArr[valOfCorrespondingType(currentColorType)].value, Color(getColorObj(inpValue)).alpha(), (strFixed(Color(getColorObj(inpValue)).alpha(), 2) * 100).toFixed() + '%');
+      setClickedColorIndex(highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)));
+    } else {
+      var _formatArr = colorFormat(defaultSystemColor);
+      setState(_formatArr, defaultSystemColor, 1, '100%');
+    }
+  };
+  var handleChange = function handleChange(e) {
+    setClickedColorIndex(-1);
+    var inpValue = toLowerCase(e.target.value);
+    if (value === undefined) {
+      setIconColor(inpValue);
+      setInputColorValue(inpValue);
+    }
+    var callback = function callback(val, alpha) {
+      var formatArr = colorFormat(val, alpha);
+      onChange && onChange(inpValue, formatArr);
+    };
+    if (validateColor(inpValue)) {
+      callback(inpValue, alpha);
+    } else {
+      callback(defaultSystemColor, alpha);
+    }
+    functionalColor && showSwitch && setIsFollow(false);
+  };
+  var handleClick = function handleClick() {
+    setShowPanel(!showPanel);
+  };
+  useEffect(function () {
+    if (value) {
+      setIconColor(value);
+    } else {
+      if (defaultValue) {
+        setIconColor(defaultValue);
+      }
+    }
+  }, [value, defaultValue]);
+  var afterIcon = function afterIcon() {
+    var _classNames;
+    var afterIconContainerCls = classNames("".concat(colorPickerPrefixCls, "-icon"), (_classNames = {}, _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-icon-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-icon-bordered"), borderType === 'bordered'), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-icon-up"), showPanel), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-icon-down"), !showPanel), _classNames));
+    return /*#__PURE__*/React.createElement("div", {
+      className: afterIconContainerCls,
+      style: {
+        backgroundColor: "".concat(colTypeArr[2].value || defaultSystemColor)
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down"
+    }));
+  };
+  var colorInputEle = /*#__PURE__*/React.createElement("div", {
+    className: containerCls,
+    ref: inputRef
+  }, /*#__PURE__*/React.createElement(Input, {
+    borderType: borderType,
+    placeholder: placeholder,
+    value: value !== null && value !== void 0 ? value : inputColorValue,
+    className: inputCls,
+    onChange: handleChange,
+    style: style,
+    onClick: handleClick
+  }), /*#__PURE__*/React.createElement("div", {
+    onClick: handleClick,
+    className: "".concat(colorPickerPrefixCls, "-icon-container")
+  }, suffixIcon && suffixIcon(colTypeArr[2].value) || afterIcon()));
+  var panel = /*#__PURE__*/React.createElement(ColorPickerPanel
+  // API
+  , {
+    // API
+    showSwitch: showSwitch,
+    showColorTransfer: showColorTransfer,
+    showPresetColor: showPresetColor,
+    showColorPickerBox: showColorPickerBox,
+    functionalColor: functionalColor,
+    functionalColorName: functionalColorName,
+    switchName: switchName,
+    presetColor: presetColor,
+    value: value,
+    // private
+    setInputColorValue: setInputColorValue,
+    setCorrectColorValue: setCorrectColorValue,
+    correctColorValue: correctColorValue,
+    clickedColorIndex: clickedColorIndex,
+    setClickedColorIndex: setClickedColorIndex,
+    onChange: onChange,
+    alpha: alpha,
+    setAlpha: setAlpha,
+    alphaNoVerifyVal: alphaNoVerifyVal,
+    setAlphaNoVerifyVal: setAlphaNoVerifyVal,
+    isFollow: isFollow,
+    setIsFollow: setIsFollow,
+    setShowPanel: setShowPanel,
+    inputRef: inputRef,
+    colTypeArr: colTypeArr,
+    setColTypeArr: setColTypeArr,
+    currentColorType: currentColorType,
+    setCurrentColorType: setCurrentColorType
+  });
+  var popperProps = _extends(_extends({}, colorPickerProps), {
+    popperClassName: popUpLayer,
+    placement: 'bottomLeft',
+    defaultVisible: showPanel,
+    visible: showPanel,
+    clickToClose: false
+  });
+  return usePopper(colorInputEle, panel, popperProps);
+};
+ColorPicker.displayName = 'ColorPicker';
+export default ColorPicker;

package/es/color-picker/constant/colorTypes.d.ts

@@ -0,0 +1,4 @@
+export declare const colorTypes: {
+    type: string;
+    value: string;
+}[];