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