Skip to content

Commit 35db0c5

Browse files
jakezateckyjakezatecky
committed
Convert examples to functional components
1 parent 882d214 commit 35db0c5

11 files changed

+448
-1032
lines changed

‎examples/src/js/BasicExample.js‎

Lines changed: 26 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,35 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import CheckboxTree from 'react-checkbox-tree';
33

4-
const nodes = [
5-
{
6-
value: '/app',
7-
label: 'app',
8-
children: [
9-
{
10-
value: '/app/Http',
11-
label: 'Http',
12-
children: [
13-
{
14-
value: '/app/Http/Controllers',
15-
label: 'Controllers',
16-
children: [{
17-
value: '/app/Http/Controllers/WelcomeController.js',
18-
label: 'WelcomeController.js',
19-
}],
20-
},
21-
{
22-
value: '/app/Http/routes.js',
23-
label: 'routes.js',
24-
},
25-
],
26-
},
27-
{
28-
value: '/app/Providers',
29-
label: 'Providers',
30-
children: [{
31-
value: '/app/Providers/EventServiceProvider.js',
32-
label: 'EventServiceProvider.js',
33-
}],
34-
},
35-
],
36-
},
37-
{
38-
value: '/config',
39-
label: 'config',
40-
children: [
41-
{
42-
value: '/config/app.js',
43-
label: 'app.js',
44-
},
45-
{
46-
value: '/config/database.js',
47-
label: 'database.js',
48-
},
49-
],
50-
},
51-
{
52-
value: '/public',
53-
label: 'public',
54-
children: [
55-
{
56-
value: '/public/assets/',
57-
label: 'assets',
58-
children: [{
59-
value: '/public/assets/style.css',
60-
label: 'style.css',
61-
}],
62-
},
63-
{
64-
value: '/public/index.html',
65-
label: 'index.html',
66-
},
67-
],
68-
},
69-
{
70-
value: '/.env',
71-
label: '.env',
72-
},
73-
{
74-
value: '/.gitignore',
75-
label: '.gitignore',
76-
},
77-
{
78-
value: '/README.md',
79-
label: 'README.md',
80-
},
81-
];
4+
import { fileSystem as nodes } from './common';
825

83-
class BasicExample extends React.Component {
84-
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-
],
95-
};
96-
97-
constructor(props) {
98-
super(props);
99-
100-
this.onCheck = this.onCheck.bind(this);
101-
this.onExpand = this.onExpand.bind(this);
102-
}
6+
function BasicExample() {
7+
const [checked, setChecked] = useState([
8+
'/app/Http/Controllers/WelcomeController.js',
9+
'/app/Http/routes.js',
10+
'/public/assets/style.css',
11+
'/public/index.html',
12+
'/.gitignore',
13+
]);
14+
const [expanded, setExpanded] = useState(['/app']);
10315

104-
onCheck(checked) {
105-
this.setState({ checked });
106-
}
107-
108-
onExpand(expanded) {
109-
this.setState({ expanded });
110-
}
16+
const onCheck = (value) => {
17+
setChecked(value);
18+
};
11119

112-
render() {
113-
const { checked, expanded } = this.state;
20+
const onExpand = (value) => {
21+
setExpanded(value);
22+
};
11423

115-
return (
116-
<CheckboxTree
117-
checked={checked}
118-
expanded={expanded}
119-
nodes={nodes}
120-
onCheck={this.onCheck}
121-
onExpand={this.onExpand}
122-
/>
123-
);
124-
}
24+
return (
25+
<CheckboxTree
26+
checked={checked}
27+
expanded={expanded}
28+
nodes={nodes}
29+
onCheck={onCheck}
30+
onExpand={onExpand}
31+
/>
32+
);
12533
}
12634

12735
export default BasicExample;

‎examples/src/js/ClickableLabelsExample.js‎

Lines changed: 41 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,51 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import CheckboxTree from 'react-checkbox-tree';
33

