packages/components/containers/contacts/merge/table/NameTableCell.tsx

   1 import Checkbox from '@proton/components/components/input/Checkbox';
   2 import clsx from '@proton/utils/clsx';
   3
   4 interface Props {
   5     contactID: string;
   6     highlightedID: string;
   7     checked: boolean;
   8     deleted: boolean;
   9     greyedOut: boolean;
  10     name: string;
  11     onToggle: (ID: string) => void;
  12 }
  13
  14 const NameTableCell = ({ name, contactID, highlightedID, checked, deleted, greyedOut, onToggle }: Props) => {
  15     const handleToggle = () => onToggle(contactID);
  16
  17     return (
  18         <div className="flex flex-nowrap items-center">
  19             <Checkbox
  20                 checked={checked}
  21                 onChange={handleToggle}
  22                 className={`flex items-center shrink-0 mr-2 ${deleted ? 'visibility-hidden' : ''}`}
  23                 data-testid="merge-model:name-checkbox"
  24             />
  25             <span
  26                 className={clsx([
  27                     'max-w-full',
  28                     'inline-block',
  29                     'text-ellipsis',
  30                     greyedOut && 'color-weak',
  31                     contactID === highlightedID && 'text-bold',
  32                 ])}
  33             >
  34                 {name}
  35             </span>
  36         </div>
  37     );
  38 };
  39
  40 export default NameTableCell;