test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +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);
}); });

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

@ -53,9 +53,7 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
onChange?.(colorValue); onChange?.(colorValue);
}; };
const items: CollapseProps['items'] = useMemo( const items: CollapseProps['items'] = presetsValue.map((preset) => ({
() =>
presetsValue.map((preset) => ({
key: `panel-${preset.label}`, key: `panel-${preset.label}`,
label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>, label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
children: ( children: (
@ -69,10 +67,7 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
className={classNames(`${colorPresetsPrefixCls}-color`, { className={classNames(`${colorPresetsPrefixCls}-color`, {
[`${colorPresetsPrefixCls}-color-checked`]: [`${colorPresetsPrefixCls}-color-checked`]:
presetColor.toHexString() === color?.toHexString(), presetColor.toHexString() === color?.toHexString(),
[`${colorPresetsPrefixCls}-color-bright`]: isBright( [`${colorPresetsPrefixCls}-color-bright`]: isBright(presetColor, colorBgElevated),
presetColor,
colorBgElevated,
),
})} })}
onClick={() => handleClick(presetColor)} onClick={() => handleClick(presetColor)}
/> />
@ -82,9 +77,7 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
)} )}
</div> </div>
), ),
})), }));
[],
);
return ( return (
<div className={colorPresetsPrefixCls}> <div className={colorPresetsPrefixCls}>