@kdcloudjs/kdesign 1.8.14 → 1.8.16

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

@@ -8,8 +8,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../index");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -27,13 +32,16 @@ var _ieUtil = require("../_utils/ieUtil");
 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; }
 var ColorPickerPanel = function ColorPickerPanel(props) {
-  var _classNames, _classNames2, _context;
+  var _classNames, _context, _context2, _context3, _context4, _context5;
   var setCorrectColorValue = props.setCorrectColorValue,
+    setInputCorrectColorValue = props.setInputCorrectColorValue,
     setInputColorValue = props.setInputColorValue,
     setAlpha = props.setAlpha,
     setAlphaNoVerifyVal = props.setAlphaNoVerifyVal,
     setIsFollow = props.setIsFollow,
-    setClickedColorIndex = props.setClickedColorIndex,
+    setClickedPresetColorIndex = props.setClickedPresetColorIndex,
+    setClickedHistoricalColorIndex = props.setClickedHistoricalColorIndex,
+    setClickColorIndex = props.setClickColorIndex,
     setShowPanel = props.setShowPanel,
     setColTypeArr = props.setColTypeArr,
     setCurrentColorType = props.setCurrentColorType,
@@ -41,26 +49,42 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     onVisibleChange = props.onVisibleChange,
     alpha = props.alpha,
     alphaNoVerifyVal = props.alphaNoVerifyVal,
-    clickedColorIndex = props.clickedColorIndex,
+    clickedPresetColorIndex = props.clickedPresetColorIndex,
+    clickedHistoricalColorIndex = props.clickedHistoricalColorIndex,
     colTypeArr = props.colTypeArr,
     correctColorValue = props.correctColorValue,
+    inputCorrectColorValue = props.inputCorrectColorValue,
     currentColorType = props.currentColorType,
     functionalColor = props.functionalColor,
     functionalColorName = props.functionalColorName,
     switchName = props.switchName,
     inputRef = props.inputRef,
     isFollow = props.isFollow,
+    panelFormatConfig = props.panelFormatConfig,
+    format = props.format,
     presetColor = props.presetColor,
+    historicalColor = props.historicalColor,
+    showClear = props.showClear,
     showSwitch = props.showSwitch,
     showColorTransfer = props.showColorTransfer,
     showPresetColor = props.showPresetColor,
     showColorPickerBox = props.showColorPickerBox,
     showColorPickerPanel = props.showColorPickerPanel,
+    showAlphaInput = props.showAlphaInput,
     value = props.value,
     visible = props.visible,
     showPanel = props.showPanel;
-  var panelInputRef = (0, _react.useRef)(null);
+  var panelSelectRef = (0, _react.useRef)(null);
   var panelClsRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(panelFormatConfig),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    innerFormatConfig = _useState2[0],
+    setInnerFormatConfig = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeGroupInptItem = _useState4[0],
+    setActiveGroupInptItem = _useState4[1];
+  var baseFormat = ['HEX', 'HSB', 'RGB', 'HSL'];
   var Option = _index.Select.Option;
   var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
@@ -69,66 +93,121 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
   var panelCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel"));
   var panelChromePickerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox)), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue)), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity)), _classNames));
+  var panelClearColor = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-clear"));
+  var panelClearColorBox = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-clear-box"));
+  var panelClearColorText = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-clear-text"));
   var panelFollowThemeCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-switch"));
   var panelContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-container"));
+  var panelselectCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-container-select"));
   var panelInputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-container-input"));
+  var panelInputGroupCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-container-input-group"));
+  var gePanelInputGroupItemCls = function gePanelInputGroupItemCls(order) {
+    return (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-container-input-group-item"), {
+      active: activeGroupInptItem === order && order === 1
+    });
+  };
   var transparentCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-container-transparent"));
