@kdcloudjs/kdesign 1.7.0 → 1.7.2

package/es/space/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/spin/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/split-panel/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/stepper/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/steps/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/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/style/themes/default.less

@@ -1,4 +1,3 @@
-
 @kd-prefix: kd;
 
 /* -----------  color  ——————---- start */
@@ -18,7 +17,7 @@
 
 @theme-color-disabled: @theme-color-level3;
 @theme-color-hover: @theme-color-level5;
-@theme-color-click: @theme-color-level7;// 点击色
+@theme-color-click: @theme-color-level7; // 点击色
 @theme-color-active-light: @theme-color-level1; // 浅色选中
 @theme-color-active-dark: @theme-color; // 深色选中
 @hover-color: #f5f5f5; // 中性的悬停色
@@ -68,9 +67,9 @@
 /* -----------  color  ——————---- end */
 
 /* -----------  motion  ——————---- start */
-@ease-out: cubic-bezier(0,.4,.4,1);
-@ease-in: cubic-bezier(0.4,0,1,0.6);
-@ease: cubic-bezier(0.4,0,0.6,1);
+@ease-out: cubic-bezier(0, .4, .4, 1);
+@ease-in: cubic-bezier(0.4, 0, 1, 0.6);
+@ease: cubic-bezier(0.4, 0, 0.6, 1);
 /* -----------  motion  ——————---- end */
 
 /* -----------  transition  ——————---- start */
@@ -488,6 +487,11 @@
 @date-ranges-width: 160px;
 
 /* -----------  DatePicker  ——————---- end */
+
+/* -----------  ColorPicker  ——————---- start */
+
+/* -----------  ColorPicker  ——————---- end */
+
 /* -----------  Tree  ——————---- start */
 @tree-node-height: 28px;
 @tree-font-size: @font-size;
@@ -702,4 +706,4 @@
 @advancedSelector-dropdown-options-height: 32px;
 @advancedSelector-hover-bg: @hover-color;
 
-/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- end */

package/es/switch/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/table/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/tabs/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/tag/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/timeline/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/tooltip/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/transfer/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/tree/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/tree-select/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/typography/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/upload/style/index.css

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

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/color-picker/color-picker-panel.js

