@hooks-plus/use-modal/esm/index.js

use-modal

import { jsx } from 'react/jsx-runtime';
import { useRequest, useLockFn } from 'ahooks';
import { useState, useCallback } from 'react';
import { Modal } from 'antd';

/**
 * Modal的一个封装
 * @param defaultRender 将要放在modal中的组件 如果想要使用Form 注意按照antd的规范 Form表单的preserve={false}
 * @param modalProps 模态框属性值
 * @return [context, updateProps] context 模态框的ast updateProps 更新模态框属性的方法
 * 如果想要再onOk的时候不关闭模态框 只需要抛出一个错误既可 throw new Error();
 */
function useModal(defaultRender, modalProps = {}) {
    const [open, setOpen] = useState(false);
    const [props, setProps] = useState({});
    const mergedProps = { ...modalProps, ...props };
    const { runAsync: okService, loading } = useRequest(async (e) => {
        await mergedProps.onOk?.(e);
    }, {
        manual: true,
    });
    const onProxyCancel = async (e) => {
        await mergedProps.onCancel?.(e);
        setOpen(false);
    };
    const onProxyOk = useLockFn(async (e) => {
        await okService?.(e);
        setOpen(false);
    });
    const { state, ...rest } = mergedProps;
    const context = (jsx(Modal, { maskClosable: false, destroyOnClose: true, ...rest, confirmLoading: loading || mergedProps.confirmLoading, open: open, width: mergedProps.width || 520, onCancel: onProxyCancel, onOk: onProxyOk, children: mergedProps.children ||
            (defaultRender &&
                (typeof defaultRender === "function"
                    ? defaultRender(state, mergedProps)
                    : defaultRender)) }));
    const updateProps = useCallback((props) => {
        if (typeof props == "function") {
            setProps((prevState) => {
                const _props = props(prevState);
                setOpen(!!_props.open);
                return { ..._props };
            });
        }
        else {
            setOpen(!!props.open);
            setProps({ ...props });
        }
    }, [setProps, setOpen]);
    return [context, updateProps, open];
}

export { useModal as default };