refs #14161 Merge branch 'origin/14161-inputs-focus-enter-action'
[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 import * as classNames from 'classnames';
9
10 type CssRules = 'root';
11
12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
13     root: {
14         boxSizing: 'border-box',
15         overflow: 'auto',
16         padding: theme.spacing.unit
17     }
18 });
19
20 export interface CodeSnippetDataProps {
21     lines: string[];
22     className?: string;
23 }
24
25 type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
26
27 export const CodeSnippet = withStyles(styles)(
28     ({ classes, lines, className }: CodeSnippetProps) =>
29         <Typography 
30         component="div" 
31         className={classNames(classes.root, className)}>
32             {
33                 lines.map((line: string, index: number) => {
34                     return <Typography key={index} component="pre">{line}</Typography>;
35                 })
36             }
37         </Typography>
38     );