@kdcloudjs/kdesign 1.7.0 → 1.7.2

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/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/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;
+}[];

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

@@ -0,0 +1,13 @@
+export var colorTypes = [{
+  type: 'HEX',
+  value: '#b2b2b2'
+}, {
+  type: 'HSB',
+  value: 'hsb(0, 0%, 70%)'
+}, {
+  type: 'RGB',
+  value: 'rgb(178, 178, 178)'
+}, {
+  type: 'HSL',
+  value: 'hsl(0, 0%, 70%)'
+}];

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

@@ -0,0 +1 @@
+export declare const defaultSystemColor = "#b2b2b2";

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

@@ -0,0 +1 @@
+export var defaultSystemColor = '#b2b2b2';

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

@@ -0,0 +1 @@
+export declare const systemPresetColor: string[];

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

@@ -0,0 +1 @@
+export var systemPresetColor = ['#A1ECFF', '#A1F5E8', '#A1E6B5', '#DDFF8F', '#FFEF8A', '#FFE0A6', '#FFCAA8', '#FFADB6', '#FF96AD', '#D4A8FF', '#99CCFF', '#B3D5FF', '#16B0F1', '#16B8B1', '#1BA854', '#77C404', '#FDC200', '#FF991C', '#FF5F1F', '#FB2323', '#F90D58', '#701DF0', '#0E5FD8', '#276FF5', '#FFFFFF', '#FAFAFA', '#F5F5F5', '#F2F2F2', '#E5E5E5', '#D9D9D9', '#CCCCCC', '#999999', '#666666', '#404040', '#212121', '#000000'];

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

@@ -0,0 +1,3 @@
+import ColorPicker from './color-picker';
+export * from './color-picker';
+export default ColorPicker;

package/es/color-picker/index.js

@@ -0,0 +1,3 @@
+import ColorPicker from './color-picker';
+export * from './color-picker';
+export default ColorPicker;