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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with
43 additions and
1 deletions
-
components/modal/__tests__/hook.test.tsx
-
components/modal/destroyFns.ts
-
components/modal/useModal/index.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 = () => { |
|
|
|
|
|
@ -1,2 +1,2 @@ |
|
|
|
const destroyFns: Array<() => void> = []; |
|
|
|
const destroyFns: Array<Function> = []; |
|
|
|
export default destroyFns; |
|
|
|
|
|
@ -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() { |
|
|
|