rc-tree - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

lib/Tree.js

@@ -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 @@

lib/TreeNode.js

@@ -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 @@

package.json

 {
   "name": "rc-tree",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "tree ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -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

Fixed alerts

Major refactor

Supply chain risk

Package 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

Improved metrics

Total package byte prevSize

26621

increased by0.38%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

576

decreased by-1.2%

Number of lines in readme file

109

decreased by-18.66%

No dependency changes