@kdcloudjs/kdesign 1.8.15 → 1.8.17

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

@@ -1,15 +1,15 @@
 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 _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import React, { useContext, useState, useRef, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
-import { Input, Icon } from '../index';
+import { Input } 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 { colorFormat, strFixed, getColorObj, highlightPresetColorIndex, presetColorToHEX } from './utils/colorFormat';
 import { defaultSystemColor } from './constant/defaultColor';
 import Color from 'color';
 import { getCompProps } from '../_utils';
@@ -24,64 +24,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 = useState(defaultValue || ''),
     _useState2 = _slicedToArray(_useState, 2),
     inputColorValue = _useState2[0],
     setInputColorValue = _useState2[1];
-  var _useState3 = useState(defaultValue || defaultSystemColor),
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    correctColorValue = _useState4[0],
-    setCorrectColorValue = _useState4[1];
-  var _useState5 = useState('HEX'),
+    inputCorrectColorValue = _useState4[0],
+    setInputCorrectColorValue = _useState4[1];
+  var _useState5 = useState(defaultValue || defaultSystemColor),
     _useState6 = _slicedToArray(_useState5, 2),
-    currentColorType = _useState6[0],
-    setCurrentColorType = _useState6[1];
-  var _useState7 = useState(colorTypes),
+    correctColorValue = _useState6[0],
+    setCorrectColorValue = _useState6[1];
+  var _useState7 = useState(panelFormatConfig.default),
     _useState8 = _slicedToArray(_useState7, 2),
-    colTypeArr = _useState8[0],
-    setColTypeArr = _useState8[1];
-  var _useState9 = useState(typeof visible === 'undefined' ? !!defaultOpen : !!visible),
+    currentColorType = _useState8[0],
+    setCurrentColorType = _useState8[1];
+  var _useState9 = useState(colorTypes),
     _useState10 = _slicedToArray(_useState9, 2),
-    showPanel = _useState10[0],
-    setShowPanel = _useState10[1];
-  var _useState11 = useState(1),
+    colTypeArr = _useState10[0],
+    setColTypeArr = _useState10[1];
+  var _useState11 = useState(typeof visible === 'undefined' ? !!defaultOpen : !!visible),
     _useState12 = _slicedToArray(_useState11, 2),
-    alpha = _useState12[0],
-    setAlpha = _useState12[1];
-  var _useState13 = useState(alpha * 100 + '%'),
+    showPanel = _useState12[0],
+    setShowPanel = _useState12[1];
+  var _useState13 = useState(0),
     _useState14 = _slicedToArray(_useState13, 2),
-    alphaNoVerifyVal = _useState14[0],
-    setAlphaNoVerifyVal = _useState14[1];
-  var _useState15 = useState(false),
+    alpha = _useState14[0],
+    setAlpha = _useState14[1];
+  var _useState15 = useState(alpha * 100 + '%'),
     _useState16 = _slicedToArray(_useState15, 2),
-    isFollow = _useState16[0],
-    setIsFollow = _useState16[1];
-  var _useState17 = useState(),
+    alphaNoVerifyVal = _useState16[0],
+    setAlphaNoVerifyVal = _useState16[1];
+  var _useState17 = useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    clickedColorIndex = _useState18[0],
-    setClickedColorIndex = _useState18[1];
+    isFollow = _useState18[0],
+    setIsFollow = _useState18[1];
+  var _useState19 = useState(),
+    _useState20 = _slicedToArray(_useState19, 2),
+    clickedPresetColorIndex = _useState20[0],
+    setClickedPresetColorIndex = _useState20[1];
+  var _useState21 = useState(),
+    _useState22 = _slicedToArray(_useState21, 2),
+    clickedHistoricalColorIndex = _useState22[0],
+    setClickedHistoricalColorIndex = _useState22[1];
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
   var popUpLayer = getPrefixCls(prefixCls, 'color-picker-pop');
-  var containerCls = classNames("".concat(colorPickerPrefixCls, "-container"));
+  var containerCls = classNames("".concat(colorPickerPrefixCls, "-container"), _defineProperty({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
   var inputCls = classNames("".concat(colorPickerPrefixCls, "-input"), className);
   var inputRef = 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.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(highlightPresetColorIndex(value, presetColorToHEX(presetColor || systemPresetColor)));
+      setClickedHistoricalColorIndex(highlightPresetColorIndex(value, presetColorToHEX(historicalColor)));
+    }
+  };
   var setIconColor = function setIconColor(value) {
     value === functionalColorName ? setIsFollow(true) : setIsFollow(false);
     var inpValue = value === functionalColorName ? functionalColor : value;
@@ -92,25 +116,32 @@ var ColorPicker = function ColorPicker(props) {
       setAlpha(alpha);
       setAlphaNoVerifyVal(alphaStr);
     };
+    var getAlphaStr = function getAlphaStr(color) {
+      return (strFixed(Color(getColorObj(color)).alpha(), 2) * 100).toFixed() + '%';
+    };
     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)));
