mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
fix: Modal hooks press esc can not trigger await (#44646)
* test: test driven * fix: await missing esc
This commit is contained in:
parent
49e1efaafc
commit
1b61870c5d
@ -1,17 +1,18 @@
|
||||
import * as React from 'react';
|
||||
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
|
||||
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
||||
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
||||
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
|
||||
import classNames from 'classnames';
|
||||
import * as React from 'react';
|
||||
|
||||
import ActionButton from '../_util/ActionButton';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
import warning from '../_util/warning';
|
||||
import type { ThemeConfig } from '../config-provider';
|
||||
import ConfigProvider from '../config-provider';
|
||||
import { useLocale } from '../locale';
|
||||
import Dialog from './Modal';
|
||||
import type { ModalFuncProps, ModalLocale } from './interface';
|
||||
import Dialog from './Modal';
|
||||
|
||||
interface ConfirmDialogProps extends ModalFuncProps {
|
||||
afterClose?: () => void;
|
||||
@ -172,6 +173,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
|
||||
closeIcon,
|
||||
modalRender,
|
||||
focusTriggerAfterClose,
|
||||
onConfirm,
|
||||
} = props;
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
@ -211,7 +213,10 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
|
||||
{ [`${confirmPrefixCls}-centered`]: !!props.centered },
|
||||
wrapClassName,
|
||||
)}
|
||||
onCancel={() => close?.({ triggerCancel: true })}
|
||||
onCancel={() => {
|
||||
close?.({ triggerCancel: true });
|
||||
onConfirm?.(false);
|
||||
}}
|
||||
open={open}
|
||||
title=""
|
||||
footer={null}
|
||||
|
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import CSSMotion from 'rc-motion';
|
||||
import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
import Modal from '..';
|
||||
import zhCN from '../../locale/zh_CN';
|
||||
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
||||
import Button from '../../button';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import Input from '../../input';
|
||||
import zhCN from '../../locale/zh_CN';
|
||||
import type { ModalFunc } from '../confirm';
|
||||
|
||||
jest.mock('rc-util/lib/Portal');
|
||||
@ -410,10 +410,55 @@ describe('Modal.hook', () => {
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('support await', async () => {
|
||||
describe('support await', () => {
|
||||
it('click', async () => {
|
||||
jest.useFakeTimers();
|
||||
|
||||
let notReady = true;
|
||||
let lastResult: boolean | null = null;
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
const [modal, contextHolder] = Modal.useModal();
|
||||
|
||||
React.useEffect(() => {
|
||||
(async () => {
|
||||
lastResult = await modal.confirm({
|
||||
content: <Input />,
|
||||
onOk: async () => {
|
||||
if (notReady) {
|
||||
notReady = false;
|
||||
return Promise.reject();
|
||||
}
|
||||
},
|
||||
});
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return contextHolder;
|
||||
};
|
||||
|
||||
render(<Demo />);
|
||||
|
||||
// Wait for modal show
|
||||
await waitFakeTimer();
|
||||
|
||||
// First time click should not close
|
||||
fireEvent.click(document.querySelector('.ant-btn-primary')!);
|
||||
await waitFakeTimer();
|
||||
expect(lastResult).toBeFalsy();
|
||||
|
||||
// Second time click to close
|
||||
fireEvent.click(document.querySelector('.ant-btn-primary')!);
|
||||
await waitFakeTimer();
|
||||
expect(lastResult).toBeTruthy();
|
||||
|
||||
jest.useRealTimers();
|
||||
});
|
||||
});
|
||||
|
||||
it('esc', async () => {
|
||||
jest.useFakeTimers();
|
||||
|
||||
let notReady = true;
|
||||
let lastResult: boolean | null = null;
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
@ -423,12 +468,6 @@ describe('Modal.hook', () => {
|
||||
(async () => {
|
||||
lastResult = await modal.confirm({
|
||||
content: <Input />,
|
||||
onOk: async () => {
|
||||
if (notReady) {
|
||||
notReady = false;
|
||||
return Promise.reject();
|
||||
}
|
||||
},
|
||||
});
|
||||
})();
|
||||
}, []);
|
||||
@ -441,16 +480,13 @@ describe('Modal.hook', () => {
|
||||
// Wait for modal show
|
||||
await waitFakeTimer();
|
||||
|
||||
// First time click should not close
|
||||
fireEvent.click(document.querySelector('.ant-btn-primary')!);
|
||||
// ESC to close
|
||||
fireEvent.keyDown(document.querySelector('.ant-modal')!, {
|
||||
key: 'Esc',
|
||||
keyCode: KeyCode.ESC,
|
||||
});
|
||||
await waitFakeTimer();
|
||||
expect(lastResult).toBeFalsy();
|
||||
|
||||
// Second time click to close
|
||||
fireEvent.click(document.querySelector('.ant-btn-primary')!);
|
||||
await waitFakeTimer();
|
||||
expect(lastResult).toBeTruthy();
|
||||
|
||||
jest.useRealTimers();
|
||||
expect(lastResult).toBe(false);
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user