applications/drive/src/app/components/sections/Photos/grid/PhotosGroup.tsx

   1 import type { CSSProperties, FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Checkbox, Loader } from '@proton/components';
   6
   7 type Props = {
   8     style: CSSProperties;
   9     text: string;
  10     showSeparatorLine: boolean;
  11     onSelect: (isSelected: boolean) => void;
  12     selected: boolean | 'some';
  13     isLoading: boolean;
  14 };
  15
  16 export const PhotosGroup: FC<Props> = ({ style, text, showSeparatorLine, onSelect, selected, isLoading }) => {
  17     return (
  18         <div
  19             style={style}
  20             data-testid="month-text"
  21             className="text-semibold text-no-wrap text-capitalize py-3 flex items-center flex-nowrap"
  22         >
  23             <Checkbox
  24                 className="mr-2"
  25                 checked={!!selected}
  26                 data-testid="photos-group-checkbox"
  27                 indeterminate={selected === 'some'}
  28                 onChange={() => {
  29                     if (selected === 'some') {
  30                         onSelect(true);
  31                     } else {
  32                         onSelect(!selected);
  33                     }
  34                 }}
  35                 // Note: browsers combine aria-label and the actual label, the translation string is correct
  36                 aria-label={
  37                     // translator: Used by screen readers to provide context for Photos groups (e.g. Select all items for September)
  38                     c('Info').t`Select all items for`
  39                 }
  40             >
  41                 {text}
  42             </Checkbox>
  43             {isLoading && <Loader className="ml-2 flex items-center" />}
  44             {showSeparatorLine && <hr className="w-full m-0 ml-3 h-0 border-bottom border-weak" />}
  45         </div>
  46     );
  47 };