src/views-components/details-panel/file-details.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { DetailsData } from "./details-data";
   7 import { CollectionFile, CollectionDirectory, CollectionFileType } from 'models/collection-file';
   8 import { getIcon } from 'components/file-tree/file-tree-item';
   9 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
  10 import { formatFileSize } from 'common/formatters';
  11 import { FileThumbnail } from 'components/file-tree/file-thumbnail';
  12 import isImage from 'is-image';
  13
  14 export class FileDetails extends DetailsData<CollectionFile | CollectionDirectory> {
  15
  16     getIcon(className?: string) {
  17         const Icon = getIcon(this.item.type);
  18         return <Icon className={className} />;
  19     }
  20
  21     getDetails() {
  22         const { item } = this;
  23         return item.type === CollectionFileType.FILE
  24             ? <>
  25                 <DetailsAttribute label='Size' value={formatFileSize(item.size)} />
  26                 {
  27                     isImage(item.url) && <>
  28                         <DetailsAttribute label='Preview' />
  29                         <FileThumbnail file={item} />
  30                     </>
  31                 }
  32             </>
  33             : <div />;
  34     }
  35 }