blob: 1f5c6d60e0ec3e4c9399147e7003a2cac8f735d2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
let React = require('react')
let ReactDOM = require('react-dom')
// npx babel --watch src --out-dir . --presets react-app/prod
class ClassListForm extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: [],
classList: [],
}
}
onChange = (e) => {
fetch('/list-classes?q=' + e.target.value)
.then(resp => resp.json())
.then((data) => {
this.setState({classList: data})
})
}
render() {
return (<form>
<input type="text"
placeholder="class name"
onInput={this.onChange}/>
<PuppetClassList onChange={this.onClassChange} nodes={this.state.selected}/>
<hr/>
<PuppetClassList onChange={this.onClassChange} nodes={this.state.classList}/>
<input type="submit" value="Add Selected"/>
</form>)
}
onClassChange = (e) => {
if (e.target.checked) {
this.setState((state, props) => ({
selected: state.selected.concat(e.target.value)
}))
} else {
}
}
}
class PuppetClassList extends React.Component {
render() {
return (<ul>
{this.props.nodes.map(node => <li key={node}>
<input checked value={node} onChange={this.props.onChange} type="checkbox"/>
<label>{node}</label>
</li>)}
</ul>)
}
}
window.onload = function() {
for (let el of document.getElementsByClassName('class-search')) {
ReactDOM.render((<ClassListForm/>), el)
}
}
|
