packages/drive-store/components/layout/DriveEmptyView.tsx

   1 import type { PropsWithChildren } from 'react';
   2 import { forwardRef } from 'react';
   3
   4 import { EmptyViewContainer } from '@proton/components';
   5 import clsx from '@proton/utils/clsx';
   6 import isTruthy from '@proton/utils/isTruthy';
   7
   8 type MaybeString = string | false | null | undefined;
   9 type Props = PropsWithChildren<{
  10     image: string;
  11     title: string;
  12     subtitle?: MaybeString | MaybeString[];
  13
  14     dataTestId?: string;
  15     onClick?: () => void;
  16 }>;
  17
  18 const filterSubtitles = (subtitle: MaybeString | MaybeString[]): string[] => {
  19     if (Array.isArray(subtitle)) {
  20         return subtitle.filter(isTruthy);
  21     }
  22
  23     if (subtitle) {
  24         return [subtitle];
  25     }
  26
  27     return [];
  28 };
  29
  30 /**
  31  * Common template for empty views across Drive.
  32  */
  33 export const DriveEmptyView = forwardRef<HTMLDivElement, Props>(
  34     ({ image, title, subtitle, dataTestId, onClick, children }, ref) => (
  35         // onClick is used for context menu, so we don't need to care about keyboard events
  36         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
  37         <div ref={ref} onClick={onClick} className="flex w-full flex flex-1 overflow-auto">
  38             <EmptyViewContainer
  39                 imageProps={{
  40                     src: image,
  41                     role: 'presentation',
  42                     'aria-hidden': true,
  43                     alt: '',
  44                 }}
  45                 data-testid={dataTestId}
  46             >
  47                 <div className={clsx(!!children && 'mb-8')}>
  48                     <h3 className="text-bold">{title}</h3>
  49                     {filterSubtitles(subtitle).map((text) => (
  50                         <p key={text} className={'color-weak m-0 mt-2'}>
  51                             {text}
  52                         </p>
  53                     ))}
  54                 </div>
  55                 {children}
  56             </EmptyViewContainer>
  57         </div>
  58     )
  59 );
  60 DriveEmptyView.displayName = 'DriveEmptyView';