# All files / src/components/window window.tsx

100% Statements 6/6
83.33% Branches 10/12
100% Functions 1/1
100% Lines 6/6

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

    17x

    2x

    2x
    2x

    2x

    2x

     import { FC, ReactNode } from 'react';
    import cn from 'classnames';

    import WindowHeader from './window-header';
    import WindowFooter from './window-footer';

    import '../../styles/components/window.scss';

    type WindowProps = {
      width?: string;
      height?: string;
      title?: string;
      withHeaderCloseButton?: boolean;
      withFooterCloseButton?: boolean;
      onWindowOpen?: () => void;
      onWindowClose?: () => void;
      withShadow?: boolean;
      className?: string;
      actionButtons?: ReactNode;
      children?: ReactNode;
    };

    const Window: FC<WindowProps> = ({
      width = '50vw',
      height = '50vh',
      title,
      withHeaderCloseButton = false,
      withFooterCloseButton = false,
      onWindowOpen,
      onWindowClose,
      actionButtons,
      withShadow = false,
      className,
      children,
    }) => {
      const styles = {
        width,
        minHeight: height,
        top: `calc((80vh - ${height}) / 2)`,
        left: `calc((100vw - ${width}) / 2)`,
      };
      const baseClassName = 'window';
      const cssClasses = cn(baseClassName, className, {
        [`${baseClassName}--with-shadow`]: !!withShadow,
      });

      onWindowOpen?.();

      return (
        <div className={cssClasses} style={styles}>
          {title && (
            <WindowHeader
              title={title}
              withCloseButton={withHeaderCloseButton}
              onWindowClose={onWindowClose}
            />
          )}

          <div className="window__content">{children}</div>

          {(withFooterCloseButton || actionButtons) && (
            <WindowFooter
              withCloseButton={withFooterCloseButton}
              onWindowClose={onWindowClose}
            >
              {actionButtons && actionButtons}
            </WindowFooter>
          )}
        </div>
      );
    };

    export default Window;