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 4dc590e

Browse files
update
1 parent 9980f84 commit 4dc590e

File tree

7 files changed

+175
-167
lines changed

7 files changed

+175
-167
lines changed

‎examples/src/demos/demo5.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@ export default class DEMO extends Component {
3333
};
3434

3535
renderNodeRow = ({ node, props, component: me }) => {
36-
const { parentProps } = me.props;
37-
const { showIcon, showExpanderIcon, checkable } = parentProps;
36+
const { showIcon, showExpanderIcon, checkable } = me.getTreeProps();
3837

3938
return (
4039
<tr>

‎src/ChildNodesWrapper.js‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,25 @@
11
import React, { Component, Fragment } from "react";
22
import PropTypes from "prop-types";
3-
import { isLoading, isPromiseLike } from "./utils";
4-
5-
export default class ChildNodesContainer extends Component {
6-
static propTypes = {
7-
expanded: PropTypes.bool,
8-
node: PropTypes.object,
9-
};
10-
11-
static defaultProps = {
12-
expanded: false,
13-
};
143

4+
class ChildNodesContainer extends Component {
155
render() {
166
const { expanded, children } = this.props;
177

188
if (!expanded) return null;
199

2010
const results = children();
2111

22-
// if (isPromiseLike(results)) {
23-
// return null;
24-
// }
25-
2612
return <Fragment>{results}</Fragment>;
2713
}
2814
}
15+
16+
ChildNodesContainer.propTypes = {
17+
expanded: PropTypes.bool,
18+
node: PropTypes.object,
19+
};
20+
21+
ChildNodesContainer.defaultProps = {
22+
expanded: false,
23+
};
24+
25+
export default ChildNodesContainer;

‎src/Node.js‎

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
let idx = 1;
22

33
export default class Node {
4-
constructor(data, parentNode, options = {}) {
4+
constructor(data, parentNode, options = {},state={}) {
55
const {
66
rootId = null,
77
idField = "id",
88
pidField = "pid",
99
leafField = "leaf",
1010
} = options;
11-
12-
this.loading = false;
13-
this.selected = false;
14-
this.root = !parentNode;
15-
this.expanded = this.root;
16-
this.relativeDepth = parentNode ? parentNode.relativeDepth + 1 : 0;
11+
const { selectedMap = {}, expandedMap = {} } = state;
1712

1813
this.id = data[idField];
1914
this.pid = data[pidField];
@@ -23,13 +18,59 @@ export default class Node {
2318
if (this.id == null && this.id !== rootId) {
2419
this.id = `node_${idx++}`;
2520
}
21+
22+
this.loading = false;
23+
this.root = !parentNode;
24+
this.expanded = this.root ? true : expandedMap[this.id];
25+
this.selected = this.root ? false : selectedMap[this.id];
26+
this.depth = parentNode ? parentNode.depth + 1 : 0;
27+
}
28+
29+
getId() {
30+
return this.id;
31+
}
32+
33+
getDepth() {
34+
return this.depth;
35+
}
36+
37+
setDepth(depth) {
38+
this.depth = depth;
39+
}
40+
41+
getData() {
42+
return this.data;
43+
}
44+
45+
isRoot() {
46+
return this.root;
47+
}
48+
49+
isLeaf() {
50+
return this.leaf;
2651
}
2752

2853
setExpanded(expanded) {
2954
this.expanded = expanded;
3055
}
3156

57+
isExpanded() {
58+
return this.expanded;
59+
}
60+
3261
setSelected(selected) {
3362
this.selected = selected;
3463
}
64+
65+
isSelected() {
66+
return this.selected;
67+
}
68+
69+
setLoading(loading) {
70+
this.loading = loading;
71+
}
72+
73+
isLoading() {
74+
return this.loading;
75+
}
3576
}

‎src/NodeItem.js‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
11
import React, { Fragment, Component } from "react";
22
import PropTypes from "prop-types";
33
import classNames from "classnames";
4-
import { isLoading,isLeaf,isExpanded,arrayFill, closest } from "./utils";
4+
import { arrayFill, closest } from "./utils";
55
import TreeContext from "./TreeContext";
66

7-
exportdefaultclass NodeItem extends Component {
7+
class NodeItem extends Component {
88
static contextType = TreeContext;
99

10-
static propTypes = {
11-
node: PropTypes.object,
12-
data: PropTypes.object,
13-
};
14-
15-
static defaultProps = {};
16-
1710
getTree() {
1811
return this.context.tree;
1912
}
13+
2014
getTreeProps() {
2115
const tree = this.getTree();
2216
return tree.props;
@@ -40,9 +34,9 @@ export default class NodeItem extends Component {
4034
const { prefixCls, renderIndentIcons } = this.getTreeProps();
4135
const { node, data } = this.props;
4236

43-
const relativeDepth = node.relativeDepth - 1;
37+
const depth = node.getDepth() - 1;
4438

45-
if (relativeDepth <= 0) return null;
39+
if (depth <= 0) return null;
4640

4741
const props = {
4842
className: `${prefixCls}-indent`,
@@ -57,21 +51,20 @@ export default class NodeItem extends Component {
5751
});
5852
}
5953

60-
const indents = arrayFill(Array(relativeDepth), 0);
54+
const indents = arrayFill(Array(depth), 0);
6155

6256
return indents.map((v, i) => <div {...props} key={i} />);
6357
}
6458

6559
renderExpanderIcon() {
66-
const tree = this.getTree();
6760
const { prefixCls, renderExpanderIcon } = this.getTreeProps();
6861
const { node, data } = this.props;
6962

70-
const leaf = tree.isLeaf(node);
63+
const leaf = node.isLeaf();
7164
const classes = classNames({
7265
[`${prefixCls}-icon`]: true,
7366
[`${prefixCls}-expander-icon`]: !leaf,
74-
open: !leaf && tree.isExpanded(node),
67+
open: !leaf && node.isExpanded(),
7568
[`${prefixCls}-indent`]: leaf,
7669
});
7770

@@ -117,11 +110,10 @@ export default class NodeItem extends Component {
117110
}
118111

119112
renderIcon() {
120-
const tree = this.getTree();
121113
const { prefixCls, renderIcon } = this.getTreeProps();
122114
const { node, data } = this.props;
123115

124-
const leaf = tree.isLeaf(node);
116+
const leaf = node.isLeaf();
125117
const classes = classNames({
126118
[`${prefixCls}-icon`]: true,
127119
[`${prefixCls}-icon-parent`]: !leaf,
@@ -151,8 +143,8 @@ export default class NodeItem extends Component {
151143

152144
const classes = classNames({
153145
[`${prefixCls}-icon`]: true,
154-
[`${prefixCls}-icon-checkbox`]: true,
155-
checked: !!node.checked,
146+
// [`${prefixCls}-icon-checkbox`]: true,
147+
// checked: !!node.checked,
156148
});
157149

158150
const props = {
@@ -168,7 +160,8 @@ export default class NodeItem extends Component {
168160
});
169161
}
170162

171-
return <div {...props} />;
163+
return null;
164+
// return <div {...props} />;
172165
}
173166

174167
renderLabel() {
@@ -221,6 +214,8 @@ export default class NodeItem extends Component {
221214
onNodeClick,
222215
} = treeProps;
223216

217+
const id = node.getId();
218+
224219
const { selectedKeys, expandedKeys } = tree.state;
225220
const isExpanderClick = closest(
226221
e.target,
@@ -235,13 +230,13 @@ export default class NodeItem extends Component {
235230

236231
let newSelectedKeys = selectedKeys;
237232
const newExpandedKeys = [...expandedKeys];
238-
const idx = newExpandedKeys.indexOf(node.id);
233+
const idx = newExpandedKeys.indexOf(id);
239234
const isExpanded = idx !== -1;
240-
const sIdx = selectedKeys.indexOf(node.id);
235+
const sIdx = selectedKeys.indexOf(id);
241236
const isSelected = sIdx !== -1;
242237

243238
if (!isSelected && selectable) {
244-
newSelectedKeys = multiple ? [...selectedKeys, node.id] : [node.id];
239+
newSelectedKeys = multiple ? [...selectedKeys, id] : [id];
245240

246241
if (!isSelectControlled) {
247242
newState.selectedKeys = newSelectedKeys;
@@ -266,7 +261,7 @@ export default class NodeItem extends Component {
266261
if (isExpanded) {
267262
newExpandedKeys.splice(idx, 1);
268263
} else {
269-
newExpandedKeys.push(node.id);
264+
newExpandedKeys.push(id);
270265
}
271266

272267
if (!isExpandedControlled) {
@@ -322,10 +317,9 @@ export default class NodeItem extends Component {
322317
const nodeProps = {
323318
className: classNames({
324319
[`${prefixCls}-item`]: true,
325-
[`${prefixCls}-item-selected`]: tree.isSelected(node),
326-
//[`${prefixCls}-item-wrapper`]: true,
327-
[`${prefixCls}-item-expanded`]: tree.isExpanded(node),
328-
[node.cls]: node.cls,
320+
[`${prefixCls}-item-selected`]: node.isSelected(),
321+
[`${prefixCls}-item-expanded`]: node.isExpanded(),
322+
[data.cls]: data.cls,
329323
}),
330324
onClick: this.handleNodeClick,
331325
onDoubleClick: event => {
@@ -397,21 +391,20 @@ export default class NodeItem extends Component {
397391
}
398392

399393
renderNode() {
400-
const tree = this.getTree();
401394
const { showIcon, showExpanderIcon, checkable } = this.getTreeProps();
402395
const { node } = this.props;
403396

404397
return (
405398
<div {...this.getNodeProps()}>
406399
<Fragment>
407400
{this.renderIndentIcons()}
408-
{tree.isLoading(node)
401+
{node.isLoading()
409402
? this.renderLoadingIcon()
410403
: // : showExpanderIcon
411404
// ? this.renderExpanderIcon() : null
412405
this.renderExpanderIcon()}
413406
{showIcon ? this.renderIcon() : null}
414-
{checkable ? this.renderCheckbox() : null}
407+
{this.renderCheckbox()}
415408
{this.renderLabel()}
416409
{this.renderExtIcons()}
417410
</Fragment>
@@ -421,10 +414,24 @@ export default class NodeItem extends Component {
421414

422415
render() {
423416
const { renderNode } = this.getTreeProps();
424-
const { node } = this.props;
417+
const { node, data } = this.props;
425418

426419
return renderNode
427-
? renderNode(node, this.getNodeProps(), this)
420+
? renderNode({
421+
node,
422+
data,
423+
props: this.getNodeProps(),
424+
component: this,
425+
})
428426
: this.renderNode();
429427
}
430428
}
429+
430+
NodeItem.propTypes = {
431+
node: PropTypes.object,
432+
data: PropTypes.object,
433+
};
434+
435+
NodeItem.defaultProps = {};
436+
437+
export default NodeItem;

0 commit comments

Comments
(0)

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