Source: Dialog/index.tsx

  1. import React, { ReactNode } from 'react';
  2. import styles from './dialog.module.css';
  3. import { clx } from '@/helpers';
  5. type Props = {
  6.     dialogRef?: React.RefObject<HTMLDivElement>;
  7.     className?: string;
  8.     open?: boolean;
  9.     withPadding?: boolean;
  10.     modalMode?: boolean;
  11.     header?: ReactNode;
  12.     body?: ReactNode;
  13.     footer?: ReactNode;
  14.     large?: boolean;
  15. };
  17. /**
  18.  * @example
  19.  *     <Dialog
  20.  *         dialogRef={dialogRef}
  21.  *         open={open}
  22.  *         withPadding={withPadding}
  23.  *         modalMode={modalMode}
  24.  *         header={<h1>Header</h1>}
  25.  *         body={<p>Body</p>}
  26.  *         footer={<button>Footer</button>}
  27.  *         large={large}
  28.  *     />;
  29.  *
  30.  * @param {React.RefObject<HTMLDivElement>} dialogRef - Ref to the dialog element
  31.  * @param {boolean} open - If true, the dialog will be open
  32.  * @param {boolean} withPadding - If true, the dialog will have padding
  33.  * @param {boolean} modalMode - If true, the dialog will be not complete screen
  34.  * @param {ReactNode} header - The header of the dialog
  35.  * @param {ReactNode} body - The body of the dialog
  36.  * @param {ReactNode} footer - The footer of the dialog
  37.  * @param {boolean} large - If true, the dialog will be large
  38.  * @returns {JSX.Element}
  39.  */
  41. const Dialog = (props: Props) => {
  42.     const {
  43.         dialogRef,
  44.         className,
  45.         open,
  46.         large,
  47.         withPadding,
  48.         modalMode,
  49.         header = <></>,
  50.         body = <></>,
  51.         footer = <></>,
  52.     } = props;
  54.     return (
  55.         <div
  56.             ref={dialogRef}
  57.             data-testid="dialog"
  58.             className={clx(
  59.                 className,
  60.                 styles.dialog,
  61.                 open ? styles.open : '',
  62.                 withPadding ? styles.padding : '',
  63.                 modalMode ? styles.modalMode : '',
  64.                 large ? styles.large : ''
  65.             )}
  66.         >
  67.             <header data-testid="dialog-header">{header}</header>
  68.             <main className={styles.body} data-testid="dialog-body">
  69.                 {body}
  70.             </main>
  71.             <footer data-testid="dialog-footer">{footer}</footer>
  72.         </div>
  73.     );
  74. };
  76. export default Dialog;