Skip to content

Commit a658267

Browse files
author
Worth Lutz
committed
refactor for v2
fix hidden input first go at radio groups fix NativeCheckbox to handle radioGroups fix node disabled add PropsDemo example clean up examples fix expandOnClick in PropsDemoExample fix CustomIconsExample fix icons prop problem & problem with updateParentNodes cleanup handling of icons prop add ability to input object instead of array to Nodes remove icons test from CustomIconsExample remove unneeded NodeModel add some radio nodes fix TreeNode toggleChecked fix class name change example titles fix object/array return in onCheck and onExpand
1 parent 258585f commit a658267

19 files changed

+1114
-565
lines changed

‎examples/src/index.html

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,22 @@ <h2 class="project-tagline">A simple and elegant checkbox tree for React</h2>
2929
</p>
3030

3131
<h1>Examples</h1>
32-
<h2>Basic Example</h2>
32+
33+
<h2>Props Demo</h2>
34+
<div id="props-demo-example"></div>
35+
36+
<h2>Basic Example - array input</h2>
37+
<p>
38+
The nodes prop for the CheckboxTree is provided as an array of child nodes of the root of the tree.
39+
</p>
3340
<div id="basic-example"></div>
3441

42+
<h2>Basic Example - object input</h2>
43+
<p>
44+
The nodes prop for the CheckboxTree is provided as the root node object instead of an array of child nodes of the root of the tree.
45+
</p>
46+
<div id="basic-example-object"></div>
47+
3548
<h2>Custom Icons Example</h2>
3649
<div id="custom-icons-example"></div>
3750

‎examples/src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33

4+
import PropsDemoExample from './js/PropsDemoExample';
45
import BasicExample from './js/BasicExample';
6+
import BasicExampleObject from './js/BasicExampleObject';
57
import CustomIconsExample from './js/CustomIconsExample';
68
import ClickableLabelsExample from './js/ClickableLabelsExample';
79
import DisabledExample from './js/DisabledExample';
@@ -11,7 +13,11 @@ import NoCascadeExample from './js/NoCascadeExample';
1113
import LargeDataExample from './js/LargeDataExample';
1214
import PessimisticToggleExample from './js/PessimisticToggleExample';
1315

16+
ReactDOM.render(<PropsDemoExample />, document.getElementById('props-demo-example'));
17+
1418
ReactDOM.render(<BasicExample />, document.getElementById('basic-example'));
19+
ReactDOM.render(<BasicExampleObject />, document.getElementById('basic-example-object'));
20+
1521
ReactDOM.render(<CustomIconsExample />, document.getElementById('custom-icons-example'));
1622
ReactDOM.render(<DisabledExample />, document.getElementById('disabled-example'));
1723
ReactDOM.render(<NoCascadeExample />, document.getElementById('no-cascade-example'));

‎examples/src/js/BasicExample.js

Lines changed: 62 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
import React from 'react';
22
import CheckboxTree from 'react-checkbox-tree';
33