-  var colorDivContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-colorDivContainer"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(colorPickerPrefixCls, "-panel-colorDivContainer-unset-color"), (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) === 0), (0, _defineProperty2.default)(_classNames2, "".concat(colorPickerPrefixCls, "-panel-colorDivContainer-ie11"), _ieUtil.isIE), _classNames2));
-  var colorLiClick = function colorLiClick(index, colorValue) {
-    var formatArr = (0, _colorFormat.colorFormat)(colorValue, alpha);
-    var formatValue = (0, _convertLetters.toLowerCase)(formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value);
+  var colorBoxCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-color-box"), (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-panel-color-box-container-ie11"), _ieUtil.isIE));
+  var colorBoxTitleCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-color-box-title"));
+  var colorBoxContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-color-box-container"));
+  var historicalColorBoxCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-historical-color-box"), (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-panel-historical-color-box-container-ie11"), _ieUtil.isIE));
+  var historicalColorBoxTitleCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-historical-color-box-title"));
+  var historicalColorBoxContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-historical-color-box-container"));
+  var setPanelState = function setPanelState(formatArr, correctColorValue, inputColorValue, alpha, alphaStr) {
+    setColTypeArr(formatArr);
+    setCorrectColorValue(correctColorValue);
+    setInputCorrectColorValue(inputColorValue);
+    setInputColorValue(inputColorValue);
+    alpha && setAlpha(alpha);
+    alphaStr && setAlphaNoVerifyVal(alphaStr);
+  };
+  var handleClearClick = function handleClearClick() {
+    var formatArr = (0, _colorFormat.colorFormat)(_defaultColor.defaultSystemColor, 0);
+    setPanelState(formatArr, _defaultColor.defaultSystemColor, '', 0, '0%');
+    setClickColorIndex(-1);
+    onChange === null || onChange === void 0 ? void 0 : onChange('', formatArr);
+  };
+  var presetColorClick = function presetColorClick(index, colorValue) {
+    var colorLiAlpha = (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(colorValue)).alpha(), 2);
+    var formatArr = (0, _colorFormat.colorFormat)(colorValue, colorLiAlpha);
+    var formatCorrectValue = removeTransparency(colorValue);
+    var formatInputValue = (0, _convertLetters.toUpCase)(formatArr[(0, _colorFormat.valOfCorrespondingType)(format)].value);
     setIsFollow(false);
-    if (isFollow) {
-      setAlpha(1);
-      setAlphaNoVerifyVal(100 + '%');
-    }
+    setAlpha(isFollow ? 1 : colorLiAlpha);
+    setAlphaNoVerifyVal(isFollow ? 100 + '%' : colorLiAlpha * 100 + '%');
     if (value === undefined) {
-      setInputColorValue(formatValue);
-      setCorrectColorValue(formatValue);
+      setInputColorValue(formatInputValue);
+      setCorrectColorValue(formatCorrectValue);
       setColTypeArr(formatArr);
     }
-    setClickedColorIndex(index);
-    onChange && onChange(formatValue, formatArr);
+    setClickedPresetColorIndex(index);
+    onChange === null || onChange === void 0 ? void 0 : onChange(formatInputValue, formatArr);
   };
-  var handleTypeChange = function handleTypeChange(selectValue, option) {
-    setCurrentColorType(option.label);
+  var historicalColorClick = function historicalColorClick(index, colorValue) {
+    var colorLiAlpha = (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(colorValue)).alpha(), 2);
+    var formatArr = (0, _colorFormat.colorFormat)(colorValue, colorLiAlpha);
+    var formatCorrectValue = removeTransparency(colorValue);
+    var formatInputValue = (0, _convertLetters.toUpCase)(formatArr[(0, _colorFormat.valOfCorrespondingType)(format)].value);
+    setIsFollow(false);
+    setAlpha(isFollow ? 1 : colorLiAlpha);
+    setAlphaNoVerifyVal(isFollow ? 100 + '%' : colorLiAlpha * 100 + '%');
     if (value === undefined) {
-      setCorrectColorValue(selectValue);
-      setInputColorValue(selectValue);
+      setInputColorValue(formatInputValue);
+      setCorrectColorValue(formatCorrectValue);
+      setColTypeArr(formatArr);
     }
-    onChange && onChange(selectValue, colTypeArr);
+    setClickedHistoricalColorIndex(index);
+    onChange === null || onChange === void 0 ? void 0 : onChange(formatInputValue, formatArr);
   };
