tree 支持自定义icon

This commit is contained in:
wanghaoo 2018-11-05 17:38:54 +08:00
parent e5fcab4b0a
commit 439ca5981c
8 changed files with 175 additions and 128 deletions

View File

@ -10,7 +10,7 @@ import React, {
Component Component
} from 'react'; } from 'react';
import Tree from '../../src'; import Tree from '../../src';
import Icon from 'bee-icon';
const TreeNode = Tree.TreeNode; const TreeNode = Tree.TreeNode;
const defaultProps = { const defaultProps = {
@ -50,16 +50,17 @@ class Demo1 extends Component {
defaultSelectedKeys={this.state.defaultSelectedKeys} defaultSelectedKeys={this.state.defaultSelectedKeys}
defaultCheckedKeys = {this.state.defaultCheckedKeys} defaultCheckedKeys = {this.state.defaultCheckedKeys}
checkStrictly checkStrictly
showIcon
onSelect={this.onSelect} onCheck={this.onCheck} onSelect={this.onSelect} onCheck={this.onCheck}
onDoubleClick={this.onDoubleClick} onDoubleClick={this.onDoubleClick}
> >
<TreeNode title="parent 1" key="0-0" > <TreeNode title="parent 1" key="0-0" icon={<Icon type="uf-treefolder" />}>
<TreeNode title="parent 1-0" key="0-0-0" disabled> <TreeNode title="parent 1-0" key="0-0-0" disabled icon={<Icon type="uf-treefolder" />}>
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox /> <TreeNode title="leaf" key="0-0-0-0" disableCheckbox icon={<Icon type="uf-list-s-o" />}/>
<TreeNode title="leaf" key="0-0-0-1" /> <TreeNode title="leaf" key="0-0-0-1" icon={<Icon type="uf-list-s-o" />}/>
</TreeNode> </TreeNode>
<TreeNode title="parent 1-1" key="0-0-1"> <TreeNode title="parent 1-1" key="0-0-1" icon={<Icon type="uf-treefolder" />}>
<TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" /> <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" icon={<Icon type="uf-list-s-o" />}/>
</TreeNode> </TreeNode>
</TreeNode> </TreeNode>
</Tree> </Tree>

File diff suppressed because one or more lines are too long

6
dist/demo.css vendored
View File

@ -5414,6 +5414,12 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
border: 0 none; border: 0 none;
cursor: pointer; cursor: pointer;
outline: none; } outline: none; }
.u-tree li span.u-tree-switcher i.uf,
.u-tree li span.u-tree-iconEle i.uf {
padding: 0px; }
.u-tree li span.u-tree-switcher + .u-tree-title,
.u-tree li span.u-tree-iconEle + .u-tree-title {
margin-left: 2px; }
.u-tree li span.u-tree-icon_loading:after { .u-tree li span.u-tree-icon_loading:after {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

250
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -173,6 +173,12 @@ $treePrefixCls : "u-tree";
border: 0 none; border: 0 none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
i.uf{
padding: 0px;
}
+ .u-tree-title{
margin-left: 2px;
}
} }
li span.u-tree-icon_loading:after { li span.u-tree-icon_loading:after {
display: inline-block; display: inline-block;

View File

@ -320,8 +320,24 @@ class TreeNode extends React.Component {
}; };
const selectHandle = () => { const selectHandle = () => {
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;
let icon;
if(props.showIcon && props.icon){
icon = <span
className={classNames(
`${prefixCls}-iconEle`,
`${prefixCls}-icon__customize`,
)}
>
{typeof currentIcon === 'function' ?
React.createElement(props.icon, {
...this.props,
}) : props.icon}
</span>
}else if(props.showIcon || props.loadData && this.state.dataLoading){
icon = <span className={classNames(iconEleCls)}></span>
}
const title = <span className={titleClass} style={props.titleStyle} >{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 = {