Browse Source

Bugfix/modal destroy all with context (#40281)

* 🐞 FIX: destroyAll not working with useModal

* 🧪 TEST: add test

* Update components/modal/useModal/index.tsx

Co-authored-by: Amumu <yoyo837@hotmail.com>

Co-authored-by: Amumu <yoyo837@hotmail.com>
pull/40289/head
Danial Soheili 2 years ago
committed by GitHub
parent
commit
164ea65250
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 37
      components/modal/__tests__/hook.test.tsx
  2. 2
      components/modal/destroyFns.ts
  3. 5
      components/modal/useModal/index.tsx

37
components/modal/__tests__/hook.test.tsx

@ -72,6 +72,43 @@ describe('Modal.hook', () => {
jest.useRealTimers();
});
it('destroyAll works with contextHolder', () => {
const modalTypes = ['info', 'success', 'warning', 'error'] as const;
const Demo = () => {
const [modal, contextHolder] = Modal.useModal();
function showConfirm() {
modalTypes.forEach((type) => {
modal[type]({
title: 'title',
content: 'content',
});
});
}
return (
<div className="App">
{contextHolder}
<div className="open-hook-modal-btn" onClick={showConfirm}>
confirm
</div>
</div>
);
};
const { container } = render(<Demo />);
fireEvent.click(container.querySelectorAll('.open-hook-modal-btn')[0]);
expect(document.body.querySelectorAll('.ant-modal')).toHaveLength(modalTypes.length);
// Update instance
act(() => {
Modal.destroyAll();
});
expect(document.body.querySelectorAll('.ant-modal')).toHaveLength(0);
});
it('context support config direction', () => {
jest.useFakeTimers();
const Demo = () => {

2
components/modal/destroyFns.ts

@ -1,2 +1,2 @@
const destroyFns: Array<() => void> = [];
const destroyFns: Array<Function> = [];
export default destroyFns;

5
components/modal/useModal/index.tsx

@ -5,6 +5,7 @@ import { withConfirm, withError, withInfo, withSuccess, withWarn } from '../conf
import type { ModalFuncProps } from '../Modal';
import type { HookModalRef } from './HookModal';
import HookModal from './HookModal';
import destroyFns from '../destroyFns';
let uuid = 0;
@ -69,6 +70,10 @@ function useModal(): readonly [
closeFunc = holderRef.current?.patchElement(modal);
if (closeFunc) {
destroyFns.push(closeFunc);
}
return {
destroy: () => {
function destroyAction() {

Loading…
Cancel
Save