@kdcloudjs/kdesign 1.8.15 → 1.8.17

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

@@ -1,27 +1,35 @@
+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 _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useContext, useRef } from 'react';
+import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
+import React, { useContext, useRef, useEffect, useState } 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 { colorFormat, valOfCorrespondingType, strFixed, getColorObj, presetColorToHEX, colorToStr } from './utils/colorFormat';
 import { defaultSystemColor } from './constant/defaultColor';
 import { validateColor } from './utils/validateColor';
-import { toLowerCase } from './utils/convertLetters';
+import { toUpCase } from './utils/convertLetters';
 import Color from 'color';
 import { ChromePicker } from 'react-color';
 import devWarning from '../_utils/devwarning';
 import { useOnClickOutside } from '../_utils/hooks';
 import { isIE } from '../_utils/ieUtil';
 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,
@@ -29,26 +37,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 = useRef(null);
+  var panelSelectRef = useRef(null);
   var panelClsRef = useRef(null);
+  var _useState = useState(panelFormatConfig),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerFormatConfig = _useState2[0],
+    setInnerFormatConfig = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeGroupInptItem = _useState4[0],
+    setActiveGroupInptItem = _useState4[1];
+  var baseFormat = ['HEX', 'HSB', 'RGB', 'HSL'];
   var Option = Select.Option;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
