style: optimize ColorPicker code (#42326)

* chore: fix ColorPicker parameters' type

* chore: improve code

* chore: update

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;

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

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()}`}

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(() => {

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` | - |

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` | - |