Comparing version 0.11.0 to 0.12.1
100
lib/Tree.js
@@ -28,2 +28,12 @@ 'use strict'; | ||
_createClass(Tree, null, [{ | ||
key: 'statics', | ||
value: function statics() { | ||
return { | ||
treeNodesState: {}, | ||
trees: [] | ||
}; | ||
} | ||
}]); | ||
function Tree(props) { | ||
@@ -41,24 +51,26 @@ var _this = this; | ||
_createClass(Tree, [{ | ||
key: 'handleChecked', | ||
value: function handleChecked(isChk, c, e) { | ||
if (this.props.onChecked) { | ||
this.props.onChecked(isChk, c, e); | ||
} | ||
key: 'renderTreeNode', | ||
value: function renderTreeNode(child, index) { | ||
var props = this.props; | ||
var pos = (props._pos || 0) + '-' + index; | ||
var cloneProps = { | ||
ref: 'treeNode', | ||
_level: props._level || 0, | ||
_pos: pos, | ||
_isChildTree: props._isChildTree || false, | ||
_index: index, | ||
_len: this.childrenLength, | ||
_checked: props._checked, | ||
_checkPart: props._checkPart, | ||
prefixCls: props.prefixCls, | ||
showLine: props.showLine, | ||
showIcon: props.showIcon, | ||
expandAll: props.expandAll, | ||
checkable: props.checkable, | ||
onChecked: this.handleChecked, | ||
onSelect: this.handleSelect | ||
}; | ||
return _react2['default'].cloneElement(child, cloneProps); | ||
} | ||
}, { | ||
key: 'handleSelect', | ||
value: function handleSelect(isSel, c, e) { | ||
if (this.props.onSelect) { | ||
this.props.onSelect(isSel, c, e); | ||
} | ||
} | ||
// all keyboard events callbacks run from here at first | ||
}, { | ||
key: 'handleKeyDown', | ||
value: function handleKeyDown(e) { | ||
console.log(_rcUtil.KeyCode); | ||
e.preventDefault(); | ||
} | ||
}, { | ||
key: 'render', | ||
@@ -90,32 +102,22 @@ value: function render() { | ||
}, { | ||
key: 'renderTreeNode', | ||
value: function renderTreeNode(child, index) { | ||
var props = this.props; | ||
var pos = (props._pos || 0) + '-' + index; | ||
var cloneProps = { | ||
ref: 'treeNode', | ||
_level: props._level || 0, | ||
_pos: pos, | ||
_isChildTree: props._isChildTree || false, | ||
_index: index, | ||
_len: this.childrenLength, | ||
_checked: props._checked, | ||
_checkPart: props._checkPart, | ||
prefixCls: props.prefixCls, | ||
showLine: props.showLine, | ||
expandAll: props.expandAll, | ||
checkable: props.checkable, | ||
onChecked: this.handleChecked, | ||
onSelect: this.handleSelect | ||
}; | ||
return _react2['default'].cloneElement(child, cloneProps); | ||
key: 'handleChecked', | ||
value: function handleChecked(isChk, c, e) { | ||
if (this.props.onChecked) { | ||
this.props.onChecked(isChk, c, e); | ||
} | ||
} | ||
}], [{ | ||
key: 'statics', | ||
value: function statics() { | ||
return { | ||
treeNodesState: {}, | ||
trees: [] | ||
}; | ||
}, { | ||
key: 'handleSelect', | ||
value: function handleSelect(isSel, c, e) { | ||
if (this.props.onSelect) { | ||
this.props.onSelect(isSel, c, e); | ||
} | ||
} | ||
// all keyboard events callbacks run from here at first | ||
}, { | ||
key: 'handleKeyDown', | ||
value: function handleKeyDown(e) { | ||
e.preventDefault(); | ||
} | ||
}]); | ||
@@ -130,2 +132,3 @@ | ||
showLine: _react2['default'].PropTypes.bool, | ||
showIcon: _react2['default'].PropTypes.bool, | ||
expandAll: _react2['default'].PropTypes.bool, | ||
@@ -140,2 +143,3 @@ onChecked: _react2['default'].PropTypes.func, | ||
showLine: true, | ||
showIcon: true, | ||
expandAll: false | ||
@@ -142,0 +146,0 @@ }; |
@@ -54,6 +54,11 @@ 'use strict'; | ||
_createClass(TreeNode, [{ | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.componentDidUpdate(); | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
this.setState({ | ||
//selected: nextProps.selected, | ||
// selected: nextProps.selected, | ||
checkPart: nextProps._checkPart, | ||
@@ -64,116 +69,17 @@ checked: nextProps._checked | ||
}, { | ||
key: 'switchExpandedState', | ||
value: function switchExpandedState(newState, onStateChangeComplete) { | ||
this.setState({ | ||
expanded: newState | ||
}, onStateChangeComplete); | ||
} | ||
// keyboard event support | ||
}, { | ||
key: 'handleKeyDown', | ||
value: function handleKeyDown(e) { | ||
e.preventDefault(); | ||
} | ||
}, { | ||
key: 'handleExpandedState', | ||
value: function handleExpandedState() { | ||
this.switchExpandedState(!this.state.expanded); | ||
} | ||
}, { | ||
key: 'handleSelect', | ||
value: function handleSelect() { | ||
this.setState({ | ||
selected: !this.state.selected | ||
}); | ||
if (this.props.onSelect) { | ||
this.props.onSelect(!this.state.selected, this); | ||
} | ||
} | ||
}, { | ||
key: 'handleChecked', | ||
value: function handleChecked() { | ||
var _pos = this.props._pos; | ||
var checked = !this.state.checked; | ||
if (this.state.checkPart) { | ||
checked = false; | ||
} | ||
var nSt = { | ||
checkPart: false, | ||
checked: checked | ||
}; | ||
this.setState(nSt); | ||
var sortedTree = _Tree2['default'].statics.trees.sort(function (a, b) { | ||
return b.props._pos.length - a.props._pos.length; | ||
}); | ||
sortedTree.forEach(function (c) { | ||
var cPos = c.props._pos; | ||
if (_pos.indexOf(cPos) === 0 && _pos !== cPos) { | ||
var childArr = _rcUtil2['default'].Children.toArray(c.props.children), | ||
len = childArr.length; | ||
var checkedNumbers = 0; | ||
//先计算已经选中的节点数 | ||
for (var i = 0; i < len; i++) { | ||
var checkSt = _Tree2['default'].statics.treeNodesState[cPos + '-' + i]; | ||
if (checkSt.checked) { | ||
checkedNumbers++; | ||
} else if (checkSt.checkPart) { | ||
checkedNumbers += 0.5; | ||
} | ||
} | ||
//点击节点的 直接父级 | ||
if (_pos.length - cPos.length <= 2) { | ||
//如果原来是半选 | ||
if (_Tree2['default'].statics.treeNodesState[_pos].checkPart) { | ||
// checked ? checkedNumbers += 0.5 : checkedNumbers -= 0.5; | ||
if (checked) { | ||
checkedNumbers += 0.5; | ||
} else { | ||
checkedNumbers -= 0.5; | ||
} | ||
} else if (checked) { | ||
checkedNumbers++; | ||
} else { | ||
checkedNumbers--; | ||
} | ||
} | ||
var newSt; | ||
if (checkedNumbers <= 0) { | ||
//都不选 | ||
newSt = { | ||
checkPart: false, | ||
checked: false | ||
}; | ||
} else if (checkedNumbers === len) { | ||
//全选 | ||
newSt = { | ||
checkPart: false, | ||
checked: true | ||
}; | ||
} else { | ||
//部分选择 | ||
newSt = { | ||
checkPart: true, | ||
checked: false | ||
}; | ||
} | ||
c.setState(newSt); | ||
_Tree2['default'].statics.treeNodesState[cPos] = newSt; | ||
key: 'shouldComponentUpdate', | ||
value: function shouldComponentUpdate(nextProps, nextState) { | ||
var checkbox = this.refs.checkbox; | ||
if (checkbox) { | ||
var cls = checkbox.getDOMNode().className; | ||
var checkSt = _Tree2['default'].statics.treeNodesState[this.props._pos] || {}; | ||
checkSt.checkPart = nextState.checkPart; | ||
checkSt.checked = nextState.checked; | ||
if (nextState.checkPart) { | ||
checkbox.getDOMNode().className = cls.indexOf('checkbox_true_part') > -1 ? cls : cls + ' checkbox_true_part'; | ||
return false; | ||
} | ||
}); | ||
_Tree2['default'].statics.treeNodesState[_pos] = nSt; | ||
if (this.props.onChecked) { | ||
this.props.onChecked(checked, this); | ||
checkbox.getDOMNode().className = cls.replace(/checkbox_true_part/g, ''); | ||
} | ||
return true; | ||
} | ||
@@ -192,3 +98,3 @@ }, { | ||
} | ||
//add treeNodes checked state | ||
// add treeNodes checked state | ||
_Tree2['default'].statics.treeNodesState[this.props._pos] = { | ||
@@ -200,23 +106,41 @@ checked: this.state.checked, | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.componentDidUpdate(); | ||
} | ||
}, { | ||
key: 'shouldComponentUpdate', | ||
value: function shouldComponentUpdate(nextProps, nextState) { | ||
var checkbox = this.refs.checkbox; | ||
if (checkbox) { | ||
var cls = checkbox.getDOMNode().className; | ||
var checkSt = _Tree2['default'].statics.treeNodesState[this.props._pos] || {}; | ||
checkSt.checkPart = nextState.checkPart; | ||
checkSt.checked = nextState.checked; | ||
if (nextState.checkPart) { | ||
checkbox.getDOMNode().className = cls.indexOf('checkbox_true_part') > -1 ? cls : cls + ' checkbox_true_part'; | ||
return false; | ||
} else { | ||
checkbox.getDOMNode().className = cls.replace(/checkbox_true_part/g, ''); | ||
key: 'renderChildren', | ||
value: function renderChildren(children) { | ||
var newChildren = null; | ||
if (children.type === TreeNode || Array.isArray(children) && children.every(function chEvery(item) { | ||
return item.type === TreeNode; | ||
})) { | ||
var cls = {}; | ||
cls[this.props.prefixCls + '-child-tree'] = true; | ||
if (this.props.showLine && this.props._index !== this.props._len - 1) { | ||
cls.line = true; | ||
} | ||
var treeProps = { | ||
_level: this.props._level + 1, | ||
_pos: this.props._pos, | ||
_isChildTree: true, | ||
_checked: this.state.checked, | ||
_checkPart: this.state.checkPart, | ||
className: (0, _rcUtil.classSet)(cls), | ||
prefixCls: this.props.prefixCls, | ||
showLine: this.props.showLine, | ||
showIcon: this.props.showIcon, | ||
expanded: this.state.expanded, | ||
expandAll: this.props.expandAll, | ||
// selected: this.state.checked, | ||
checkable: this.props.checkable, // 只是为了传递根节点上的checkable设置,是否有更好做法? | ||
onChecked: this.props.onChecked, | ||
onSelect: this.props.onSelect | ||
}; | ||
newChildren = this.newChildren = _react2['default'].createElement( | ||
_Tree2['default'], | ||
treeProps, | ||
children | ||
); | ||
} else { | ||
newChildren = children; | ||
} | ||
return true; | ||
return newChildren; | ||
} | ||
@@ -293,3 +217,3 @@ }, { | ||
onClick: this.handleSelect }, | ||
_react2['default'].createElement('span', { className: (0, _rcUtil.classSet)(iconEleCls) }), | ||
props.showIcon ? _react2['default'].createElement('span', { className: (0, _rcUtil.classSet)(iconEleCls) }) : null, | ||
_react2['default'].createElement( | ||
@@ -305,40 +229,116 @@ 'span', | ||
}, { | ||
key: 'renderChildren', | ||
value: function renderChildren(children) { | ||
var newChildren = null; | ||
if (children.type === TreeNode || Array.isArray(children) && children.every(function (item) { | ||
return item.type === TreeNode; | ||
})) { | ||
key: 'switchExpandedState', | ||
value: function switchExpandedState(newState, onStateChangeComplete) { | ||
this.setState({ | ||
expanded: newState | ||
}, onStateChangeComplete); | ||
} | ||
var cls = {}; | ||
cls[this.props.prefixCls + '-child-tree'] = true; | ||
if (this.props.showLine && this.props._index !== this.props._len - 1) { | ||
cls.line = true; | ||
// keyboard event support | ||
}, { | ||
key: 'handleKeyDown', | ||
value: function handleKeyDown(e) { | ||
e.preventDefault(); | ||
} | ||
}, { | ||
key: 'handleExpandedState', | ||
value: function handleExpandedState() { | ||
this.switchExpandedState(!this.state.expanded); | ||
} | ||
}, { | ||
key: 'handleSelect', | ||
value: function handleSelect() { | ||
this.setState({ | ||
selected: !this.state.selected | ||
}); | ||
if (this.props.onSelect) { | ||
this.props.onSelect(!this.state.selected, this); | ||
} | ||
} | ||
}, { | ||
key: 'handleChecked', | ||
value: function handleChecked() { | ||
var _pos = this.props._pos; | ||
var checked = !this.state.checked; | ||
if (this.state.checkPart) { | ||
checked = false; | ||
} | ||
var nSt = { | ||
checkPart: false, | ||
checked: checked | ||
}; | ||
this.setState(nSt); | ||
var sortedTree = _Tree2['default'].statics.trees.sort(function sortTree(a, b) { | ||
return b.props._pos.length - a.props._pos.length; | ||
}); | ||
sortedTree.forEach(function forofTree(c) { | ||
var cPos = c.props._pos; | ||
if (_pos.indexOf(cPos) === 0 && _pos !== cPos) { | ||
var childArr = _rcUtil2['default'].Children.toArray(c.props.children); | ||
var len = childArr.length; | ||
var checkedNumbers = 0; | ||
// 先计算已经选中的节点数 | ||
for (var i = 0; i < len; i++) { | ||
var checkSt = _Tree2['default'].statics.treeNodesState[cPos + '-' + i]; | ||
if (checkSt.checked) { | ||
checkedNumbers++; | ||
} else if (checkSt.checkPart) { | ||
checkedNumbers += 0.5; | ||
} | ||
} | ||
// 点击节点的 直接父级 | ||
if (_pos.length - cPos.length <= 2) { | ||
// 如果原来是半选 | ||
if (_Tree2['default'].statics.treeNodesState[_pos].checkPart) { | ||
// checked ? checkedNumbers += 0.5 : checkedNumbers -= 0.5; | ||
if (checked) { | ||
checkedNumbers += 0.5; | ||
} else { | ||
checkedNumbers -= 0.5; | ||
} | ||
} else if (checked) { | ||
checkedNumbers++; | ||
} else { | ||
checkedNumbers--; | ||
} | ||
} | ||
var newSt = undefined; | ||
if (checkedNumbers <= 0) { | ||
// 都不选 | ||
newSt = { | ||
checkPart: false, | ||
checked: false | ||
}; | ||
} else if (checkedNumbers === len) { | ||
// 全选 | ||
newSt = { | ||
checkPart: false, | ||
checked: true | ||
}; | ||
} else { | ||
// 部分选择 | ||
newSt = { | ||
checkPart: true, | ||
checked: false | ||
}; | ||
} | ||
c.setState(newSt); | ||
_Tree2['default'].statics.treeNodesState[cPos] = newSt; | ||
} | ||
}); | ||
var treeProps = { | ||
_level: this.props._level + 1, | ||
_pos: this.props._pos, | ||
_isChildTree: true, | ||
_checked: this.state.checked, | ||
_checkPart: this.state.checkPart, | ||
className: (0, _rcUtil.classSet)(cls), | ||
showLine: this.props.showLine, | ||
expanded: this.state.expanded, | ||
expandAll: this.props.expandAll, | ||
//selected: this.state.checked, | ||
checkable: this.props.checkable, //只是为了传递根节点上的checkable设置,是否有更好做法? | ||
onChecked: this.props.onChecked, | ||
onSelect: this.props.onSelect | ||
}; | ||
newChildren = this.newChildren = _react2['default'].createElement( | ||
_Tree2['default'], | ||
treeProps, | ||
children | ||
); | ||
} else { | ||
newChildren = children; | ||
_Tree2['default'].statics.treeNodesState[_pos] = nSt; | ||
if (this.props.onChecked) { | ||
this.props.onChecked(checked, this); | ||
} | ||
return newChildren; | ||
} | ||
@@ -351,5 +351,16 @@ }]); | ||
TreeNode.propTypes = { | ||
_pos: _react2['default'].PropTypes.string, | ||
_index: _react2['default'].PropTypes.number, | ||
_len: _react2['default'].PropTypes.number, | ||
_level: _react2['default'].PropTypes.number, | ||
prefixCls: _react2['default'].PropTypes.string, | ||
showLine: _react2['default'].PropTypes.bool, | ||
showIcon: _react2['default'].PropTypes.bool, | ||
expandAll: _react2['default'].PropTypes.bool, | ||
defaultExpanded: _react2['default'].PropTypes.bool, | ||
expanded: _react2['default'].PropTypes.bool, | ||
selected: _react2['default'].PropTypes.bool, | ||
defaultExpanded: _react2['default'].PropTypes.bool, | ||
expanded: _react2['default'].PropTypes.bool | ||
checkable: _react2['default'].PropTypes.bool, | ||
onSelect: _react2['default'].PropTypes.func, | ||
onChecked: _react2['default'].PropTypes.func | ||
}; | ||
@@ -356,0 +367,0 @@ TreeNode.defaultProps = { |
{ | ||
"name": "rc-tree", | ||
"version": "0.11.0", | ||
"version": "0.12.1", | ||
"description": "tree ui component for react", | ||
@@ -28,9 +28,7 @@ "keywords": [ | ||
"build": "rc-tools run build", | ||
"precommit": "rc-tools run precommit", | ||
"less": "rc-tools run less", | ||
"gh-pages": "rc-tools run gh-pages", | ||
"history": "rc-tools run history", | ||
"start": "node --harmony node_modules/.bin/rc-server", | ||
"publish": "rc-tools run tag", | ||
"pub": "rc-tools run pub", | ||
"lint": "rc-tools run lint", | ||
"karma": "rc-tools run karma", | ||
"saucelabs": "node --harmony node_modules/.bin/rc-tools run saucelabs", | ||
@@ -44,7 +42,7 @@ "browser-test": "node --harmony node_modules/.bin/rc-tools run browser-test", | ||
"rc-server": "3.x", | ||
"rc-tools": "3.x", | ||
"rc-tools": "4.x", | ||
"react": "~0.13.0" | ||
}, | ||
"precommit": [ | ||
"precommit" | ||
"lint" | ||
], | ||
@@ -51,0 +49,0 @@ "dependencies": { |
@@ -72,6 +72,7 @@ # rc-tree | ||
|showLine | whether show line | bool | true | | ||
|showIcon | whether show icon | bool | true | | ||
|checkable | whether support checked | bool | false | | ||
|expandAll | expand all treeNodes | bool | false | | ||
|onSelect | click the TreeNode to fire(auto switch selected state) | function | - | | ||
|onChecked | click the TreeNode to checked(auto switch checked state) | function | - | | ||
|onChecked | click the TreeNode's checkbox to checked(auto switch checked state) | function | - | | ||
@@ -78,0 +79,0 @@ ### TreeNode props |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
27334
591
110