-  var setPanelState = function setPanelState(formatArr, correctColorValue, inputColorValue, alpha, alphaStr) {
-    setColTypeArr(formatArr);
-    setCorrectColorValue(correctColorValue);
-    setInputColorValue(inputColorValue);
-    alpha && setAlpha(alpha);
-    alphaStr && setAlphaNoVerifyVal(alphaStr);
+  var handleTypeChange = function handleTypeChange(selectValue) {
+    var _a, _b, _c;
+    setCurrentColorType(selectValue);
+    var colorStr = (_a = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
+      return item.type === selectValue;
+    })) === null || _a === void 0 ? void 0 : _a.value;
+    setCorrectColorValue((0, _colorFormat.colorFormat)(colorStr, 1, selectValue, true));
+    setInputColorValue((_b = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
+      return item.type === format;
+    })) === null || _b === void 0 ? void 0 : _b.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange((_c = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
+      return item.type === format;
+    })) === null || _c === void 0 ? void 0 : _c.value, colTypeArr);
+  };
+  var removeTransparency = function removeTransparency(color) {
+    return (0, _colorFormat.colorFormat)(color, 1, currentColorType, true);
   };
   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;
+    var getColorFormat = function getColorFormat(alpha) {
+      var formatArr = (0, _colorFormat.colorFormat)(correctColorValue, alpha, 'all', true);
+      var outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(format)].value;
+      var innerInput = removeTransparency(outValue);
+      return {
+        formatArr: formatArr,
+        outValue: outValue,
+        innerInput: innerInput
+      };
+    };
+    var alphaValue;
+    if (regPercentage.test(val)) {
+      alphaValue = +val.replace('%', '') / 100;
+    } else if (regDot.test(val)) {
+      alphaValue = +val;
+    } else {
+      alphaValue = 1;
+    }
+    var _getColorFormat = getColorFormat(alphaValue),
+      formatArr = _getColorFormat.formatArr,
+      outValue = _getColorFormat.outValue,
+      innerInput = _getColorFormat.innerInput;
     if (value === undefined) {
-      setAlphaNoVerifyVal(e.target.value);
-      if (regPercentage.test(val)) {
-        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)) {
-        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 {
-        formatArr = (0, _colorFormat.colorFormat)(correctColorValue, 1, 'all', true);
-        outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value;
-        setPanelState(formatArr, outValue, outValue, 1);
-      }
-      onChange && onChange(outValue, formatArr);
+      setAlphaNoVerifyVal(val);
+      setPanelState(formatArr, innerInput, outValue, alphaValue);
+      setClickColorIndex(formatArr[0].value);
     }
+    onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
   };
   var handleAlphaBlur = function handleAlphaBlur(e) {
     var regPercentage = /^(0|[1-9][0-9]?|100)%$/;
@@ -142,6 +221,98 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       setAlphaNoVerifyVal('100%');
     }
   };
