applications/drive/src/app/components/revisions/RevisionListItem.tsx

   1 import { useRef } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Icon, TimeIntl } from '@proton/components';
   7
   8 import type { DriveFileRevision } from '../../store';
   9 import { useContextMenuControls } from '../FileBrowser';
  10 import { RevisionsItemContextMenu } from './RevisionsItemContextMenu';
  11
  12 import './RevisionListItem.scss';
  13
  14 const RevisionListItem = ({
  15     revision,
  16     formatType = 'date',
  17     isCurrent = false,
  18 }: {
  19     revision: DriveFileRevision;
  20     formatType?: 'date' | 'time';
  21     isCurrent?: boolean;
  22 }) => {
  23     const contextMenuControls = useContextMenuControls();
  24     const ref = useRef<HTMLButtonElement>(null);
  25     const options: Intl.DateTimeFormatOptions =
  26         formatType === 'date'
  27             ? {
  28                   month: 'short',
  29                   day: 'numeric',
  30               }
  31             : {
  32                   hour: 'numeric',
  33                   minute: 'numeric',
  34               };
  35     return (
  36         <>
  37             <RevisionsItemContextMenu
  38                 anchorRef={ref}
  39                 isOpen={contextMenuControls.isOpen}
  40                 position={contextMenuControls.position}
  41                 open={contextMenuControls.open}
  42                 close={contextMenuControls.close}
  43                 revision={revision}
  44                 isCurrent={isCurrent}
  45             />
  46             <li className="revision-list-item mb-4">
  47                 <TimeIntl className="flex-1" options={options}>
  48                     {revision.createTime}
  49                 </TimeIntl>
  50                 <p className="text-ellipsis text-center m-0">{revision.signatureEmail}</p>
  51                 <Button
  52                     className="ml-auto"
  53                     ref={ref}
  54                     shape="ghost"
  55                     size="small"
  56                     icon
  57                     onClick={(e) => {
  58                         contextMenuControls.handleContextMenu(e);
  59                     }}
  60                     onTouchEnd={(e) => {
  61                         contextMenuControls.handleContextMenuTouch(e);
  62                     }}
  63                 >
  64                     <Icon name="three-dots-vertical" alt={c('Action').t`More options`} />
  65                 </Button>
  66             </li>
  67         </>
  68     );
  69 };
  70
  71 export default RevisionListItem;