@kdcloudjs/kdesign 1.8.14 → 1.8.16

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 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"));
@@ -19,7 +20,6 @@ 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");
@@ -36,64 +36,88 @@ var ColorPicker = function ColorPicker(props) {
   var value = colorPickerProps.value,
     className = colorPickerProps.className,
     style = colorPickerProps.style,
+    pure = colorPickerProps.pure,
     functionalColor = colorPickerProps.functionalColor,
     functionalColorName = colorPickerProps.functionalColorName,
     switchName = colorPickerProps.switchName,
+    showAlphaInput = colorPickerProps.showAlphaInput,
+    showClear = colorPickerProps.showClear,
     showSwitch = colorPickerProps.showSwitch,
     showColorTransfer = colorPickerProps.showColorTransfer,
     showPresetColor = colorPickerProps.showPresetColor,
     showColorPickerBox = colorPickerProps.showColorPickerBox,
+    format = colorPickerProps.format,
+    panelFormatConfig = colorPickerProps.panelFormatConfig,
     borderType = colorPickerProps.borderType,
     presetColor = colorPickerProps.presetColor,
+    historicalColor = colorPickerProps.historicalColor,
     placeholder = colorPickerProps.placeholder,
     defaultValue = colorPickerProps.defaultValue,
     defaultOpen = colorPickerProps.defaultOpen,
     visible = colorPickerProps.visible,
     suffixIcon = colorPickerProps.suffixIcon,
+    prefixIcon = colorPickerProps.prefixIcon,
     onChange = colorPickerProps.onChange,
     onVisibleChange = colorPickerProps.onVisibleChange;
   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),
+  var _useState3 = (0, _react.useState)(''),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    correctColorValue = _useState4[0],
-    setCorrectColorValue = _useState4[1];
-  var _useState5 = (0, _react.useState)('HEX'),
+    inputCorrectColorValue = _useState4[0],
+    setInputCorrectColorValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultValue || _defaultColor.defaultSystemColor),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    currentColorType = _useState6[0],
-    setCurrentColorType = _useState6[1];
-  var _useState7 = (0, _react.useState)(_colorTypes.colorTypes),
+    correctColorValue = _useState6[0],
+    setCorrectColorValue = _useState6[1];
+  var _useState7 = (0, _react.useState)(panelFormatConfig.default),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    colTypeArr = _useState8[0],
-    setColTypeArr = _useState8[1];
-  var _useState9 = (0, _react.useState)(typeof visible === 'undefined' ? !!defaultOpen : !!visible),
+    currentColorType = _useState8[0],
+    setCurrentColorType = _useState8[1];
+  var _useState9 = (0, _react.useState)(_colorTypes.colorTypes),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    showPanel = _useState10[0],
-    setShowPanel = _useState10[1];
-  var _useState11 = (0, _react.useState)(1),
+    colTypeArr = _useState10[0],
+    setColTypeArr = _useState10[1];
+  var _useState11 = (0, _react.useState)(typeof visible === 'undefined' ? !!defaultOpen : !!visible),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    alpha = _useState12[0],
-    setAlpha = _useState12[1];
-  var _useState13 = (0, _react.useState)(alpha * 100 + '%'),
+    showPanel = _useState12[0],
+    setShowPanel = _useState12[1];
+  var _useState13 = (0, _react.useState)(0),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    alphaNoVerifyVal = _useState14[0],
-    setAlphaNoVerifyVal = _useState14[1];
-  var _useState15 = (0, _react.useState)(false),
+    alpha = _useState14[0],
+    setAlpha = _useState14[1];
+  var _useState15 = (0, _react.useState)(alpha * 100 + '%'),
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    isFollow = _useState16[0],
-    setIsFollow = _useState16[1];
-  var _useState17 = (0, _react.useState)(),
+    alphaNoVerifyVal = _useState16[0],
+    setAlphaNoVerifyVal = _useState16[1];
+  var _useState17 = (0, _react.useState)(false),
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    clickedColorIndex = _useState18[0],
-    setClickedColorIndex = _useState18[1];
+    isFollow = _useState18[0],
+    setIsFollow = _useState18[1];
+  var _useState19 = (0, _react.useState)(),
+    _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+    clickedPresetColorIndex = _useState20[0],
+    setClickedPresetColorIndex = _useState20[1];
+  var _useState21 = (0, _react.useState)(),
+    _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+    clickedHistoricalColorIndex = _useState22[0],
+    setClickedHistoricalColorIndex = _useState22[1];
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
   var popUpLayer = getPrefixCls(prefixCls, 'color-picker-pop');
-  var containerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-container"));
+  var containerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-container"), (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
   var inputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-input"), className);
   var inputRef = (0, _react.useRef)(null);
