innov
/
bee-tree
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

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

This commit is contained in:
liushzh 2018-02-05 16:08:35 +08:00
parent f51ef07bbb
commit 7a47697c66
7 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -127,6 +127,9 @@ title|名称标题|String/element |--
key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|- key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|-
isLeaf|是否是叶子节点|bool|false isLeaf|是否是叶子节点|bool|false
titleClass|名称类名|String|- titleClass|名称类名|String|-
titleStyle|名称样式|Object|-
switcherClass|switcher类名|String|-
switcherStyle|switcher样式|Object|-
#### 开发调试 #### 开发调试
```sh ```sh

13
build/TreeNode.js
View File

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

13
dist/demo.js vendored
View File

@ -7695,18 +7695,18 @@
switcherCls['icon-none'] = true; switcherCls['icon-none'] = true;
} }
//switcherCls[stateIcon] = stateIcon; //switcherCls[stateIcon] = stateIcon;
props.switcherClass ? switcherCls['' + props.switcherClass] = true : '';
if (props.disabled) { if (props.disabled) {
switcherCls[prefixCls + '-switcher-disabled'] = true; switcherCls[prefixCls + '-switcher-disabled'] = true;
return _react2['default'].createElement( return _react2['default'].createElement(
'span', 'span',
{ className: (0, _classnames2['default'])(switcherCls) }, { className: (0, _classnames2['default'])(switcherCls), style: props.switcherStyle },
stateIcon stateIcon
); );
} }
return _react2['default'].createElement( return _react2['default'].createElement(
'span', 'span',
{ className: (0, _classnames2['default'])(switcherCls), onClick: this.onExpand }, { className: (0, _classnames2['default'])(switcherCls), style: props.switcherStyle, onClick: this.onExpand },
stateIcon stateIcon
); );
}; };
@ -7827,7 +7827,7 @@
var icon = props.showIcon || props.loadData && _this4.state.dataLoading ? _react2['default'].createElement('span', { className: (0, _classnames2['default'])(iconEleCls) }) : null; var icon = props.showIcon || props.loadData && _this4.state.dataLoading ? _react2['default'].createElement('span', { className: (0, _classnames2['default'])(iconEleCls) }) : null;
var title = _react2['default'].createElement( var title = _react2['default'].createElement(
'span', 'span',
{ className: titleClass }, { className: titleClass, style: props.titleStyle },
content content
); );
var wrap = prefixCls + '-node-content-wrapper'; var wrap = prefixCls + '-node-content-wrapper';
@ -7946,7 +7946,10 @@
closeIcon: _propTypes2['default'].element, closeIcon: _propTypes2['default'].element,
style: _propTypes2['default'].object, style: _propTypes2['default'].object,
className: _propTypes2['default'].string, 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 = { TreeNode.defaultProps = {

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
docs/api.md
View File

@ -44,3 +44,6 @@
|key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|- |key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|-
|isLeaf|是否是叶子节点|bool|false |isLeaf|是否是叶子节点|bool|false
|titleClass|名称类名|String|- |titleClass|名称类名|String|-
|titleStyle|名称样式|Object|-
|switcherClass|switcher类名|String|-
|switcherStyle|switcher样式|Object|-

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bee-tree", "name": "bee-tree",
"version": "1.0.8", "version": "1.0.9",
"description": "Tree ui component for react", "description": "Tree ui component for react",
"keywords": [ "keywords": [
"react", "react",

15
src/TreeNode.js
View File

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