tree 支持自定义icon
This commit is contained in:
parent
e5fcab4b0a
commit
439ca5981c
|
@ -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
|
@ -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;
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
Loading…
Reference in New Issue