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

Update react example

This commit is contained in:
jos 2018-08-15 14:52:49 +02:00
parent 65df3428ac
commit cc3e441361
9 changed files with 1287 additions and 20462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/react_demo/.gitignore vendored Executable file → Normal file
View File

@ -13,5 +13,3 @@ build
.DS_Store
.env
npm-debug.log
.vscode
.idea

1247
examples/react_demo/README.md Executable file → Normal file
View File

File diff suppressed because it is too large Load Diff

20393
examples/react_demo/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
examples/react_demo/package.json Executable file → Normal file
View File

@ -3,12 +3,11 @@
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "1.0.17"
"react-scripts": "0.8.4"
},
"dependencies": {
"jsoneditor": "file:../..",
"react": "16.2.0",
"react-dom": "16.2.0"
"react": "15.4.1",
"react-dom": "15.4.1"
},
"scripts": {
"start": "react-scripts start",

2
examples/react_demo/public/index.html Executable file → Normal file
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React demo | JSONEditor</title>
<title>React demo | JSONeditor</title>
</head>
<body>
<div id="root"></div>

27
examples/react_demo/src/App.css Executable file → Normal file
View File

@ -1,9 +1,24 @@
.app {
width: 100%;
max-width: 600px;
.App {
text-align: center;
}
.app h1 {
font-size: 120%;
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

60
examples/react_demo/src/App.js Executable file → Normal file
View File

@ -1,14 +1,9 @@
import React, { Component } from 'react'
import './App.css'
import React, { Component } from 'react';
import './App.css';
import JSONEditor from '../../../dist/jsoneditor-react'
// Load the react version of JSONEditor
//
// When installed via npm, import as:
//
// import JSONEditor from 'jsoneditor/react'
//
import JSONEditor from '../../../react'
// import JSONEditor from 'jsoneditor/dist/jsoneditor-react'
const json = {
'array': [1, 2, 3],
@ -20,34 +15,39 @@ const json = {
}
class App extends Component {
state = {
json
constructor (props) {
super(props)
this.state = {
text: JSON.stringify(json, null, 2)
}
this.onChange = this.onChange.bind(this)
this.onChangeText = this.onChangeText.bind(this)
}
render() {
return (
<div className="app">
<h1>JSONEditor React demo</h1>
<JSONEditor
mode="tree"
modes={['text', 'code', 'tree', 'form', 'view']}
json={this.state.json}
onChange={this.onChange}
onChangeText={this.onChangeText}
/>
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
This example shows how to use JSONEditor in React.
</p>
<p>
<JSONEditor
mode="code"
modes={['text', 'code', 'tree', 'form', 'view']}
text={this.state.text}
onChange={this.onChange}
onChangeText={this.onChangeText}
/>
</p>
</div>
)
}
onChange = (json) => {
console.log('onChange', json)
}
onChangeText = (text) => {
console.log('onChangeText', text)
this.setState({ text })
}
}
export default App

7
examples/react_demo/src/index.css Executable file → Normal file
View File

@ -1,10 +1,5 @@
html, body, #root {
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#root {
box-sizing: border-box;
padding: 10px;
}

2
examples/react_demo/src/index.js Executable file → Normal file
View File

@ -6,4 +6,4 @@ import './index.css'
ReactDOM.render(
<App />,
document.getElementById('root')
)
);