Normal Prompt

normal.prompt.tsx

import React, { useState, FC } from "react";
import { Button, Modal } from "react-bootstrap";
import "./styles.css";
import CustomModal from "./component/CustomModal";

export default function App() {
  const [show, setShow] = useState(false);
  
  const handleConfirm = () => {
    alert("Do something when user confirm");
    setShow(false);
  };

  const handleClose = () => {
    alert("Do something when user cancel");
    setShow(false);
  };

  const handleDialog = () => {
    setShow(true);
  };

  return (
    <div className="App">
      <AsyncPrompt />
      <CustomModal
        title="Simple Demo"
        paragraph="This is normal dialog component."
        cancel="Cancel"
        confirm="OK"
        show={show}
        handleConfirm={handleConfirm}
        handleClose={handleClose}
      />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Container>
        <Row>
          <Button onClick={handleDialog}>Dialog</Button>
        </Row>
      </Container>
    </div>
  );
}


interface Props {
  show: boolean;
  handleClose: () => void;
  handleConfirm: () => void;
  title: string;
  paragraph: string;
  confirm: string;
  cancel: string;
}

const CustomModal: FC<Props> = ({
  show,
  handleClose,
  handleConfirm,
  title,
  paragraph,
  confirm,
  cancel
}) => {
  return (
    <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
      <Modal.Header closeButton>
        <Modal.Title>{title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>{paragraph}</Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={handleClose}>
          {cancel}
        </Button>
        <Button variant="primary" onClick={handleConfirm}>
          {confirm}
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default CustomModal;