fb-modal-oc-lib/dist/modal.jsx

Un composant modal react

import React from "react";
import PropTypes from "prop-types";
export const Modal = ({
  isVisible,
  title,
  description,
  src,
  onClose
}) => {
  const modalStyle = {
    img: {
      width: "100%"
    },
    modalBackground: {
      width: "100vw",
      height: "100vh",
      position: "fixed",
      top: 0,
      left: 0,
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "rgba(0, 0, 0, 0.7)"
    },
    modalContainer: {
      width: "30rem",
      borderRadius: "0.5rem",
      backgroundColor: "white",
      boxShadow: "rgba(0, 0, 0, 0.35) 0rem 0.31rem 0.93rem",
      display: "flex",
      flexDirection: "row",
      position: "relative"
    },
    rightPart: {
      width: "100%"
    },
    titleRightPart: {
      textAlign: "center",
      fontSize: "0.5rem",
      padding: "0rem 1.56rem",
      position: "relative",
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between"
    },
    titleEmployeeCreated: {
      color: "red",
      display: "flex",
      justifyContent: "center"
    },
    descriptionModal: {
      padding: "25px"
    },
    button: {
      backgroundColor: "white",
      border: "none",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      cursor: "pointer",
      borderRadius: "100%",
      fontSize: "0.93rem",
      width: "1.87rem",
      height: "1.87rem",
      top: "-1.09rem",
      right: "-1.09rem",
      position: "absolute",
      border: "solid red 2px",
      boxShadow: "0px 0px 10px 0px rgba(247, 247, 247, 0.75)"
    },
    modalOpen: {
      overflow: "hidden"
    }
  };
  if (!isVisible) {
    return null;
  }
  return /*#__PURE__*/React.createElement("div", {
    style: modalStyle.modalBackground
  }, /*#__PURE__*/React.createElement("div", {
    style: modalStyle.modalContainer
  }, /*#__PURE__*/React.createElement("div", {
    style: modalStyle.rightPart
  }, /*#__PURE__*/React.createElement("div", {
    style: modalStyle.titleRightPart
  }, /*#__PURE__*/React.createElement("h1", {
    style: modalStyle.titleEmployeeCreated
  }, title), /*#__PURE__*/React.createElement("button", {
    style: modalStyle.button,
    onClick: onClose
  }, /*#__PURE__*/React.createElement("img", {
    style: modalStyle.img,
    src: src,
    alt: "Close Modal"
  }))), /*#__PURE__*/React.createElement("div", {
    style: modalStyle.descriptionModal
  }, /*#__PURE__*/React.createElement("p", null, description)))));
};
Modal.propTypes = {
  isVisible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  src: PropTypes.string.isRequired
};
export default Modal;