remove halfCheckedKeys api

Author: warmhug

HISTORY.md

@@ -1,6 +1,9 @@
 # History
 ---
 
+## 1.2.1 / 2016-04-08
+- remove `halfCheckedKeys` api, and change `checkedKeys` to an object on setting `checkStrictly`.
+
 ## 1.2.0 / 2016-04-06
 - improve performance.
 - add `checkStrictly`/`halfCheckedKeys` api.

README.md

@@ -69,7 +69,7 @@ see examples
 |expandedKeys | Controlled expand specific treeNodes | String[] | - |
 |autoExpandParent | whether auto expand parent treeNodes | bool | true |
 |defaultCheckedKeys | default checked treeNodes | String[] | [] |
-|checkedKeys | Controlled checked treeNodes(After setting, defaultCheckedKeys will not work). Note: parent and children nodes are associated, if the parent node's key exists, it all children node will be checked, and vice versa. | String[] | [] |
+|checkedKeys | Controlled checked treeNodes(After setting, defaultCheckedKeys will not work). Note: parent and children nodes are associated, if the parent node's key exists, it all children node will be checked, and vice versa. When set checkable and checkStrictly, it should be an object, which contains checked array and halfChecked array. | String[]/{checked:Array<String>,halfChecked:Array<String>} | [] |
 |halfCheckedKeys | when set checkStrictly, it works | String[] | [] |
 |checkStrictly| check node precisely, parent and children nodes are not associated| bool | false |
 |defaultSelectedKeys | default selected treeNodes | String[] | [] |
@@ -99,7 +99,7 @@ see examples
 |className | additional class to treeNode | String | '' |
 |disabled | whether disabled the treeNode | bool | false |
 |disableCheckbox | whether disable the treeNode' checkbox | bool | false |
-|title | tree/subTree's title | String/node | '---' |
+|title | tree/subTree's title | String/element | '---' |
 |key | it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes | String | treeNode's position |
 |isLeaf | whether it's leaf node | bool | false |
 

examples/basic-controlled.js

@@ -18,6 +18,7 @@ const Demo = React.createClass({
       expandedKeys: getFilterExpandedKeys(gData, ['0-0-0-key']),
       // checkedKeys: ['0-0-0-0-key', '0-0-1-0-key', '0-1-0-0-key'],
       checkedKeys: ['0-0-0-key'],
+      checkStrictlyKeys: {},
       selectedKeys: [],
     };
   },
