Skip to content

Commit f9dab20

Browse files
jakezateckyjakezatecky
committed
Merge branch 'master' into v1.6-dev
# Conflicts: # examples/src/scss/style.scss # package.json # src/index.d.ts
2 parents 25e16fe + 2db71fb commit f9dab20

File tree

18 files changed

+339
-34
lines changed

18 files changed

+339
-34
lines changed

‎.browserslistrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
last 2 versions

‎.eslintrc

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@
22
"extends": "takiyon-react",
33
"env": {
44
"browser": true,
5-
"mocha": true
5+
"node": true
66
},
77
"settings": {
88
"import/resolver": {
9+
// "Fixes Node resolution issues in ESLint v6
10+
// https://github.com/benmosher/eslint-plugin-import/issues/1396
11+
"node": {},
12+
913
"webpack": {
1014
"config": "webpack.test.config.js"
1115
}

‎.github/ISSUE_TEMPLATE/bug_report.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
**Describe the bug**
11+
Please include a clear and concise description of what the bug is.
12+
13+
**Reproduction steps**
14+
Please include the necessary steps to reproduce the issue as well as a live example that showcases it. You can modify this [CodeSandbox reference point](https://codesandbox.io/s/oj5wnyr7w9) to create a working example.
15+
16+
**Expected behavior**
17+
Please include a clear and concise description of what you expected to happen.
18+
19+
**Screenshots**
20+
If applicable, add screenshots to help explain your problem.

‎.github/ISSUE_TEMPLATE/feature_request.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
name: Feature request
3+
about: Suggest an idea for this project
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
Please include a clear and concise description of the feature or enhancement you would like to have added to the project.

‎.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ language: node_js
22
node_js:
33
- '8'
44
- '10'
5-
- '11'
5+
- '12'
66
before_script:
77
# Remove ./node_modules/.bin from PATH so node-which doesn't replace Unix which and cause RVM to barf. See https://github.com/travis-ci/travis-ci/issues/5092
88
- PATH=${PATH//:\.\/node_modules\/\.bin/}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
125125
...
126126
icons={{
127127
check: <FontAwesomeIcon className="rct-icon rct-icon-check" icon="check-square" />,
128-
uncheck: <FontAwesomeIcon className="rct-icon rct-icon-uncheck" icon={['far', 'square']} />,
128+
uncheck: <FontAwesomeIcon className="rct-icon rct-icon-uncheck" icon={['fas', 'square']} />,
129129
halfCheck: <FontAwesomeIcon className="rct-icon rct-icon-half-check" icon="check-square" />,
130130
expandClose: <FontAwesomeIcon className="rct-icon rct-icon-expand-close" icon="chevron-right" />,
131131
expandOpen: <FontAwesomeIcon className="rct-icon rct-icon-expand-open" icon="chevron-down" />,

‎examples/src/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,15 @@
1010
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
1111
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto">
1212
<link rel="stylesheet" href="style.css">
13+
<!-- Global site tag (gtag.js) - Google Analytics -->
14+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133457161-1"></script>
15+
<script>
16+
window.dataLayer = window.dataLayer || [];
17+
function gtag(){dataLayer.push(arguments);}
18+
gtag('js', new Date());
19+
20+
gtag('config', 'UA-133457161-1');
21+
</script>
1322
</head>
1423
<body>
1524
<section class="page-header">
@@ -84,6 +93,10 @@ <h2>Large Data Example</h2>
8493
<p>The checkbox tree is capable of supporting a large number of nodes at once.</p>
8594
<div id="large-data-example"></div>
8695

96+
<h2>Filter Example</h2>
97+
<p>Filtering of nodes is also easily possible.</p>
98+
<div id="filter-example"></div>
99+
87100
<footer class="site-footer">
88101
<span class="site-footer-owner">
89102
<a href="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.

‎examples/src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import HiddenCheckboxesExample from './js/HiddenCheckboxesExample';
1010
import NoCascadeExample from './js/NoCascadeExample';
1111
import LargeDataExample from './js/LargeDataExample';
1212
import PessimisticToggleExample from './js/PessimisticToggleExample';
13+
import FilterExample from './js/FilterExample';
1314

1415
ReactDOM.render(<BasicExample />, document.getElementById('basic-example'));
1516
ReactDOM.render(<CustomIconsExample />, document.getElementById('custom-icons-example'));
@@ -20,3 +21,4 @@ ReactDOM.render(<ClickableLabelsExample />, document.getElementById('clickable-l
2021
ReactDOM.render(<HiddenCheckboxesExample />, document.getElementById('hidden-checkboxes-example'));
2122
ReactDOM.render(<ExpandAllExample />, document.getElementById('expand-all-example'));
2223
ReactDOM.render(<LargeDataExample />, document.getElementById('large-data-example'));
24+
ReactDOM.render(<FilterExample />, document.getElementById('filter-example'));

‎examples/src/js/FilterExample.js

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import React from 'react';
2+
import CheckboxTree from 'react-checkbox-tree';
3+
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/Http/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+
class FilterExample 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+
filterText: '',
96+
nodesFiltered: nodes,
97+
nodes,
98+
};
99+
100+
constructor(props) {
101+
super(props);
102+
103+
this.onCheck = this.onCheck.bind(this);
104+
this.onExpand = this.onExpand.bind(this);
105+
this.onFilterChange = this.onFilterChange.bind(this);
106+
this.filterTree = this.filterTree.bind(this);
107+
this.filterNodes = this.filterNodes.bind(this);
108+
}
109+
110+
onCheck(checked) {
111+
this.setState({ checked });
112+
}
113+
114+
onExpand(expanded) {
115+
this.setState({ expanded });
116+
}
117+
118+
onFilterChange(e) {
119+
this.setState({ filterText: e.target.value }, this.filterTree);
120+
}
121+
122+
filterTree() {
123+
// Reset nodes back to unfiltered state
124+
if (!this.state.filterText) {
125+
this.setState((prevState) => ({
126+
nodesFiltered: prevState.nodes,
127+
}));
128+
129+
return;
130+
}
131+
132+
const nodesFiltered = (prevState) => (
133+
{ nodesFiltered: prevState.nodes.reduce(this.filterNodes, []) }
134+
);
135+
136+
this.setState(nodesFiltered);
137+
}
138+
139+
filterNodes(filtered, node) {
140+
const { filterText } = this.state;
141+
const children = (node.children || []).reduce(this.filterNodes, []);
142+
143+
if (
144+
// Node's label matches the search string
145+
node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1 ||
146+
// Or a children has a matching node
147+
children.length
148+
) {
149+
filtered.push({ ...node, children });
150+
}
151+
152+
return filtered;
153+
}
154+
155+
render() {
156+
const {
157+
checked,
158+
expanded,
159+
filterText,
160+
nodesFiltered,
161+
} = this.state;
162+
163+
return (
164+
<div className="filter-container">
165+
<input
166+
className="filter-text"
167+
placeholder="Search..."
168+
type="text"
169+
value={filterText}
170+
onChange={this.onFilterChange}
171+
/>
172+
<CheckboxTree
173+
checked={checked}
174+
expanded={expanded}
175+
nodes={nodesFiltered}
176+
onCheck={this.onCheck}
177+
onExpand={this.onExpand}
178+
/>
179+
</div>
180+
);
181+
}
182+
}
183+
184+
export default FilterExample;

‎examples/src/scss/style.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $header-bg-color-secondary: #2c3e50;
33
$section-headings-color: #3498db;
44
$rct-color: #444;
55
$rct-border-color: #ccc;
6+
$input-border-color: #ced4da;
67

78
@import "../../../src/scss/react-checkbox-tree";
89
@import "cayman";
@@ -28,3 +29,14 @@ $rct-border-color: #ccc;
2829
width: 1em;
2930
text-align: center;
3031
}
32+
33+
.filter-container > .filter-text {
34+
display: block;
35+
margin-bottom: .75rem;
36+
border: 1px solid $input-border-color;
37+
border-radius: .25rem;
38+
background-clip: padding-box;
39+
padding: .375rem .75rem;
40+
line-height: 1.5;
41+
font-size: 1rem;
42+
}

0 commit comments

Comments
 (0)