forked from dowjones/react-dropdown-tree-select
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
46 lines (38 loc) · 1.38 KB
/
index.js
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
import React from 'react'
import DropdownTreeSelect from '../../../../src'
import './index.css'
import data from './data.json'
const onChange = (curNode, selectedNodes) => {
console.log('onChange::', curNode, selectedNodes)
}
const onAction = ({ action, id }) => {
console.log(`onAction:: [${action}]`, id)
}
const onNodeToggle = curNode => {
console.log('onNodeToggle::', curNode)
}
const onFocus = () => {
console.log('onFocus')
}
const onBlur = () => {
console.log('onBlur')
}
const Simple = () => (
<div>
<h1>Basic component</h1>
<p>
This is a basic example of the component. Note that there are no external styles in this page, not even <code>reset.css</code> or{' '}
<code>reboot.css</code> or <code>normalizer.css</code>.
</p>
<p>
The idea is to showcase the component at its barest minimum. Of course, its easy to style it, using popular frameworks such as Bootstrap or
Material Design (checkout the examples on left).
</p>
<p>
As a side effect, it also helps rule out issues arising out of using custom frameworks (if something doesn't look right in your app but
looks OK here, you know what is messing things up).
</p>
<DropdownTreeSelect data={data} onChange={onChange} onAction={onAction} onNodeToggle={onNodeToggle} onFocus={onFocus} onBlur={onBlur} className="demo" />
</div>
)
export default Simple