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 { getInlineFileUrl, sanitizeToken } from "views-components/context-menu/actions/helpers";
  11 import { connect } from "react-redux";
  12 import { RootState } from "store/store";
  13
  14 export interface FileThumbnailProps {
  15     file: FileTreeData;
  16 }
  17
  18 export const FileThumbnail =
  19     ({ file }: FileThumbnailProps) =>
  20         file.type === CollectionFileType.FILE && isImage(file.name)
  21             ? <ImageFileThumbnail file={file} />
  22             : null;
  23
  24 type ImageFileThumbnailCssRules = 'thumbnail';
  25
  26 const imageFileThumbnailStyle = withStyles<ImageFileThumbnailCssRules>(theme => ({
  27     thumbnail: {
  28         maxWidth: 250,
  29         margin: `${theme.spacing.unit}px 0`,
  30     }
  31 }));
  32
  33 interface ImageFileThumbnailProps {
  34     keepWebServiceUrl: string;
  35     keepWebInlineServiceUrl: string;
  36 }
  37
  38 const mapStateToProps = ({ auth }: RootState): ImageFileThumbnailProps => ({
  39     keepWebServiceUrl: auth.config.keepWebServiceUrl,
  40     keepWebInlineServiceUrl: auth.config.keepWebInlineServiceUrl,
  41 });
  42
  43 const ImageFileThumbnail = connect(mapStateToProps)(imageFileThumbnailStyle(
  44     ({ classes, file, keepWebServiceUrl, keepWebInlineServiceUrl }: WithStyles<ImageFileThumbnailCssRules> & FileThumbnailProps & ImageFileThumbnailProps) =>
  45         <img
  46             className={classes.thumbnail}
  47             alt={file.name}
  48             src={sanitizeToken(getInlineFileUrl(file.url, keepWebServiceUrl, keepWebInlineServiceUrl))} />
  49 ));