diff --git a/package.json b/package.json index ee6cc3274..06b2343ac 100644 --- 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 new file mode 100644 index 000000000..d25d2248b --- /dev/null +++ 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 ( + + Raw Editor + + + + +
+ + + +
+ ); + } +} + +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 index a1327435f..a43324c5e 100644 --- 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 { )} + {editing && ( + + + + + + )} 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} />
)} + {editingRaw && ( + + )}
); } diff --git a/yarn.lock b/yarn.lock index 7877c811c..4cb11decd 100644 --- 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"