test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix(ColorPicker): should not trigger onChange when click clear after clearing (#42643)

Browse Source
This commit is contained in:
linxianxi 2023-06-07 10:25:59 +08:00 committed by GitHub
parent 3244e6491c
commit 0afe8baf1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/color-picker/ColorPickerPanel.tsx
View File

@ -24,6 +24,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
onClear, onClear,
onChangeComplete, onChangeComplete,
color, color,
colorCleared,
...injectProps ...injectProps
} = props; } = props;
const colorPickerPanelPrefixCls = `${prefixCls}-inner-panel`; const colorPickerPanelPrefixCls = `${prefixCls}-inner-panel`;
@ -34,6 +35,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
<ColorClear <ColorClear
prefixCls={prefixCls} prefixCls={prefixCls}
value={color} value={color}
colorCleared={colorCleared}
onChange={(clearColor) => { onChange={(clearColor) => {
onChange?.(clearColor); onChange?.(clearColor);
onClear?.(); onClear?.();

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

@ -277,6 +277,16 @@ describe('ColorPicker', () => {
).toEqual('background: rgb(99, 22, 22);'); ).toEqual('background: rgb(99, 22, 22);');
}); });
it('Should not trigger onChange when click clear after clearing', async () => {
const onChange = jest.fn();
const { container } = render(<ColorPicker allowClear onChange={onChange} />);
fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
fireEvent.click(container.querySelector('.ant-color-picker-clear')!);
expect(onChange).toHaveBeenCalledTimes(1);
fireEvent.click(container.querySelector('.ant-popover .ant-color-picker-clear')!);
expect(onChange).toHaveBeenCalledTimes(1);
});
it('Should fix hover boundary issues', async () => { it('Should fix hover boundary issues', async () => {
spyElementPrototypes(HTMLElement, { spyElementPrototypes(HTMLElement, {
getBoundingClientRect: () => ({ getBoundingClientRect: () => ({

6
components/color-picker/components/ColorClear.tsx
View File

@ -4,14 +4,14 @@ import type { Color } from '../color';
import type { ColorPickerBaseProps } from '../interface'; import type { ColorPickerBaseProps } from '../interface';
import { generateColor } from '../util'; import { generateColor } from '../util';
interface ColorClearProps extends Pick<ColorPickerBaseProps, 'prefixCls'> { interface ColorClearProps extends Pick<ColorPickerBaseProps, 'prefixCls' | 'colorCleared'> {
value?: Color; value?: Color;
onChange?: (value: Color) => void; onChange?: (value: Color) => void;
} }
const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, onChange }) => { const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, colorCleared, onChange }) => {
const handleClick = () => { const handleClick = () => {
if (value) { if (value && !colorCleared) {
const hsba = value.toHsb(); const hsba = value.toHsb();
hsba.a = 0; hsba.a = 0;
const genColor = generateColor(hsba); const genColor = generateColor(hsba);