glide-design-system/src/lib/components/modal/Modal.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import "./Modal.css";
import PropTypes from "prop-types";

// /**
//  * Modal Layout
//  * @param {*} onClose A callback function that will be called when the user clicks the close icon or outside the modal to close it.
//  * @param {*} style allows you to apply custom styles to the modal container.
//  * @param {*} headerLabel string to set the label or title for the modal header.
//  * @param {*} headerStyle allows you to apply custom styles to the modal header.
//  * @param {*} cancelIcon boolean value indicating whether to show the close icon in the modal header.The default value is true.
//  * @param {*} open A boolean value indicating whether the modal is open or closed.
//  * @param {*} children The content to be displayed inside the modal. It can be any valid React component, HTML element, or a fragment of elements.
//  */

/**
 * The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
 */
export const Modal = ({
  open,
  onClose,
  children,
  containerClass,
  containerStyle,
  className,
  style,
  id,
  name,
}) => {
  if (!open) {
    return null;
  }

  const handleModalClick = (e) => {
    // Check if the clicked element is the modal content itself or its children
    if (e.target.classList.contains("modal-container")) {
      // Clicked outside the modal, trigger the onClose function

      onClose && onClose();
    } else {
      // Clicked inside the modal, prevent event propagation to avoid closing
      e.stopPropagation();
    }
  };

  return (
    <div
      className={`modal-container ${containerClass ? containerClass : ""}`}
      style={{ ...containerStyle }}
      onClick={handleModalClick}
    >
      <div
        data-testid={id}
        id={id}
        name={name}
        className={`modal ${className ? className : ""}`}
        style={{ ...style }}
      >
        {/* <div className="modal-close" onClick={onClose}></div> */}
        {children}
        {/* <h1>Hello</h1> */}
      </div>
    </div>
  );
};

Modal.propTypes = {
  /**
   * Close Modal
   */
  onClose: PropTypes.func,
  /**
   * open Modal
   */
  open: PropTypes.bool,
};

Modal.defaultProps = {
  open: false,
};