-  var showColorPickerPanel = showColorTransfer || typeof showPresetColor === 'boolean' && showPresetColor && (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) || typeof showPresetColor === 'undefined' || (functionalColor === null || functionalColor === void 0 ? void 0 : functionalColor.length) && showSwitch || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity);
+  var showColorPickerPanel = showColorTransfer || typeof showPresetColor === 'boolean' && showPresetColor && ((presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) || _systemPresetColor.systemPresetColor.length) || typeof showPresetColor === 'undefined' || showClear || (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) || (functionalColor === null || functionalColor === void 0 ? void 0 : functionalColor.length) && showSwitch || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity);
+  var setClickColorIndex = function setClickColorIndex(value) {
+    if (typeof value === 'number') {
+      setClickedPresetColorIndex(value);
+      setClickedHistoricalColorIndex(value);
+    } else {
+      setClickedPresetColorIndex((0, _colorFormat.highlightPresetColorIndex)(value, (0, _colorFormat.presetColorToHEX)(presetColor || _systemPresetColor.systemPresetColor)));
+      setClickedHistoricalColorIndex((0, _colorFormat.highlightPresetColorIndex)(value, (0, _colorFormat.presetColorToHEX)(historicalColor)));
+    }
+  };
   var setIconColor = function setIconColor(value) {
     value === functionalColorName ? setIsFollow(true) : setIsFollow(false);
     var inpValue = value === functionalColorName ? functionalColor : value;
@@ -104,25 +128,32 @@ var ColorPicker = function ColorPicker(props) {
       setAlpha(alpha);
       setAlphaNoVerifyVal(alphaStr);
     };
+    var getAlphaStr = function getAlphaStr(color) {
+      return ((0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(color)).alpha(), 2) * 100).toFixed() + '%';
+    };
     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)));
