this.onScroll()} ref={(ref) => this.treeContainer = ref}>
408 | {this.renderHiddenInput()}
409 |
410 | {treeNodes}
411 |
412 |
413 | );
414 | }
415 | }
416 |
417 | export default Tree;
418 |
--------------------------------------------------------------------------------
/src/treeNode.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 |
5 | import nodeShape from './nodeShape';
6 | import loaderImage from './assets/loader.gif';
7 |
8 | class TreeNode extends React.Component {
9 | static propTypes = {
10 | isLeaf: PropTypes.bool.isRequired,
11 | checked: PropTypes.number.isRequired,
12 | disabled: PropTypes.bool,
13 | loading: PropTypes.bool,
14 | expandDisabled: PropTypes.bool.isRequired,
15 | expanded: PropTypes.bool.isRequired,
16 | label: PropTypes.string.isRequired,
17 | optimisticToggle: PropTypes.bool.isRequired,
18 | showNodeIcon: PropTypes.bool.isRequired,
19 | treeId: PropTypes.string.isRequired,
20 | value: PropTypes.string.isRequired,
21 | onCheck: PropTypes.func.isRequired,
22 | onExpand: PropTypes.func.isRequired,
23 |
24 | children: PropTypes.node,
25 | className: PropTypes.string,
26 | icon: PropTypes.node,
27 | rawChildren: PropTypes.arrayOf(nodeShape),
28 |
29 | index: PropTypes.number,
30 | level: PropTypes.number.isRequired
31 | };
32 |
33 | static defaultProps = {
34 | children: null,
35 | className: null,
36 | icon: null,
37 | rawChildren: null,
38 | disabled: false,
39 | loading: false,
40 | index: null
41 | };
42 |
43 | constructor(props) {
44 | super(props);
45 |
46 | this.onCheck = this.onCheck.bind(this);
47 | this.onExpand = this.onExpand.bind(this);
48 | }
49 |
50 | onCheck() {
51 | let isChecked = false;
52 |
53 | // Toggle off state to checked
54 | if (this.props.checked === 0) {
55 | isChecked = true;
56 | }
57 |
58 | // Toggle partial state based on cascade model
59 | if (this.props.checked === 2) {
60 | isChecked = this.props.optimisticToggle;
61 | }
62 |
63 | this.props.onCheck({
64 | value: this.props.value,
65 | checked: isChecked,
66 | children: this.props.rawChildren,
67 | });
68 | }
69 |
70 | onExpand() {
71 | let isChecked = false;
72 |
73 | if(this.props.checked === 0) {
74 | isChecked = false;
75 | } else if (this.props.checked === 1) {
76 | isChecked = true;
77 | } else if(this.props.isChecked === 2) {
78 | isChecked = this.props.optimisticToggle;
79 | }
80 |
81 | const expanded = !this.props.expanded;
82 |
83 | let loading = false;
84 | if(expanded) {
85 | loading = true;
86 | }
87 |
88 | this.props.onExpand({
89 | value: this.props.value,
90 | checked: isChecked,
91 | expanded: expanded,
92 | loading: loading,
93 | halfChecked: (this.props.checked === 2)
94 | });
95 | }
96 |
97 | hasChildren() {
98 | return this.props.rawChildren !== null;
99 | }
100 |
101 | renderCollapseButton() {
102 | const { expandDisabled, isLeaf } = this.props;
103 |
104 | if (isLeaf) {
105 | return (
106 |
109 | );
110 | }
111 |
112 | if(this.props.loading) {
113 | return (
114 |
122 | );
123 | }
124 |
125 | return (
126 |
135 | );
136 | }
137 |
138 | renderCollapseIcon() {
139 |
140 |
141 | if (!this.props.expanded) {
142 | return ;
143 | }
144 |
145 | return ;
146 | }
147 |
148 | renderCheckboxIcon() {
149 | if (this.props.checked === 0) {
150 | return ;
151 | }
152 |
153 | if (this.props.checked === 1) {
154 | return ;
155 | }
156 |
157 | return ;
158 | }
159 |
160 | renderNodeIcon() {
161 | if (this.props.icon !== null) {
162 | return ;
163 | }
164 |
165 | if (!this.hasChildren()) {
166 | return ;
167 | }
168 |
169 | if (!this.props.expanded) {
170 | return ;
171 | }
172 |
173 | return ;
174 | }
175 |
176 | renderChildren() {
177 | if (!this.props.expanded) {
178 | return null;
179 | }
180 |
181 | return this.props.children;
182 | }
183 |
184 | render() {
185 | const { checkable, evenNode, checked, className, disabled, treeId, label, showNodeIcon, value, tooltipText, expanded, index, level, firstNodeIndex, isLeaf } = this.props;
186 | const inputId = `${treeId}-${value}`;
187 | const nodeClass = classNames({
188 | 'rvt-node': true,
189 | 'rvt-node-parent': this.hasChildren(),
190 | 'rvt-node-leaf': !this.hasChildren(),
191 | 'expanded-node': expanded
192 | }, className);
193 | const outerSpanClass = classNames({
194 | 'rvt-text': true,
195 | 'selected-node': (checked === 1),
196 | 'even-node': evenNode,
197 | });
198 | let labelText = isLeaf ? '': 'Folder'
199 | let blankSpacesArray = [];
200 | for (let i=0; i
206 |
242 | {this.renderChildren()}
243 |
244 | );
245 | }
246 | }
247 |
248 | export default TreeNode;
249 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
3 |
4 | module.exports = {
5 | mode: 'production',
6 | entry: './src/tree.js',
7 | output: {
8 | path: path.resolve('lib'),
9 | filename: 'tree.js',
10 | libraryTarget: 'commonjs2'
11 | },
12 | module: {
13 | rules : [
14 | {
15 | test: /\.(png|svg|jpg|gif)$/,
16 | use: [
17 | {
18 | loader: 'url-loader',
19 | options:{
20 | fallback: "file-loader",
21 | name: "[name][md5:hash].[ext]",
22 | outputPath: 'assets/',
23 | publicPath: '/assets/'
24 | }
25 | }
26 | ]
27 | },
28 | {
29 | test: /\.(js|jsx)$/,
30 | use: ["babel-loader"],
31 | exclude: /node_modules/,
32 | }
33 | ]
34 | }
35 | }
--------------------------------------------------------------------------------