@kdcloudjs/kdesign 1.6.40 → 1.7.1

package/lib/cascader/util.js

@@ -18,9 +18,9 @@ var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _react = require("react");
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var __rest = void 0 && (void 0).__rest || function (s, e) {
@@ -213,9 +213,18 @@ var getChecked = function getChecked(checkedKeys, key) {
 };
 exports.getChecked = getChecked;
 var getCheckedNodes = function getCheckedNodes(flatNodes, checkedKeys) {
-  return (0, _filter.default)(flatNodes).call(flatNodes, function (node) {
-    return checkedKeys === null || checkedKeys === void 0 ? void 0 : (0, _includes.default)(checkedKeys).call(checkedKeys, node.value);
-  });
+  var result = [];
+  for (var i = 0; i < checkedKeys.length; i++) {
+    var key = checkedKeys[i];
+    for (var j = 0; j < flatNodes.length; j++) {
+      var obj = flatNodes[j];
+      if (obj.value === key) {
+        result.push(obj);
+        break;
+      }
+    }
+  }
+  return result;
 };
 var addKeys = function addKeys() {
   var _context6;

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;

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

@@ -0,0 +1,214 @@
+"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 _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 _classnames = _interopRequireDefault(require("classnames"));
+var _configProvider = require("../config-provider");
+var _index = require("../index");
+var _validateColor = require("./utils/validateColor");
+var _colorTypes = require("./constant/colorTypes");
+var _colorPickerPanel = _interopRequireDefault(require("./color-picker-panel"));
+var _colorFormat = require("./utils/colorFormat");
+var _convertLetters = require("./utils/convertLetters");
+var _defaultColor = require("./constant/defaultColor");
+var _color = _interopRequireDefault(require("color"));
+var _utils = require("../_utils");
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _systemPresetColor = require("./constant/systemPresetColor");
+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 ColorPicker = function ColorPicker(props) {
+  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var colorPickerProps = (0, _utils.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 = (0, _react.useState)(defaultValue || ''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inputColorValue = _useState2[0],
+    setInputColorValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultValue || _defaultColor.defaultSystemColor),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    correctColorValue = _useState4[0],
+    setCorrectColorValue = _useState4[1];
+  var _useState5 = (0, _react.useState)('HEX'),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    currentColorType = _useState6[0],
+    setCurrentColorType = _useState6[1];
+  var _useState7 = (0, _react.useState)(_colorTypes.colorTypes),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    colTypeArr = _useState8[0],
+    setColTypeArr = _useState8[1];
+  var _useState9 = (0, _react.useState)(defaultOpen),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    showPanel = _useState10[0],
+    setShowPanel = _useState10[1];
+  var _useState11 = (0, _react.useState)(1),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    alpha = _useState12[0],
+    setAlpha = _useState12[1];
+  var _useState13 = (0, _react.useState)(alpha * 100 + '%'),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    alphaNoVerifyVal = _useState14[0],
+    setAlphaNoVerifyVal = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    isFollow = _useState16[0],
+    setIsFollow = _useState16[1];
+  var _useState17 = (0, _react.useState)(),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+    clickedColorIndex = _useState18[0],
+    setClickedColorIndex = _useState18[1];
+  var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
+  var popUpLayer = getPrefixCls(prefixCls, 'color-picker-pop');
+  var containerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-container"));
+  var inputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-input"), className);
+  var inputRef = (0, _react.useRef)(null);
+  var setIconColor = function setIconColor(value) {
+    value === functionalColorName ? setIsFollow(true) : setIsFollow(false);
+    var inpValue = value === functionalColorName ? functionalColor : value;
+    var inputValType = (0, _validateColor.validateColor)(inpValue);
+    var setState = function setState(formatArr, correctColorValue, alpha, alphaStr) {
+      setColTypeArr(formatArr);
+      setCorrectColorValue(correctColorValue);
+      setAlpha(alpha);
+      setAlphaNoVerifyVal(alphaStr);
+    };
+    if (inputValType) {
+      var formatArr = (0, _colorFormat.colorFormat)(inpValue, (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(inpValue)).alpha(), 2));
+      setState(formatArr, formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value, (0, _color.default)((0, _colorFormat.getColorObj)(inpValue)).alpha(), ((0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(inpValue)).alpha(), 2) * 100).toFixed() + '%');
+      setClickedColorIndex((0, _colorFormat.highlightPresetColorIndex)(formatArr[0].value, (0, _colorFormat.presetColorToHEX)(presetColor || _systemPresetColor.systemPresetColor)));
+    } else {
+      var _formatArr = (0, _colorFormat.colorFormat)(_defaultColor.defaultSystemColor);
+      setState(_formatArr, _defaultColor.defaultSystemColor, 1, '100%');
+    }
+  };
+  var handleChange = function handleChange(e) {
+    setClickedColorIndex(-1);
+    var inpValue = (0, _convertLetters.toLowerCase)(e.target.value);
+    if (value === undefined) {
+      setIconColor(inpValue);
+      setInputColorValue(inpValue);
+    }
+    var callback = function callback(val, alpha) {
+      var formatArr = (0, _colorFormat.colorFormat)(val, alpha);
+      onChange && onChange(inpValue, formatArr);
+    };
+    if ((0, _validateColor.validateColor)(inpValue)) {
+      callback(inpValue, alpha);
+    } else {
+      callback(_defaultColor.defaultSystemColor, alpha);
+    }
+    functionalColor && showSwitch && setIsFollow(false);
+  };
+  var handleClick = function handleClick() {
+    setShowPanel(!showPanel);
+  };
+  (0, _react.useEffect)(function () {
+    if (value) {
+      setIconColor(value);
+    } else {
+      if (defaultValue) {
+        setIconColor(defaultValue);
+      }
+    }
+  }, [value, defaultValue]);
+  var afterIcon = function afterIcon() {
+    var _classNames;
+    var afterIconContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-icon"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-icon-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-icon-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-icon-up"), showPanel), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-icon-down"), !showPanel), _classNames));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: afterIconContainerCls,
+      style: {
+        backgroundColor: "".concat(colTypeArr[2].value || _defaultColor.defaultSystemColor)
+      }
+    }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "arrow-down"
+    }));
+  };
+  var colorInputEle = /*#__PURE__*/_react.default.createElement("div", {
+    className: containerCls,
+    ref: inputRef
+  }, /*#__PURE__*/_react.default.createElement(_index.Input, {
+    borderType: borderType,
+    placeholder: placeholder,
+    value: value !== null && value !== void 0 ? value : inputColorValue,
+    className: inputCls,
+    onChange: handleChange,
+    style: style,
+    onClick: handleClick
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handleClick,
+    className: "".concat(colorPickerPrefixCls, "-icon-container")
+  }, suffixIcon && suffixIcon(colTypeArr[2].value) || afterIcon()));
+  var panel = /*#__PURE__*/_react.default.createElement(_colorPickerPanel.default
+  // 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 = (0, _extends2.default)((0, _extends2.default)({}, colorPickerProps), {
+    popperClassName: popUpLayer,
+    placement: 'bottomLeft',
+    defaultVisible: showPanel,
+    visible: showPanel,
+    clickToClose: false
+  });
+  return (0, _usePopper.default)(colorInputEle, panel, popperProps);
+};
+ColorPicker.displayName = 'ColorPicker';
+var _default = ColorPicker;
+exports.default = _default;

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colorTypes = void 0;
+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%)'
+}];
+exports.colorTypes = colorTypes;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSystemColor = void 0;
+var defaultSystemColor = '#b2b2b2';
+exports.defaultSystemColor = defaultSystemColor;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.systemPresetColor = void 0;
+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'];
+exports.systemPresetColor = systemPresetColor;

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

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

package/lib/color-picker/index.js

@@ -0,0 +1,27 @@
+"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 _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _colorPicker = _interopRequireWildcard(require("./color-picker"));
+_Object$keys(_colorPicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _colorPicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _colorPicker[key];
+    }
+  });
+});
+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 _default = _colorPicker.default;
+exports.default = _default;