test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

fix: ColorPicker presets cannot be selected (#42882)

Browse Source 
* fix: color-picker presets not checked

* test: update test case

* fix: color-picker presets not checked

* test: update test case
This commit is contained in:
红果汁 2023-06-07 17:29:26 +08:00 committed by GitHub
parent b4b6b5c511
commit 243704330b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/color-picker/__tests__/index.test.tsx
View File

@ -196,6 +196,9 @@ describe('ColorPicker', () => {
expect( expect(
container.querySelector('.ant-color-picker-hex-input input')?.getAttribute('value'), container.querySelector('.ant-color-picker-hex-input input')?.getAttribute('value'),
).toEqual('000000'); ).toEqual('000000');
expect(container.querySelectorAll('.ant-color-picker-presets-color')[0]).toHaveClass(
'ant-color-picker-presets-color-checked',
);
fireEvent.click(presetsColors[9]); fireEvent.click(presetsColors[9]);
expect( expect(
@ -207,6 +210,9 @@ describe('ColorPicker', () => {
expect( expect(
container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'), container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
).toEqual('2%'); ).toEqual('2%');
expect(container.querySelectorAll('.ant-color-picker-presets-color')[9]).toHaveClass(
'ant-color-picker-presets-color-checked',
);
expect(handleColorChange).toHaveBeenCalledTimes(2); expect(handleColorChange).toHaveBeenCalledTimes(2);
}); });

57
components/color-picker/components/ColorPresets.tsx
View File

@ -53,38 +53,31 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
onChange?.(colorValue); onChange?.(colorValue);
}; };
const items: CollapseProps['items'] = useMemo( const items: CollapseProps['items'] = presetsValue.map((preset) => ({
() => key: `panel-${preset.label}`,
presetsValue.map((preset) => ({ label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
key: `panel-${preset.label}`, children: (
label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>, <div className={`${colorPresetsPrefixCls}-items`}>
children: ( {Array.isArray(preset?.colors) && preset.colors?.length > 0 ? (
<div className={`${colorPresetsPrefixCls}-items`}> preset.colors.map((presetColor: Color) => (
{Array.isArray(preset?.colors) && preset.colors?.length > 0 ? ( <ColorBlock
preset.colors.map((presetColor: Color) => ( key={`preset-${presetColor.toHexString()}`}
<ColorBlock color={generateColor(presetColor).toRgbString()}
key={`preset-${presetColor.toHexString()}`} prefixCls={prefixCls}
color={generateColor(presetColor).toRgbString()} className={classNames(`${colorPresetsPrefixCls}-color`, {
prefixCls={prefixCls} [`${colorPresetsPrefixCls}-color-checked`]:
className={classNames(`${colorPresetsPrefixCls}-color`, { presetColor.toHexString() === color?.toHexString(),
[`${colorPresetsPrefixCls}-color-checked`]: [`${colorPresetsPrefixCls}-color-bright`]: isBright(presetColor, colorBgElevated),
presetColor.toHexString() === color?.toHexString(), })}
[`${colorPresetsPrefixCls}-color-bright`]: isBright( onClick={() => handleClick(presetColor)}
presetColor, />
colorBgElevated, ))
), ) : (
})} <span className={`${colorPresetsPrefixCls}-empty`}>{locale.presetEmpty}</span>
onClick={() => handleClick(presetColor)} )}
/> </div>
)) ),
) : ( }));
<span className={`${colorPresetsPrefixCls}-empty`}>{locale.presetEmpty}</span>
)}
</div>
),
})),
[],
);
return ( return (
<div className={colorPresetsPrefixCls}> <div className={colorPresetsPrefixCls}>