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