feat(bee-tree): switer支持Class和style，title支持Style

tinper-bee · Feb 5, 2018 · 7a47697 · 7a47697
1 parent f51ef07
commit 7a47697
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -127,6 +127,9 @@ title|名称标题|String/element	|--
 key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|-
 isLeaf|是否是叶子节点|bool|false
 titleClass|名称类名|String|-
+titleStyle|名称样式|Object|-
+switcherClass|switcher类名|String|-
+switcherStyle|switcher样式|Object|-
 #### 开发调试
 
 ```sh

diff --git a/build/TreeNode.js b/build/TreeNode.js
@@ -200,18 +200,18 @@ var TreeNode = function (_React$Component) {
       switcherCls['icon-none'] = true;
     }
     //switcherCls[stateIcon] = stateIcon;
-
+    props.switcherClass ? switcherCls['' + props.switcherClass] = true : '';
     if (props.disabled) {
       switcherCls[prefixCls + '-switcher-disabled'] = true;
       return _react2["default"].createElement(
         'span',
-        { className: (0, _classnames2["default"])(switcherCls) },
+        { className: (0, _classnames2["default"])(switcherCls), style: props.switcherStyle },
         stateIcon
       );
     }
     return _react2["default"].createElement(
       'span',
-      { className: (0, _classnames2["default"])(switcherCls), onClick: this.onExpand },
+      { className: (0, _classnames2["default"])(switcherCls), style: props.switcherStyle, onClick: this.onExpand },
       stateIcon
     );
   };
@@ -332,7 +332,7 @@ var TreeNode = function (_React$Component) {
       var icon = props.showIcon || props.loadData && _this4.state.dataLoading ? _react2["default"].createElement('span', { className: (0, _classnames2["default"])(iconEleCls) }) : null;
       var title = _react2["default"].createElement(
         'span',
-        { className: titleClass },
+        { className: titleClass, style: props.titleStyle },
         content
       );
       var wrap = prefixCls + '-node-content-wrapper';
@@ -451,7 +451,10 @@ TreeNode.propTypes = {
   closeIcon: _propTypes2["default"].element,
   style: _propTypes2["default"].object,
   className: _propTypes2["default"].string,
-  titleClass: _propTypes2["default"].string
+  titleClass: _propTypes2["default"].string,
+  titleStyle: _propTypes2["default"].object,
+  switcherClass: _propTypes2["default"].string,
+  switcherStyle: _propTypes2["default"].object
 };
 
 TreeNode.defaultProps = {

diff --git a/dist/demo.js b/dist/demo.js
diff --git a/dist/demo.js.map b/dist/demo.js.map
diff --git a/docs/api.md b/docs/api.md
@@ -43,4 +43,7 @@
 |title|名称标题|String/element  |--
 |key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|-
 |isLeaf|是否是叶子节点|bool|false
-|titleClass|名称类名|String|-
+|titleClass|名称类名|String|-
+|titleStyle|名称样式|Object|-
+|switcherClass|switcher类名|String|-
+|switcherStyle|switcher样式|Object|-
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "bee-tree",
- "version": "1.0.8",
+ "version": "1.0.9",
  "description": "Tree ui component for react",
  "keywords": [
   "react",

diff --git a/src/TreeNode.js b/src/TreeNode.js
@@ -152,7 +152,7 @@ class TreeNode extends React.Component {
     let stateIcon;
     const prefixCls = props.prefixCls;
     const switcherCls = {
-      [`${prefixCls}-switcher`]: true,
+      [`${prefixCls}-switcher`]: true
     };
     if (!props.showLine) {
       switcherCls[`${prefixCls}-noline_${expandedState}`] = true;
@@ -172,12 +172,12 @@ class TreeNode extends React.Component {
       switcherCls['icon-none'] = true;
     }
     //switcherCls[stateIcon] = stateIcon;
-
+    props.switcherClass?switcherCls[`${props.switcherClass}`]=true:'';
     if (props.disabled) {
       switcherCls[`${prefixCls}-switcher-disabled`] = true;
-      return <span className={classNames(switcherCls)}>{stateIcon}</span>;
+      return <span className={classNames(switcherCls)} style={props.switcherStyle}>{stateIcon}</span>;
     }
-    return <span className={classNames(switcherCls)} onClick={this.onExpand}>{stateIcon}</span>;
+    return <span className={classNames(switcherCls)} style={props.switcherStyle} onClick={this.onExpand}>{stateIcon}</span>;
   }
 
   renderCheckbox(props) {
@@ -293,7 +293,7 @@ class TreeNode extends React.Component {
       const titleClass=props.titleClass?prefixCls+'-title'+' '+props.className:prefixCls+'-title';
       const icon = (props.showIcon || props.loadData && this.state.dataLoading) ?
         <span className={classNames(iconEleCls)}></span> : null;
-      const title = <span className={titleClass} >{content}</span>;
+      const title = <span className={titleClass} style={props.titleStyle} >{content}</span>;
       const wrap = `${prefixCls}-node-content-wrapper`;
       const domProps = {
         className: `${wrap} ${wrap}-${iconState === expandedState ? iconState : 'normal'}`,
@@ -408,7 +408,10 @@ TreeNode.propTypes = {
   closeIcon: PropTypes.element,
   style: PropTypes.object,
   className: PropTypes.string,
-  titleClass:PropTypes.string
+  titleClass:PropTypes.string,
+  titleStyle:PropTypes.object,
+  switcherClass:PropTypes.string,
+  switcherStyle:PropTypes.object
 };
 
 TreeNode.defaultProps = {