4-
const nodes = [
4+
const initialNodes = [
55
{
66
value: '/app',
77
label: 'app',
8+
expanded: true,
89
children: [
910
{
1011
value: '/app/Http',
1112
label: 'Http',
13+
expanded: true,
1214
children: [
1315
{
1416
value: '/app/Http/Controllers',
1517
label: 'Controllers',
18+
expanded: true,
1619
children: [{
1720
value: '/app/Http/Controllers/WelcomeController.js',
1821
label: 'WelcomeController.js',
22+
checked: true,
1923
}],
2024
},
2125
{
@@ -34,6 +38,55 @@ const nodes = [
3438
},
3539
],
3640
},
41+
{
42+
value: '/radioGroup',
43+
label: 'RadioTest',
44+
expanded: true,
45+
radioGroup: true,
46+
children: [
47+
{
48+
value: 'radio1',
49+
label: 'radio1',
50+
},
51+
{
52+
value: 'radio2',
53+
label: 'radio2',
54+
children: [
55+
{
56+
value: 'radio2-1',
57+
label: 'radio2',
58+
},
59+
{
60+
value: 'radio2-2',
61+
label: 'radio2-2',
62+
},
63+
{
64+
value: 'radio2-3',
65+
label: 'radio2-3',
66+
},
67+
],
68+
},
69+
{
70+
value: 'radio3',
71+
label: 'radio3',
72+
radioGroup: true,
73+
children: [
74+
{
75+
value: 'radio3-1',
76+
label: 'radio3',
77+
},
78+
{
79+
value: 'radio3-2',
80+
label: 'radio3-2',
81+
},
82+
{
83+
value: 'radio3-3',
84+
label: 'radio3-3',
85+
},
86+
],
87+
},
88+
],
89+
},
3790
{
3891
value: '/config',
3992
label: 'config',
@@ -82,40 +135,24 @@ const nodes = [
82135

83136
class BasicExample extends React.Component {
84137
state = {
85-
checked: [
86-
'/app/Http/Controllers/WelcomeController.js',
87-
'/app/Http/routes.js',
88-
'/public/assets/style.css',
89-
'/public/index.html',
90-
'/.gitignore',
91-
],
92-
expanded: [
93-
'/app',
94-
],
138+
nodes: initialNodes,
95139
};
96140

97-
constructor(props) {
98-
super(props);
99-
100-
this.onCheck = this.onCheck.bind(this);
101-
this.onExpand = this.onExpand.bind(this);
102-
}
103-
104-
onCheck(checked) {
105-
this.setState({ checked });
141+
onCheck = (node, nodes) => {
142+
this.setState({ nodes });
106143
}
107144

108-
onExpand(expanded) {
109-
this.setState({ expanded });
145+
onExpand = (node, nodes) => {
146+
this.setState({ nodes });
110147
}
111148

112149
render() {
113-
const { checked, expanded } = this.state;
150+
const { nodes } = this.state;
114151

115152
return (
116153
<CheckboxTree
117-
checked={checked}
118-
expanded={expanded}
154+
style={{ flex: '1' }}
155+
checkModel="all"
119156
iconsClass="fa5"
120157
nodes={nodes}
121158
onCheck={this.onCheck}

‎examples/src/js/BasicExampleObject.js

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
import React from 'react';
2+
import CheckboxTree from 'react-checkbox-tree';
3+
4+
const initialNodes = {
5+
label: 'Root',
6+
value: '*root*',
7+
expanded: true,
8+
children: [
9+
{
10+
value: '/app',
11+
label: 'app',
12+
expanded: true,
13+
children: [
14+
{
15+
value: '/app/Http',
16+
label: 'Http',
17+
expanded: true,
18+
children: [
19+
{
20+
value: '/app/Http/Controllers',
21+
label: 'Controllers',
22+
expanded: true,
23+
children: [{
24+
value: '/app/Http/Controllers/WelcomeController.js',
25+
label: 'WelcomeController.js',
26+
checked: true,
27+
}],
28+
},
29+
{
30+
value: '/app/Http/routes.js',
31+
label: 'routes.js',
32+
},
33+
],
34+
},
35+
{
36+
value: '/app/Providers',
37+
label: 'Providers',
38+
children: [{
39+
value: '/app/Providers/EventServiceProvider.js',
40+
label: 'EventServiceProvider.js',
41+
}],
42+
},
43+
],
44+
},
45+
{
46+
value: '/radioGroup',
47+
label: 'RadioTest',
48+
expanded: true,
49+
radioGroup: true,
50+
children: [
51+
{
52+
value: 'radio1',
53+
label: 'radio1',
54+
},
55+
{
56+
value: 'radio2',
57+
label: 'radio2',
58+
children: [
59+
{
60+
value: 'radio2-1',
61+
label: 'radio2',
62+
},
63+
{
64+
value: 'radio2-2',
65+
label: 'radio2-2',
66+
},
67+
{
68+
value: 'radio2-3',
69+
label: 'radio2-3',
70+
},
71+
],
72+
},
73+
{
74+
value: 'radio3',
75+
label: 'radio3',
76+
radioGroup: true,
77+
children: [
78+
{
79+
value: 'radio3-1',
80+
label: 'radio3',
81+
},
82+
{
83+
value: 'radio3-2',
84+
label: 'radio3-2',
85+
},
86+
{
87+
value: 'radio3-3',
88+
label: 'radio3-3',
89+
},
90+
],
91+
},
92+
],
93+
},
94+
{
95+
value: '/config',
96+
label: 'config',
97+
children: [
98+
{
99+
value: '/config/app.js',
100+
label: 'app.js',
101+
},
102+
{
103+
value: '/config/database.js',
104+
label: 'database.js',
105+
},
106+
],
107+
},
108+
{
109+
value: '/public',
110+
label: 'public',
111+
children: [
112+
{
113+
value: '/public/assets/',
114+
label: 'assets',
115+
children: [{
116+
value: '/public/assets/style.css',
117+
label: 'style.css',
118+
}],
119+
},
120+
{
121+
value: '/public/index.html',
122+
label: 'index.html',
123+
},
124+
],
125+
},
126+
{
127+
value: '/.env',
128+
label: '.env',
129+
},
130+
{
131+
value: '/.gitignore',
132+
label: '.gitignore',
133+
},
134+
{
135+
value: '/README.md',
136+
label: 'README.md',
137+
},
138+
],
139+
};
140+
141+
class BasicExampleObject extends React.Component {
142+
state = {
143+
nodes: initialNodes,
144+
};
145+
146+
onCheck = (node, nodes) => {
147+
this.setState({ nodes });
148+
}
149+
150+
onExpand = (node, nodes) => {
151+
this.setState({ nodes });
152+
}
153+
154+
render() {
155+
const { nodes } = this.state;
156+
157+
return (
158+
<CheckboxTree
159+
style={{ flex: '1' }}
160+
checkModel="all"
161+
iconsClass="fa5"
162+
nodes={nodes}
163+
onCheck={this.onCheck}
164+
onExpand={this.onExpand}
165+
/>
166+
);
167+
}
168+
}
169+
170+
export default BasicExampleObject;

0 commit comments

Comments
 (0)