# All files / src/components button-modal.tsx

28.57% Statements 2/7
0% Branches 0/5
0% Functions 0/4
28.57% Lines 2/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98

    16x

    16x

     import { FC, PropsWithChildren } from 'react';

    import ModalBackdrop from './modal-backdrop';
    import Window from './window/window';
    import useModal from '../hooks/modal';

    type DialogWindowProps = {
      title: string;
      className?: string;
      width: string;
      height: string;
      handleExitModal: () => void;
      onWindowOpen?: () => void;
      withHeaderCloseButton?: boolean;
      withFooterCloseButton?: boolean;
    };

    const DialogWindow: FC<PropsWithChildren<DialogWindowProps>> = ({
      title,
      width,
      height,
      className,
      handleExitModal,
      onWindowOpen,
      withHeaderCloseButton,
      withFooterCloseButton,
      children,
    }) => (
      <Window
        width={width}
        height={height}
        title={title}
        withHeaderCloseButton={withHeaderCloseButton}
        withFooterCloseButton={withFooterCloseButton}
        onWindowOpen={onWindowOpen}
        onWindowClose={handleExitModal}
        withShadow
        className={className}
      >
        {children}
      </Window>
    );

    type ButtonModalProps = {
      /** The button label */
      buttonText: string;
      /** The modal title */
      title: string;
      /** The width of the modal window */
      width?: string;
      /** The height of the modal window */
      height?: string;
      /** Display the close icon in the header */
      withHeaderCloseButton?: boolean;
      /** Display the close button in the footer */
      withFooterCloseButton?: boolean;
    };

    const ButtonModal: FC<PropsWithChildren<ButtonModalProps>> = ({
      buttonText,
      title,
      width = '70vw',
      height = '70vh',
      withHeaderCloseButton,
      withFooterCloseButton = true,
      children,
    }) => {
      const { displayModal, setDisplayModal, Modal } = useModal(
        ModalBackdrop,
        DialogWindow
      );
      return (
        <div>
          <button
            onClick={() => setDisplayModal(true)}
            className="button"
            type="button"
          >
            {buttonText}
          </button>
          {displayModal && (
            <Modal
              handleExitModal={() => setDisplayModal(false)}
              title={title}
              width={width}
              height={height}
              withHeaderCloseButton={withHeaderCloseButton}
              withFooterCloseButton={withFooterCloseButton}
            >
              {children}
            </Modal>
          )}
        </div>
      );
    };

    export default ButtonModal;