@@ -57,66 +81,121 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
   var panelCls = classNames("".concat(colorPickerPrefixCls, "-panel"));
   var panelChromePickerCls = classNames("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity)), _classNames));
+  var panelClearColor = classNames("".concat(colorPickerPrefixCls, "-panel-clear"));
+  var panelClearColorBox = classNames("".concat(colorPickerPrefixCls, "-panel-clear-box"));
+  var panelClearColorText = classNames("".concat(colorPickerPrefixCls, "-panel-clear-text"));
   var panelFollowThemeCls = classNames("".concat(colorPickerPrefixCls, "-panel-switch"));
   var panelContainerCls = classNames("".concat(colorPickerPrefixCls, "-panel-container"));
+  var panelselectCls = classNames("".concat(colorPickerPrefixCls, "-panel-container-select"));
   var panelInputCls = classNames("".concat(colorPickerPrefixCls, "-panel-container-input"));
+  var panelInputGroupCls = classNames("".concat(colorPickerPrefixCls, "-panel-container-input-group"));
+  var gePanelInputGroupItemCls = function gePanelInputGroupItemCls(order) {
+    return classNames("".concat(colorPickerPrefixCls, "-panel-container-input-group-item"), {
+      active: activeGroupInptItem === order && order === 1
+    });
+  };
   var transparentCls = classNames("".concat(colorPickerPrefixCls, "-panel-container-transparent"));
-  var colorDivContainerCls = classNames("".concat(colorPickerPrefixCls, "-panel-colorDivContainer"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(colorPickerPrefixCls, "-panel-colorDivContainer-unset-color"), (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) === 0), _defineProperty(_classNames2, "".concat(colorPickerPrefixCls, "-panel-colorDivContainer-ie11"), isIE), _classNames2));
-  var colorLiClick = function colorLiClick(index, colorValue) {
-    var formatArr = colorFormat(colorValue, alpha);
-    var formatValue = toLowerCase(formatArr[valOfCorrespondingType(currentColorType)].value);
+  var colorBoxCls = classNames("".concat(colorPickerPrefixCls, "-panel-color-box"), _defineProperty({}, "".concat(colorPickerPrefixCls, "-panel-color-box-container-ie11"), isIE));
+  var colorBoxTitleCls = classNames("".concat(colorPickerPrefixCls, "-panel-color-box-title"));
+  var colorBoxContainerCls = classNames("".concat(colorPickerPrefixCls, "-panel-color-box-container"));
+  var historicalColorBoxCls = classNames("".concat(colorPickerPrefixCls, "-panel-historical-color-box"), _defineProperty({}, "".concat(colorPickerPrefixCls, "-panel-historical-color-box-container-ie11"), isIE));
+  var historicalColorBoxTitleCls = classNames("".concat(colorPickerPrefixCls, "-panel-historical-color-box-title"));
+  var historicalColorBoxContainerCls = classNames("".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 = colorFormat(defaultSystemColor, 0);
+    setPanelState(formatArr, defaultSystemColor, '', 0, '0%');
+    setClickColorIndex(-1);
+    onChange === null || onChange === void 0 ? void 0 : onChange('', formatArr);
+  };
+  var presetColorClick = function presetColorClick(index, colorValue) {
+    var colorLiAlpha = strFixed(Color(getColorObj(colorValue)).alpha(), 2);
+    var formatArr = colorFormat(colorValue, colorLiAlpha);
+    var formatCorrectValue = removeTransparency(colorValue);
+    var formatInputValue = toUpCase(formatArr[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 = strFixed(Color(getColorObj(colorValue)).alpha(), 2);
+    var formatArr = colorFormat(colorValue, colorLiAlpha);
+    var formatCorrectValue = removeTransparency(colorValue);
+    var formatInputValue = toUpCase(formatArr[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 = _findInstanceProperty(colTypeArr).call(colTypeArr, function (item) {
+      return item.type === selectValue;
+    })) === null || _a === void 0 ? void 0 : _a.value;
+    setCorrectColorValue(colorFormat(colorStr, 1, selectValue, true));
+    setInputColorValue((_b = _findInstanceProperty(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 = _findInstanceProperty(colTypeArr).call(colTypeArr, function (item) {
+      return item.type === format;
+    })) === null || _c === void 0 ? void 0 : _c.value, colTypeArr);
+  };
+  var removeTransparency = function removeTransparency(color) {
+    return 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 = colorFormat(correctColorValue, alpha, 'all', true);
+      var outValue = formatArr[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 = 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)) {
-        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 {
-        formatArr = colorFormat(correctColorValue, 1, 'all', true);
-        outValue = formatArr[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)%$/;
@@ -130,6 +209,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 = _findInstanceProperty(colTypeArr).call(colTypeArr, function (item) {
+      return item.type === format;
+    })) === null || _a === void 0 ? void 0 : _a.value;
+    if (validateColor(val)) {
+      var formatArr = colorFormat(val, inputCorrectColorValue ? alpha : 1, 'all', true);
+      var outValue = formatArr[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 = colorFormat(correctColor, 1, 'all', true);
+        setPanelState(_formatArr, removeTransparency(correctColor), correctColor, 1, '100%');
+        onChange === null || onChange === void 0 ? void 0 : onChange((_b = _findInstanceProperty(_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 = _findInstanceProperty(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 = colorFormat(correctColorValue, inputCorrectColorValue ? alpha : 1, 'all', true);
+    var outValue = formatArr[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 = _findInstanceProperty(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 = Color(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 = Color(getColorAttr())[methodName]();
+      if (currentColorType === 'RGB') {
+        return colorObj.toString();
+      }
+      return colorToStr(colorObj);
+    };
+    setCorrectColorValue(getColorValue());
+  };
+  var getColorNumberVal = function getColorNumberVal(color, i) {
+    var colorArr = Color(getColorObj(color)).color;
+    return colorArr[i];
+  };
   var handleSwitchChange = function handleSwitchChange(switchValue) {
     var formatArr;
     if (functionalColor) {
@@ -139,39 +310,40 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
           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)));
+            setPanelState(formatArr, removeTransparency(formatArr[valOfCorrespondingType(currentColorType)].value), functionalColorName, strFixed(Color(getColorObj(functionalColor)).alpha(), 2), strFixed(Color(getColorObj(functionalColor)).alpha(), 2) * 100 + '%');
+            setClickColorIndex(formatArr[0].value);
           } else {
             formatArr = colorFormat(defaultSystemColor, 1, 'all', true);
             setPanelState(formatArr, defaultSystemColor, '', 1, 100 + '%');
-            setClickedColorIndex(-1);
+            setClickColorIndex(formatArr[0].value);
           }
         }
       }
       devWarning(!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(defaultSystemColor, formatArr);
+      onChange === null || onChange === void 0 ? void 0 : onChange(defaultSystemColor, formatArr);
     }
   };
   var handleChromeChange = function handleChromeChange(color) {
-    var formatArr = colorFormat(color.hex, color.rgb.a);
+    var formatArr = colorFormat(color.hex, inputCorrectColorValue ? color.rgb.a : 1);
     var colorObj = formatArr[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(highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || 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(validateColor(hexColor)) !== -1;
+      return ['HEX', 'HEXA', 'HSB', 'HSBA', 'RGB', 'RGBA', 'HSL', 'HSLA', 'colorName'].indexOf(validateColor(hexColor)) !== -1;
     });
-    devWarning(!isTrueFormat, 'color-picker', "'presetColor' must be an array of hexadecimal, RGB, HSB, HSL or English color name string type");
+    devWarning(!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;
   };
   useOnClickOutside([panelClsRef, inputRef], function () {
@@ -180,66 +352,144 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     }
     showPanel && onVisibleChange && onVisibleChange(false);
   });
+  useEffect(function () {
+    if (!panelFormatConfig) return;
+    if (!Array.isArray(panelFormatConfig.show) || panelFormatConfig.show.length === 0) {
+      devWarning(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(_extends(_extends({}, panelFormatConfig), {
+        default: 'HEX'
+      }));
+      devWarning(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 = _filterInstanceProperty(baseFormat).call(baseFormat, function (ele) {
+        return panelFormatConfig.show.indexOf(ele) !== -1;
+      });
+      if (newShow.indexOf(panelFormatConfig.default) === -1) {
+        devWarning(true, 'color-picker', "'default' property of 'panelFormatConfig' must be one of 'show'");
+      }
+    } else {
+      devWarning(true, 'color-picker', "'show' property of 'panelFormatConfig' must be one or more of HEX, RGB, HSB, or HSL");
+    }
+  }, [panelFormatConfig]);
   return React.createElement(React.Fragment, null, showColorPickerPanel && React.createElement("div", {
     className: panelCls,
     ref: panelClsRef
-  }, React.createElement(ChromePicker, {
-    className: panelChromePickerCls,
-    color: colTypeArr[2].value,
-    onChange: handleChromeChange
-  }), functionalColor && showSwitch && React.createElement("div", {
+  }, showClear && React.createElement("div", {
+    className: panelClearColor
+  }, React.createElement("span", {
+    className: panelClearColorBox,
+    onClick: handleClearClick
+  }), React.createElement("span", {
+    className: panelClearColorText
+  }, "\u65E0\u989C\u8272\u586B\u5145")), functionalColor && showSwitch && React.createElement("div", {
     className: panelFollowThemeCls
   }, React.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), React.createElement(Switch, {
     checked: isFollow,
     onChange: handleSwitchChange
-  })), showColorTransfer && React.createElement("div", {
+  })), React.createElement(ChromePicker, {
+    className: panelChromePickerCls,
+    color: colTypeArr[2].value,
+    onChange: handleChromeChange
+  }), showColorTransfer && React.createElement("div", {
     className: panelContainerCls
   }, React.createElement("div", {
-    className: panelInputCls,
-    ref: panelInputRef
+    className: panelselectCls,
+    ref: panelSelectRef
   }, React.createElement(Select, {
     disabled: isFollow,
     borderType: "bordered",
-    value: correctColorValue,
-    placeholder: "#",
+    value: currentColorType,
     onChange: handleTypeChange,
     optionLabelProp: "value",
     getPopupContainer: function getPopupContainer() {
-      return panelInputRef.current;
+      return panelSelectRef.current;
     }
-  }, _mapInstanceProperty(colTypeArr).call(colTypeArr, function (obj, i) {
+  }, _mapInstanceProperty(_context = innerFormatConfig.show).call(_context, function (name, i) {
     return React.createElement(Option, {
-      title: obj.value,
-      value: obj.value,
+      title: name,
+      value: name,
       className: classNames({
-        'active-option': obj.type === currentColorType && obj.value === correctColorValue
+        'active-option': name === currentColorType
       }),
       key: i
-    }, obj.type);
-  }))), React.createElement(Input, {
+    }, name);
+  }))), currentColorType === 'HEX' ? React.createElement(Input, {
+    className: panelInputCls,
+    value: correctColorValue,
+    onChange: handleHEXInputChange,
+    onBlur: handleHEXInputBlur,
+    borderType: "bordered",
+    disabled: isFollow
+  }) : React.createElement("div", {
+    className: panelInputGroupCls
+  }, _mapInstanceProperty(_context2 = _fillInstanceProperty(_context3 = new Array(3)).call(_context3, undefined)).call(_context2, function (_, i) {
+    return React.createElement(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.createElement(Input, {
     className: transparentCls,
     onChange: handleAlphaChange,
     onBlur: handleAlphaBlur,
     borderType: "bordered",
     value: alphaNoVerifyVal,
     disabled: isFollow
-  })), showPresetColor && React.createElement("div", {
-    className: colorDivContainerCls
-  }, _mapInstanceProperty(_context = checkUserPresetColor(presetColor) && presetColorToHEX(presetColor) || systemPresetColor).call(_context, function (colorValue, i) {
+  })), historicalColor && (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) > 0 && React.createElement("div", {
+    className: historicalColorBoxCls
+  }, React.createElement("div", {
+    className: historicalColorBoxTitleCls
+  }, "\u6700\u8FD1\u4F7F\u7528\u989C\u8272"), React.createElement("div", {
+    className: historicalColorBoxContainerCls
+  }, checkUserPresetColor(historicalColor) && _mapInstanceProperty(_context4 = presetColorToHEX(historicalColor)).call(_context4, function (colorValue, i) {
+    return React.createElement("li", {
+      key: i,
+      style: {
+        backgroundColor: "".concat(colorValue)
+      },
+      onClick: function onClick() {
+        historicalColorClick(i, colorValue);
+      }
+    }, React.createElement("div", {
+      className: classNames('square', {
+        'square-click': clickedHistoricalColorIndex === i
+      })
+    }));
+  }))), showPresetColor && (presetColor && (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) > 0 || !presetColor && systemPresetColor.length > 0) && React.createElement("div", {
+    className: colorBoxCls
+  }, historicalColor && (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) > 0 && React.createElement("div", {
+    className: colorBoxTitleCls
+  }, "\u63A8\u8350\u8272"), React.createElement("div", {
+    className: colorBoxContainerCls
+  }, _mapInstanceProperty(_context5 = checkUserPresetColor(presetColor) && presetColorToHEX(presetColor) || systemPresetColor).call(_context5, function (colorValue, i) {
     return React.createElement("li", {
       key: i,
       style: {
         backgroundColor: "".concat(colorValue)
       },
       onClick: function onClick() {
-        colorLiClick(i, colorValue);
+        presetColorClick(i, colorValue);
       }
     }, React.createElement("div", {
       className: classNames('square', {
-        'square-click': clickedColorIndex === i
+        'square-click': clickedPresetColorIndex === i
       })
     }));
-  }))));
+  })))));
 };
 ColorPickerPanel.displayName = 'ColorPickerPanel';
 export default ColorPickerPanel;