Skip to content

Commit e8b1f68

Browse files
tangjinzhoutangjinzhou
committed
fix: update tree title render & switchIcon
1 parent eff286d commit e8b1f68

File tree

12 files changed

+124
-80
lines changed

12 files changed

+124
-80
lines changed

‎components/components.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@ export { default as Table, TableColumn, TableColumnGroup } from './table';
162162
export type { TransferProps } from './transfer';
163163
export { default as Transfer } from './transfer';
164164

165+
export type { TreeProps, DirectoryTreeProps } from './tree';
165166
export { default as Tree, TreeNode, DirectoryTree } from './tree';
166167

167168
export type { TreeSelectProps } from './tree-select';

‎components/tree/Tree.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import VcTree, { TreeNode } from '../vc-tree';
77
import PropTypes from '../_util/vue-types';
88
import { filterEmpty } from '../_util/props-util';
99
import initDefaultProps from '../_util/props-util/initDefaultProps';
10-
import type { DataNode, DragNodeEvent, FieldNames, Key } from '../vc-tree/interface';
10+
import type { DataNode, EventDataNode, FieldNames, Key } from '../vc-tree/interface';
1111
import type { TreeNodeProps } from '../vc-tree/props';
1212
import { treeProps as vcTreeProps } from '../vc-tree/props';
1313
import useConfigInject from '../_util/hooks/useConfigInject';
@@ -42,7 +42,7 @@ export type AntTreeNodeProps = TreeNodeProps;
4242
export type TreeDataItem = DataNode;
4343

4444
export interface AntTreeNodeBaseEvent {
45-
node: DataNode;
45+
node: EventDataNode;
4646
nativeEvent: MouseEvent;
4747
}
4848

@@ -63,7 +63,7 @@ export interface AntTreeNodeExpandedEvent extends AntTreeNodeBaseEvent {
6363
}
6464

6565
export interface AntTreeNodeMouseEvent {
66-
node: DataNode;
66+
node: EventDataNode;
6767
event: DragEvent;
6868
}
6969

@@ -72,8 +72,8 @@ export interface AntTreeNodeDragEnterEvent extends AntTreeNodeMouseEvent {
7272
}
7373

