fix: Modal hooks press esc can not trigger await (#44646)

* test: test driven

* fix: await missing esc
This commit is contained in:
二货爱吃白萝卜 2023-09-05 21:36:21 +08:00 committed by GitHub
parent 49e1efaafc
commit 1b61870c5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 22 deletions

View File

@ -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}

View File

@ -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);
});
});