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 .DS_Store
.env .env
npm-debug.log 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", "version": "0.1.0",
"private": true, "private": true,
"devDependencies": { "devDependencies": {
"react-scripts": "1.0.17" "react-scripts": "0.8.4"
}, },
"dependencies": { "dependencies": {
"jsoneditor": "file:../..", "react": "15.4.1",
"react": "16.2.0", "react-dom": "15.4.1"
"react-dom": "16.2.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>React demo | JSONEditor</title> <title>React demo | JSONeditor</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

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

@ -1,9 +1,24 @@
.App {
.app { text-align: center;
width: 100%;
max-width: 600px;
} }
.app h1 { .App-logo {
font-size: 120%; 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 React, { Component } from 'react';
import './App.css' import './App.css';
import JSONEditor from '../../../dist/jsoneditor-react'
// Load the react version of JSONEditor
//
// When installed via npm, import as: // When installed via npm, import as:
// // import JSONEditor from 'jsoneditor/dist/jsoneditor-react'
// import JSONEditor from 'jsoneditor/react'
//
import JSONEditor from '../../../react'
const json = { const json = {
'array': [1, 2, 3], 'array': [1, 2, 3],
@ -20,34 +15,39 @@ const json = {
} }
class App extends Component { class App extends Component {
state = { constructor (props) {
json super(props)
this.state = {
text: JSON.stringify(json, null, 2)
}
this.onChange = this.onChange.bind(this)
this.onChangeText = this.onChangeText.bind(this)
} }
render() { render() {
return ( return (
<div className="app"> <div className="App">
<h1>JSONEditor React demo</h1> <div className="App-header">
<JSONEditor <img src={logo} className="App-logo" alt="logo" />
mode="tree" <h2>Welcome to React</h2>
modes={['text', 'code', 'tree', 'form', 'view']} </div>
json={this.state.json} <p className="App-intro">
onChange={this.onChange} This example shows how to use JSONEditor in React.
onChangeText={this.onChangeText} </p>
/> <p>
<JSONEditor
mode="code"
modes={['text', 'code', 'tree', 'form', 'view']}
text={this.state.text}
onChange={this.onChange}
onChangeText={this.onChangeText}
/>
</p>
</div> </div>
) )
} }
onChange = (json) => {
console.log('onChange', json)
}
onChangeText = (text) => {
console.log('onChangeText', text)
this.setState({ text })
}
} }
export default App 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; margin: 0;
padding: 0; padding: 0;
font-family: sans-serif; 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( ReactDOM.render(
<App />, <App />,
document.getElementById('root') document.getElementById('root')
) );