4-
const nodes = [
5-
{
6-
value: '/app',
7-
label: 'app',
8-
children: [
9-
{
10-
value: '/app/Http',
11-
label: 'Http',
12-
children: [
13-
{
14-
value: '/app/Http/Controllers',
15-
label: 'Controllers',
16-
children: [{
17-
value: '/app/Http/Controllers/WelcomeController.js',
18-
label: 'WelcomeController.js',
19-
}],
20-
},
21-
{
22-
value: '/app/Http/routes.js',
23-
label: 'routes.js',
24-
},
25-
],
26-
},
27-
{
28-
value: '/app/Providers',
29-
label: 'Providers',
30-
children: [{
31-
value: '/app/Providers/EventServiceProvider.js',
32-
label: 'EventServiceProvider.js',
33-
}],
34-
},
35-
],
36-
},
37-
{
38-
value: '/config',
39-
label: 'config',
40-
children: [
41-
{
42-
value: '/config/app.js',
43-
label: 'app.js',
44-
},
45-
{
46-
value: '/config/database.js',
47-
label: 'database.js',
48-
},
49-
],
50-
},
51-
{
52-
value: '/public',
53-
label: 'public',
54-
children: [
55-
{
56-
value: '/public/assets/',
57-
label: 'assets',
58-
children: [{
59-
value: '/public/assets/style.css',
60-
label: 'style.css',
61-
}],
62-
},
63-
{
64-
value: '/public/index.html',
65-
label: 'index.html',
66-
},
67-
],
68-
},
69-
{
70-
value: '/.env',
71-
label: '.env',
72-
},
73-
{
74-
value: '/.gitignore',
75-
label: '.gitignore',
76-
},
77-
{
78-
value: '/README.md',
79-
label: 'README.md',
80-
},
81-
];
82-
83-
/* eslint-disable react/jsx-one-expression-per-line */
84-
class ClickExample extends React.Component {
85-
state = {
86-
checked: [
87-
'/app/Http/Controllers/WelcomeController.js',
88-
'/app/Http/routes.js',
89-
'/public/assets/style.css',
90-
'/public/index.html',
91-
'/.gitignore',
92-
],
93-
expanded: [
94-
'/app',
95-
],
96-
clicked: {},
4+
import { fileSystem as nodes } from './common';
5+
6+
function ClickExample() {
7+
const [checked, setChecked] = useState([
8+
'/app/Http/Controllers/WelcomeController.js',
9+
'/app/Http/routes.js',
10+
'/public/assets/style.css',
11+
'/public/index.html',
12+
'/.gitignore',
13+
]);
14+
const [expanded, setExpanded] = useState(['/app']);
15+
const [clicked, setClicked] = useState({});
16+
17+
const onCheck = (value) => {
18+
setChecked(value);
9719
};
9820

99-
constructor(props) {
100-
super(props);
101-
102-
this.onCheck = this.onCheck.bind(this);
103-
this.onClick = this.onClick.bind(this);
104-
this.onExpand = this.onExpand.bind(this);
105-
}
106-
107-
onCheck(checked) {
108-
this.setState({ checked });
109-
}
110-
111-
onClick(clicked) {
112-
this.setState({ clicked });
113-
}
114-
115-
onExpand(expanded) {
116-
this.setState({ expanded });
117-
}
21+
const onExpand = (value) => {
22+
setExpanded(value);
23+
};
11824

119-
render() {
120-
const { checked, expanded, clicked } = this.state;
121-
const notClickedText = '(none)';
25+
const onClick = (value) => {
26+
setClicked(value);
27+
};
12228

123-
return (
124-
<div className="clickable-labels">
125-
<CheckboxTree
126-
checked={checked}
127-
expandOnClick
128-
expanded={expanded}
129-
nodes={nodes}
130-
onCheck={this.onCheck}
131-
onClick={this.onClick}
132-
onExpand={this.onExpand}
133-
/>
134-
<div className="clickable-labels-info">
135-
<strong>Clicked Node</strong>: {clicked.value || notClickedText}
136-
</div>
29+
const notClickedText = '(none)';
30+
const displayText = clicked.value || notClickedText;
31+
32+
return (
33+
<div className="clickable-labels">
34+
<CheckboxTree
35+
checked={checked}
36+
expandOnClick
37+
expanded={expanded}
38+
nodes={nodes}
39+
onCheck={onCheck}
40+
onClick={onClick}
41+
onExpand={onExpand}
42+
/>
43+
<div className="clickable-labels-info">
44+
<strong>Clicked Node</strong>
45+
{`: ${displayText}`}
13746
</div>
138-
);
139-
}
47+
</div>
48+
);
14049
}
14150

14251
export default ClickExample;

0 commit comments

Comments
 (0)