StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement a simple React demo

This commit is contained in:
jos 2018-08-06 17:10:07 +02:00
parent 235410c59f
commit 54cae20630
14 changed files with 14554 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/api.md
View File

@ -470,6 +470,11 @@ valid JSON and the editor is in mode `tree`, `view`, or `form`.
Contents of the editor as string. Contents of the editor as string.
### Constants
- `{string[]} JSONEditor.VALID_OPTIONS`
An array with the names of all known options.
### Examples ### Examples

21
examples/react_demo/.gitignore vendored Normal file
View File

@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

21
examples/react_demo/README.md Normal file
View File

@ -0,0 +1,21 @@
# JSONEditor React demo
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
## Install
Install dependencies once:
```
npm install
```
## Run
To run the demo:
```
npm start
```
This will open a development server at http://localhost:3000

14312
examples/react_demo/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
examples/react_demo/package.json Normal file
View File

@ -0,0 +1,17 @@
{
"name": "react_demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"jsoneditor": "file:../..",
"react": "16.4.2",
"react-dom": "16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

34
examples/react_demo/public/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>JSONEditor | React demo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

12
examples/react_demo/src/App.css Normal file
View File

@ -0,0 +1,12 @@
.app .contents {
width: 500px;
height: 400px;
}
.app .contents .menu {
padding: 10px 0;
}
.app .contents .code {
background: #f5f5f5;
}

57
examples/react_demo/src/App.js Normal file
View File

@ -0,0 +1,57 @@
import React, { Component } from 'react';
import JSONEditorDemo from "./JSONEditorDemo";
import './App.css';
class App extends Component {
state = {
json: {
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
}
};
render() {
return (
<div className="app">
<h1>JSONEditor React demo</h1>
<div className="contents">
<div className="menu">
<button onClick={this.updateTime}>
Create/update a field "time"
</button>
</div>
<JSONEditorDemo
json={this.state.json}
onChange={this.onChange}
/>
<div className="code">
<pre>
<code>
{JSON.stringify(this.state.json, null, 2)}
</code>
</pre>
</div>
</div>
</div>
);
}
onChange = (json) => {
this.setState({ json });
};
updateTime = () => {
const time = new Date().toISOString();
this.setState({
json: Object.assign({}, this.state.json, { time })
})
};
}
export default App;

9
examples/react_demo/src/App.test.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});

4
examples/react_demo/src/JSONEditorDemo.css Normal file
View File

@ -0,0 +1,4 @@
.jsoneditor-react-container {
width: 100%;
height: 100%;
}

44
examples/react_demo/src/JSONEditorDemo.js Normal file
View File

@ -0,0 +1,44 @@
import React, {Component} from 'react';
import * as JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css';
import './JSONEditorDemo.css';
export default class JSONEditorDemo extends Component {
componentDidMount () {
const options = {
mode: 'tree',
modes: ['tree', 'code'],
onChange: this.onChange
};
this.jsoneditor = new JSONEditor(this.container, options);
this.jsoneditor.set(this.props.json);
}
componentWillUnmount () {
if (this.jsoneditor) {
this.jsoneditor.destroy();
}
}
componentWillUpdate(nextProps, nextState) {
this.jsoneditor.update(nextProps.json)
}
render() {
return (
<div className="jsoneditor-react-container" ref={elem => this.container = elem} />
);
}
onChange = () => {
if (this.props.onChange) {
// note that this.jsoneditor.get() can fail in mode text/code
// when the contents is no valid JSON object.
// So if you need mode text/node, you must use getText() and setText().
this.props.onChange(this.jsoneditor.get());
}
}
}

3
examples/react_demo/src/index.css Normal file
View File

@ -0,0 +1,3 @@
body {
font-family: sans-serif;
}

6
examples/react_demo/src/index.js Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

18
src/js/JSONEditor.js
View File

@ -89,16 +89,8 @@ function JSONEditor (container, options, json) {
// validate options // validate options
if (options) { if (options) {
var VALID_OPTIONS = [
'ajv', 'schema', 'schemaRefs','templates',
'ace', 'theme','autocomplete',
'onChange', 'onEditable', 'onError', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange',
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language'
];
Object.keys(options).forEach(function (option) { Object.keys(options).forEach(function (option) {
if (VALID_OPTIONS.indexOf(option) === -1) { if (JSONEditor.VALID_OPTIONS.indexOf(option) === -1) {
console.warn('Unknown option "' + option + '". This option will be ignored'); console.warn('Unknown option "' + option + '". This option will be ignored');
} }
}); });
@ -130,6 +122,14 @@ JSONEditor.modes = {};
// debounce interval for JSON schema vaidation in milliseconds // debounce interval for JSON schema vaidation in milliseconds
JSONEditor.prototype.DEBOUNCE_INTERVAL = 150; JSONEditor.prototype.DEBOUNCE_INTERVAL = 150;
JSONEditor.VALID_OPTIONS = [
'ajv', 'schema', 'schemaRefs','templates',
'ace', 'theme','autocomplete',
'onChange', 'onEditable', 'onError', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange',
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language'
];
/** /**
* Create the JSONEditor * Create the JSONEditor
* @param {Element} container Container element * @param {Element} container Container element