packages/components/containers/contacts/selector/ContactSelectorList.tsx

   1 import type { CSSProperties, ReactNode } from 'react';
   2 import { useRef } from 'react';
   3 import { AutoSizer, List } from 'react-virtualized';
   4
   5 import { DENSITY } from '@proton/shared/lib/constants';
   6 import type { UserSettings } from '@proton/shared/lib/interfaces/UserSettings';
   7 import clsx from '@proton/utils/clsx';
   8
   9 interface Props {
  10     rowCount: number;
  11     userSettings: UserSettings;
  12     contactRowHeightComfort?: number;
  13     contactRowHeightCompact?: number;
  14     rowRenderer: ({ index, style, key }: { index: number; style: CSSProperties; key: string }) => ReactNode;
  15     className?: string;
  16 }
  17
  18 const ContactSelectorList = ({
  19     rowCount,
  20     contactRowHeightComfort = 54,
  21     contactRowHeightCompact = 46,
  22     rowRenderer,
  23     className = '',
  24     userSettings,
  25 }: Props) => {
  26     const listRef = useRef(null);
  27     const containerRef = useRef(null);
  28     const isCompactView = userSettings.Density === DENSITY.COMPACT;
  29
  30     return (
  31         <div ref={containerRef} className={clsx(['h-custom', className])} style={{ '--h-custom': `18.75rem` }}>
  32             <AutoSizer>
  33                 {({ height, width }) => (
  34                     <List
  35                         className="contact-list outline-none"
  36                         ref={listRef}
  37                         rowRenderer={rowRenderer}
  38                         rowCount={rowCount}
  39                         height={height}
  40                         width={width - 1}
  41                         rowHeight={isCompactView ? contactRowHeightCompact : contactRowHeightComfort}
  42                     />
  43                 )}
  44             </AutoSizer>
  45         </div>
  46     );
  47 };
  48
  49 export default ContactSelectorList;