packages/components/containers/items/ItemCheckbox.tsx

   1 import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from 'react';
   2
   3 import { useUserSettings } from '@proton/account/userSettings/hooks';
   4 import Icon, { type IconName } from '@proton/components/components/icon/Icon';
   5 import Checkbox from '@proton/components/components/input/Checkbox';
   6 import ContactImage from '@proton/components/containers/contacts/ContactImage';
   7 import { DENSITY } from '@proton/shared/lib/constants';
   8 import clsx from '@proton/utils/clsx';
   9
  10 import './ItemCheckbox.scss';
  11
  12 interface Props {
  13     ID?: string;
  14     name?: string;
  15     email?: string;
  16     iconName?: IconName;
  17     color?: string;
  18     compactClassName?: string;
  19     normalClassName?: string;
  20     bimiSelector?: string;
  21     displaySenderImage?: boolean;
  22     checked: boolean;
  23     variant?: 'default' | 'small';
  24     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  25 }
  26
  27 const ItemCheckbox = ({
  28     ID = '',
  29     name = '',
  30     email = '',
  31     iconName,
  32     color,
  33     compactClassName,
  34     normalClassName,
  35     checked,
  36     bimiSelector,
  37     displaySenderImage,
  38     variant = 'default',
  39     onChange = () => {},
  40 }: Props) => {
  41     const [userSettings] = useUserSettings();
  42     const isCompactView = userSettings.Density === DENSITY.COMPACT;
  43
  44     /**
  45      * Due to the way we handle focus of parent elements
  46      * we need to stop propagation of click and focus
  47      * on checkbox label.
  48      */
  49     const handleClick: MouseEventHandler<HTMLLabelElement> = (event) => event.stopPropagation();
  50     const handleFocus: FocusEventHandler<HTMLLabelElement> = (event) => event.stopPropagation();
  51
  52     return isCompactView ? (
  53         <Checkbox
  54             className={clsx(['item-icon-compact', compactClassName])}
  55             checked={checked}
  56             onChange={onChange}
  57             labelOnClick={handleClick}
  58             data-item-id={ID}
  59             aria-describedby={ID}
  60             data-testid="item-checkbox"
  61         />
  62     ) : (
  63         <label
  64             className={clsx(['item-checkbox-label relative', normalClassName])}
  65             onClick={handleClick}
  66             onFocus={handleFocus}
  67         >
  68             <input
  69                 type="checkbox"
  70                 className="item-checkbox absolute inset-0 cursor-pointer m-0"
  71                 checked={checked}
  72                 onChange={onChange}
  73                 data-item-id={ID}
  74                 data-testid="item-checkbox"
  75             />
  76             <span
  77                 className={clsx(
  78                     'item-icon shrink-0 relative rounded inline-flex',
  79                     variant === 'small' && 'item-icon--small'
  80                 )}
  81                 style={{
  82                     backgroundColor: color ?? '',
  83                 }}
  84                 data-testid="element-list:message-checkbox"
  85                 aria-hidden="true"
  86             >
  87                 <span className="m-auto item-abbr rounded overflow-hidden" aria-hidden="true">
  88                     {iconName ? (
  89                         <Icon name={iconName} color="white" />
  90                     ) : (
  91                         <ContactImage
  92                             email={email}
  93                             name={name}
  94                             bimiSelector={bimiSelector}
  95                             displaySenderImage={displaySenderImage}
  96                             className="rounded relative"
  97                         />
  98                     )}
  99                 </span>
 100                 <span className="item-icon-fakecheck m-auto">
 101                     <Icon color={color ? 'white' : undefined} name="checkmark" className="item-icon-fakecheck-icon" />
 102                 </span>
 103             </span>
 104         </label>
 105     );
 106 };
 107
 108 export default ItemCheckbox;