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 React from 'react';
   6 import { StyleRulesCallback, WithStyles, Typography, withStyles } from '@material-ui/core';
   7 import { ArvadosTheme } from 'common/custom-theme';
   8 import classNames from 'classnames';
   9
  10 type CssRules = 'root' | 'space';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     root: {
  14         boxSizing: 'border-box',
  15         overflow: 'auto',
  16         padding: theme.spacing.unit
  17     },
  18     space: {
  19         marginLeft: '15px'
  20     }
  21 });
  22
  23 export interface CodeSnippetDataProps {
  24     lines: string[];
  25     className?: string;
  26     apiResponse?: boolean;
  27     containerClassName?: string;
  28     fontSize?: number;
  29     customRenderer?: (line: string) => React.ReactNode;
  30 }
  31
  32 type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
  33
  34 export const CodeSnippet = withStyles(styles)(
  35     ({ classes, lines, className, containerClassName,
  36         apiResponse, fontSize, customRenderer }: CodeSnippetProps) =>
  37         <Typography component="div"
  38             className={classNames(classes.root, containerClassName, className)}>
  39             { lines.map((line: string, index: number) => {
  40             return <Typography key={index} style={{ fontSize: fontSize }}
  41                 className={apiResponse ? classes.space : className}
  42                 component="pre">
  43                 {customRenderer ? customRenderer(line) : line}
  44             </Typography>;
  45             }) }
  46         </Typography>
  47     );