@@ -47,9 +48,14 @@ const Demo = React.createClass({
     // const { checkedNodesPositions } = extra;
     // const pps = filterParentPosition(checkedNodesPositions.map(i => i.pos));
     // console.log(checkedNodesPositions.filter(i => pps.indexOf(i.pos) > -1).map(i => i.node.key));
+    const cks = {
+      checked: checkedKeys.checked || checkedKeys,
+      halfChecked: [`0-0-${parseInt(Math.random() * 3, 10)}-key`],
+    };
     this.setState({
-      checkedKeys,
-      halfCheckedKeys: ['0-0-key'],
+      // checkedKeys,
+      checkStrictlyKeys: cks,
+      // checkStrictlyKeys: checkedKeys,
     });
   },
   onSelect(selectedKeys, info) {
@@ -92,7 +98,7 @@ const Demo = React.createClass({
       <Tree checkable multiple={this.props.multiple} defaultExpandAll
             onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
             onCheck={this.onCheckStrictly}
-            checkedKeys={this.state.checkedKeys} halfCheckedKeys={this.state.halfCheckedKeys}
+            checkedKeys={this.state.checkStrictlyKeys}
             checkStrictly>
         {loop(gData)}
       </Tree>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tree",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "tree ui component for react",
   "keywords": [
     "react",

src/Tree.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import {
   loopAllChildren, isInclude, getOffset,
   filterParentPosition, handleCheckState, getCheck,
+  getStrictlyValue,
 } from './util';
 
 function noop() {
@@ -37,7 +38,7 @@ class Tree extends React.Component {
       st.expandedKeys = expandedKeys;
     }
     if (checkedKeys) {
-      if (checkedKeys === this.props.checkedKeys) {
+      if (nextProps.checkedKeys === this.props.checkedKeys) {
         this.checkedKeysChange = false;
       } else {
         this.checkedKeysChange = true;
@@ -195,7 +196,6 @@ class Tree extends React.Component {
       checked,
     };
 
-    // checkStrictly
     if (this.props.checkStrictly && ('checkedKeys' in this.props)) {
       if (checked && index === -1) {
         checkedKeys.push(key);
@@ -209,6 +209,7 @@ class Tree extends React.Component {
           newSt.checkedNodes.push(item);
         }
       });
+      this.props.onCheck(getStrictlyValue(checkedKeys, this.props.checkedKeys.halfChecked), newSt);
     } else {
       if (checked && index === -1) {
         this.treeNodesStates[treeNode.props.pos].checked = true;
@@ -236,8 +237,8 @@ class Tree extends React.Component {
           checkedKeys,
         });
       }
+      this.props.onCheck(checkedKeys, newSt);
     }
-    this.props.onCheck(checkedKeys, newSt);
   }
 
   onSelect(treeNode) {
@@ -351,6 +352,13 @@ class Tree extends React.Component {
     let checkedKeys = willReceiveProps ? undefined : props.defaultCheckedKeys;
     if ('checkedKeys' in props) {
       checkedKeys = props.checkedKeys || [];
+      if (props.checkStrictly) {
+        if (props.checkedKeys.checked) {
+          checkedKeys = props.checkedKeys.checked;
+        } else if (!Array.isArray(props.checkedKeys)) {
+          checkedKeys = [];
+        }
+      }
     }
     return checkedKeys;
   }
@@ -453,15 +461,19 @@ class Tree extends React.Component {
     };
     if (props.checkable) {
       cloneProps.checkable = props.checkable;
-      cloneProps.checked = (props.checkStrictly ? state.checkedKeys : this.checkedKeys).
-        indexOf(key) !== -1;
       if (props.checkStrictly) {
-        if (props.halfCheckedKeys) {
-          cloneProps.checkPart = props.halfCheckedKeys.indexOf(key) !== -1 || false;
+        if (state.checkedKeys) {
+          cloneProps.checked = state.checkedKeys.indexOf(key) !== -1 || false;
+        }
+        if (props.checkedKeys.halfChecked) {
+          cloneProps.checkPart = props.checkedKeys.halfChecked.indexOf(key) !== -1 || false;
         } else {
           cloneProps.checkPart = false;
         }
       } else {
+        if (this.checkedKeys) {
+          cloneProps.checked = this.checkedKeys.indexOf(key) !== -1 || false;
+        }
         cloneProps.checkPart = this.checkPartKeys.indexOf(key) !== -1;
       }
 
@@ -554,8 +566,10 @@ Tree.propTypes = {
   defaultExpandedKeys: PropTypes.arrayOf(PropTypes.string),
   expandedKeys: PropTypes.arrayOf(PropTypes.string),
   defaultCheckedKeys: PropTypes.arrayOf(PropTypes.string),
-  checkedKeys: PropTypes.arrayOf(PropTypes.string),
-  halfCheckedKeys: PropTypes.arrayOf(PropTypes.string),
+  checkedKeys: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.object,
+  ]),
   defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string),
   selectedKeys: PropTypes.arrayOf(PropTypes.string),
   onExpand: PropTypes.func,

src/util.js

@@ -246,3 +246,10 @@ export function getCheck(treeNodesStates) {
     checkPartKeys, checkedKeys, checkedNodes, checkedNodesPositions, treeNodesStates,
   };
 }
+
+export function getStrictlyValue(checkedKeys, halfChecked) {
+  if (halfChecked) {
+    return { checked: checkedKeys, halfChecked };
+  }
+  return checkedKeys;
+}