packages/components/containers/layout/PrivateMainArea.tsx

   1 import type { HTMLAttributes, ReactNode, Ref } from 'react';
   2 import { forwardRef } from 'react';
   3
   4 import clsx from '@proton/utils/clsx';
   5
   6 import { useTheme } from '../themes/ThemeProvider';
   7
   8 interface Props extends HTMLAttributes<HTMLDivElement> {
   9     className?: string;
  10     children?: ReactNode;
  11     hasToolbar?: boolean;
  12     hasRowMode?: boolean;
  13     drawerSidebar?: ReactNode;
  14     drawerVisibilityButton?: ReactNode;
  15     isDrawerApp?: boolean;
  16     mainBordered?: boolean;
  17 }
  18
  19 const PrivateMainAreaBase = (
  20     {
  21         className,
  22         hasToolbar = false,
  23         children,
  24         hasRowMode = false,
  25         drawerSidebar,
  26         drawerVisibilityButton,
  27         isDrawerApp,
  28         mainBordered = true,
  29         ...rest
  30     }: Props,
  31     ref: Ref<HTMLDivElement>
  32 ) => {
  33     const hasDrawerSidebar = !!drawerSidebar && !isDrawerApp;
  34     const theme = useTheme();
  35     const isProminent = theme.information.prominentHeader;
  36
  37     return (
  38         <main
  39             className={clsx([
  40                 hasToolbar ? 'main-area--with-toolbar' : 'main-area',
  41                 hasRowMode ? 'main-area--row-mode' : undefined,
  42                 !drawerSidebar && !isProminent ? 'main-area-border' : undefined,
  43                 'flex-auto relative h-full reset4print outline-none--at-all',
  44                 className,
  45             ])}
  46             ref={ref}
  47             tabIndex={-1}
  48             {...rest}
  49         >
  50             <div
  51                 className={clsx(
  52                     'flex flex-nowrap w-full',
  53                     drawerSidebar ? 'h-full relative overflow-hidden' : undefined,
  54                     isProminent ? 'ui-prominent' : undefined
  55                 )}
  56             >
  57                 <div
  58                     className={clsx(
  59                         'flex flex-nowrap w-full h-full',
  60                         hasDrawerSidebar ? 'main-area-border overflow-hidden' : 'overflow-auto',
  61                         hasDrawerSidebar && mainBordered ? 'main-area-rounded--right' : undefined,
  62                         isProminent ? 'ui-standard main-area-rounded--left' : undefined
  63                     )}
  64                 >
  65                     {children}
  66                 </div>
  67                 {drawerVisibilityButton}
  68                 {drawerSidebar}
  69             </div>
  70         </main>
  71     );
  72 };
  73
  74 const PrivateMainArea = forwardRef(PrivateMainAreaBase);
  75
  76 export default PrivateMainArea;