mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 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(
container.querySelector('.ant-color-picker-hex-input input')?.getAttribute('value'),
).toEqual('000000');
expect(container.querySelectorAll('.ant-color-picker-presets-color')[0]).toHaveClass(
'ant-color-picker-presets-color-checked',
);
fireEvent.click(presetsColors[9]);
expect(
@ -207,6 +210,9 @@ describe('ColorPicker', () => {
expect(
container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
).toEqual('2%');
expect(container.querySelectorAll('.ant-color-picker-presets-color')[9]).toHaveClass(
'ant-color-picker-presets-color-checked',
);
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);
};
const items: CollapseProps['items'] = useMemo(
() =>
presetsValue.map((preset) => ({
key: `panel-${preset.label}`,
label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
children: (
<div className={`${colorPresetsPrefixCls}-items`}>
{Array.isArray(preset?.colors) && preset.colors?.length > 0 ? (
preset.colors.map((presetColor: Color) => (
<ColorBlock
key={`preset-${presetColor.toHexString()}`}
color={generateColor(presetColor).toRgbString()}
prefixCls={prefixCls}
className={classNames(`${colorPresetsPrefixCls}-color`, {
[`${colorPresetsPrefixCls}-color-checked`]:
presetColor.toHexString() === color?.toHexString(),
[`${colorPresetsPrefixCls}-color-bright`]: isBright(
presetColor,
colorBgElevated,
),
})}
onClick={() => handleClick(presetColor)}
/>
))
) : (
<span className={`${colorPresetsPrefixCls}-empty`}>{locale.presetEmpty}</span>
)}
</div>
),
})),
[],
);
const items: CollapseProps['items'] = presetsValue.map((preset) => ({
key: `panel-${preset.label}`,
label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
children: (
<div className={`${colorPresetsPrefixCls}-items`}>
{Array.isArray(preset?.colors) && preset.colors?.length > 0 ? (
preset.colors.map((presetColor: Color) => (
<ColorBlock
key={`preset-${presetColor.toHexString()}`}
color={generateColor(presetColor).toRgbString()}
prefixCls={prefixCls}
className={classNames(`${colorPresetsPrefixCls}-color`, {
[`${colorPresetsPrefixCls}-color-checked`]:
presetColor.toHexString() === color?.toHexString(),
[`${colorPresetsPrefixCls}-color-bright`]: isBright(presetColor, colorBgElevated),
})}
onClick={() => handleClick(presetColor)}
/>
))
) : (
<span className={`${colorPresetsPrefixCls}-empty`}>{locale.presetEmpty}</span>
)}
</div>
),
}));
return (
<div className={colorPresetsPrefixCls}>