Covert language-web to TypeScript

1 files changed, 75 insertions, 0 deletions

diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx
new file mode 100644
index 00000000..1a187635
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -0,0 +1,75 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import Divider from '@material-ui/core/Divider';
+import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
+import RedoIcon from '@material-ui/icons/Redo';
+import UndoIcon from '@material-ui/icons/Undo';
+
+import { makeStyles } from '../makeStyles';
+import { useRootStore } from '../RootStore';
+
+const useStyles = makeStyles()(theme => ({
+  iconButton: {
+    padding: 7,
+    border: 0,
+    color: theme.palette.text.primary,
+    '&, &.MuiButtonGroup-grouped': {
+      minWidth: 36,
+    },
+    '&.MuiButtonGroup-grouped:not(:last-of-type)': {
+      borderRight: 0,
+    },
+  },
+  divider: {
+    margin: theme.spacing(0.5),
+  },
+}));
+
+export default observer(() => {
+  const { editorStore } = useRootStore();
+  const { classes, cx } = useStyles();
+  return (
+    <>
+      <ButtonGroup
+        variant='text'
+      >
+        <Button
+          disabled={!editorStore.canUndo}
+          onClick={() => editorStore.undo()}
+          className={cx(classes.iconButton)}
+          color='inherit'
+          aria-label='Undo'
+        >
+          <UndoIcon fontSize='small'/>
+        </Button>
+        <Button
+          disabled={!editorStore.canRedo}
+          onClick={() => editorStore.redo()}
+          className={cx(classes.iconButton)}
+          color='inherit'
+          aria-label='Redo'
+        >
+          <RedoIcon fontSize='small'/>
+        </Button>
+      </ButtonGroup>
+      <Divider
+        flexItem
+        orientation='vertical'
+        className={classes.divider}
+      />
+      <ToggleButton
+        selected={editorStore.showLineNumbers}
+        onChange={() => editorStore.toggleLineNumbers()}
+        size='small'
+        className={cx(classes.iconButton)}
+        aria-label='Show line numbers'
+        value='show-line-numbers'
+      >
+        <FormatListNumberedIcon fontSize='small'/>
+      </ToggleButton>
+    </>
+  );
+});