services/workbench2/src/components/code-snippet/virtual-code-snippet.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 { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { WithStyles, Typography, withStyles } from '@material-ui/core';
   8 import { ArvadosTheme } from 'common/custom-theme';
   9 import classNames from 'classnames';
  10 import { connect, DispatchProp } from 'react-redux';
  11 import { RootState } from 'store/store';
  12 import { FederationConfig } from 'routes/routes';
  13 import { renderLinks } from './code-snippet';
  14 import { FixedSizeList } from 'react-window';
  15 import AutoSizer from "react-virtualized-auto-sizer";
  16
  17 type CssRules = 'root' | 'space' | 'content' ;
  18
  19 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  20     root: {
  21         boxSizing: 'border-box',
  22         height: '100%',
  23         padding: theme.spacing(1),
  24     },
  25     space: {
  26         marginLeft: '15px',
  27     },
  28     content: {
  29         maxHeight: '100%',
  30         height: '100vh',
  31     },
  32 });
  33
  34 export interface CodeSnippetDataProps {
  35     lines: string[];
  36     lineFormatter?: (lines: string[], index: number) => string;
  37     className?: string;
  38     apiResponse?: boolean;
  39     linked?: boolean;
  40 }
  41
  42 interface CodeSnippetAuthProps {
  43     auth: FederationConfig;
  44 }
  45
  46 type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
  47
  48 const mapStateToProps = (state: RootState): CodeSnippetAuthProps => ({
  49     auth: state.auth,
  50 });
  51
  52 export const VirtualCodeSnippet = withStyles(styles)(connect(mapStateToProps)(
  53     ({ classes, lines, lineFormatter, linked, className, apiResponse, dispatch, auth }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) => {
  54         const RenderRow = ({index, style}) => {
  55             const lineContents = lineFormatter ? lineFormatter(lines, index) : lines[index];
  56             return <span style={style}>{linked ? renderLinks(auth, dispatch)(lineContents) : lineContents}</span>
  57         };
  58
  59         return <Typography
  60             component="div"
  61             className={classNames([classes.root, className])}>
  62             <Typography className={classNames(classes.content, apiResponse ? classes.space : className)} component="pre">
  63                 <AutoSizer>
  64                     {({ height, width }) =>
  65                         <FixedSizeList
  66                             height={height}
  67                             width={width}
  68                             itemSize={21}
  69                             itemCount={lines.length}
  70                         >
  71                             {RenderRow}
  72                         </FixedSizeList>
  73                     }
  74                 </AutoSizer>
  75             </Typography>
  76         </Typography>;
  77 }));