+  var handleHEXInputChange = function handleHEXInputChange(e) {
+    setCorrectColorValue(e.target.value);
+  };
+  var handleHEXInputBlur = function handleHEXInputBlur(e) {
+    var _a, _b, _c;
+    var val = e.target.value;
+    var correctColor = (_a = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
+      return item.type === format;
+    })) === null || _a === void 0 ? void 0 : _a.value;
+    if ((0, _validateColor.validateColor)(val)) {
+      var formatArr = (0, _colorFormat.colorFormat)(val, inputCorrectColorValue ? alpha : 1, 'all', true);
+      var outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(format)].value;
+      if (value === undefined) {
+        var innerInput = removeTransparency(val);
+        if (!inputCorrectColorValue) {
+          setPanelState(formatArr, innerInput, outValue, 1, '100%');
+        } else {
+          setPanelState(formatArr, innerInput, outValue);
+        }
+      } else if (onChange === undefined) {
+        setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
+    } else {
+      if (!inputCorrectColorValue) {
+        var _formatArr = (0, _colorFormat.colorFormat)(correctColor, 1, 'all', true);
+        setPanelState(_formatArr, removeTransparency(correctColor), correctColor, 1, '100%');
+        onChange === null || onChange === void 0 ? void 0 : onChange((_b = (0, _find.default)(_formatArr).call(_formatArr, function (item) {
+          return item.type === format;
+        })) === null || _b === void 0 ? void 0 : _b.value, _formatArr);
+      } else {
+        setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+        onChange === null || onChange === void 0 ? void 0 : onChange((_c = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
+          return item.type === format;
+        })) === null || _c === void 0 ? void 0 : _c.value, colTypeArr);
+      }
+    }
+  };
+  var handleInputGroupItemFocus = function handleInputGroupItemFocus(order) {
+    setActiveGroupInptItem(order);
+  };
+  var handleInputGroupItemBlur = function handleInputGroupItemBlur() {
+    var _a;
+    var formatArr = (0, _colorFormat.colorFormat)(correctColorValue, inputCorrectColorValue ? alpha : 1, 'all', true);
+    var outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(format)].value;
+    if (value === undefined) {
+      if (inputCorrectColorValue) {
+        setPanelState(formatArr, correctColorValue, outValue);
+      } else {
+        setPanelState(formatArr, correctColorValue, outValue, 1, '100%');
+      }
+    } else if (onChange === undefined) {
+      var correctColor = (_a = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
+        return item.type === format;
+      })) === null || _a === void 0 ? void 0 : _a.value;
+      setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
+  };
+  var handleInputGroupItemChange = function handleInputGroupItemChange(e, color, i) {
+    var number = e.target.value;
+    if (!/^\d*$/.test(number)) return;
+    var colorArr = (0, _color.default)((0, _colorFormat.getColorObj)(color)).color;
+    var colorComponents = {
+      HSB: ['h', 's', 'v'],
+      HSL: ['h', 's', 'l'],
+      RGB: ['r', 'g', 'b']
+    };
+    var methodName = colorComponents[currentColorType].join('');
+    var getColorAttr = function getColorAttr() {
+      var selectedComponents = colorComponents[currentColorType];
+      if (!selectedComponents) {
+        return;
+      }
+      return selectedComponents.reduce(function (acc, component, index) {
+        acc[component] = i === index ? number : colorArr[index];
+        return acc;
+      }, {});
+    };
+    var getColorValue = function getColorValue() {
+      var colorObj = (0, _color.default)(getColorAttr())[methodName]();
+      if (currentColorType === 'RGB') {
+        return colorObj.toString();
+      }
+      return (0, _colorFormat.colorToStr)(colorObj);
+    };
+    setCorrectColorValue(getColorValue());
+  };
+  var getColorNumberVal = function getColorNumberVal(color, i) {
+    var colorArr = (0, _color.default)((0, _colorFormat.getColorObj)(color)).color;
+    return colorArr[i];
+  };
   var handleSwitchChange = function handleSwitchChange(switchValue) {
     var formatArr;
     if (functionalColor) {
@@ -151,39 +322,40 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
           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)));
+            setPanelState(formatArr, removeTransparency(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 + '%');
+            setClickColorIndex(formatArr[0].value);
           } else {
             formatArr = (0, _colorFormat.colorFormat)(_defaultColor.defaultSystemColor, 1, 'all', true);
             setPanelState(formatArr, _defaultColor.defaultSystemColor, '', 1, 100 + '%');
-            setClickedColorIndex(-1);
+            setClickColorIndex(formatArr[0].value);
           }
         }
       }
       (0, _devwarning.default)(!inputValType, 'color-picker', "'themeColor' must be hexadecimal, RGB, HSB, HSL or English color name");
     }
     if (switchValue) {
-      onChange && onChange(functionalColorName, formatArr);
+      onChange === null || onChange === void 0 ? void 0 : onChange(functionalColorName, formatArr);
     } else {
-      onChange && onChange(_defaultColor.defaultSystemColor, formatArr);
+      onChange === null || onChange === void 0 ? void 0 : onChange(_defaultColor.defaultSystemColor, formatArr);
     }
   };
   var handleChromeChange = function handleChromeChange(color) {
-    var formatArr = (0, _colorFormat.colorFormat)(color.hex, color.rgb.a);
+    var formatArr = (0, _colorFormat.colorFormat)(color.hex, inputCorrectColorValue ? color.rgb.a : 1);
     var colorObj = formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)];
+    console.log('colorObj', formatArr, colorObj);
     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)));
+      setPanelState(formatArr, removeTransparency(colorObj.value), colorObj.value, inputCorrectColorValue ? color.rgb.a : 1, inputCorrectColorValue ? (color.rgb.a * 100).toFixed() + '%' : '100%');
+      setClickColorIndex(formatArr[0].value);
     }
-    onChange && onChange(colorObj.value, formatArr);
+    onChange === null || onChange === void 0 ? void 0 : 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;
+      return ['HEX', 'HEXA', 'HSB', 'HSBA', 'RGB', 'RGBA', 'HSL', 'HSLA', 'colorName'].indexOf((0, _validateColor.validateColor)(hexColor)) !== -1;
     });
