Skip to content

Commit 9545f76

Browse files
LuckyFBBLuckyFBB
committed
feat(catalogue): support title and icon, change CatalogueTree
1 parent 97b4259 commit 9545f76

File tree

12 files changed

+189
-145
lines changed

12 files changed

+189
-145
lines changed

‎src/catalogue/components/catalogue.tsx‎

Lines changed: 19 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react';
2-
import { Dropdown, DropdownProps, Form, Input, Spin } from 'antd';
3-
import { DataNode } from 'antd/lib/tree';
4-
import { BlockHeader, EllipsisText, Empty } from 'dt-react-component';
2+
import { Dropdown, DropdownProps, Form, Input } from 'antd';
3+
import { BlockHeader } from 'dt-react-component';
54
import { IBlockHeaderProps } from 'dt-react-component/blockHeader';
65

7-
import { InputStatus, ITreeNode, useTreeData } from '../useTreeData';
6+
import { InputMode, ITreeNode, useTreeData } from '../useTreeData';
87
import { CatalogIcon, DragIcon, EllipsisIcon } from './icon';
98
import CatalogueTree, { ICatalogueTree } from './tree';
109

@@ -29,36 +28,34 @@ const Catalogue = ({
2928
placeholder = '搜索目录名称',
3029
addonAfter,
3130
edit = true,
32-
loading = false,
3331
treeData,
3432
draggable,
3533
overlay,
3634
onChange,
3735
onSearch,
38-
onExpand,
3936
onSave,
4037
...rest
4138
}: ICatalogue) => {
4239
const [form] = Form.useForm();
4340

4441
const loopTree = (data: ITreeNode[]): ITreeNode[] => {
4542
return data?.map((item) => {
46-
const reset: ITreeNode = {
43+
const newItem = {
4744
...item,
4845
editable: item?.editable === undefined ? true : item?.editable,
4946
addable: item?.addable === undefined ? true : item?.addable,
5047
deletable: item?.deletable === undefined ? true : item?.deletable,
5148
};
5249
if (item.children) {
5350
return {
54-
...reset,
55-
title: renderTitle(reset),
51+
...newItem,
52+
title: renderTitle(newItem),
5653
children: loopTree(item.children),
5754
};
5855
}
5956
return {
60-
...reset,
61-
title: renderTitle(reset),
57+
...newItem,
58+
title: renderTitle(newItem),
6259
children: undefined,
6360
};
6461
});
@@ -89,33 +86,16 @@ const Catalogue = ({
8986
);
9087
};
9188

92-
const renderTree = () => {
93-
const treeDataWithTitle = loopTree(treeData);
94-
if (!treeDataWithTitle.length) return <Empty style={{ marginTop: 130 }} />;
95-
return (
96-
<div className="dt-catalogue__tree">
97-
<Spin spinning={loading}>
98-
<CatalogueTree
99-
treeData={loopTree(treeData)}
100-
draggable={draggable ? { icon: false } : false}
101-
onExpand={onExpand}
102-
{...rest}
103-
/>
104-
</Spin>
105-
</div>
106-
);
107-
};
108-
10989
const handleInputSubmit = (item: ITreeNode, value: string) => {
11090
if (!value) {
11191
return onChange?.(undefined, undefined);
11292
}
11393
// item 为当前编辑的数据，对于 Append 的情况需要传入父级的 key
114-
if (item.type === InputStatus.Append) {
94+
if (item.inputMode === InputMode.Append) {
11595
const findAppendParents = (data: ITreeNode[], item: ITreeNode): ITreeNode | null => {
11696
let result: ITreeNode | null = null;
11797
function traverse(node: ITreeNode, parent: ITreeNode | null): void {
118-
if (node.type === 'append' && node.key === item.key && parent) {
98+
if (node.inputMode === 'append' && node.key === item.key && parent) {
11999
result = parent;
120100
}
121101
if (Array.isArray(node.children)) {
@@ -128,7 +108,7 @@ const Catalogue = ({
128108
const parentItem = findAppendParents(treeData, item);
129109
return (
130110
parentItem &&
131-
onSave?.({ ...parentItem, type: InputStatus.Append }, value).then((msg) => {
111+
onSave?.({ ...parentItem, inputMode: InputMode.Append }, value).then((msg) => {
132112
form.setFields([{ name: 'catalog_input', errors: msg ? [msg] : [] }]);
133113
})
134114
);
@@ -138,7 +118,7 @@ const Catalogue = ({
138118
});
139119
};
140120

141-
const renderInput = (item: DataNode) => {
121+
const renderInput = (item: ITreeNode) => {
142122
return (
143123
<div className="tree__title--input">
144124
<Form form={form} preserve={false}>
@@ -163,16 +143,12 @@ const Catalogue = ({
163143
};
164144

165145
const renderTitle = (item: ITreeNode) => {
166-
if (item.type) {
146+
if (item.inputMode) {
167147
return renderInput(item);
168148
}
169149
return (
170150
<div className="tree__title">
171-
<EllipsisText
172-
value={item.title as React.ReactNode}
173-
maxWidth="100%"
174-
className="tree__title--text"
175-
/>
151+
<div className="tree__title--text">{item.title}</div>
176152
{edit && renderNodeHover(item)}
177153
</div>
178154
);
@@ -210,7 +186,11 @@ const Catalogue = ({
210186
{renderHeader()}
211187
{renderSearch()}
212188
</div>
213-
{renderTree()}
189+
<CatalogueTree
190+
treeData={loopTree(treeData)}
191+
draggable={draggable ? { icon: false } : false}
192+
{...rest}
193+
/>
214194
</div>
215195
);
216196
};

‎src/catalogue/components/tree.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
import React, { useMemo } from 'react';
2-
import { Tree, TreeProps } from 'antd';
2+
import { Spin, Tree, TreeProps } from 'antd';
3+
import { Empty } from 'dt-react-component';
34

45
import { ITreeNode } from '../useTreeData';
56
import { loopTree } from '../utils';
67
import { DownTriangleIcon } from './icon';
78

89
export interface ICatalogueTree
910
extends Omit<TreeProps, 'showLine' | 'switcherIcon' | 'showIcon' | 'treeData'> {
11+
loading?: boolean;
1012
treeData: ITreeNode[];
1113
}
1214

13-
const CatalogueTree = ({ treeData = [], onExpand, ...rest }: ICatalogueTree) => {
14-
const renderTreeData = useMemo(() => loopTree(treeData), [treeData]);
15+
const CatalogueTree = ({ treeData = [], loading = false, ...rest }: ICatalogueTree) => {
16+
const renderTreeData = useMemo(() => loopTree(treeData) || [], [treeData]);
1517

16-
const handleExpand: TreeProps['onExpand'] = (expandedKeys, info) => {
17-
onExpand?.(expandedKeys, info);
18-
};
18+
if (!renderTreeData.length) return <Empty style={{ marginTop: 130 }} />;
1919

2020
return (
21-
<Tree
22-
showLine={{ showLeafIcon: false }}
23-
switcherIcon={<DownTriangleIcon style={{ fontSize: 16 }} />}
24-
showIcon
25-
treeData={renderTreeData}
26-
onExpand={handleExpand}
27-
{...rest}
28-
/>
21+
<div className="dt-catalogue__tree">
22+
<Spin spinning={loading}>
23+
<Tree
24+
showLine={{ showLeafIcon: false }}
25+
switcherIcon={<DownTriangleIcon style={{ fontSize: 16 }} />}
26+
showIcon
27+
treeData={renderTreeData}
28+
{...rest}
29+
/>
30+
</Spin>
31+
</div>
2932
);
3033
};
3134

‎src/catalogue/demos/basic.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from 'react';
2-
import { Catalogue } from 'dt-react-component';
2+
import { Catalogue, EllipsisText } from 'dt-react-component';
33

44
import { useTreeData } from '../useTreeData';
55

@@ -9,7 +9,12 @@ const DEFAULT_DATA = [
99
key: '0-0',
1010
children: [
1111
{
12-
title: '0-0-0',
12+
title: (
13+
<EllipsisText
14+
value="长长长长长长长长长长长长长长长长长长长长长长长长Title"
15+
maxWidth="100%"
16+
/>
17+
),
1318
key: '0-0-0',
1419
children: [
1520
{ title: '0-0-0-0', key: '0-0-0-0' },

‎src/catalogue/demos/config.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { useEffect } from 'react';
22
import { Menu } from 'antd';
3-
import { TreeProps } from 'antd/lib/tree';
4-
import { Catalogue } from 'dt-react-component';
3+
import { Catalogue, EllipsisText } from 'dt-react-component';
54
import { cloneDeep } from 'lodash';
65
import shortid from 'shortid';
76

7+
import { ICatalogue } from '../components/catalogue';
88
import { DeleteIcon, EditIcon, PlusCircleIcon, PlusSquareIcon } from '../components/icon';
9-
import { InputStatus, ITreeNode, useTreeData } from '../useTreeData';
9+
import { InputMode, ITreeNode, useTreeData } from '../useTreeData';
1010

1111
const DEFAULT_DATA: ITreeNode[] = [
1212
{
@@ -15,10 +15,18 @@ const DEFAULT_DATA: ITreeNode[] = [
1515
key: '0-0',
1616
children: [
1717
{
18-
title: '0-0-0',
18+
title: (
19+
<EllipsisText
20+
value="长长长长长长长长长长长长长长长长长长长长长长长长Title"
21+
maxWidth="100%"
22+
/>
23+
),
1924
key: '0-0-0',
2025
children: [
21-
{ title: '0-0-0-0', key: '0-0-0-0' },
26+
{
27+
title: '0-0-0-0',
28+
key: '0-0-0-0',
29+
},
2230
{ title: '0-0-0-1', key: '0-0-0-1' },
2331
{ title: '0-0-0-2', key: '0-0-0-2' },
2432
],
@@ -73,7 +81,7 @@ export default () => {
7381

7482
const handleSave = async (data: ITreeNode, value: string) => {
7583
const newData = cloneDeep(treeData.data);
76-
if (data.type === InputStatus.Add) {
84+
if (data.inputMode === InputMode.Add) {
7785
newData.push({
7886
title: value,
7987
key: shortid(),
@@ -82,12 +90,12 @@ export default () => {
8290
treeData.initData(newData);
8391
return;
8492
}
85-
if (data.type === InputStatus.Append) {
93+
if (data.inputMode === InputMode.Append) {
8694
let node = findNodeByKey(newData, data.key);
8795
if (!node) return;
8896
if (node.children) {
8997
const newChildren = node.children
90-
.filter((item) => !item.type)
98+
.filter((item) => !item.inputMode)
9199
.concat({ title: value, key: shortid() });
92100
node.children = newChildren;
93101
} else {
@@ -107,7 +115,7 @@ export default () => {
107115
const node = findNodeByKey(newData, data.key);
108116
if (node) {
109117
node.title = value;
110-
node.type = undefined;
118+
node.inputMode = undefined;
111119
}
112120
treeData.initData(newData);
113121
};
@@ -132,7 +140,7 @@ export default () => {
132140
treeData.initData(newData);
133141
};
134142

135-
const handleDrop: TreeProps['onDrop'] = (info) => {
143+
const handleDrop: ICatalogue['onDrop'] = (info) => {
136144
const dropKey = info.node.key;
137145
const dragKey = info.dragNode.key;
138146
const dropPos = info.node.pos.split('-');
@@ -196,7 +204,7 @@ export default () => {
196204
addonAfter={
197205
<PlusSquareIcon
198206
style={{ cursor: 'pointer' }}
199-
onClick={() => treeData.onChange(undefined, InputStatus.Add)}
207+
onClick={() => treeData.onChange(undefined, InputMode.Add)}
200208
/>
201209
}
202210
title="标签目录"
@@ -212,7 +220,7 @@ export default () => {
212220
key="add"
213221
disabled={!item.addable}
214222
onClick={() =>
215-
item.addable && treeData.onChange(item, InputStatus.Append)
223+
item.addable && treeData.onChange(item, InputMode.Append)
216224
}
217225
>
218226
<PlusCircleIcon />
@@ -222,9 +230,7 @@ export default () => {
222230
key="edit"
223231
className="title__menu--item"
224232
disabled={!item.editable}
225-
onClick={() =>
226-
item.editable && treeData.onChange(item, InputStatus.Edit)
227-
}
233+
onClick={() => item.editable && treeData.onChange(item, InputMode.Edit)}
228234
>
229235
<EditIcon />
230236
<span>编辑</span>

0 commit comments

Comments
 (0)