src/components/code-snippet/code-snippet.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 { StyleRulesCallback, WithStyles, Typography, withStyles, Theme } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8
   9 type CssRules = 'root';
  10
  11 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  12     root: {
  13         boxSizing: 'border-box',
  14         width: '100%',
  15         height: 'auto',
  16         maxHeight: '550px',
  17         overflow: 'auto',
  18         padding: theme.spacing.unit
  19     }
  20 });
  21
  22 export interface CodeSnippetDataProps {
  23     lines: string[];
  24 }
  25
  26 type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
  27
  28 export const CodeSnippet = withStyles(styles)(
  29     ({ classes, lines }: CodeSnippetProps) =>
  30         <Typography component="div" className={classes.root}>
  31             {
  32                 lines.map((line: string, index: number) => {
  33                     return <Typography key={index} component="pre">{line}</Typography>;
  34                 })
  35             }
  36         </Typography>
  37     );