src/components/file-tree/file-thumbnail.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 isImage from 'is-image';
   7 import { withStyles, WithStyles } from '@material-ui/core';
   8 import { FileTreeData } from '~/components/file-tree/file-tree-data';
   9 import { CollectionFileType } from '~/models/collection-file';
  10
  11 export interface FileThumbnailProps {
  12     file: FileTreeData;
  13 }
  14
  15 export const FileThumbnail =
  16     ({ file }: FileThumbnailProps) =>
  17         file.type === CollectionFileType.FILE && isImage(file.name)
  18             ? <ImageFileThumbnail file={file} />
  19             : null;
  20
  21 type ImageFileThumbnailCssRules = 'thumbnail';
  22
  23 const imageFileThumbnailStyle = withStyles<ImageFileThumbnailCssRules>(theme => ({
  24     thumbnail: {
  25         maxWidth: 250,
  26         margin: `${theme.spacing.unit}px 0`,
  27     }
  28 }));
  29
  30 const ImageFileThumbnail = imageFileThumbnailStyle(
  31     ({ classes, file }: WithStyles<ImageFileThumbnailCssRules> & FileThumbnailProps) =>
  32         <img
  33             className={classes.thumbnail}
  34             alt={file.name}
  35             src={file.url} />
  36 );