7474
export interface AntTreeNodeDropEvent {
75-
node: DragNodeEvent;
76-
dragNode: DragNodeEvent;
75+
node: EventDataNode;
76+
dragNode: EventDataNode;
7777
dragNodesKeys: Key[];
7878
dropPosition: number;
7979
dropToGap?: boolean;
@@ -192,7 +192,7 @@ export default defineComponent({
192192
const {
193193
showIcon,
194194
showLine,
195-
switcherIcon = slots.switcherIcon?.(),
195+
switcherIcon = slots.switcherIcon,
196196
icon = slots.icon,
197197
blockNode,
198198
checkable,

‎components/tree/index.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,24 @@ import type { App, Plugin } from 'vue';
22
import Tree from './Tree';
33
import DirectoryTree from './DirectoryTree';
44

5-
export { EventDataNode, DataNode } from '../vc-tree/interface';
5+
export type { EventDataNode, DataNode } from '../vc-tree/interface';
66

7-
export {
7+
export type {
88
TreeProps,
99
AntTreeNodeMouseEvent,
1010
AntTreeNodeExpandedEvent,
1111
AntTreeNodeCheckedEvent,
1212
AntTreeNodeSelectedEvent,
13+
AntTreeNodeDragEnterEvent,
14+
AntTreeNodeDropEvent,
1315
AntdTreeNodeAttribute,
1416
TreeDataItem,
1517
} from './Tree';
1618

17-
export { ExpandAction as DirectoryTreeExpandAction, DirectoryTreeProps } from './DirectoryTree';
19+
export type {
20+
ExpandAction as DirectoryTreeExpandAction,
21+
DirectoryTreeProps,
22+
} from './DirectoryTree';
1823

1924
Tree.TreeNode.name = 'ATreeNode';
2025
Tree.DirectoryTree = DirectoryTree;

‎components/tree/utils/iconUtil.tsx

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,41 +12,46 @@ export default function renderSwitcherIcon(
1212
prefixCls: string,
1313
switcherIcon: any,
1414
showLine: boolean | { showLeafIcon: boolean } | undefined,
15-
{ isLeaf, expanded, loading }: AntTreeNodeProps,
15+
props: AntTreeNodeProps,
1616
) {
17+
const { isLeaf, expanded, loading } = props;
18+
let icon = switcherIcon;
1719
if (loading) {
1820
return <LoadingOutlined class={`${prefixCls}-switcher-loading-icon`} />;
1921
}
20-
let showLeafIcon;
22+
let showLeafIcon: boolean;
2123
if (showLine && typeof showLine === 'object') {
2224
showLeafIcon = showLine.showLeafIcon;
2325
}
26+
let defaultIcon = null;
27+
const switcherCls = `${prefixCls}-switcher-icon`;
2428
if (isLeaf) {
2529
if (showLine) {
2630
if (typeof showLine === 'object' && !showLeafIcon) {
27-
return <span class={`${prefixCls}-switcher-leaf-line`} />;
31+
defaultIcon = <span class={`${prefixCls}-switcher-leaf-line`} />;
32+
} else {
33+
defaultIcon = <FileOutlined class={`${prefixCls}-switcher-line-icon`} />;
2834
}
29-
return <FileOutlined class={`${prefixCls}-switcher-line-icon`} />;
3035
}
31-
return null;
36+
return defaultIcon;
37+
} else {
38+
defaultIcon = <CaretDownFilled class={switcherCls} />;
39+
if (showLine) {
40+
defaultIcon = expanded ? (
41+
<MinusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
42+
) : (
43+
<PlusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
44+
);
45+
}
3246
}
33-
const switcherCls = `${prefixCls}-switcher-icon`;
34-
if (isValidElement(switcherIcon)) {
35-
return cloneVNode(switcherIcon, {
47+
48+
if (typeof switcherIcon === 'function') {
49+
icon = switcherIcon({ ...props, defaultIcon, switcherCls });
50+
} else if (isValidElement(icon)) {
51+
icon = cloneVNode(icon, {
3652
class: switcherCls,
3753
});
3854
}
3955

40-
if (switcherIcon) {
41-
return switcherIcon;
42-
}
43-
44-
if (showLine) {
45-
return expanded ? (
46-
<MinusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
47-
) : (
48-
<PlusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
49-
);
50-
}
51-
return <CaretDownFilled class={switcherCls} />;
56+
return icon || defaultIcon;
5257
}

‎components/vc-select/Selector/SingleSelector.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -101,15 +101,16 @@ const SingleSelector = defineComponent<SelectorProps>({
101101
// custom tree-select title by slot
102102
if (item && treeSelectContext.value.slots) {
103103
titleNode =
104-
item.label ||
105104
treeSelectContext.value.slots[item?.option?.data?.slots?.title] ||
106-
treeSelectContext.value.slots.title;
105+
treeSelectContext.value.slots.title ||
106+
item.label;
107107
if (typeof titleNode === 'function') {
108108
titleNode = titleNode(item.option?.data || {});
109-
} else if (treeSelectContext.value.slots.titleRender) {
110-
// 因历史 title 是覆盖逻辑，新增 titleRender，所有的 title 都走一遍 titleRender
111-
titleNode = treeSelectContext.value.slots.titleRender(item.option?.data || {});
112109
}
110+
// else if (treeSelectContext.value.slots.titleRender) {
111+
// // 因历史 title 是覆盖逻辑，新增 titleRender，所有的 title 都走一遍 titleRender
112+
// titleNode = treeSelectContext.value.slots.titleRender(item.option?.data || {});
113+
// }
113114
} else {
114115
titleNode = item?.label;
115116
}

‎components/vc-tree-select/utils/legacyUtil.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { filterEmpty } from '../../_util/props-util';
12
import type { VNodeChild } from 'vue';
23
import { camelize } from 'vue';
34
import { warning } from '../../vc-util/warning';
@@ -16,7 +17,7 @@ function isTreeSelectNode(node: any) {
1617
}
1718
export function convertChildrenToData(rootNodes: VNodeChild): DataNode[] {
1819
function dig(treeNodes: any[] = []): DataNode[] {
19-
return treeNodes.map(treeNode => {
20+
return filterEmpty(treeNodes).map(treeNode => {
2021
// Filter invalidate node
2122
if (!isTreeSelectNode(treeNode)) {
2223
warning(!treeNode, 'TreeSelect/TreeSelectNode can only accept TreeSelectNode as children.');

‎components/vc-tree/Tree.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ export default defineComponent({
245245
cleanDragState();
246246

247247
if (onDragend && !outsideTree) {
248-
onDragend({ event, node: node.eventData.value });
248+
onDragend({ event, node: node.eventData });
249249
}
250250

251251
dragNode = null;
@@ -267,17 +267,17 @@ export default defineComponent({
267267
y: event.clientY,
268268
};
269269

270-
const newExpandedKeys = arrDel(expandedKeys.value, eventKey.value);
270+
const newExpandedKeys = arrDel(expandedKeys.value, eventKey);
271271

272272
dragState.dragging = true;
273-
dragState.dragChildrenKeys = getDragChildrenKeys(eventKey.value, keyEntities.value);
273+
dragState.dragChildrenKeys = getDragChildrenKeys(eventKey, keyEntities.value);
274274
indent.value = listRef.value.getIndentWidth();
275275

276276
setExpandedKeys(newExpandedKeys);
277277
window.addEventListener('dragend', onWindowDragEnd);
278278

279279
if (onDragstart) {
280-
onDragstart({ event, node: eventData.value });
280+
onDragstart({ event, node: eventData });
281281
}
282282
};
283283

@@ -339,25 +339,25 @@ export default defineComponent({
339339
clearTimeout(delayedDragEnterLogic[key]);
340340
});
341341

342-
if (dragNode.eventKey.value !== node.eventKey.value) {
342+
if (dragNode.eventKey !== node.eventKey) {
343343
// hoist expand logic here
344344
// since if logic is on the bottom
345345
// it will be blocked by abstract dragover node check
346346
// => if you dragenter from top, you mouse will still be consider as in the top node
347-
delayedDragEnterLogic[node.pos.value] = window.setTimeout(() => {
347+
delayedDragEnterLogic[node.pos] = window.setTimeout(() => {
348348
if (!dragState.dragging) return;
349349

350350
let newExpandedKeys = [...expandedKeys.value];
351-
const entity = keyEntities.value[node.eventKey.value];
351+
const entity = keyEntities.value[node.eventKey];
352352

353353
if (entity && (entity.children || []).length) {
354-
newExpandedKeys = arrAdd(expandedKeys.value, node.eventKey.value);
354+
newExpandedKeys = arrAdd(expandedKeys.value, node.eventKey);
355355
}
356356
setExpandedKeys(newExpandedKeys);
357357

358358
if (onExpand) {
359359
onExpand(newExpandedKeys, {
360-
node: node.eventData.value,
360+
node: node.eventData,
361361
expanded: true,
362362
nativeEvent: event,
363363
});
@@ -366,7 +366,7 @@ export default defineComponent({
366366
}
367367

368368
// Skip if drag node is self
369-
if (dragNode.eventKey.value === dropTargetKey && dropLevelOffset === 0) {
369+
if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
370370
Object.assign(dragState, {
371371
dragOverNodeKey: null,
372372
dropPosition: null,
@@ -393,7 +393,7 @@ export default defineComponent({
393393
if (onDragenter) {
394394
onDragenter({
395395
event,
396-
node: node.eventData.value,
396+
node: node.eventData,
397397
expandedKeys: expandedKeys.value,
398398
});
399399
}
@@ -431,7 +431,7 @@ export default defineComponent({
431431

432432
// Update drag position
433433

434-
if (dragNode.eventKey.value === dropTargetKey && dropLevelOffset === 0) {
434+
if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
435435
if (
436436
!(
437437
dragState.dropPosition === null &&
@@ -476,15 +476,15 @@ export default defineComponent({
476476
}
477477

478478
if (onDragover) {
479-
onDragover({ event, node: node.eventData.value });
479+
onDragover({ event, node: node.eventData });
480480
}
481481
};
482482

483483
const onNodeDragLeave: NodeDragEventHandler = (event, node) => {
484484
const { onDragleave } = props;
485485

486486
if (onDragleave) {
487-
onDragleave({ event, node: node.eventData.value });
487+
onDragleave({ event, node: node.eventData });
488488
}
489489
};
490490
const onNodeDrop = (event: MouseEvent, _node, outsideTree = false) => {
@@ -517,8 +517,8 @@ export default defineComponent({
517517
const dropResult = {
518518
event,
519519
node: convertNodePropsToEventData(abstractDropNodeProps),
520-
dragNode: dragNode ? dragNode.eventData.value : null,
521-
dragNodesKeys: [dragNode.eventKey.value].concat(dragChildrenKeys),
520+
dragNode: dragNode ? dragNode.eventData : null,
521+
dragNodesKeys: [dragNode.eventKey].concat(dragChildrenKeys),
522522
dropToGap: dropPosition !== 0,
523523
dropPosition: dropPosition + Number(posArr[posArr.length - 1]),
524524
};

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy