NapCatQQ/packages/napcat-webui-frontend/src/contexts/dialog.tsx

// Dialog Context
import React from 'react';

import Modal from '@/components/modal';
import type { ModalProps } from '@/components/modal';

export interface AlertProps
  extends Omit<ModalProps, 'onCancel' | 'showCancel' | 'cancelText'> {
  onConfirm?: () => void;
}

export interface ConfirmProps extends ModalProps {
  onConfirm?: () => void;
  onCancel?: () => void;
}

export interface ModalItem extends ModalProps {
  id: number;
}

export interface DialogContextProps {
  alert: (config: AlertProps) => void;
  confirm: (config: ConfirmProps) => void;
}

export interface DialogProviderProps {
  children: React.ReactNode;
}

export const DialogContext = React.createContext<DialogContextProps>({
  alert: () => { },
  confirm: () => { },
});

const DialogProvider: React.FC<DialogProviderProps> = ({ children }) => {
  const [dialogs, setDialogs] = React.useState<ModalItem[]>([]);
  const alert = (config: AlertProps) => {
    const { onConfirm, size = 'md', ...rest } = config;

    setDialogs((before) => {
      const id = before[before.length - 1]?.id + 1 || 0;

      return [
        ...before,
        {
          id,
          size,
          backdrop: 'blur',
          showCancel: false,
          onConfirm: () => {
            onConfirm?.();
            setTimeout(() => {
              setDialogs((before) => before.filter((item) => item.id !== id));
            }, 300);
          },
          ...rest,
        },
      ];
    });
  };

  const confirm = (config: ConfirmProps) => {
    const { onConfirm, onCancel, size = 'md', ...rest } = config;

    setDialogs((before) => {
      const id = before[before.length - 1]?.id + 1 || 0;

      return [
        ...before,
        {
          id,
          size,
          backdrop: 'blur',
          showCancel: true,
          onConfirm: () => {
            onConfirm?.();
            setTimeout(() => {
              setDialogs((before) => before.filter((item) => item.id !== id));
            }, 300);
          },
          onCancel: () => {
            onCancel?.();
            setTimeout(() => {
              setDialogs((before) => before.filter((item) => item.id !== id));
            }, 300);
          },
          ...rest,
        },
      ];
    });
  };

  return (
    <DialogContext.Provider
      value={{
        alert,
        confirm,
      }}
    >
      {children}
      {dialogs?.map(({ id, ...props }) => <Modal key={id} {...props} />)}
    </DialogContext.Provider>
  );
};

export default DialogProvider;