mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

fix: color picker open popup when disabled (#44466)

Browse Source
This commit is contained in:
红果汁 2023-08-28 20:16:34 +08:00 committed by GitHub
parent 4d1bac4651
commit 2d1d98790e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/color-picker/ColorPicker.tsx
View File

@ -1,6 +1,5 @@
import type { CSSProperties, FC } from 'react'; import type { CSSProperties, FC } from 'react';
import React, { useContext, useMemo, useRef, useState } from 'react'; import React, { useContext, useMemo, useRef, useState } from 'react';
import type { import type {
HsbaColorType, HsbaColorType,
ColorPickerProps as RcColorPickerProps, ColorPickerProps as RcColorPickerProps,
@ -11,16 +10,16 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
import genPurePanel from '../_util/PurePanel'; import genPurePanel from '../_util/PurePanel';
import { getStatusClassNames } from '../_util/statusUtils'; import { getStatusClassNames } from '../_util/statusUtils';
import warning from '../_util/warning'; import warning from '../_util/warning';
import type { SizeType } from '../config-provider/SizeContext';
import type { ConfigConsumerProps } from '../config-provider/context'; import type { ConfigConsumerProps } from '../config-provider/context';
import { ConfigContext } from '../config-provider/context'; import { ConfigContext } from '../config-provider/context';
import useSize from '../config-provider/hooks/useSize'; import useSize from '../config-provider/hooks/useSize';
import type { SizeType } from '../config-provider/SizeContext';
import { FormItemInputContext, NoFormStyle } from '../form/context'; import { FormItemInputContext, NoFormStyle } from '../form/context';
import type { PopoverProps } from '../popover'; import type { PopoverProps } from '../popover';
import Popover from '../popover'; import Popover from '../popover';
import theme from '../theme'; import theme from '../theme';
import ColorPickerPanel from './ColorPickerPanel';
import type { Color } from './color'; import type { Color } from './color';
import ColorPickerPanel from './ColorPickerPanel';
import ColorTrigger from './components/ColorTrigger'; import ColorTrigger from './components/ColorTrigger';
import useColorState from './hooks/useColorState'; import useColorState from './hooks/useColorState';
import type { import type {
@ -229,7 +228,7 @@ const ColorPicker: CompoundedComponent = (props) => {
style={styles?.popup} style={styles?.popup}
overlayInnerStyle={styles?.popupOverlayInner} overlayInnerStyle={styles?.popupOverlayInner}
onOpenChange={(visible) => { onOpenChange={(visible) => {
if (popupAllowCloseRef.current) { if (popupAllowCloseRef.current && !disabled) {
setPopupOpen(visible); setPopupOpen(visible);
} }
}} }}

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

@ -1,16 +1,18 @@
import React, { useMemo, useState } from 'react';
import { createEvent, fireEvent, render } from '@testing-library/react'; import { createEvent, fireEvent, render } from '@testing-library/react';
import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
import React, { useMemo, useState } from 'react';
import { resetWarned } from '../../_util/warning';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
import { waitFakeTimer } from '../../../tests/utils'; import { waitFakeTimer } from '../../../tests/utils';
import { resetWarned } from '../../_util/warning'; import Button from '../../button';
import ConfigProvider from '../../config-provider'; import ConfigProvider from '../../config-provider';
import Form from '../../form'; import Form from '../../form';
import theme from '../../theme'; import theme from '../../theme';
import type { Color } from '../color';
import type { ColorPickerProps } from '../ColorPicker'; import type { ColorPickerProps } from '../ColorPicker';
import ColorPicker from '../ColorPicker'; import ColorPicker from '../ColorPicker';
import type { Color } from '../color';
function doMouseMove( function doMouseMove(
container: HTMLElement, container: HTMLElement,
@ -518,4 +520,41 @@ describe('ColorPicker', () => {
render(<ColorPicker disabledAlpha value="#1677ff" />); render(<ColorPicker disabledAlpha value="#1677ff" />);
expect(errorSpy).not.toHaveBeenCalled(); expect(errorSpy).not.toHaveBeenCalled();
}); });
it('Should not show popup when disabled', async () => {
const Demo = () => {
const [disabled, setDisabled] = useState(false);
return (
<div className="App">
<ColorPicker disabled={disabled} />
<div className="buttons">
<Button
className="disabled-btn"
disabled={disabled}
onClick={() => {
setDisabled(true);
}}
>
禁用
</Button>
<Button
className="active-btn"
disabled={!disabled}
onClick={() => {
setDisabled(false);
}}
>
启用
</Button>
</div>
</div>
);
};
const { container } = render(<Demo />);
fireEvent.click(container.querySelector('.disabled-btn')!);
fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
await waitFakeTimer();
fireEvent.click(container.querySelector('.active-btn')!);
expect(document.body.querySelector('.ant-popover')).toBeFalsy();
});
}); });