✨ Raw config editor (#250)

timmo001 · Mar 29, 2019 · e53d027 · e53d027
1 parent 1fd9e1b
commit e53d027
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "react-autolink-text2": "3.2.0",
     "react-color": "2.17.0",
     "react-dom": "16.8.6",
+    "react-json-editor-ajrm": "2.5.9",
     "react-moment": "0.8.4",
     "react-router-dom": "5.0.0",
     "react-scripts": "2.1.8",

diff --git a/src/Components/EditConfig/RawEditor.js b/src/Components/EditConfig/RawEditor.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import JSONInput from 'react-json-editor-ajrm';
+import locale from 'react-json-editor-ajrm/locale/en';
+import withStyles from '@material-ui/core/styles/withStyles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import clone from '../Common/clone';
+
+const styles = () => ({
+  content: {
+    margin: 0
+  }
+});
+
+class RawEditor extends React.PureComponent {
+  state = {
+    open: true,
+    config: clone(this.props.config)
+  };
+
+  handleClose = cb => this.setState({ open: false }, cb);
+
+  handleCancel = () =>
+    this.handleClose(() => {
+      this.props.add
+        ? this.props.handleItemAddDone()
+        : this.props.handleItemEditDone();
+    });
+
+  handleSave = () =>
+    this.handleClose(() => {
+      let config = clone(this.state.config);
+      this.props.add
+        ? this.props.handleRawEditDone(config)
+        : this.props.handleRawEditDone(config);
+    });
+
+  handleConfigChange = config => this.setState({ config: config.jsObject });
+
+  render() {
+    const { classes } = this.props;
+    const { open, config } = this.state;
+
+    return (
+      <Dialog
+        className={classes.dialog}
+        open={open}
+        fullScreen
+        aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">Raw Editor</DialogTitle>
+        <DialogContent className={classes.content}>
+          <JSONInput
+            height="100%"
+            width="100%"
+            style={{ body: { fontSize: 14 } }}
+            locale={locale}
+            placeholder={config}
+            onChange={this.handleConfigChange}
+          />
+        </DialogContent>
+        <DialogActions>
+          <div className={classes.fill} />
+          <Button onClick={this.handleCancel} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={this.handleSave} color="primary">
+            Save
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+}
+
+RawEditor.propTypes = {
+  classes: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
+  handleRawEditDone: PropTypes.func.isRequired
+};
+
+export default withStyles(styles)(RawEditor);
diff --git a/src/Components/Header.js b/src/Components/Header.js
@@ -19,6 +19,7 @@ import CheckIcon from '@material-ui/icons/Check';
 import RadioIcon from '@material-ui/icons/Radio';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import BorderTopIcon from '@material-ui/icons/BorderTop';
+import CodeIcon from '@material-ui/icons/Code';
 
 const styles = theme => ({
   header: {
@@ -374,6 +375,20 @@ class Header extends React.PureComponent {
                 </IconButton>
               </Tooltip>
             )}
+            {editing && (
+              <Tooltip title="Raw Editor">
+                <IconButton
+                  className={classes.button}
+                  style={{
+                    gridRow: timeDisabled && dateDisabled ? 1 : 3,
+                    gridColumn: timeDisabled && dateDisabled ? 5 : 2
+                  }}
+                  aria-label="Raw Editor"
+                  onClick={this.props.handleEditConfigRaw}>
+                  <CodeIcon className={classes.icon} />
+                </IconButton>
+              </Tooltip>
+            )}
           </div>
         </Slide>
         <Menu
@@ -532,7 +547,8 @@ Header.propTypes = {
   handleLogOut: PropTypes.func.isRequired,
   handleRadioHide: PropTypes.func.isRequired,
   handleConfigUI: PropTypes.func.isRequired,
-  handleEditConfig: PropTypes.func.isRequired
+  handleEditConfig: PropTypes.func.isRequired,
+  handleEditConfigRaw: PropTypes.func.isRequired
 };
 
 export default withStyles(styles)(Header);
diff --git a/src/Components/Main.js b/src/Components/Main.js
@@ -9,6 +9,7 @@ import EditCard from './EditConfig/EditCard';
 import EditPage from './EditConfig/EditPage';
 import EditGroup from './EditConfig/EditGroup';
 import EditConfig from './EditConfig/EditConfig';
+import RawEditor from './EditConfig/RawEditor';
 import dc from './EditConfig/defaultConfig.json';
 import isObject from './Common/isObject';
 import clone from './Common/clone';
@@ -160,6 +161,8 @@ class Main extends React.PureComponent {
     });
   };
 
+  handleEditConfigRaw = () => this.setState({ editingRaw: true });
+
   handleCardAddDone = (path, card) => {
     path && this.handleConfigChange(path, clone(card));
     this.setState({ addingCard: undefined });
@@ -206,6 +209,11 @@ class Main extends React.PureComponent {
     this.setState({ editingItem: undefined });
   };
 
+  handleRawEditDone = config => {
+    config && this.handleConfigChange([], clone(config));
+    this.setState({ editingRaw: undefined });
+  };
+
   render() {
     const {
       classes,
@@ -229,7 +237,8 @@ class Main extends React.PureComponent {
       editingPage,
       addingGroup,
       editingGroup,
-      editingItem
+      editingItem,
+      editingRaw
     } = this.state;
     const pages = config.pages
       ? config.pages
@@ -257,6 +266,7 @@ class Main extends React.PureComponent {
           handleRadioHide={this.handleRadioHide}
           handleConfigUI={this.handleConfigUI}
           handleEditConfig={this.handleEditConfig}
+          handleEditConfigRaw={this.handleEditConfigRaw}
         />
         <div
           className={classes.pageContainer}
@@ -361,6 +371,12 @@ class Main extends React.PureComponent {
             handleItemEditDone={this.handleItemEditDone}
           />
         )}
+        {editingRaw && (
+          <RawEditor
+            config={config}
+            handleRawEditDone={this.handleRawEditDone}
+          />
+        )}
       </div>
     );
   }

diff --git a/yarn.lock b/yarn.lock
@@ -743,6 +743,13 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
+"@babel/runtime@^7.0.0-rc.0":
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.2.tgz#f5ab6897320f16decd855eed70b705908a313fe8"
+  integrity sha512-7Bl2rALb7HpvXFL7TETNzKSAeBVCPHELzc0C//9FCxN8nsiueWSJBqaF+2oIJScyILStASR/Cx5WMkXGYTiJFA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2":
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
@@ -8493,6 +8500,13 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb"
   integrity sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA==
 
+react-json-editor-ajrm@2.5.9:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/react-json-editor-ajrm/-/react-json-editor-ajrm-2.5.9.tgz#f9cec4aba44b82a75ff632571b84fae0d2bd4c76"
+  integrity sha512-76FQtcIU3O88I5i/QUx+Lw7zB8OpyKap7eyHZOIhbsMdbMiT+sRdbIhxXchKoTOMnYmmw0vG8D9YCzX80iew9w==
+  dependencies:
+    "@babel/runtime" "^7.0.0-rc.0"
+
 react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -8753,6 +8767,11 @@ regenerator-runtime@^0.12.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
   integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
 
+regenerator-runtime@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
+  integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
+
 regenerator-transform@^0.13.3:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb"