Skip to content

Commit 39812d9

Browse files
panbibihy
panbibi
authored and
hy
committed
fix(Tree):优化树桩展示组件
1 parent b0d7f35 commit 39812d9

File tree

7 files changed

+53
-65
lines changed

7 files changed

+53
-65
lines changed

‎example/examples/src/routes/Tree/index.tsx‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,39 +13,39 @@ export default class TreeDemo extends React.Component<TreeViewProps> {
1313
const title = route.params.title;
1414
const option: any = [
1515
{
16-
title: '一栋',
17-
key: '01',
16+
label: '一栋',
17+
value: '01',
1818
children: [
1919
{
20-
title: '一单元',
21-
key: '01-1',
22-
children: [{title: '一层', key: '01-1-1', children: [{title: '101', key: '01-1-1-1'}]}],
20+
label: '一单元',
21+
value: '01-1',
22+
children: [{label: '一层', value: '01-1-1', children: [{label: '101', value: '01-1-1-1'}]}],
2323
},
2424
{
25-
title: '一单元1',
26-
key: '01-2',
25+
label: '一单元1',
26+
value: '01-2',
2727
},
2828
{
29-
title: '一单元2',
30-
key: '01-3',
29+
label: '一单元2',
30+
value: '01-3',
3131
},
3232
],
3333
},
3434
{
35-
title: '二栋',
36-
key: '02',
35+
label: '二栋',
36+
value: '02',
3737
children: [
3838
{
39-
title: '二单元',
40-
key: '02-1',
39+
label: '二单元',
40+
value: '02-1',
4141
},
4242
{
43-
title: '二单元1',
44-
key: '02-2',
43+
label: '二单元1',
44+
value: '02-2',
4545
},
4646
{
47-
title: '二单元2',
48-
key: '02-3',
47+
label: '二单元2',
48+
value: '02-3',
4949
},
5050
],
5151
},
@@ -57,14 +57,6 @@ export default class TreeDemo extends React.Component<TreeViewProps> {
5757
<Header title={title} description={description} />
5858
<React.Fragment>
5959
<Body style={{paddingLeft: 16, paddingRight: 16}}>
60-
{/* <Tree
61-
defaultValue={['01', '01-1', '01-1-1', '01-1-1-1']}
62-
// activeColor="red"
63-
options={option}
64-
onChange={(key: any, nodes: any) => {
65-
// console.log(key, nodes);
66-
}}
67-
/> */}
6860
<Tree
6961
treeData={option}
7062
defaultExpandAll

‎packages/core/src/Tree/components/Tree.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ const Tree: FC<TreeProps> = (props) => {
2121
} = useTree(props);
2222

2323
const treeRender = (item: FlattenNode) => {
24-
const treeNodeProps = getTreeNodeProps(item.key, {
24+
const treeNodeProps = getTreeNodeProps(item.value, {
2525
expandedKeys,
2626
checkedKeys: checkedKeys,
2727
});
28-
const level = keyEntities?.[item.key].level;
29-
const itemIcon = keyEntities?.[item.key].data.icon || icon;
28+
const level = keyEntities?.[item.value].level;
29+
const itemIcon = keyEntities?.[item.value].data.icon || icon;
3030
return (
3131
<TreeNode
3232
icon={itemIcon}

‎packages/core/src/Tree/components/TreeNode.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const TreeNode: FC<TreeNodeProps> = (props) => {
1919
disabled,
2020
checkable,
2121
expanded = false,
22-
title,
22+
label,
2323
checked = false,
2424
data,
2525
showIcon,
@@ -51,7 +51,7 @@ const TreeNode: FC<TreeNodeProps> = (props) => {
5151
<TouchableOpacity
5252
disabled={disabled}
5353
onPress={() => {
54-
onClick?.({ expanded, key: data.key, title, checked, disabled });
54+
onClick?.({ expanded, value: data.value, label, checked, disabled });
5555
}}
5656
>
5757
<View
@@ -73,14 +73,10 @@ const TreeNode: FC<TreeNodeProps> = (props) => {
7373
style={{ fontSize: px(14), lineHeight: px(19) }}
7474
color={disabled ? 'rgba(255, 255, 255, 0.25)' : 'rgba(255, 255, 255, 0.8)'}
7575
>
76-
{title}
76+
{label}
7777
</Text>
7878
</View>
79-
{!!data.children && !!showIcon && (
80-
<Chevron {...{ progress }}>
81-
<Icon name={checked ? 'up' : 'down'} color="#999999" />
82-
</Chevron>
83-
)}
79+
{!!data.children && !!showIcon && <Icon name={expanded ? 'up' : 'down'} color="#999999" size={18} />}
8480
</Flex>
8581
</View>
8682
</TouchableOpacity>

‎packages/core/src/Tree/components/useTree.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,16 @@ export function useTree(props: TreeProps) {
8686
* 节点展开,回调上层的onExpand事件
8787
*/
8888
const handleNodeExpand = (treeNode: EventDataNode) => {
89-
const { key, expanded } = treeNode;
89+
const { value, expanded } = treeNode;
9090

9191
let arrKeys: string[] = [];
9292

9393
const targetExpanded = !expanded;
9494

9595
if (targetExpanded) {
96-
arrKeys = arrAdd(expandedKeys, key);
96+
arrKeys = arrAdd(expandedKeys, value);
9797
} else {
98-
arrKeys = arrDel(expandedKeys, key);
98+
arrKeys = arrDel(expandedKeys, value);
9999
}
100100
updateExpandedKeys(arrKeys);
101101
onExpandRef.current?.(treeNode);
@@ -107,24 +107,24 @@ export function useTree(props: TreeProps) {
107107
* 选中处理
108108
*/
109109
const handlerCheck = (treeNode: EventDataNode) => {
110-
const { key, checked } = treeNode;
110+
const { value, checked } = treeNode;
111111

112112
let arrKeys: string[] = [];
113113
const targetChecked = !checked;
114114

115115
//判断是否需要关联父子节点
116116
if (checkStrictly) {
117117
if (targetChecked) {
118-
arrKeys = arrAdd(checkedKeys, key);
118+
arrKeys = arrAdd(checkedKeys, value);
119119
} else {
120-
arrKeys = arrDel(checkedKeys, key);
120+
arrKeys = arrDel(checkedKeys, value);
121121
}
122122
} else {
123-
arrKeys = conductCheck([...checkedKeys, key], keyEntities || {}, true);
123+
arrKeys = conductCheck([...checkedKeys, value], keyEntities || {}, true);
124124

125125
if (checked) {
126126
const keySet = new Set(checkedKeys);
127-
keySet.delete(key);
127+
keySet.delete(value);
128128
arrKeys = conductCheck(Array.from(keySet), keyEntities || {}, { checked: false });
129129
}
130130
}

‎packages/core/src/Tree/components/useTreeNode.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { TreeNodeProps } from '../type';
55
export function useTreeNode({
66
expanded = false,
77
eventKey,
8-
title,
8+
label,
99
checked = false,
1010
disabled,
1111
onCheck,
@@ -28,7 +28,7 @@ export function useTreeNode({
2828
};
2929

3030
const handlerCheck = () => {
31-
onCheckRef.current?.({ expanded, key: data.key, eventKey, title, checked, disabled });
31+
onCheckRef.current?.({ expanded, value: data.value, eventKey, label, checked, disabled });
3232
};
3333

3434
return { progress, heightProgress, style, handlerCheck: handlerCheck, onClick: onClickRef.current };

‎packages/core/src/Tree/type.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { ReactNode } from 'react';
22

33
export interface TreeItemProps {
4-
key: string;
5-
title: string;
4+
value: string;
5+
label: string;
66
children?: Array<TreeItemProps | ReactNode>;
77
disabled?: boolean;
88
icon?: (checked: boolean) => ReactNode;
@@ -15,8 +15,8 @@ export interface DataNode {
1515
disabled?: boolean;
1616
disableCheckbox?: boolean;
1717
icon?: (checked: boolean) => ReactNode;
18-
key: string;
19-
title?: React.ReactNode | string;
18+
value: string;
19+
label?: React.ReactNode | string;
2020
switcherIcon?: ReactNode;
2121
show?: boolean;
2222
}
@@ -82,7 +82,7 @@ export interface TreeNodeProps {
8282
/** 是否选中 */
8383
checked?: boolean;
8484
/** 标题 */
85-
title?: React.ReactNode;
85+
label?: React.ReactNode;
8686
/** 节点的数据 */
8787
data: DataNode;
8888
/** 是否显示展开图标 */

‎packages/core/src/Tree/util.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function flattenTreeData(treeNodeList: TreeItemProps[] = [], expandedKeys
1111
//递归遍历每一个节点
1212
function dig(list: DataNode[], parent: FlattenNode | null = null, show?: boolean): FlattenNode[] {
1313
return list.map((treeNode) => {
14-
const mergedKey = treeNode.key;
14+
const mergedKey = treeNode.value;
1515

1616
const flattenNode: FlattenNode = {
1717
...treeNode,
@@ -81,18 +81,18 @@ export function getTreeNodeLevel(treeData: TreeItemProps[] = []) {
8181
const children = node ? node.children : treeData;
8282

8383
if (node) {
84-
nodeLevel[node.key] = {
84+
nodeLevel[node.value] = {
8585
level: parent ? parent.level + 1 : 0,
8686
parent: parent,
8787
children: children,
8888
data: node,
89-
key: node.key,
89+
value: node.value,
9090
};
9191
}
9292

9393
if (children) {
9494
children.forEach((subNode) => {
95-
processNode(subNode as TreeItemProps, node ? nodeLevel[node?.key] : null);
95+
processNode(subNode as TreeItemProps, node ? nodeLevel[node?.value] : null);
9696
});
9797
}
9898
}
@@ -114,7 +114,7 @@ function fillConductCheck(keys: Set<string>, levelEntities: Map<number, Set<Enti
114114

115115
if (checkedKeys.has(key)) {
116116
children?.forEach((childEntity) => {
117-
checkedKeys.add(childEntity.key);
117+
checkedKeys.add(childEntity.value);
118118
});
119119
}
120120
});
@@ -129,18 +129,18 @@ function fillConductCheck(keys: Set<string>, levelEntities: Map<number, Set<Enti
129129

130130
let allChecked = true;
131131

132-
(parent?.children || []).forEach(({ key }) => {
133-
const checked = checkedKeys.has(key);
132+
(parent?.children || []).forEach(({ value }) => {
133+
const checked = checkedKeys.has(value);
134134
if (allChecked && !checked) {
135135
allChecked = false;
136136
}
137137
});
138138

139139
if (allChecked) {
140-
checkedKeys.add(parent.key);
140+
checkedKeys.add(parent.value);
141141
}
142142

143-
visitedKeys.add(parent.key);
143+
visitedKeys.add(parent.value);
144144
});
145145
}
146146

@@ -161,7 +161,7 @@ function cleanConductCheck(keys: Set<string>, levelEntities: Map<number, Set<Ent
161161

162162
if (!checkedKeys.has(key)) {
163163
children?.forEach((childEntity) => {
164-
checkedKeys.delete(childEntity.key);
164+
checkedKeys.delete(childEntity.value);
165165
});
166166
}
167167
});
@@ -177,18 +177,18 @@ function cleanConductCheck(keys: Set<string>, levelEntities: Map<number, Set<Ent
177177

178178
let allChecked = true;
179179

180-
(parent.children || []).forEach(({ key }) => {
181-
const checked = checkedKeys.has(key);
180+
(parent.children || []).forEach(({ value }) => {
181+
const checked = checkedKeys.has(value);
182182
if (allChecked && !checked) {
183183
allChecked = false;
184184
}
185185
});
186186

187187
if (!allChecked) {
188-
checkedKeys.delete(parent.key);
188+
checkedKeys.delete(parent.value);
189189
}
190190

191-
visitedKeys.add(parent.key);
191+
visitedKeys.add(parent.value);
192192
});
193193
}
194194

0 commit comments

Comments
 (0)