FrontEnd/src/app/views/common/ConfirmDialog.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import { convertI18nText, I18nText } from "@/common";
import React from "react";
import { Modal, Button } from "react-bootstrap";
import { useTranslation } from "react-i18next";

const ConfirmDialog: React.FC<{
  onClose: () => void;
  onConfirm: () => void;
  title: I18nText;
  body: I18nText;
}> = ({ onClose, onConfirm, title, body }) => {
  const { t } = useTranslation();

  return (
    <Modal onHide={onClose} show centered>
      <Modal.Header>
        <Modal.Title className="text-danger">
          {convertI18nText(title, t)}
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>{convertI18nText(body, t)}</Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={onClose}>
          {t("operationDialog.cancel")}
        </Button>
        <Button
          variant="danger"
          onClick={() => {
            onConfirm();
            onClose();
          }}
        >
          {t("operationDialog.confirm")}
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ConfirmDialog;