Merge branch 'master'
[arvados-workbench2.git] / 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     );