canape/frontend/js/components/forms/modal.js

import React from "react";
import PropTypes from "prop-types";

import { Modal } from "react-bootstrap";

export const FormModal = ({
  show,
  setShow,
  title,
  icon,
  handleSubmit,
  children,
}) => {
  const submit = function (e) {
    if (e) {
      e.preventDefault();
    }
    handleSubmit();
  };

  return (
    <Modal show={show} onHide={() => setShow(false)}>
      <Modal.Header closeButton>
        <Modal.Title>
          <i className={`fa fa-${icon} mr-1`} />
          {title}
        </Modal.Title>
      </Modal.Header>
      <Modal.Body bsPrefix="modal-body">
        <form className="form-horizontal" onSubmit={(ev) => submit(ev)}>
          {children}
        </form>
      </Modal.Body>
      <Modal.Footer>
        <div className="btn btn-success" onClick={submit}>
          Apply
        </div>
        <div className="btn btn-danger" onClick={() => setShow(false)}>
          Close
        </div>
      </Modal.Footer>
    </Modal>
  );
};
FormModal.propTypes = {
  show: PropTypes.bool,
  setShow: PropTypes.func,
  icon: PropTypes.string,
  title: PropTypes.string,
  handleSubmit: PropTypes.func,
  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
};