diff --git a/src/createModal/index.tsx b/src/createModal/index.tsx index c1db1d2..9e0a49b 100644 --- a/src/createModal/index.tsx +++ b/src/createModal/index.tsx @@ -55,7 +55,9 @@ export default function createModal( }); return { destory, promise: defered }; } - +/** + * @deprecated use `useModalCreation` instead + */ export function createFunctionWithDefaultProps(defaultParams: CreateModalProps) { const newFunction: typeof createModal = (params) => createModal({ ...defaultParams, ...params }); diff --git a/src/createModal/useModalCreation.tsx b/src/createModal/useModalCreation.tsx index eb300b2..f1aac11 100644 --- a/src/createModal/useModalCreation.tsx +++ b/src/createModal/useModalCreation.tsx @@ -30,48 +30,51 @@ export function useModalCreation( ] { const holderRef = React.useRef(null); - /** - * @description Create a one-off modal dialog dynamically without maintenance loading and visible. - * @description.zh-CN 动态创建一次性的模态框,不需要维护 loading 和 visible。 - */ - function createModal(params: CreateModalProps): CreateModalReturn { - let _resolve: (value: R | PromiseLike) => void, _reject: (reason?: any) => void; - const defered = new Promise((resolve, reject) => { - _reject = reject; - _resolve = resolve; - }); + const createModal = React.useCallback( + /** + * @description Create a one-off modal dialog dynamically without maintenance loading and visible. + * @description.zh-CN 动态创建一次性的模态框,不需要维护 loading 和 visible。 + */ + function createModal(params: CreateModalProps): CreateModalReturn { + let _resolve: (value: R | PromiseLike) => void, _reject: (reason?: any) => void; + const defered = new Promise((resolve, reject) => { + _reject = reject; + _resolve = resolve; + }); - let unmountFunc: Function | undefined; - function destory() { + let unmountFunc: Function | undefined; + function destory() { + setTimeout(() => { + unmountFunc?.(); + _reject('destory'); + }); + } + /** + * https://github.com/ant-design/ant-design/issues/23623 + * Sync render blocks React event. Let's make this async. + */ setTimeout(() => { - unmountFunc?.(); - _reject('destory'); + unmountFunc = holderRef.current?.patchElement( + + key={`modal-${uuid++}`} + afterClose={destory} + {...defaultProps} + {...params} + onOk={(values?: T) => { + const Result = params.onOk?.(values); + _resolve(Result || (values as R)); + return Result; + }} + onCancel={(e) => { + params.onCancel?.(e); + _reject('cancel'); + }} + />, + ); }); - } - /** - * https://github.com/ant-design/ant-design/issues/23623 - * Sync render blocks React event. Let's make this async. - */ - setTimeout(() => { - unmountFunc = holderRef.current?.patchElement( - - key={`modal-${uuid++}`} - afterClose={destory} - {...defaultProps} - {...params} - onOk={(values?: T) => { - const Result = params.onOk?.(values); - _resolve(Result || (values as R)); - return Result; - }} - onCancel={(e) => { - params.onCancel?.(e); - _reject('cancel'); - }} - />, - ); - }); - return { destory, promise: defered }; - } + return { destory, promise: defered }; + }, + [], + ); return [, createModal]; }