useConfirm

import { useCallback, useEffect, useState } from 'react';
import { merge } from 'lodash';
import { Modal } from 'antd';
import { ModalFuncProps } from 'antd/lib/modal';
export type ModalType = 'info' | 'success' | 'error' | 'warning' | 'confirm';
export interface Opts extends ModalFuncProps {
  destroyOnClose?: boolean;
}
export interface ModalStateCallback {
  destroy: () => void;
  update: (newConfig: ModalFuncProps) => void;
}
const defaultOpts = {
  okText: '确定',
  cancelText: '取消',
  maskClosable: true,
};
const useConfirm = (type: Partial<ModalType>, opts?: Opts) => {
  const [state, setState] = useState<ModalStateCallback | null>(null);
  const [config, setConfig] = useState(() => merge(defaultOpts, opts));
  const show = useCallback(
    (cfg?: Opts) => {
      const newOptions = merge(config, cfg);
      setConfig(newOptions);
      setState(Modal[type](newOptions));
    },
    [setState, config, setConfig],
  );
  useEffect(() => {
    return () => {
      if (config?.destroyOnClose) {
        state?.destroy();
      }
    };
  }, [state, config]);
  return [show, state] as const;
};
export default useConfirm;

使用方式

  const [showDeleteTask] = useConfirm('confirm', {
    title: '标题',
    content: '具体描述内容',
    icon: <ExclamationCircleFilled style={{ color: '#faac16' }} />,
  });
showDeleteTask({
    onOk: () => {
      console.log('onOk');
  }
});