Comparing version 0.10.0 to 0.11.0
@@ -65,6 +65,5 @@ 'use strict'; | ||
var props = this.props; | ||
var domProps = { | ||
className: (0, _rcUtil.classSet)(props.className, props.prefixCls), | ||
style: props.expanded ? { display: 'block' } : { display: 'none' }, | ||
onKeyDown: this.handleKeyDown, | ||
role: 'tree-node', | ||
@@ -77,9 +76,5 @@ 'aria-activedescendant': '', | ||
}; | ||
if (props.id) { | ||
domProps.id = props.id; | ||
if (props._isChildTree) { | ||
domProps.style = props.expanded ? { display: 'block' } : { display: 'none' }; | ||
} | ||
if (props.focusable) { | ||
domProps.tabIndex = '0'; | ||
domProps.onKeyDown = this.handleKeyDown; | ||
} | ||
this.childrenLength = _react2['default'].Children.count(props.children); | ||
@@ -106,7 +101,8 @@ this.newChildren = _react2['default'].Children.map(props.children, this.renderTreeNode, this); | ||
_len: this.childrenLength, | ||
_checked: props._checked, | ||
_checkPart: props._checkPart, | ||
prefixCls: props.prefixCls, | ||
showLine: props.showLine, | ||
expandAll: props.expandAll, | ||
checkable: props.checkable, | ||
_checked: props._checked, | ||
_checkPart: props._checkPart, | ||
onChecked: this.handleChecked, | ||
@@ -131,6 +127,7 @@ onSelect: this.handleSelect | ||
Tree.propTypes = { | ||
focusable: _react2['default'].PropTypes.bool, | ||
expanded: _react2['default'].PropTypes.bool, | ||
prefixCls: _react2['default'].PropTypes.string, | ||
checkable: _react2['default'].PropTypes.bool, | ||
showLine: _react2['default'].PropTypes.bool, | ||
checkable: _react2['default'].PropTypes.bool, | ||
expandAll: _react2['default'].PropTypes.bool, | ||
onChecked: _react2['default'].PropTypes.func, | ||
onSelect: _react2['default'].PropTypes.func | ||
@@ -141,4 +138,5 @@ }; | ||
prefixCls: 'rc-tree', | ||
expanded: true, | ||
showLine: true | ||
checkable: false, | ||
showLine: true, | ||
expandAll: false | ||
}; | ||
@@ -145,0 +143,0 @@ |
@@ -13,2 +13,4 @@ 'use strict'; | ||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | ||
@@ -42,3 +44,3 @@ | ||
this.state = { | ||
expanded: props.expanded, | ||
expanded: props.expandAll || props.expanded || props.defaultExpanded, | ||
selected: props.selected || false, | ||
@@ -98,3 +100,2 @@ checkPart: props._checkPart || false, | ||
if (this.state.checkPart) { | ||
// return; | ||
checked = false; | ||
@@ -199,2 +200,7 @@ } | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.componentDidUpdate(); | ||
} | ||
}, { | ||
key: 'shouldComponentUpdate', | ||
@@ -220,2 +226,4 @@ value: function shouldComponentUpdate(nextProps, nextState) { | ||
value: function render() { | ||
var _iconEleCls; | ||
var props = this.props; | ||
@@ -231,3 +239,5 @@ var state = this.state; | ||
switcherCls[prefixCls + '-switcher__' + switchState] = true; | ||
if (props._isChildTree && props._index === 0) { | ||
if (!props.showLine) { | ||
switcherCls['noline_' + switchState] = true; | ||
} else if (props._isChildTree && props._index === 0) { | ||
if (props._len !== 1) { | ||
@@ -263,12 +273,6 @@ switcherCls['center_' + switchState] = true; | ||
var iconEleCls = {}; | ||
iconEleCls.button = true; | ||
iconEleCls[prefixCls + '-iconEle'] = true; | ||
iconEleCls[prefixCls + '-icon__' + switchState] = true; | ||
var iconEleCls = (_iconEleCls = { | ||
button: true | ||
}, _defineProperty(_iconEleCls, prefixCls + '-iconEle', true), _defineProperty(_iconEleCls, prefixCls + '-icon__' + switchState, true), _iconEleCls); | ||
var userIconEle = null; | ||
if (props.iconEle && _react2['default'].isValidElement(props.iconEle)) { | ||
userIconEle = props.iconEle; | ||
} | ||
var content = props.title; | ||
@@ -283,4 +287,4 @@ var newChildren = this.renderChildren(props.children); | ||
'li', | ||
{ className: (0, _rcUtil.joinClasses)('level' + props._level, 'pos-' + props._pos) }, | ||
_react2['default'].createElement('span', { className: (0, _rcUtil.joinClasses)(props.className, (0, _rcUtil.classSet)(switcherCls)), | ||
{ className: (0, _rcUtil.joinClasses)(props.className, 'level' + props._level, 'pos-' + props._pos) }, | ||
_react2['default'].createElement('span', { className: (0, _rcUtil.classSet)(switcherCls), | ||
onClick: this.handleExpandedState }), | ||
@@ -293,10 +297,6 @@ checkbox, | ||
onClick: this.handleSelect }, | ||
_react2['default'].createElement('span', { className: (0, _rcUtil.classSet)(iconEleCls) }), | ||
_react2['default'].createElement( | ||
'span', | ||
{ className: (0, _rcUtil.classSet)(iconEleCls) }, | ||
userIconEle | ||
), | ||
_react2['default'].createElement( | ||
'span', | ||
null, | ||
{ className: 'title' }, | ||
content | ||
@@ -326,7 +326,9 @@ ) | ||
_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, | ||
_checked: this.state.checked, | ||
_checkPart: this.state.checkPart, | ||
checkable: this.props.checkable, //只是为了传递根节点上的checkable设置,是否有更好做法? | ||
@@ -347,10 +349,2 @@ onChecked: this.props.onChecked, | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
//console.log( this.newChildren ); | ||
//if (this.newChildren) { | ||
// Tree.statics.trees.push(this); | ||
//} | ||
} | ||
}]); | ||
@@ -363,8 +357,9 @@ | ||
selected: _react2['default'].PropTypes.bool, | ||
iconEle: _react2['default'].PropTypes.node, | ||
onSelect: _react2['default'].PropTypes.func | ||
defaultExpanded: _react2['default'].PropTypes.bool, | ||
expanded: _react2['default'].PropTypes.bool | ||
}; | ||
TreeNode.defaultProps = { | ||
title: '---', | ||
expanded: true | ||
defaultExpanded: false, | ||
expanded: false | ||
}; | ||
@@ -371,0 +366,0 @@ |
{ | ||
"name": "rc-tree", | ||
"version": "0.10.0", | ||
"version": "0.11.0", | ||
"description": "tree ui component for react", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -41,3 +41,3 @@ # rc-tree | ||
http://localhost:8008/examples/ | ||
http://localhost:8018/examples/ | ||
@@ -54,5 +54,10 @@ online example: http://react-component.github.io/tree/examples/ | ||
```js | ||
var Rctree = require('rc-tree'); | ||
var React = require('react'); | ||
React.render(<Rctree />, container); | ||
var Tree = require('rc-tree'); | ||
var TreeNode = Tree.TreeNode; | ||
React.render( | ||
<Tree> | ||
<TreeNode>leaf </TreeNode> | ||
<TreeNode>leaf </TreeNode> | ||
<Tree/>, container); | ||
``` | ||
@@ -62,54 +67,24 @@ | ||
### props | ||
### Tree props | ||
<table class="table table-bordered table-striped"> | ||
<thead> | ||
<tr> | ||
<th style="width: 100px;">name</th> | ||
<th style="width: 50px;">type</th> | ||
<th style="width: 50px;">default</th> | ||
<th>description</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td>className</td> | ||
<td>String</td> | ||
<td></td> | ||
<td>additional css class of root dom node</td> | ||
</tr> | ||
<tr> | ||
<td>expanded</td> | ||
<td>bool</td> | ||
<td></td> | ||
<td>whether expand the tree node</td> | ||
</tr> | ||
<tr> | ||
<td>iconEle</td> | ||
<td>react node or null</td> | ||
<td></td> | ||
<td>custom icon</td> | ||
</tr> | ||
<tr> | ||
<td>showLine</td> | ||
<td>bool</td> | ||
<td>true</td> | ||
<td>whether show line</td> | ||
</tr> | ||
<tr> | ||
<td>checkable</td> | ||
<td>bool</td> | ||
<td></td> | ||
<td>whether support checked</td> | ||
</tr> | ||
<tr> | ||
<td>onSelect </td> | ||
<td>function</td> | ||
<td></td> | ||
<td></td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
| name | description | type | default | | ||
|----------|----------------|----------|--------------| | ||
|className | additional css class of root dom node | String | '' | | ||
|prefixCls | prefix class | String | '' | | ||
|showLine | whether show line | 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 | - | | ||
### TreeNode props | ||
| name | description | type | default | | ||
|----------|----------------|----------|--------------| | ||
|className | additional class to treeNode | String | '' | | ||
|title | tree/subTree's title | String | '---' | | ||
|defaultExpanded | whether default expand the treeNode | bool | false | | ||
|expanded | whether expand the treeNode, it's controlled | bool | false | | ||
### Keyboard | ||
@@ -116,0 +91,0 @@ - KeyDown/KeyUp |
Sorry, the diff of this file is not supported yet
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
26621
0
576
109