Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 788d29c

Browse files
已修改 examples/src/Demo.js
缺失 src/ChildNodesContainer.js 缺失 src/NodeInterface.js 已修改 src/Tree.js 已修改 src/TreeNode.js 已修改 src/utils.js Add src/ChildNodesWrapper.js Add src/NodeItem.js
1 parent aef3c90 commit 788d29c

File tree

7 files changed

+256
-241
lines changed

7 files changed

+256
-241
lines changed

‎examples/src/Demo.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import DemoList from './DemoList';
44
export default class Demo extends Component {
55

66
state = {
7-
current: DemoList[0]
7+
current: DemoList[1]
88
}
99

1010
onDemoChange(item, e) {
File renamed without changes.

‎src/NodeInterface.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/NodeItem.js‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import React, { Fragment, Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
import { isLoading, isLeaf, isExpanded, arrayFill } from './utils';
5+
6+
export default class NodeItem extends Component {
7+
8+
static propTypes = {
9+
parentProps: PropTypes.object,
10+
self: PropTypes.object,
11+
node: PropTypes.object,
12+
};
13+
14+
static defaultProps = {};
15+
16+
renderLoadingNode() {
17+
const { prefixCls, loadingText } = this.props.parentProps;
18+
19+
if (!loadingText) return null;
20+
21+
return (
22+
<div className={`${prefixCls}-loading-wrapper`}>{loadingText}</div>
23+
);
24+
}
25+
26+
renderIndentIcons() {
27+
const { parentProps, node } = this.props;
28+
const { renderIndentIcons, prefixCls } = parentProps;
29+
const relativeDepth = node.relativeDepth - 1;
30+
31+
if (relativeDepth <= 0) return null;
32+
33+
if (renderIndentIcons) return renderIndentIcons(node);
34+
35+
const indents = arrayFill(Array(relativeDepth), 0);
36+
37+
return indents.map((v, i) => <span key={i} className={`${prefixCls}-indent`} />);
38+
}
39+
40+
renderExpanderIcon() {
41+
const { parentProps, node } = this.props;
42+
const { renderExpanderIcon, prefixCls } = parentProps;
43+
44+
const leaf = isLeaf(node);
45+
const classes = classNames({
46+
[`${prefixCls}-icon`]: true,
47+
[`${prefixCls}-expander-icon`]: !leaf,
48+
open: !leaf && isExpanded(node),
49+
[`${prefixCls}-indent`]: leaf,
50+
});
51+
52+
const expanderProps = {
53+
className: classes,
54+
};
55+
56+
if (renderExpanderIcon) return renderExpanderIcon(node, expanderProps, this);
57+
58+
return <span {...expanderProps} />;
59+
}
60+
61+
renderLoadingIcon() {
62+
const { parentProps, node } = this.props;
63+
const { renderLoadingIcon, prefixCls } = parentProps;
64+
65+
if (renderLoadingIcon) return renderLoadingIcon(node, this);
66+
67+
const classes = classNames({
68+
[`${prefixCls}-icon`]: true,
69+
[`${prefixCls}-loading-icon`]: true,
70+
});
71+
72+
return <span className={classes} />;
73+
}
74+
75+
renderIcon() {
76+
const { parentProps, node } = this.props;
77+
const { renderIcon, prefixCls } = parentProps;
78+
79+
if (renderIcon) return renderIcon(node, this);
80+
81+
const leaf = isLeaf(node);
82+
const classes = classNames({
83+
[`${prefixCls}-icon`]: true,
84+
[`${prefixCls}-icon-parent`]: !leaf,
85+
[`${prefixCls}-icon-leaf`]: leaf,
86+
[node.iconCls]: node.iconCls,
87+
});
88+
89+
return <span className={classes} />;
90+
}
91+
92+
renderCheckbox() {
93+
const { parentProps, node } = this.props;
94+
const { renderCheckbox, prefixCls } = parentProps;
95+
96+
if (renderCheckbox) return renderCheckbox(node, this);
97+
98+
const classes = classNames({
99+
[`${prefixCls}-icon`]: true,
100+
[`${prefixCls}-icon-checkbox`]: true,
101+
checked: !!node.checked,
102+
});
103+
104+
return <span className={classes} />;
105+
}
106+
107+
renderLabel() {
108+
const { parentProps, node } = this.props;
109+
const { renderLabel, prefixCls } = parentProps;
110+
111+
const labelProps = {
112+
className: `${prefixCls}-label`,
113+
};
114+
115+
if (renderLabel) return renderLabel(node, labelProps, this);
116+
117+
return <div {...labelProps}>{node.label}</div>
118+
}
119+
120+
renderExtIcons() {
121+
const { parentProps, node } = this.props;
122+
const { renderExtIcons, prefixCls } = parentProps;
123+
124+
if (renderExtIcons) return renderExtIcons(node, this);
125+
}
126+
127+
render() {
128+
const { node, parentProps, self } = this.props;
129+
130+
const {
131+
prefixCls,
132+
renderNode,
133+
showIcon,
134+
checkable,
135+
onNodeClick,
136+
onNodeDoubleClick,
137+
onNodeContextMenu,
138+
onNodeMouseDown,
139+
onNodeMouseUp,
140+
onNodeMouseEnter,
141+
onNodeMouseLeave,
142+
onNodeMouseOver,
143+
onNodeMouseOut,
144+
onNodeMouseMove,
145+
} = parentProps;
146+
147+
const nodeProps = {
148+
className: classNames({
149+
[`${prefixCls}-item-wrapper`]: true,
150+
[node.cls]: node.cls,
151+
[`${prefixCls}-item-expanded`]: isExpanded(node),
152+
}),
153+
onClick: e => {
154+
onNodeClick(node, e, self);
155+
},
156+
onDoubleClick: e => {
157+
onNodeDoubleClick(node, e, self);
158+
},
159+
onContextMenu: e => {
160+
onNodeContextMenu(node, e, self);
161+
},
162+
onMouseDown: e => {
163+
onNodeMouseDown(node, e, self);
164+
},
165+
onMouseUp: e => {
166+
onNodeMouseUp(node, e, self);
167+
},
168+
onMouseEnter: e => {
169+
onNodeMouseEnter(node, e, self);
170+
},
171+
onMouseLeave: e => {
172+
onNodeMouseLeave(node, e, self);
173+
},
174+
onMouseOver: e => {
175+
onNodeMouseOver(node, e, self);
176+
},
177+
onMouseOut: e => {
178+
onNodeMouseOut(node, e, self);
179+
},
180+
onMouseMove: e => {
181+
onNodeMouseMove(node, e, self);
182+
}
183+
};
184+
185+
return renderNode ?
186+
renderNode(node, nodeProps, this) :
187+
<div
188+
{...nodeProps}
189+
>
190+
<Fragment>
191+
{this.renderIndentIcons()}
192+
{isLoading(node) ? this.renderLoadingIcon() : this.renderExpanderIcon()}
193+
{showIcon ? this.renderIcon() : null}
194+
{checkable ? this.renderCheckbox() : null}
195+
{this.renderLabel()}
196+
{this.renderExtIcons()}
197+
</Fragment>
198+
</div>;
199+
}
200+
201+
}

‎src/Tree.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
2-
import { findDOMNode } from 'react-dom';
32
import PropTypes from 'prop-types';
43
import classNames from 'classnames';
54
import TreeNode from './TreeNode';
6-
import ChildNodesContainer from './ChildNodesContainer';
5+
import ChildNodesWrapper from './ChildNodesWrapper';
76

87
const noop = () => { };
98

@@ -17,14 +16,14 @@ export default class Tree extends React.Component {
1716
prefixCls: 'nil-tree',
1817
className: '',
1918
rootId: null,
20-
loadingText: '加载中...',
19+
loadingText: 'Loading...',
2120
loadData: null,
2221
showIcon: true,
2322
checkable: false,
2423
maxDepth: 50, //最大层级50
2524
//showLine: false, //自定义支持
2625
//animate: false, //自定义支持
27-
childNodesWrapperComponent: ChildNodesContainer,
26+
childNodesWrapperComponent: ChildNodesWrapper,
2827
renderIndentIcons: null,
2928
renderExpanderIcon: null,
3029
renderLoadingIcon: null,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /