From d3093c9096f135dc3a5c8c4aef506721c11043ca Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 13 May 2023 23:05:26 +0800 Subject: [PATCH] style: optimize ColorPicker code (#42329) * style: optimize ColorPicker code * style: optimize ColorPicker code * test --- components/color-picker/ColorPickerPanel.tsx | 20 ++++----- .../components/ColorAlphaInput.tsx | 2 +- .../color-picker/components/ColorClear.tsx | 2 +- .../color-picker/components/ColorHsbInput.tsx | 2 +- .../color-picker/components/ColorInput.tsx | 42 ++++++++----------- .../color-picker/components/ColorPresets.tsx | 9 ++-- .../color-picker/components/ColorRgbInput.tsx | 2 +- .../color-picker/components/ColorTrigger.tsx | 11 ++--- .../color-picker/hooks/useColorState.ts | 13 +++--- components/color-picker/interface.ts | 5 ++- 10 files changed, 49 insertions(+), 59 deletions(-) diff --git a/components/color-picker/ColorPickerPanel.tsx b/components/color-picker/ColorPickerPanel.tsx index b7e62e82e0..ec2fd60e6f 100644 --- a/components/color-picker/ColorPickerPanel.tsx +++ b/components/color-picker/ColorPickerPanel.tsx @@ -31,22 +31,11 @@ const ColorPickerPanel: FC = (props) => { /> )} {panel} - onChange?.(value)} - prefixCls={prefixCls} - {...injectProps} - /> - + {Array.isArray(presets) && ( <> - onChange?.(value)} - prefixCls={prefixCls} - /> + )} @@ -60,4 +49,9 @@ const ColorPickerPanel: FC = (props) => { /> ); }; + +if (process.env.NODE_ENV !== 'production') { + ColorPickerPanel.displayName = 'ColorPickerPanel'; +} + export default ColorPickerPanel; diff --git a/components/color-picker/components/ColorAlphaInput.tsx b/components/color-picker/components/ColorAlphaInput.tsx index 4850937f82..b59f442dda 100644 --- a/components/color-picker/components/ColorAlphaInput.tsx +++ b/components/color-picker/components/ColorAlphaInput.tsx @@ -12,7 +12,7 @@ interface ColorAlphaInputProps extends Pick { const ColorAlphaInput: FC = ({ prefixCls, value, onChange }) => { const colorAlphaInputPrefixCls = `${prefixCls}-alpha-input`; - const [alphaValue, setAlphaValue] = useState(generateColor(value || '#000')); + const [alphaValue, setAlphaValue] = useState(generateColor(value || '#000')); // Update step value useEffect(() => { diff --git a/components/color-picker/components/ColorClear.tsx b/components/color-picker/components/ColorClear.tsx index 2c717e365f..d8f44f4f36 100644 --- a/components/color-picker/components/ColorClear.tsx +++ b/components/color-picker/components/ColorClear.tsx @@ -18,7 +18,7 @@ const ColorClear: FC = ({ prefixCls, value, onChange }) => { onChange?.(genColor); } }; - return
; }; + export default ColorClear; diff --git a/components/color-picker/components/ColorHsbInput.tsx b/components/color-picker/components/ColorHsbInput.tsx index 17fca48a9c..236d0d427a 100644 --- a/components/color-picker/components/ColorHsbInput.tsx +++ b/components/color-picker/components/ColorHsbInput.tsx @@ -14,7 +14,7 @@ interface ColorHsbInputProps extends Pick { const ColorHsbInput: FC = ({ prefixCls, value, onChange }) => { const colorHsbInputPrefixCls = `${prefixCls}-hsb-input`; - const [hsbValue, setHsbValue] = useState(generateColor(value || '#000')); + const [hsbValue, setHsbValue] = useState(generateColor(value || '#000')); // Update step value useEffect(() => { diff --git a/components/color-picker/components/ColorInput.tsx b/components/color-picker/components/ColorInput.tsx index 57b1abe791..65e84ab561 100644 --- a/components/color-picker/components/ColorInput.tsx +++ b/components/color-picker/components/ColorInput.tsx @@ -1,10 +1,10 @@ -import type { FC } from 'react'; -import React from 'react'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import type { FC } from 'react'; +import React, { useMemo } from 'react'; import Select from '../../select'; +import type { Color } from '../color'; import type { ColorPickerBaseProps } from '../interface'; import { ColorFormat } from '../interface'; -import type { Color } from '../color'; import ColorAlphaInput from './ColorAlphaInput'; import ColorHexInput from './ColorHexInput'; import ColorHsbInput from './ColorHsbInput'; @@ -16,8 +16,13 @@ interface ColorInputProps onChange?: (value: Color) => void; } +const selectOptions = [ColorFormat.hex, ColorFormat.hsb, ColorFormat.rgb].map((format) => ({ + value: format, + label: format.toLocaleUpperCase(), +})); + const ColorInput: FC = (props) => { - const { prefixCls, format, onFormatChange, value, onChange } = props; + const { prefixCls, format, value, onFormatChange, onChange } = props; const [colorFormat, setColorFormat] = useMergedState('hex', { value: format, onChange: onFormatChange, @@ -29,17 +34,18 @@ const ColorInput: FC = (props) => { setColorFormat(newFormat); }; - const steppersRender = () => { + const steppersNode = useMemo(() => { + const inputProps = { value, prefixCls, onChange }; switch (colorFormat) { case ColorFormat.hsb: - return ; + return ; case ColorFormat.rgb: - return ; + return ; case ColorFormat.hex: default: - return ; + return ; } - }; + }, [colorFormat, prefixCls, value, onChange]); return (
@@ -52,24 +58,12 @@ const ColorInput: FC = (props) => { onChange={handleFormatChange} className={`${prefixCls}-format-select`} size="small" - options={[ - { - label: ColorFormat.hex.toLocaleUpperCase(), - value: ColorFormat.hex, - }, - { - label: ColorFormat.hsb.toLocaleUpperCase(), - value: ColorFormat.hsb, - }, - { - label: ColorFormat.rgb.toLocaleUpperCase(), - value: ColorFormat.rgb, - }, - ]} + options={selectOptions} /> -
{steppersRender()}
+
{steppersNode}
); }; + export default ColorInput; diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx index aa595cc58e..26ad101440 100644 --- a/components/color-picker/components/ColorPresets.tsx +++ b/components/color-picker/components/ColorPresets.tsx @@ -1,8 +1,8 @@ +import { ColorBlock } from '@rc-component/color-picker'; import classNames from 'classnames'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import type { FC } from 'react'; import React, { useMemo } from 'react'; -import { ColorBlock } from '@rc-component/color-picker'; import Collapse from '../../collapse'; import { useLocale } from '../../locale'; import type { Color } from '../color'; @@ -39,7 +39,7 @@ const ColorPresets: FC = ({ prefixCls, presets, value: color, }); const colorPresetsPrefixCls = `${prefixCls}-presets`; - const activeKey = useMemo( + const activeKeys = useMemo( () => presetsValue.map((preset) => `panel-${preset.label}`), [presetsValue], ); @@ -50,14 +50,14 @@ const ColorPresets: FC = ({ prefixCls, presets, value: color, return (
- + {presetsValue.map((preset) => ( {preset?.label}
} key={`panel-${preset?.label}`} >
- {Array.isArray(preset?.colors) && preset?.colors.length ? ( + {Array.isArray(preset?.colors) && preset.colors?.length > 0 ? ( preset.colors.map((presetColor: Color) => ( = ({ prefixCls, presets, value: color,
); }; + export default ColorPresets; diff --git a/components/color-picker/components/ColorRgbInput.tsx b/components/color-picker/components/ColorRgbInput.tsx index 006eedef40..781043578b 100644 --- a/components/color-picker/components/ColorRgbInput.tsx +++ b/components/color-picker/components/ColorRgbInput.tsx @@ -13,7 +13,7 @@ interface ColorRgbInputProps extends Pick { const ColorRgbInput: FC = ({ prefixCls, value, onChange }) => { const colorRgbInputPrefixCls = `${prefixCls}-rgb-input`; - const [rgbValue, setRgbValue] = useState(generateColor(value || '#000')); + const [rgbValue, setRgbValue] = useState(generateColor(value || '#000')); // Update step value useEffect(() => { diff --git a/components/color-picker/components/ColorTrigger.tsx b/components/color-picker/components/ColorTrigger.tsx index 2096a23ca3..bb7880c8cb 100644 --- a/components/color-picker/components/ColorTrigger.tsx +++ b/components/color-picker/components/ColorTrigger.tsx @@ -1,7 +1,7 @@ +import { ColorBlock } from '@rc-component/color-picker'; import classNames from 'classnames'; import type { CSSProperties, MouseEventHandler } from 'react'; import React, { forwardRef, useMemo } from 'react'; -import { ColorBlock } from '@rc-component/color-picker'; import type { ColorPickerBaseProps } from '../interface'; import ColorClear from './ColorClear'; @@ -20,14 +20,14 @@ const ColorTrigger = forwardRef((props, ref) const { color, prefixCls, open, clearColor, disabled, className, ...rest } = props; const colorTriggerPrefixCls = `${prefixCls}-trigger`; - const containerRender = useMemo( + const containerNode = useMemo( () => clearColor ? ( ) : ( - + ), - [color, clearColor], + [color, clearColor, prefixCls], ); return ( @@ -39,8 +39,9 @@ const ColorTrigger = forwardRef((props, ref) })} {...rest} > - {containerRender} + {containerNode}
); }); + export default ColorTrigger; diff --git a/components/color-picker/hooks/useColorState.ts b/components/color-picker/hooks/useColorState.ts index 0a1849b357..6f90556c72 100644 --- a/components/color-picker/hooks/useColorState.ts +++ b/components/color-picker/hooks/useColorState.ts @@ -2,19 +2,16 @@ import { useEffect, useState } from 'react'; import type { Color } from '../color'; import { generateColor } from '../util'; -function hasValue(value: Color | string | undefined) { +function hasValue(value?: Color | string) { return value !== undefined; } const useColorState = ( defaultStateValue: Color | string, - option: { - defaultValue?: Color | string; - value?: Color | string; - }, -): [Color, React.Dispatch>] => { + option: { defaultValue?: Color | string; value?: Color | string }, +): readonly [Color, React.Dispatch>] => { const { defaultValue, value } = option; - const [colorValue, setColorValue] = useState(() => { + const [colorValue, setColorValue] = useState(() => { let mergeState: string | Color | undefined; if (hasValue(value)) { mergeState = value; @@ -32,7 +29,7 @@ const useColorState = ( } }, [value]); - return [colorValue, setColorValue]; + return [colorValue, setColorValue] as const; }; export default useColorState; diff --git a/components/color-picker/interface.ts b/components/color-picker/interface.ts index c7dbe0e3d5..37dce01490 100644 --- a/components/color-picker/interface.ts +++ b/components/color-picker/interface.ts @@ -8,7 +8,10 @@ export enum ColorFormat { hsb = 'hsb', } -export type PresetsItem = { label: ReactNode; colors: Array }; +export interface PresetsItem { + label: ReactNode; + colors: (string | Color)[]; +} export interface ColorPickerBaseProps { color?: Color;