@@ -0,0 +1,253 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../index");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _configProvider = require("../config-provider");
+var _systemPresetColor = require("./constant/systemPresetColor");
+var _colorFormat = require("./utils/colorFormat");
+var _defaultColor = require("./constant/defaultColor");
+var _validateColor = require("./utils/validateColor");
+var _convertLetters = require("./utils/convertLetters");
+var _color = _interopRequireDefault(require("color"));
+var _reactColor = require("react-color");
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+var _useOnClickOutside = _interopRequireDefault(require("./utils/hooks/useOnClickOutside"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable */
+
+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 = (0, _react.useRef)(null);
+  var panelClsRef = (0, _react.useRef)(null);
+  var Option = _index.Select.Option;
+  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    locale = _useContext.locale;
+  var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
+  var panelCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel"));
+  var panelChromePickerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-chrome"));
+  var panelFollowThemeCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-switch"));
+  var panelInputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-input"), (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-panel-input-no-recommend"), !showPresetColor));
+  var transparentCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-transparent"));
+  var colorDivContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-colorDivContainer"));
+  var colorLiClick = function colorLiClick(index, colorValue) {
+    var formatArr = (0, _colorFormat.colorFormat)(colorValue, alpha);
+    var formatValue = (0, _convertLetters.toLowerCase)(formatArr[(0, _colorFormat.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 = (0, _colorFormat.colorFormat)(correctColorValue, +val.replace('%', '') / 100, 'all', true);
+        outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value;
+        setPanelState(formatArr, outValue, outValue, +val.replace('%', '') / 100);
+        setClickedColorIndex((0, _colorFormat.highlightPresetColorIndex)(formatArr[0].value, (0, _colorFormat.presetColorToHEX)(presetColor || _systemPresetColor.systemPresetColor)));
+      } else if (regDot.test(val)) {
+        console.log(2);
+        formatArr = (0, _colorFormat.colorFormat)(correctColorValue, +val, 'all', true);
+        outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value;
+        setPanelState(formatArr, outValue, outValue, (0, _colorFormat.strFixed)(val, 2));
+        setClickedColorIndex((0, _colorFormat.highlightPresetColorIndex)(formatArr[0].value, (0, _colorFormat.presetColorToHEX)(presetColor || _systemPresetColor.systemPresetColor)));
+      } else {
+        console.log(3);
+        formatArr = (0, _colorFormat.colorFormat)(correctColorValue, 1, 'all', true);
+        outValue = formatArr[(0, _colorFormat.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((0, _colorFormat.strFixed)(+val * 100) + '%');
+    } else {
+      setAlphaNoVerifyVal('100%');
+    }
+  };
+  var handleSwitchChange = function handleSwitchChange(switchValue) {
+    var formatArr;
+    if (functionalColor) {
+      var inputValType = (0, _validateColor.validateColor)(functionalColor);
+      if (inputValType) {
+        if (value === undefined) {
+          setIsFollow(switchValue);
+          if (switchValue) {
+            formatArr = (0, _colorFormat.colorFormat)(functionalColor, alpha);
+            setPanelState(formatArr, formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value, functionalColorName, (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(functionalColor)).alpha(), 2), (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(functionalColor)).alpha(), 2) * 100 + '%');
+            setClickedColorIndex((0, _colorFormat.highlightPresetColorIndex)(formatArr[0].value, (0, _colorFormat.presetColorToHEX)(presetColor || _systemPresetColor.systemPresetColor)));
+          } else {
+            formatArr = (0, _colorFormat.colorFormat)(_defaultColor.defaultSystemColor, 1, 'all', true);
+            setPanelState(formatArr, _defaultColor.defaultSystemColor, '', 1, 100 + '%');
+            setClickedColorIndex(-1);
+          }
+        }
+      }
+      (0, _devwarning.default)(!inputValType, 'color-picker', "'themeColor' must be hexadecimal, RGB, HSB, HSL or color English name");
+    }
+    if (switchValue) {
+      onChange && onChange(functionalColorName, formatArr);
+    } else {
+      onChange && onChange(_defaultColor.defaultSystemColor, formatArr);
+    }
+  };
+  var handleChromeChange = function handleChromeChange(color) {
+    var formatArr = (0, _colorFormat.colorFormat)(color.hex, color.rgb.a);
+    var colorObj = formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)];
+    if (value === undefined) {
+      setIsFollow(false);
+      setPanelState(formatArr, colorObj.value, colorObj.value, color.rgb.a, (color.rgb.a * 100).toFixed() + '%');
+      setClickedColorIndex((0, _colorFormat.highlightPresetColorIndex)(formatArr[0].value, (0, _colorFormat.presetColorToHEX)(presetColor || _systemPresetColor.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((0, _validateColor.validateColor)(hexColor)) !== -1;
+    });
+    (0, _devwarning.default)(!isTrueFormat, 'color-picker', "'presetColor' must be Array of the HEX string type");
+    return isTrueFormat;
+  };
+  (0, _useOnClickOutside.default)([panelClsRef, inputRef], function () {
+    setShowPanel(false);
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: panelCls,
+    ref: panelClsRef
+  }, showColorPickerBox && /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
+    className: panelChromePickerCls,
+    color: colTypeArr[2].value,
+    onChange: handleChromeChange
+  }), functionalColor && showSwitch && /*#__PURE__*/_react.default.createElement("div", {
+    className: panelFollowThemeCls
+  }, /*#__PURE__*/_react.default.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), /*#__PURE__*/_react.default.createElement(_index.Switch, {
+    checked: isFollow,
+    onChange: handleSwitchChange
+  })), showColorTransfer && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: panelInputCls,
+    ref: panelInputRef
+  }, /*#__PURE__*/_react.default.createElement(_index.Select, {
+    disabled: isFollow,
+    borderType: "bordered",
+    value: correctColorValue,
+    placeholder: "#",
+    onChange: handleTypeChange,
+    showSearch: true,
+    optionLabelProp: "value",
+    getPopupContainer: function getPopupContainer() {
+      return panelInputRef.current;
+    }
+  }, (0, _map.default)(colTypeArr).call(colTypeArr, function (obj, i) {
+    return /*#__PURE__*/_react.default.createElement(Option, {
+      title: obj.value,
+      value: obj.value,
+      className: (0, _classnames.default)({
+        'active-option': obj.type === currentColorType && obj.value === correctColorValue
+      }),
+      key: i
+    }, obj.type);
+  }))), /*#__PURE__*/_react.default.createElement(_index.Input, {
+    className: transparentCls,
+    onChange: handleAlphaChange,
+    onBlur: handleAlphaBlur,
+    borderType: "bordered",
+    value: alphaNoVerifyVal,
+    disabled: isFollow
+  })), showPresetColor && /*#__PURE__*/_react.default.createElement("div", {
+    className: colorDivContainerCls
+  }, (0, _map.default)(_context = checkUserPresetColor(presetColor) && (0, _colorFormat.presetColorToHEX)(presetColor) || _systemPresetColor.systemPresetColor).call(_context, function (colorValue, i) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: i,
+      style: {
+        backgroundColor: "".concat(colorValue)
+      },
+      onClick: function onClick() {
+        colorLiClick(i, colorValue);
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('square', {
+        'square-click': clickedColorIndex === i
+      })
+    }));
+  })));
+};
+ColorPickerPanel.displayName = 'ColorPickerPanel';
+var _default = ColorPickerPanel;
+exports.default = _default;

package/lib/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;