+      setState(formatArr, colorFormat(inpValue, 1, currentColorType, true), Color(getColorObj(inpValue)).alpha(), getAlphaStr(inpValue));
+      setClickColorIndex(formatArr[0].value);
+    } else if (inpValue) {
+      var _formatArr = colorFormat(correctColorValue, alpha);
+      setState(_formatArr, correctColorValue, alpha, alphaNoVerifyVal);
     } else {
-      var _formatArr = colorFormat(defaultSystemColor);
-      setState(_formatArr, defaultSystemColor, 1, '100%');
+      var _formatArr2 = colorFormat(defaultSystemColor, 0);
+      setState(_formatArr2, defaultSystemColor, 0, '0%');
     }
   };
   var handleChange = function handleChange(e) {
-    setClickedColorIndex(-1);
-    var inpValue = 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 = colorFormat(val, alpha);
-      onChange && onChange(inpValue, formatArr);
+      onChange === null || onChange === void 0 ? void 0 : onChange(inpValue, formatArr);
     };
     if (validateColor(inpValue)) {
       callback(inpValue, alpha);
@@ -119,19 +150,41 @@ var ColorPicker = function ColorPicker(props) {
     }
     functionalColor && showSwitch && setIsFollow(false);
   };
+  var handleBlur = function handleBlur(e) {
+    var inpValue = e.target.value;
+    var formatArr = colorFormat(correctColorValue, alpha);
+    var getCurrentOutputColor = function getCurrentOutputColor() {
+      if (inputCorrectColorValue) {
+        return _findInstanceProperty(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);
   };
+  useEffect(function () {
+    if (validateColor(value !== null && value !== void 0 ? value : inputColorValue)) {
+      setInputCorrectColorValue(value !== null && value !== void 0 ? value : inputColorValue);
+    }
+  }, [inputColorValue, value]);
   useEffect(function () {
     if (typeof visible !== 'undefined') {
       setShowPanel(visible);
     }
   }, [visible]);
   useEffect(function () {
-    if (value) {
+    if (value !== undefined) {
       setIconColor(value);
     } else {
       if (defaultValue) {
@@ -139,34 +192,43 @@ var ColorPicker = function ColorPicker(props) {
       }
     }
   }, [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));
+  var beforeIcon = useCallback(function () {
+    var _classNames2;
+    var afterIconContainerCls = classNames("".concat(colorPickerPrefixCls, "-icon"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(colorPickerPrefixCls, "-icon-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(colorPickerPrefixCls, "-icon-bordered"), borderType === 'bordered'), _classNames2));
+    var noneLineCls = "".concat(colorPickerPrefixCls, "-icon-no-color-line");
     return React.createElement("div", {
       className: afterIconContainerCls,
       style: {
         backgroundColor: "".concat(colTypeArr[2].value || defaultSystemColor)
       }
-    }, showColorPickerPanel && React.createElement(Icon, {
-      type: "arrow-down"
+    }, !validateColor(value) && !inputCorrectColorValue && React.createElement("div", {
+      className: noneLineCls
     }));
-  };
+  }, [borderType, colTypeArr, colorPickerPrefixCls, inputCorrectColorValue, value]);
   var colorInputEle = React.createElement("div", {
     className: containerCls,
     ref: inputRef
   }, React.createElement(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.createElement("div", {
     onClick: handleClick,
-    className: "".concat(colorPickerPrefixCls, "-icon-container")
-  }, suffixIcon && suffixIcon(colTypeArr[2].value) || afterIcon()));
+    prefix: React.createElement("div", {
+      onClick: handleClick,
+      className: "".concat(colorPickerPrefixCls, "-icon-container")
+    }, prefixIcon ? prefixIcon(colTypeArr[2].value, beforeIcon()) : beforeIcon()),
+    suffix: suffixIcon && React.createElement("div", {
+      onClick: handleClick,
+      className: "".concat(colorPickerPrefixCls, "-icon-container")
+    }, suffixIcon(colTypeArr[2].value, beforeIcon()))
+  }));
   var panel = React.createElement(ColorPickerPanel, {
+    showAlphaInput: showAlphaInput,
+    showClear: showClear,
     showSwitch: showSwitch,
     showColorTransfer: showColorTransfer,
     showPresetColor: showPresetColor,
@@ -174,29 +236,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 = _extends(_extends({}, colorPickerProps), {

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

@@ -1,13 +1,13 @@
 export 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)'
 }];

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

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

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

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

package/es/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;