github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/ui/Modals/ModalWithToggle.tsx (about)

     1  import React, { SetStateAction, Dispatch, ReactNode } from 'react';
     2  import classnames from 'classnames';
     3  import OutsideClickHandler from 'react-outside-click-handler';
     4  import styles from './ModalWithToggle.module.scss';
     5  
     6  export interface ModalWithToggleProps {
     7    isModalOpen: boolean;
     8    setModalOpenStatus: Dispatch<SetStateAction<boolean>>;
     9    customHandleOutsideClick?: (e: MouseEvent) => void;
    10    toggleText: string;
    11    headerEl: string | ReactNode;
    12    leftSideEl: ReactNode;
    13    rightSideEl: ReactNode;
    14    footerEl?: ReactNode;
    15    noDataEl?: ReactNode;
    16    modalClassName?: string;
    17    modalHeight?: string;
    18  }
    19  
    20  function ModalWithToggle({
    21    isModalOpen,
    22    setModalOpenStatus,
    23    customHandleOutsideClick,
    24    toggleText,
    25    headerEl,
    26    leftSideEl,
    27    rightSideEl,
    28    footerEl,
    29    noDataEl,
    30    modalClassName,
    31    modalHeight,
    32  }: ModalWithToggleProps) {
    33    const handleOutsideClick = () => {
    34      setModalOpenStatus(false);
    35    };
    36  
    37    return (
    38      <div data-testid="modal-with-toggle" className={styles.container}>
    39        <OutsideClickHandler
    40          onOutsideClick={customHandleOutsideClick || handleOutsideClick}
    41        >
    42          <button
    43            id="modal-toggler"
    44            type="button"
    45            data-testid="toggler"
    46            className={styles.toggle}
    47            onClick={() => setModalOpenStatus((v) => !v)}
    48          >
    49            {toggleText}
    50          </button>
    51          {isModalOpen && (
    52            <div
    53              className={classnames(styles.modal, modalClassName)}
    54              data-testid="modal"
    55            >
    56              <div className={styles.modalHeader} data-testid="modal-header">
    57                {headerEl}
    58              </div>
    59              <div className={styles.modalBody} data-testid="modal-body">
    60                {noDataEl || (
    61                  <>
    62                    <div
    63                      className={styles.side}
    64                      style={{ ...(modalHeight && { height: modalHeight }) }}
    65                    >
    66                      {leftSideEl}
    67                    </div>
    68                    <div
    69                      className={styles.side}
    70                      style={{ ...(modalHeight && { height: modalHeight }) }}
    71                    >
    72                      {rightSideEl}
    73                    </div>
    74                  </>
    75                )}
    76              </div>
    77              <div className={styles.modalFooter} data-testid="modal-footer">
    78                {footerEl}
    79              </div>
    80            </div>
    81          )}
    82        </OutsideClickHandler>
    83      </div>
    84    );
    85  }
    86  
    87  export default ModalWithToggle;