Skip to content

Commit a361f5d

Browse files
authored
Update README.md
1 parent 02226cc commit a361f5d

File tree

1 file changed

+42
-9
lines changed

1 file changed

+42
-9
lines changed

README.md

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -148,22 +148,55 @@ tree.on('willCheckNode', function(Node) {});
148148

149149
#### Creating tree nodes with checkboxes
150150

151+
Sets the checked attribute in your rowRenderer:
152+
151153
```js
152-
tree.on('willSelectNode', function(node) {
153-
node.props.checked = !node.props.checked;
154-
tree.updateNode(node);
154+
const tag = require('html5-tag');
155+
156+
const checkbox = tag('input', {
157+
type: 'checkbox',
158+
   checked: node.state.checked,
159+
'class': 'checkbox',
160+
'data-indeterminate': node.state.indeterminate
155161
});
156162
```
157163

158-
Sets the checked attribute in your rowRenderer:
164+
In your tree, add 'click', 'contentDidUpdate', 'clusterDidChange' event listeners as below:
159165

160166
```js
161-
const tag = require('html5-tag');
167+
// `indeterminate` doesn't have a DOM attribute equivalent, so you need to update DOM on the fly.
168+
const updateIndeterminateState = (tree) => {
169+
const checkboxes = tree.contentElement.querySelectorAll('input[type="checkbox"]');
170+
for (let i = 0; i < checkboxes.length; ++i) {
171+
const checkbox = checkboxes[i];
172+
if (checkbox.hasAttribute('data-indeterminate')) {
173+
checkbox.indeterminate = true;
174+
} else {
175+
checkbox.indeterminate = false;
176+
}
177+
}
178+
};
162179

163-
const checkbox = tag('input', {
164-
type: 'checkbox',
165-
checked: node.props.checked
166-
}, '');
180+
tree.on('click', function(node) {
181+
const currentNode = tree.getNodeFromPoint(event.x, event.y);
182+
if (!currentNode) {
183+
return;
184+
}
185+
186+
if (event.target.className === 'checkbox') {
187+
event.stopPropagation();
188+
tree.checkNode(currentNode);
189+
return;
190+
}
191+
});
192+
193+
tree.on('contentDidUpdate', () => {
194+
updateIndeterminateState(tree);
195+
});
196+
197+
tree.on('clusterDidChange', () => {
198+
updateIndeterminateState(tree);
199+
});
167200
```
168201

169202
#### How to attach click event listeners to nodes?

0 commit comments

Comments
 (0)