-    (0, _devwarning.default)(!isTrueFormat, 'color-picker', "'presetColor' must be an array of hexadecimal, RGB, HSB, HSL or English color name string type");
+    (0, _devwarning.default)(!isTrueFormat, 'color-picker', "'presetColor' must be an array of hexadecimal, HEXA, RGB, RGBA, HSB, HSBA, HSL, HSLA or English color name string type");
     return isTrueFormat;
   };
   (0, _hooks.useOnClickOutside)([panelClsRef, inputRef], function () {
@@ -192,66 +364,144 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     }
     showPanel && onVisibleChange && onVisibleChange(false);
   });
+  (0, _react.useEffect)(function () {
+    if (!panelFormatConfig) return;
+    if (!Array.isArray(panelFormatConfig.show) || panelFormatConfig.show.length === 0) {
+      (0, _devwarning.default)(true, 'color-picker', "'show' property of 'panelFormatConfig' must be one or more of HEX, RGB, HSB, or HSL");
+    }
+    if (baseFormat.indexOf(panelFormatConfig === null || panelFormatConfig === void 0 ? void 0 : panelFormatConfig.default) === -1) {
+      setInnerFormatConfig((0, _extends2.default)((0, _extends2.default)({}, panelFormatConfig), {
+        default: 'HEX'
+      }));
+      (0, _devwarning.default)(true, 'color-picker', "'default' property of 'panelFormatConfig' must be one of HEX, RGB, HSB, or HSL");
+    }
+    if (panelFormatConfig.show.every(function (item) {
+      return baseFormat.indexOf(item) !== -1;
+    })) {
+      var newShow = (0, _filter.default)(baseFormat).call(baseFormat, function (ele) {
+        return panelFormatConfig.show.indexOf(ele) !== -1;
+      });
+      if (newShow.indexOf(panelFormatConfig.default) === -1) {
+        (0, _devwarning.default)(true, 'color-picker', "'default' property of 'panelFormatConfig' must be one of 'show'");
+      }
+    } else {
+      (0, _devwarning.default)(true, 'color-picker', "'show' property of 'panelFormatConfig' must be one or more of HEX, RGB, HSB, or HSL");
+    }
+  }, [panelFormatConfig]);
   return _react.default.createElement(_react.default.Fragment, null, showColorPickerPanel && _react.default.createElement("div", {
     className: panelCls,
     ref: panelClsRef
-  }, _react.default.createElement(_reactColor.ChromePicker, {
-    className: panelChromePickerCls,
-    color: colTypeArr[2].value,
-    onChange: handleChromeChange
-  }), functionalColor && showSwitch && _react.default.createElement("div", {
+  }, showClear && _react.default.createElement("div", {
+    className: panelClearColor
+  }, _react.default.createElement("span", {
+    className: panelClearColorBox,
+    onClick: handleClearClick
+  }), _react.default.createElement("span", {
+    className: panelClearColorText
+  }, "\u65E0\u989C\u8272\u586B\u5145")), functionalColor && showSwitch && _react.default.createElement("div", {
     className: panelFollowThemeCls
   }, _react.default.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), _react.default.createElement(_index.Switch, {
     checked: isFollow,
     onChange: handleSwitchChange
-  })), showColorTransfer && _react.default.createElement("div", {
+  })), _react.default.createElement(_reactColor.ChromePicker, {
+    className: panelChromePickerCls,
+    color: colTypeArr[2].value,
+    onChange: handleChromeChange
+  }), showColorTransfer && _react.default.createElement("div", {
     className: panelContainerCls
   }, _react.default.createElement("div", {
-    className: panelInputCls,
-    ref: panelInputRef
+    className: panelselectCls,
+    ref: panelSelectRef
   }, _react.default.createElement(_index.Select, {
     disabled: isFollow,
     borderType: "bordered",
-    value: correctColorValue,
-    placeholder: "#",
+    value: currentColorType,
     onChange: handleTypeChange,
     optionLabelProp: "value",
     getPopupContainer: function getPopupContainer() {
-      return panelInputRef.current;
+      return panelSelectRef.current;
     }
-  }, (0, _map.default)(colTypeArr).call(colTypeArr, function (obj, i) {
+  }, (0, _map.default)(_context = innerFormatConfig.show).call(_context, function (name, i) {
     return _react.default.createElement(Option, {
-      title: obj.value,
-      value: obj.value,
+      title: name,
+      value: name,
       className: (0, _classnames.default)({
-        'active-option': obj.type === currentColorType && obj.value === correctColorValue
+        'active-option': name === currentColorType
       }),
       key: i
-    }, obj.type);
-  }))), _react.default.createElement(_index.Input, {
+    }, name);
+  }))), currentColorType === 'HEX' ? _react.default.createElement(_index.Input, {
+    className: panelInputCls,
+    value: correctColorValue,
+    onChange: handleHEXInputChange,
+    onBlur: handleHEXInputBlur,
+    borderType: "bordered",
+    disabled: isFollow
+  }) : _react.default.createElement("div", {
+    className: panelInputGroupCls
+  }, (0, _map.default)(_context2 = (0, _fill.default)(_context3 = new Array(3)).call(_context3, undefined)).call(_context2, function (_, i) {
+    return _react.default.createElement(_index.Input, {
+      key: i,
+      className: gePanelInputGroupItemCls(i),
+      onFocus: function onFocus() {
+        handleInputGroupItemFocus(i);
+      },
+      onBlur: handleInputGroupItemBlur,
+      value: getColorNumberVal(correctColorValue, i),
+      onChange: function onChange(e) {
+        handleInputGroupItemChange(e, correctColorValue, i);
+      },
+      borderType: "bordered",
+      disabled: isFollow
+    });
+  })), showAlphaInput && _react.default.createElement(_index.Input, {
     className: transparentCls,
     onChange: handleAlphaChange,
     onBlur: handleAlphaBlur,
     borderType: "bordered",
     value: alphaNoVerifyVal,
     disabled: isFollow
-  })), showPresetColor && _react.default.createElement("div", {
-    className: colorDivContainerCls
-  }, (0, _map.default)(_context = checkUserPresetColor(presetColor) && (0, _colorFormat.presetColorToHEX)(presetColor) || _systemPresetColor.systemPresetColor).call(_context, function (colorValue, i) {
+  })), historicalColor && (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) > 0 && _react.default.createElement("div", {
+    className: historicalColorBoxCls
+  }, _react.default.createElement("div", {
+    className: historicalColorBoxTitleCls
+  }, "\u6700\u8FD1\u4F7F\u7528\u989C\u8272"), _react.default.createElement("div", {
+    className: historicalColorBoxContainerCls
+  }, checkUserPresetColor(historicalColor) && (0, _map.default)(_context4 = (0, _colorFormat.presetColorToHEX)(historicalColor)).call(_context4, function (colorValue, i) {
+    return _react.default.createElement("li", {
+      key: i,
+      style: {
+        backgroundColor: "".concat(colorValue)
+      },
+      onClick: function onClick() {
+        historicalColorClick(i, colorValue);
+      }
+    }, _react.default.createElement("div", {
+      className: (0, _classnames.default)('square', {
+        'square-click': clickedHistoricalColorIndex === i
+      })
+    }));
+  }))), showPresetColor && (presetColor && (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) > 0 || !presetColor && _systemPresetColor.systemPresetColor.length > 0) && _react.default.createElement("div", {
+    className: colorBoxCls
+  }, historicalColor && (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) > 0 && _react.default.createElement("div", {
+    className: colorBoxTitleCls
+  }, "\u63A8\u8350\u8272"), _react.default.createElement("div", {
+    className: colorBoxContainerCls
+  }, (0, _map.default)(_context5 = checkUserPresetColor(presetColor) && (0, _colorFormat.presetColorToHEX)(presetColor) || _systemPresetColor.systemPresetColor).call(_context5, function (colorValue, i) {
     return _react.default.createElement("li", {
       key: i,
       style: {
         backgroundColor: "".concat(colorValue)
       },
       onClick: function onClick() {
-        colorLiClick(i, colorValue);
+        presetColorClick(i, colorValue);
       }
     }, _react.default.createElement("div", {
       className: (0, _classnames.default)('square', {
-        'square-click': clickedColorIndex === i
+        'square-click': clickedPresetColorIndex === i
       })
     }));
-  }))));
+  })))));
 };
 ColorPickerPanel.displayName = 'ColorPickerPanel';
 var _default = ColorPickerPanel;