+      setState(formatArr, (0, _colorFormat.colorFormat)(inpValue, 1, currentColorType, true), (0, _color.default)((0, _colorFormat.getColorObj)(inpValue)).alpha(), getAlphaStr(inpValue));
+      setClickColorIndex(formatArr[0].value);
+    } else if (inpValue) {
+      var _formatArr = (0, _colorFormat.colorFormat)(correctColorValue, alpha);
+      setState(_formatArr, correctColorValue, alpha, alphaNoVerifyVal);
     } else {
-      var _formatArr = (0, _colorFormat.colorFormat)(_defaultColor.defaultSystemColor);
-      setState(_formatArr, _defaultColor.defaultSystemColor, 1, '100%');
+      var _formatArr2 = (0, _colorFormat.colorFormat)(_defaultColor.defaultSystemColor, 0);
+      setState(_formatArr2, _defaultColor.defaultSystemColor, 0, '0%');
     }
   };
   var handleChange = function handleChange(e) {
-    setClickedColorIndex(-1);
-    var inpValue = (0, _convertLetters.toLowerCase)(e.target.value);
+    setClickColorIndex(-1);
+    var inpValue = e.target.value;
+    if (!inpValue) setInputCorrectColorValue('');
     if (value === undefined) {
       setIconColor(inpValue);
-      setInputColorValue(inpValue);
     }
+    setInputColorValue(inpValue);
     var callback = function callback(val, alpha) {
       var formatArr = (0, _colorFormat.colorFormat)(val, alpha);
-      onChange && onChange(inpValue, formatArr);
+      onChange === null || onChange === void 0 ? void 0 : onChange(inpValue, formatArr);
     };
     if ((0, _validateColor.validateColor)(inpValue)) {
       callback(inpValue, alpha);
@@ -131,19 +162,41 @@ var ColorPicker = function ColorPicker(props) {
     }
     functionalColor && showSwitch && setIsFollow(false);
   };
+  var handleBlur = function handleBlur(e) {
+    var inpValue = e.target.value;
+    var formatArr = (0, _colorFormat.colorFormat)(correctColorValue, alpha);
+    var getCurrentOutputColor = function getCurrentOutputColor() {
+      if (inputCorrectColorValue) {
+        return (0, _find.default)(formatArr).call(formatArr, function (item) {
+          return item.type === format;
+        }).value;
+      }
+      return '';
+    };
+    if (value === undefined) {
+      setIconColor(inpValue);
+      setInputColorValue(getCurrentOutputColor());
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(getCurrentOutputColor(), formatArr);
+  };
   var handleClick = function handleClick() {
     if (typeof visible === 'undefined') {
       setShowPanel(!showPanel);
     }
     onVisibleChange && onVisibleChange(!showPanel);
   };
+  (0, _react.useEffect)(function () {
+    if ((0, _validateColor.validateColor)(value !== null && value !== void 0 ? value : inputColorValue)) {
+      setInputCorrectColorValue(value !== null && value !== void 0 ? value : inputColorValue);
+    }
+  }, [inputColorValue, value]);
   (0, _react.useEffect)(function () {
     if (typeof visible !== 'undefined') {
       setShowPanel(visible);
     }
   }, [visible]);
   (0, _react.useEffect)(function () {
-    if (value) {
+    if (value !== undefined) {
       setIconColor(value);
     } else {
       if (defaultValue) {
@@ -151,34 +204,43 @@ var ColorPicker = function ColorPicker(props) {
       }
     }
   }, [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));
+  var beforeIcon = (0, _react.useCallback)(function () {
+    var _classNames2;
+    var afterIconContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-icon"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(colorPickerPrefixCls, "-icon-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(colorPickerPrefixCls, "-icon-bordered"), borderType === 'bordered'), _classNames2));
+    var noneLineCls = "".concat(colorPickerPrefixCls, "-icon-no-color-line");
     return _react.default.createElement("div", {
       className: afterIconContainerCls,
       style: {
         backgroundColor: "".concat(colTypeArr[2].value || _defaultColor.defaultSystemColor)
       }
-    }, showColorPickerPanel && _react.default.createElement(_index.Icon, {
-      type: "arrow-down"
+    }, !(0, _validateColor.validateColor)(value) && !inputCorrectColorValue && _react.default.createElement("div", {
+      className: noneLineCls
     }));
-  };
+  }, [borderType, colTypeArr, colorPickerPrefixCls, inputCorrectColorValue, value]);
   var colorInputEle = _react.default.createElement("div", {
     className: containerCls,
     ref: inputRef
   }, _react.default.createElement(_index.Input, {
-    borderType: borderType,
+    borderType: pure ? 'bordered' : borderType,
     placeholder: placeholder,
     value: value !== null && value !== void 0 ? value : inputColorValue,
     className: inputCls,
     onChange: handleChange,
+    onBlur: handleBlur,
     style: style,
-    onClick: handleClick
-  }), _react.default.createElement("div", {
     onClick: handleClick,
-    className: "".concat(colorPickerPrefixCls, "-icon-container")
-  }, suffixIcon && suffixIcon(colTypeArr[2].value) || afterIcon()));
+    prefix: _react.default.createElement("div", {
+      onClick: handleClick,
+      className: "".concat(colorPickerPrefixCls, "-icon-container")
+    }, prefixIcon ? prefixIcon(colTypeArr[2].value, beforeIcon()) : beforeIcon()),
+    suffix: suffixIcon && _react.default.createElement("div", {
+      onClick: handleClick,
+      className: "".concat(colorPickerPrefixCls, "-icon-container")
+    }, suffixIcon(colTypeArr[2].value, beforeIcon()))
+  }));
   var panel = _react.default.createElement(_colorPickerPanel.default, {
+    showAlphaInput: showAlphaInput,
+    showClear: showClear,
     showSwitch: showSwitch,
     showColorTransfer: showColorTransfer,
     showPresetColor: showPresetColor,
@@ -186,29 +248,37 @@ var ColorPicker = function ColorPicker(props) {
     functionalColor: functionalColor,
     functionalColorName: functionalColorName,
     switchName: switchName,
+    format: format,
+    panelFormatConfig: panelFormatConfig,
     presetColor: presetColor,
+    historicalColor: historicalColor,
     value: value,
     visible: visible,
     showPanel: showPanel,
     onVisibleChange: onVisibleChange,
+    setInputCorrectColorValue: setInputCorrectColorValue,
     setInputColorValue: setInputColorValue,
     setCorrectColorValue: setCorrectColorValue,
+    setClickedPresetColorIndex: setClickedPresetColorIndex,
+    setClickedHistoricalColorIndex: setClickedHistoricalColorIndex,
+    setClickColorIndex: setClickColorIndex,
+    setAlpha: setAlpha,
+    setAlphaNoVerifyVal: setAlphaNoVerifyVal,
+    setIsFollow: setIsFollow,
+    setShowPanel: setShowPanel,
+    setColTypeArr: setColTypeArr,
+    setCurrentColorType: setCurrentColorType,
     correctColorValue: correctColorValue,
-    clickedColorIndex: clickedColorIndex,
-    setClickedColorIndex: setClickedColorIndex,
+    inputCorrectColorValue: inputCorrectColorValue,
+    clickedPresetColorIndex: clickedPresetColorIndex,
+    clickedHistoricalColorIndex: clickedHistoricalColorIndex,
     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,
     showColorPickerPanel: showColorPickerPanel
   });
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, colorPickerProps), {

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

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.colorTypes = void 0;
 var colorTypes = [{
   type: 'HEX',
-  value: '#b2b2b2'
+  value: '#FFFFFF00'
 }, {
   type: 'HSB',
-  value: 'hsb(0, 0%, 70%)'
+  value: 'HSBA(0, 0%, 100%, 0)'
 }, {
   type: 'RGB',
-  value: 'rgb(178, 178, 178)'
+  value: 'RGBA(255, 255, 255, 0)'
 }, {
   type: 'HSL',
-  value: 'hsl(0, 0%, 70%)'
+  value: 'HSLA(0, 0%, 100%, 0)'
 }];
 exports.colorTypes = colorTypes;

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

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

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

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultSystemColor = void 0;
-var defaultSystemColor = '#b2b2b2';
+var defaultSystemColor = '#FFFFFF';
 exports.defaultSystemColor = defaultSystemColor;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { PopperProps } from '../_utils/usePopper';
 export declare const ColorTypes: ["HEX", "HSB", "RGB", "HSL", "themeColor"];
 export declare type ColorType = typeof ColorTypes[number];
@@ -8,41 +8,55 @@ export interface IColorTypesObj {
 }
 export declare const BorderTypes: ["underline", "bordered"];
 export declare type BorderType = typeof BorderTypes[number];
+export interface IInnerFormat {
+    show: Exclude<typeof ColorTypes[number], 'themeColor'>[];
+    default: Exclude<typeof ColorTypes[number], 'themeColor'>;
+}
 export interface IColorPickerProps extends PopperProps {
-    value: string;
-    defaultValue: string;
-    className: string;
-    style: React.CSSProperties;
     borderType: BorderType;
-    suffixIcon: (rgbColor: string) => React.ReactNode;
+    className: string;
+    defaultValue: string;
+    defaultOpen: boolean;
     functionalColorName: string;
     functionalColor: string;
+    format: Exclude<typeof ColorTypes[number], 'themeColor'>;
+    historicalColor: string[];
+    panelFormatConfig: IInnerFormat;
+    placeholder: string;
+    presetColor: string[];
+    pure: boolean;
+    style: React.CSSProperties;
     switchName: {
         name: string;
         internationalName?: string;
     };
+    showAlphaInput: boolean;
+    showClear: boolean;
     showSwitch: boolean;
     showColorTransfer: boolean;
     showPresetColor: boolean;
-    placeholder: string;
-    presetColor: string[];
+    showArrow: boolean;
     showColorPickerBox: {
         showBox: boolean;
         showHue: boolean;
         showOpacity: boolean;
     };
-    defaultOpen: boolean;
     visible: boolean;
+    value: string;
+    suffixIcon: (rgbColor: string, dom: ReactNode) => React.ReactNode;
+    prefixIcon: (rgbColor: string, dom: ReactNode) => React.ReactNode;
     onChange: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
     onVisibleChange: (visible: boolean) => void;
 }
 export interface IColorPickerPanelProps {
     alpha: number;
     alphaNoVerifyVal: string;
-    clickedColorIndex?: number;
+    clickedPresetColorIndex?: number;
+    clickedHistoricalColorIndex?: number;
     colTypeArr: Array<IColorTypesObj>;
     correctColorValue: string;
     currentColorType: IColorTypesObj['type'];
+    inputCorrectColorValue: string;
     functionalColor?: string;
     functionalColorName: string;
     switchName: {
@@ -51,8 +65,13 @@ export interface IColorPickerPanelProps {
     };
     inputRef: any;
     isFollow: boolean;
+    panelFormatConfig: IInnerFormat;
+    format: Exclude<typeof ColorTypes[number], 'themeColor'>;
     presetColor?: string[];
+    historicalColor?: string[];
+    showAlphaInput?: boolean;
     showSwitch?: boolean;
+    showClear?: boolean;
     showColorTransfer?: boolean;
     showPresetColor?: boolean;
     showColorPickerBox?: {
@@ -66,11 +85,14 @@ export interface IColorPickerPanelProps {
     showPanel: boolean;
     setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void;
     setColTypeArr: (colTypeArr: Array<IColorTypesObj>) => void;
-    setClickedColorIndex: (clickedColorIndex: number) => void;
+    setClickedPresetColorIndex: (clickedColorIndex: number) => void;
+    setClickedHistoricalColorIndex: (clickedColorIndex: number) => void;
+    setClickColorIndex: (value: number | string) => void;
     setIsFollow: (isFollow: boolean) => void;
     setAlphaNoVerifyVal: (NoVerifyVal: string) => void;
     setAlpha: (alpha: number) => void;
     setCorrectColorValue: (colorValue: string) => void;
+    setInputCorrectColorValue: (colorValue: string) => void;
     setInputColorValue: (colorValue: string) => void;
     setShowPanel: (showPanel: boolean) => void;
     onChange?: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;