You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

57 lines
1.5 KiB

  1. import {useState} from "react";
  2. import {
  3. faTrashAlt,
  4. } from "@fortawesome/free-solid-svg-icons";
  5. import {Button, Modal, ModalHeader, ModalBody, ModalFooter} from "reactstrap";
  6. import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
  7. import {useTranslation} from "next-i18next";
  8. const ButtonWithConfirm = ({className, label, onDelete}) => {
  9. const [visibled, setVisibility] = useState(false);
  10. const {t} = useTranslation();
  11. const toggle = () => setVisibility(!visibled)
  12. return (
  13. <div className="input-group-append">
  14. <button
  15. type="button"
  16. className={className}
  17. onClick={toggle}
  18. >
  19. <FontAwesomeIcon icon={faTrashAlt} />
  20. </button>
  21. <Modal
  22. isOpen={visibled}
  23. toggle={toggle}
  24. className="modal-dialog-centered"
  25. >
  26. <ModalHeader toggle={toggle}>{t("Delete?")}</ModalHeader>
  27. <ModalBody>
  28. {t("Are you sure to delete")}{" "}
  29. {label && label !== "" ? (
  30. <b>&quot;{label}&quot;</b>
  31. ) : (
  32. <>{t("the row")}</>
  33. )}{" "}
  34. ?
  35. </ModalBody>
  36. <ModalFooter>
  37. <Button
  38. color="primary-outline"
  39. className="text-primary border-primary"
  40. onClick={toggle}>
  41. {t("No")}
  42. </Button>
  43. <Button color="primary"
  44. onClick={() => {toggle(); onDelete();}}
  45. >
  46. {t("Yes")}
  47. </Button>
  48. </ModalFooter>
  49. </Modal>
  50. </div >
  51. );
  52. }
  53. export default ButtonWithConfirm;