/*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ import AceEditor, { IAceEditorProps } from 'react-ace'; import React from 'react'; import clsx from 'clsx'; import 'ace-builds/src-noconflict/mode-python'; import 'ace-builds/src-noconflict/mode-sql'; import 'ace-builds/src-noconflict/theme-tomorrow'; import { createStyles } from '@material-ui/core'; import { isEmpty } from '@aws-amplify/core'; import { makeStyles } from 'aws-northstar'; const DEFAULT_PROPS: Partial<IAceEditorProps> = { readOnly: true, maxLines: 2, minLines: 1, highlightActiveLine: false, focus: false, wrapEnabled: true, showGutter: false, showPrintMargin: false, scrollMargin: [0], tabSize: 0, }; export interface CodeViewerProps extends Omit<IAceEditorProps, 'width' | 'height'> { readonly mode: 'sql' | 'python'; disableSelection?: boolean; width?: number | string; height?: number | string; } export const CodeViewer: React.FC<CodeViewerProps> = ({ disableSelection, value, width = '100%', height = '100%', className, ...props }) => { props = { ...DEFAULT_PROPS, ...props, }; const classes = useStyles(); className = clsx(classes.editor, disableSelection ? classes.noSelect : {}, className); value = value ? value.trim() : value; if (value == null || isEmpty(value)) { return null; } return ( // <Box className={classes.root} style={{ width, height }}> <AceEditor theme="tomorrow" className={className} {...props} value={value} width={parseCssLength(width)} height={parseCssLength(height)} /> // </Box> ); }; function parseCssLength(length: string | number): string { if (typeof length === 'number') return `${length}px`; return length; } const useStyles = makeStyles(() => createStyles({ root: { display: 'flex', alignItems: 'stretch', justifyContent: 'stretch', flexDirection: 'column', flex: 1, alignSelf: 'stretch', justifySelf: 'stretch', minWidth: 200, minHeight: 30, overflow: 'visible', }, editor: { width: '100%', height: '100%', flex: 1, alignSelf: 'stretch', justifySelf: 'stretch', }, noSelect: { // maxWidth: 345, '& *': { userSelect: 'none', }, '& .ace_scroller': { cursor: 'initial', }, '& .ace_marker-layer .ace_selection': { userSelect: 'none !important', backgroundColor: 'transparent', }, '& .ace_cursor': { userSelect: 'none !important', color: 'transparent', }, }, }), );