Skip to content

Commit f936732

Browse files
jakezateckyjakezatecky
committed
Add optimisticToggle property
Resolves #15.
1 parent 200d676 commit f936732

File tree

4 files changed

+68
-49
lines changed

4 files changed

+68
-49
lines changed

‎README.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,13 @@ class Widget extends React.Component {
6565
6666
## Properties
6767
68-
| Property | Type | Description |
69-
| ------------- | -------- | --------------------------------------------------------------------------------------------- |
70-
| `nodes` | array | **Required**. Specifies the tree nodes and their children. |
71-
| `checked` | array | **Required**. An array of checked node values. |
72-
| `expanded` | array | **Required**. An array of expanded node values. |
73-
| `onCheck` | function | **Required**. onCheck handler: `function(checked) {}` |
74-
| `onExpand` | function | **Required**. onExpand handler: `function(expanded) {}` |
75-
| `name` | string | Optional name for the hidden `<input>` element. |
76-
| `nameAsArray` | bool | If true, the hidden `<input>` will encode its values as an array rather than a joined string. |
68+
| Property | Type | Description | Default |
69+
| ------------------ | -------- | ------------------------------------------------------------------------------------------------ | ----------- |
70+
| `nodes` | array | **Required**. Specifies the tree nodes and their children. | |
71+
| `checked` | array | **Required**. An array of checked node values. | |
72+
| `expanded` | array | **Required**. An array of expanded node values. | |
73+
| `onCheck` | function | **Required**. onCheck handler: `function(checked) {}` | |
74+
| `onExpand` | function | **Required**. onExpand handler: `function(expanded) {}` | |
75+
| `name` | string | Optional name for the hidden `<input>` element. | `undefined` |
76+
| `nameAsArray` | bool | If true, the hidden `<input>` will encode its values as an array rather than a joined string. | `false` |
77+
| `optimisticToggle` | bool | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `false` |

‎examples/dist/index.js‎

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -21609,38 +21609,31 @@ return /******/ (function(modules) { // webpackBootstrap
2160921609
_createClass(Tree, [{
2161021610
key: 'onCheck',
2161121611
value: function onCheck(node) {
21612-
var checked = [].concat(_toConsumableArray(this.props.checked));
21613-
var isChecked = node.checked;
21612+
var _props = this.props;
21613+
var checked = _props.checked;
21614+
var onCheck = _props.onCheck;
2161421615

21615-
this.setCheckState(checked, node, isChecked);
2161621616

21617-
this.props.onCheck(checked);
21617+
onCheck(this.toggleChecked([].concat(_toConsumableArray(checked)), node, node.checked));
2161821618
}
2161921619
}, {
2162021620
key: 'onExpand',
2162121621
value: function onExpand(node) {
21622-
var isExpanded = node.expanded;
21623-
var expanded = [].concat(_toConsumableArray(this.props.expanded));
21624-
var nodeIndex = expanded.indexOf(node.value);
21625-
21626-
if (!isExpanded && nodeIndex > -1) {
21627-
// Node is now collapsed, remove from expanded list
21628-
expanded.splice(nodeIndex, 1);
21629-
} else if (isExpanded && nodeIndex === -1) {
21630-
// Add node to expanded list
21631-
expanded.push(node.value);
21632-
}
21622+
var _props2 = this.props;
21623+
var expanded = _props2.expanded;
21624+
var onExpand = _props2.onExpand;
21625+
2163321626

21634-
this.props.onExpand(expanded);
21627+
onExpand(this.toggleNode([].concat(_toConsumableArray(expanded)), node, node.expanded));
2163521628
}
2163621629
}, {
2163721630
key: 'getFormattedNodes',
2163821631
value: function getFormattedNodes(nodes) {
2163921632
var _this2 = this;
2164021633

21641-
var _props = this.props;
21642-
var checked = _props.checked;
21643-
var expanded = _props.expanded;
21634+
var _props3 = this.props;
21635+
var checked = _props3.checked;
21636+
var expanded = _props3.expanded;
2164421637

2164521638

2164621639
return nodes.map(function (node) {
@@ -21676,27 +21669,34 @@ return /******/ (function(modules) { // webpackBootstrap
2167621669
return 0;
2167721670
}
2167821671
}, {
21679-
key: 'setCheckState',
21680-
value: function setCheckState(checked, node, isChecked) {
21672+
key: 'toggleChecked',
21673+
value: function toggleChecked(checked, node, isChecked) {
2168121674
var _this3 = this;
2168221675

2168321676
if (node.children !== null) {
2168421677
// Percolate check status down to all children
2168521678
node.children.forEach(function (child) {
21686-
_this3.setCheckState(checked, child, isChecked);
21679+
_this3.toggleChecked(checked, child, isChecked);
2168721680
});
2168821681
} else {
2168921682
// Set leaf to check/unchecked state
21690-
var index = checked.indexOf(node.value);
21691-
21692-
if (index > -1) {
21693-
checked.splice(index, 1);
21694-
}
21683+
this.toggleNode(checked, node, isChecked);
21684+
}
2169521685

21696-
if (isChecked) {
21697-
checked.push(node.value);
21698-
}
21686+
return checked;
21687+
}
21688+
}, {
21689+
key: 'toggleNode',
21690+
value: function toggleNode(list, node, toggleValue) {
21691+
var index = list.indexOf(node.value);
21692+
21693+
if (index > -1 && !toggleValue) {
21694+
list.splice(index, 1);
21695+
} else if (index === -1 && toggleValue) {
21696+
list.push(node.value);
2169921697
}
21698+
21699+
return list;
2170021700
}
2170121701
}, {
2170221702
key: 'isEveryChildChecked',
@@ -21740,6 +21740,7 @@ return /******/ (function(modules) { // webpackBootstrap
2174021740
key: key,
2174121741
checked: checked,
2174221742
expanded: node.expanded,
21743+
optimisticToggle: _this6.props.optimisticToggle,
2174321744
rawChildren: node.children,
2174421745
title: node.title,
2174521746
value: node.value,
@@ -21824,14 +21825,16 @@ return /******/ (function(modules) { // webpackBootstrap
2182421825
nameAsArray: _react2.default.PropTypes.bool,
2182521826
nodes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.shape(_nodeShape2.default), _react2.default.PropTypes.shape(_extends({}, _nodeShape2.default, {
2182621827
children: _react2.default.PropTypes.arrayOf(_nodeShape2.default)
21827-
}))]))
21828+
}))])),
21829+
optimisticToggle: _react2.default.PropTypes.bool
2182821830
};
2182921831
Tree.defaultProps = {
2183021832
checked: [],
2183121833
expanded: [],
2183221834
name: undefined,
2183321835
nameAsArray: false,
21834-
nodes: []
21836+
nodes: [],
21837+
optimisticToggle: true
2183521838
};
2183621839
exports.default = Tree;
2183721840

@@ -21879,11 +21882,16 @@ return /******/ (function(modules) { // webpackBootstrap
2187921882
_createClass(TreeNode, [{
2188021883
key: 'onCheck',
2188121884
value: function onCheck() {
21882-
var isChecked = 0;
21885+
var isChecked = false;
21886+
21887+
// Toggle off state to checked
21888+
if (this.props.checked === 0) {
21889+
isChecked = true;
21890+
}
2188321891

21884-
// Toggle off/partial check state to checked
21885-
if (this.props.checked === 0 || this.props.checked === 2) {
21886-
isChecked = 1;
21892+
// Toggle partial state based on model
21893+
if (this.props.checked === 2) {
21894+
isChecked = this.props.optimisticToggle;
2188721895
}
2188821896

2188921897
this.props.onCheck({
@@ -21993,6 +22001,7 @@ return /******/ (function(modules) { // webpackBootstrap
2199322001
TreeNode.propTypes = {
2199422002
checked: _react2.default.PropTypes.number.isRequired,
2199522003
expanded: _react2.default.PropTypes.bool.isRequired,
22004+
optimisticToggle: _react2.default.PropTypes.bool.isRequired,
2199622005
title: _react2.default.PropTypes.string.isRequired,
2199722006
value: _react2.default.PropTypes.string.isRequired,
2199822007
onCheck: _react2.default.PropTypes.func.isRequired,

‎src/js/Tree.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ class Tree extends React.Component {
2121
}),
2222
]),
2323
),
24+
optimisticToggle: React.PropTypes.bool,
2425
};
2526

2627
static defaultProps = {
@@ -29,6 +30,7 @@ class Tree extends React.Component {
2930
name: undefined,
3031
nameAsArray: false,
3132
nodes: [],
33+
optimisticToggle: true,
3234
};
3335

3436
constructor(props) {
@@ -142,6 +144,7 @@ class Tree extends React.Component {
142144
key={key}
143145
checked={checked}
144146
expanded={node.expanded}
147+
optimisticToggle={this.props.optimisticToggle}
145148
rawChildren={node.children}
146149
title={node.title}
147150
value={node.value}

‎src/js/TreeNode.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ class TreeNode extends React.Component {
66
static propTypes = {
77
checked: React.PropTypes.number.isRequired,
88
expanded: React.PropTypes.bool.isRequired,
9+
optimisticToggle: React.PropTypes.bool.isRequired,
910
title: React.PropTypes.string.isRequired,
1011
value: React.PropTypes.string.isRequired,
1112
onCheck: React.PropTypes.func.isRequired,
@@ -28,11 +29,16 @@ class TreeNode extends React.Component {
2829
}
2930

3031
onCheck() {
31-
let isChecked = 0;
32+
let isChecked = false;
3233

33-
// Toggle off/partial check state to checked
34-
if (this.props.checked === 0 || this.props.checked === 2) {
35-
isChecked = 1;
34+
// Toggle off state to checked
35+
if (this.props.checked === 0) {
36+
isChecked = true;
37+
}
38+
39+
// Toggle partial state based on model
40+
if (this.props.checked === 2) {
41+
isChecked = this.props.optimisticToggle;
3642
}
3743

3844
this.props.onCheck({

0 commit comments

Comments
 (0)