Merge branch 'DigitalFlow-feature/filterExample'

Author: jakezatecky

examples/src/index.html

@@ -93,6 +93,10 @@ <h2>Large Data Example</h2>
       <p>The checkbox tree is capable of supporting a large number of nodes at once.</p>
       <div id="large-data-example"></div>
 
+      <h2>Filter Example</h2>
+	    <p>Filtering of nodes is also easily possible.</p>
+      <div id="filter-example"></div>
+
       <footer class="site-footer">
         <span class="site-footer-owner">
           <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

@@ -10,6 +10,7 @@ import HiddenCheckboxesExample from './js/HiddenCheckboxesExample';
 import NoCascadeExample from './js/NoCascadeExample';
 import LargeDataExample from './js/LargeDataExample';
 import PessimisticToggleExample from './js/PessimisticToggleExample';
+import FilterExample from './js/FilterExample';
 
 ReactDOM.render(<BasicExample />, document.getElementById('basic-example'));
 ReactDOM.render(<CustomIconsExample />, document.getElementById('custom-icons-example'));
@@ -20,3 +21,4 @@ ReactDOM.render(<ClickableLabelsExample />, document.getElementById('clickable-l
 ReactDOM.render(<HiddenCheckboxesExample />, document.getElementById('hidden-checkboxes-example'));
 ReactDOM.render(<ExpandAllExample />, document.getElementById('expand-all-example'));
 ReactDOM.render(<LargeDataExample />, document.getElementById('large-data-example'));
+ReactDOM.render(<FilterExample />, document.getElementById('filter-example'));

examples/src/js/FilterExample.js

@@ -0,0 +1,184 @@
+import React from 'react';
+import CheckboxTree from 'react-checkbox-tree';
+
+const nodes = [
+    {
+        value: '/app',
+        label: 'app',
+        children: [
+            {
+                value: '/app/Http',
+                label: 'Http',
+                children: [
+                    {
+                        value: '/app/Http/Controllers',
+                        label: 'Controllers',
+                        children: [{
+                            value: '/app/Http/Controllers/WelcomeController.js',
+                            label: 'WelcomeController.js',
+                        }],
+                    },
+                    {
+                        value: '/app/Http/routes.js',
+                        label: 'routes.js',
+                    },
+                ],
+            },
+            {
+                value: '/app/Providers',
+                label: 'Providers',
+                children: [{
+                    value: '/app/Http/Providers/EventServiceProvider.js',
+                    label: 'EventServiceProvider.js',
+                }],
+            },
+        ],
+    },
+    {
+        value: '/config',
+        label: 'config',
+        children: [
+            {
+                value: '/config/app.js',
+                label: 'app.js',
+            },
+            {
+                value: '/config/database.js',
+                label: 'database.js',
+            },
+        ],
+    },
+    {
+        value: '/public',
+        label: 'public',
+        children: [
+            {
+                value: '/public/assets/',
+                label: 'assets',
+                children: [{
+                    value: '/public/assets/style.css',
+                    label: 'style.css',
+                }],
+            },
+            {
+                value: '/public/index.html',
+                label: 'index.html',
+            },
+        ],
+    },
+    {
+        value: '/.env',
+        label: '.env',
+    },
+    {
+        value: '/.gitignore',
+        label: '.gitignore',
+    },
+    {
+        value: '/README.md',
+        label: 'README.md',
+    },
+];
+
+class FilterExample extends React.Component {
+    state = {
+        checked: [
+            '/app/Http/Controllers/WelcomeController.js',
+            '/app/Http/routes.js',
+            '/public/assets/style.css',
+            '/public/index.html',
+            '/.gitignore',
+        ],
+        expanded: [
+            '/app',
+        ],
+        filterText: '',
+        nodesFiltered: nodes,
+        nodes,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.onCheck = this.onCheck.bind(this);
+        this.onExpand = this.onExpand.bind(this);
+        this.onFilterChange = this.onFilterChange.bind(this);
+        this.filterTree = this.filterTree.bind(this);
+        this.filterNodes = this.filterNodes.bind(this);
+    }
+
+    onCheck(checked) {
+        this.setState({ checked });
+    }
+
+    onExpand(expanded) {
+        this.setState({ expanded });
+    }
+
+    onFilterChange(e) {
+        this.setState({ filterText: e.target.value }, this.filterTree);
+    }
+
+    filterTree() {
+        // Reset nodes back to unfiltered state
+        if (!this.state.filterText) {
+            this.setState(prevState => ({
+                nodesFiltered: prevState.nodes,
+            }));
+
+            return;
+        }
+
+        const nodesFiltered = prevState => (
+            { nodesFiltered: prevState.nodes.reduce(this.filterNodes, []) }
+        );
+
+        this.setState(nodesFiltered);
+    }
+
+    filterNodes(filtered, node) {
+        const { filterText } = this.state;
+        const children = (node.children || []).reduce(this.filterNodes, []);
+
+        if (
+            // Node's label matches the search string
+            node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1 ||
+            // Or a children has a matching node
+            children.length
+        ) {
+            filtered.push({ ...node, children });
+        }
+
+        return filtered;
+    }
+
+    render() {
+        const {
+            checked,
+            expanded,
+            filterText,
+            nodesFiltered,
+        } = this.state;
+
+        return (
+            <div className="filter-container">
+                <input
+                    className="filter-text"
+                    placeholder="Search..."
+                    type="text"
+                    value={filterText}
+                    onChange={this.onFilterChange}
+                />
+                <CheckboxTree
+                    checked={checked}
+                    expanded={expanded}
+                    nodes={nodesFiltered}
+                    onCheck={this.onCheck}
+                    onExpand={this.onExpand}
+                />
+            </div>
+        );
+    }
+}
+
+export default FilterExample;

examples/src/scss/style.scss

@@ -3,6 +3,7 @@ $header-bg-color-secondary: #2c3e50;
 $section-headings-color: #3498db;
 $rct-color: #444;
 $rct-border-color: #ccc;
+$input-border-color: #ced4da;
 
 @import "../../../src/scss/react-checkbox-tree";
 @import "cayman";
@@ -23,3 +24,14 @@ $rct-border-color: #ccc;
 .expand-all-container {
   max-width: 400px;
 }
+
+.filter-container > .filter-text {
+  display: block;
+  margin-bottom: .75rem;
+  border: 1px solid $input-border-color;
+  border-radius: .25rem;
+  background-clip: padding-box;
+  padding: .375rem .75rem;
+  line-height: 1.5;
+  font-size: 1rem;
+}