@shakthillc/components/src/ModalBox/ModalBox.js

React generic components for shakthi products

import React, { useState, useEffect } from "react";
import style from "./ModalBox.module.css";
import Button from "./../Button/Button";
import Icon from "@material-ui/core/Icon";

const ModalBox = ({
  text = "Modal text",
  btext1,
  btext2,
  type1 = true,
  type2 = false,
  show = true,
  bfunction1,
  bfunction2,
  handleClose,
}) => {
  const [flag, setFlag] = useState(show);
  useEffect(() => {
    setFlag(show);
  }, [show]);

  if (type1) {
    return (
      <div className={flag ? style["container"] : style["container--hide"]}>
        <div className={style["modal__container"]}>
          <div className={style["modal__text"]}>{text}</div>
          <div className={style["modal__button"]}>
            <Button
              text={btext1}
              onClick={() => {
                bfunction1 && bfunction1();
              }}
            />{" "}
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Button
              text={btext2}
              onClick={() => {
                bfunction2 && bfunction2();
              }}
            />
          </div>
          <div
            onClick={() => {
              handleClose && handleClose();
            }}
            className={style["modal__close"]}
          >
            <Icon>close</Icon>
          </div>
        </div>
      </div>
    );
  }
  if (type2) {
    return (
      <div className={flag ? style["container"] : style["container--hide"]}>
        <div className={style["modal__container"]}>
          <div className={style["modal__text"]}>{text}</div>
          <div className={style["modal__button"]}>
            <Button
              text={btext1}
              onClick={() => {
                bfunction1 && bfunction1();
              }}
            />{" "}
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div
            onClick={() => {
              handleClose && handleClose();
            }}
            className={style["modal__close"]}
          >
            <Icon>close</Icon>
          </div>
        </div>
      </div>
    );
  }
};

export default ModalBox;