From 828db969629717e4e03df5d9cd37b6d430ec61d3 Mon Sep 17 00:00:00 2001
From: qmhc <544022268@qq.com>
Date: Sat, 13 May 2023 17:34:09 +0800
Subject: [PATCH] style: optimize ColorPicker code (#42326)

* chore: fix ColorPicker parameters' type

* chore: improve code

* chore: update
---
 components/color-picker/ColorPicker.tsx             | 2 +-
 components/color-picker/ColorPickerPanel.tsx        | 2 +-
 components/color-picker/components/ColorPresets.tsx | 6 +++---
 components/color-picker/hooks/useColorState.ts      | 5 ++---
 components/color-picker/index.en-US.md              | 2 +-
 components/color-picker/{index.tsx => index.ts}     | 0
 components/color-picker/index.zh-CN.md              | 2 +-
 7 files changed, 9 insertions(+), 10 deletions(-)
 rename components/color-picker/{index.tsx => index.ts} (100%)

diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx
index 77a05d2093..0a9a52cb10 100644
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@@ -28,7 +28,7 @@ export interface ColorPickerProps
   > {
   value?: Color | string;
   defaultValue?: Color | string;
-  children?: React.ReactElement;
+  children?: React.ReactNode;
   open?: boolean;
   disabled?: boolean;
   placement?: TriggerPlacement;
diff --git a/components/color-picker/ColorPickerPanel.tsx b/components/color-picker/ColorPickerPanel.tsx
index 15b2a1f129..b7e62e82e0 100644
--- a/components/color-picker/ColorPickerPanel.tsx
+++ b/components/color-picker/ColorPickerPanel.tsx
@@ -17,7 +17,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
   const { prefixCls, allowClear, presets, onChange, onClear, color, ...injectProps } = props;
   const colorPickerPanelPrefixCls = `${prefixCls}-inner-panel`;
 
-  const extraPanelRender = (panel: React.ReactElement) => (
+  const extraPanelRender = (panel: React.ReactNode) => (
     <div className={colorPickerPanelPrefixCls}>
       {allowClear && (
         <ColorClear
diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx
index b4f7da6dd3..aa595cc58e 100644
--- a/components/color-picker/components/ColorPresets.tsx
+++ b/components/color-picker/components/ColorPresets.tsx
@@ -19,7 +19,7 @@ interface ColorPresetsProps extends Pick<ColorPickerBaseProps, 'prefixCls'> {
 
 const genPresetColor = (list: PresetsItem[]) =>
   list.map((value) => {
-    value.colors = value.colors.map((color) => generateColor(color));
+    value.colors = value.colors.map(generateColor);
     return value;
   });
 
@@ -35,7 +35,7 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
   const [locale] = useLocale('ColorPicker');
   const [presetsValue] = useMergedState(genPresetColor(presets), {
     value: genPresetColor(presets),
-    postState: (item) => genPresetColor(item),
+    postState: genPresetColor,
   });
   const colorPresetsPrefixCls = `${prefixCls}-presets`;
 
@@ -57,7 +57,7 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
             key={`panel-${preset?.label}`}
           >
             <div className={`${colorPresetsPrefixCls}-items`}>
-              {Array.isArray(preset?.colors) && preset?.colors.length > 0 ? (
+              {Array.isArray(preset?.colors) && preset?.colors.length ? (
                 preset.colors.map((presetColor: Color) => (
                   <ColorBlock
                     key={`preset-${presetColor.toHexString()}`}
diff --git a/components/color-picker/hooks/useColorState.ts b/components/color-picker/hooks/useColorState.ts
index befb11a4f2..0a1849b357 100644
--- a/components/color-picker/hooks/useColorState.ts
+++ b/components/color-picker/hooks/useColorState.ts
@@ -15,7 +15,7 @@ const useColorState = (
 ): [Color, React.Dispatch<React.SetStateAction<Color>>] => {
   const { defaultValue, value } = option;
   const [colorValue, setColorValue] = useState(() => {
-    let mergeState;
+    let mergeState: string | Color | undefined;
     if (hasValue(value)) {
       mergeState = value;
     } else if (hasValue(defaultValue)) {
@@ -23,8 +23,7 @@ const useColorState = (
     } else {
       mergeState = defaultStateValue;
     }
-    const genColor = generateColor(mergeState || '');
-    return genColor;
+    return generateColor(mergeState || '');
   });
 
   useEffect(() => {
diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md
index 30e905c842..ff6f7013c8 100644
--- a/components/color-picker/index.en-US.md
+++ b/components/color-picker/index.en-US.md
@@ -41,7 +41,7 @@ Used when the user needs to customize the color selection
 | onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - |
 | allowClear | 	Allow clearing color selected | boolean | false |
 | presets | 	Preset colors | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - |
-| children | Trigger of ColorPicker | ReactElement | - |
+| children | Trigger of ColorPicker | React.ReactNode | - |
 | trigger | ColorPicker trigger mode | `hover` \| `click` | `click` |
 | open | Whether to show popup | boolean | - |
 | onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - |
diff --git a/components/color-picker/index.tsx b/components/color-picker/index.ts
similarity index 100%
rename from components/color-picker/index.tsx
rename to components/color-picker/index.ts
diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md
index faf8639088..887a03b77b 100644
--- a/components/color-picker/index.zh-CN.md
+++ b/components/color-picker/index.zh-CN.md
@@ -42,7 +42,7 @@ group:
 | onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - |
 | allowClear | 允许清除选择的颜色 | boolean | false |
 | presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - |
-| children | 颜色选择器的触发器 | ReactElement | - |
+| children | 颜色选择器的触发器 | React.ReactNode | - |
 | trigger | 颜色选择器的触发模式 | `hover` \| `click` | `click` |
 | open | 是否显示弹出窗口 | boolean | - |
 | onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - |