Skip to content

Commit 93bd10e

Browse files
zhangtengjinzhangtengjin
committed
feat: some service add
some service add
1 parent c139ce0 commit 93bd10e

File tree

8 files changed

+359
-54
lines changed

8 files changed

+359
-54
lines changed

‎src/components/collapse/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Collapse: React.FunctionComponent<ICollapseProps> = (
3838
if (render) {
3939
return render();
4040
} else {
41-
return 'Cannot provide...';
41+
return <span className='content-box__padding'>Cannot provide...</span>
4242
}
4343
};
4444
const { activePanelKey } = state;

‎src/components/collapse/style.scss

+7-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ $collapse: 'collapse';
88
#{prefix($collapse)} {
99
font-size: 13px;
1010

11+
.content-box__padding {
12+
padding: 10px;
13+
}
14+
1115
.rc-collapse {
1216
background-color: inherit;
1317
}
@@ -55,9 +59,9 @@ $collapse: 'collapse';
5559
}
5660

5761
.rc-collapse
58-
> .rc-collapse-item
59-
.rc-collapse-header-collapsable-only
60-
.rc-collapse-header-text {
62+
> .rc-collapse-item
63+
.rc-collapse-header-collapsable-only
64+
.rc-collapse-header-text {
6165
cursor: pointer;
6266
}
6367

‎src/components/tree/index.tsx

+56-28
Original file line numberDiff line numberDiff line change
@@ -16,46 +16,62 @@ export function getElementByCustomAttr(id: string): HTMLElementType {
1616
export function generateTreeId(id?: string): string {
1717
return `mo_treeNode_${id}`;
1818
}
19+
export const FileTypes = {
20+
FILE: 'file',
21+
FOLDER: 'folder'
22+
}
23+
export type FileType = 'file' | 'folder';
1924

2025
export interface ITreeNodeItem {
21-
key?: string | number;
22-
title?: React.ReactNode | string;
2326
name?: string;
24-
type?: 'folder' | 'file';
25-
contextMenu?: IMenuItem[];
27+
type?: FileType;
28+
contextMenu?: IMenuItem[]; // custom contextMenu
2629
children?: ITreeNodeItem[];
2730
readonly id?: string;
2831
icon?: string | React.ReactNode;
32+
modify?: boolean; // Edit status
2933
className?: string;
3034
}
3135
export interface ITreeProps extends TreeProps {
3236
data: ITreeNodeItem[];
3337
onSelectFile?: (IMenuItem) => void;
38+
newFileItem?: (fileData: ITreeNodeItem, type: FileType) => void;
39+
updateFile?(fileData: ITreeNodeItem, newName: string, index: number): void;
40+
reName?(fileData: ITreeNodeItem): void;
41+
onDropTree?(treeNode): void;
3442
className?: string;
3543
}
3644
const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
37-
const { className, data, ...others } = props;
38-
const [treeData, setTreeData] = useState<ITreeNodeItem[]>(data);
45+
const { className, data,
46+
newFileItem, updateFile, reName,
47+
onDropTree,
48+
...others } = props;
3949
const [activeData, setActiveData] = useState<ITreeNodeItem>({});
40-
41-
const getContextMenuList = (type?: 'folder' | 'file') => {
50+
// const [value, setValue] = useState<string>('')
51+
const getContextMenuList = (type?: FileType) => {
4252
let contextMenu: IMenuItem[] = [];
4353
if (type === 'folder') {
4454
contextMenu = [
4555
{
4656
id: 'newFile',
4757
name: 'New File',
4858
onClick: (e, active) => {
49-
console.log('New File Click', active);
59+
newFileItem && newFileItem(activeData, FileTypes.FILE as FileType)
5060
},
5161
},
5262
{
5363
id: 'newFolder',
5464
name: 'New Folder',
65+
onClick: (e, active) => {
66+
newFileItem && newFileItem(activeData, FileTypes.FOLDER as FileType)
67+
},
5568
},
5669
{
5770
id: 'rename',
5871
name: 'Rename',
72+
onClick: (e, active) => {
73+
reName && reName(activeData)
74+
},
5975
},
6076
{
6177
id: 'delete',
@@ -71,6 +87,9 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
7187
{
7288
id: 'rename',
7389
name: 'Rename',
90+
onClick: (e, active) => {
91+
reName && reName(activeData)
92+
},
7493
},
7594
{
7695
id: 'delete',
@@ -93,7 +112,6 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
93112
});
94113
}
95114
return function cleanup() {
96-
console.log('cleanup');
97115
contextViewMenu?.dispose();
98116
};
99117
}, [data, activeData]);
@@ -116,16 +134,16 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
116134
}
117135
});
118136
};
119-
const data = [...treeData];
137+
const treeData = [...data];
120138

121139
let dragObj;
122-
loopTree(data, dragKey, (item, index, arr) => {
140+
loopTree(treeData, dragKey, (item, index, arr) => {
123141
arr.splice(index, 1);
124142
dragObj = item;
125143
});
126144

127145
if (!info.dropToGap) {
128-
loopTree(data, dropKey, (item) => {
146+
loopTree(treeData, dropKey, (item) => {
129147
item.children = item.children || [];
130148
item.children.push(dragObj);
131149
});
@@ -134,14 +152,14 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
134152
info.node.props.expanded &&
135153
dropPosition === 1
136154
) {
137-
loopTree(data, dropKey, (item) => {
155+
loopTree(treeData, dropKey, (item) => {
138156
item.children = item.children || [];
139157
item.children.unshift(dragObj);
140158
});
141159
} else {
142160
let ar;
143161
let i;
144-
loopTree(data, dropKey, (item, index, arr) => {
162+
loopTree(treeData, dropKey, (item, index, arr) => {
145163
ar = arr;
146164
i = index;
147165
});
@@ -151,24 +169,34 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
151169
ar.splice(i + 1, 0, dragObj);
152170
}
153171
}
154-
console.log('data', data);
155-
setTreeData(data);
172+
console.log('treeData', treeData);
173+
onDropTree && onDropTree(treeData)
156174
};
157-
158175
const renderTreeNodes = (data) =>
159-
data?.map((item) => {
176+
data?.map((item, index) => {
177+
const {
178+
modify, name, id, icon, children
179+
} = item;
160180
return (
161181
<TreeNode
162-
data-id={generateTreeId(item.id)}
182+
data-id={generateTreeId(id)}
163183
data={item}
164-
title={item.name}
165-
key={item.key}
166-
icon={<Icon type={item.icon} />}
184+
title={modify ? <input
185+
autoComplete='off'
186+
onBlur={(e) => {
187+
updateFile && updateFile(item, e.target.value, index)
188+
}}
189+
onChange={(e) => {
190+
}}
191+
/> : name}
192+
key={id}
193+
icon={modify ? '' : <Icon type={icon} />}
167194
>
168-
{item.children && renderTreeNodes(item.children)}
195+
{children && renderTreeNodes(children)}
169196
</TreeNode>
170197
);
171198
});
199+
172200
return (
173201
<div className={classNames(prefixClaName('tree'), className)}>
174202
<div className={prefixClaName('tree', 'sidebar')}>
@@ -181,14 +209,14 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
181209
setActiveData(node.data);
182210
}}
183211
onSelect={(selectedKeys, e: any) => {
184-
console.log('select', selectedKeys, e);
185-
const isFile = e.node.data.type === 'file';
186-
if (isFile && props.onSelectFile) {
212+
const isFile = e.node.data.type === FileTypes.FILE;
213+
const idModify = e.node.data.modify;
214+
if (isFile && !idModify && props.onSelectFile) {
187215
props.onSelectFile(e.node.data);
188216
}
189217
}}
190218
>
191-
{renderTreeNodes(treeData)}
219+
{renderTreeNodes(data)}
192220
</Tree>
193221
</div>
194222
</div>

‎src/extensions/explore/index.tsx

+25-5
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,17 @@ import {
55
sidebarService,
66
explorerService,
77
} from 'mo';
8-
8+
import { Button } from 'mo/components/button'
99
import { ExplorerView } from './explore';
1010
import TreeView from './tree';
1111
import { ExtensionService } from 'mo/services/extensionService';
1212
import { IExtension } from 'mo/model/extension';
13-
import { data } from './treeMock';
13+
import { FileTypes, FileType } from 'mo/components/tree'
1414

1515
function init(extensionCtx: ExtensionService) {
1616
const state = activityBarService.getState();
1717
const sideBarState = sidebarService.getState();
18-
18+
const explorerState = explorerService.getState();
1919
const exploreActiveItem = {
2020
id: 'active-explorer',
2121
name: 'Explore',
@@ -76,7 +76,7 @@ function init(extensionCtx: ExtensionService) {
7676
},
7777
],
7878
renderPanel: () => {
79-
return <span>editors</span>;
79+
return <span className='content-box__padding'>editors</span>;
8080
},
8181
};
8282
const sampleFolderPanel = {
@@ -87,6 +87,8 @@ function init(extensionCtx: ExtensionService) {
8787
id: 'new_file',
8888
title: 'New File',
8989
iconName: 'codicon-new-file',
90+
onClick: () => {
91+
}
9092
},
9193
{
9294
id: 'new_folder',
@@ -105,7 +107,24 @@ function init(extensionCtx: ExtensionService) {
105107
},
106108
],
107109
renderPanel: () => {
108-
return <TreeView data={data} />;
110+
return <>
111+
{
112+
explorerState.treeData?.length ?
113+
<TreeView prefixCls="rc-tree" data={explorerState.treeData} /> :
114+
<span className='content-box__padding'>
115+
you have not yet opened a folder
116+
<Button onClick={() => {
117+
// test service
118+
explorerService.newFileItem({
119+
id: '1',
120+
name: '',
121+
type: 'folder',
122+
modify: true
123+
}, FileTypes.FOLDER as FileType);
124+
}}>New Folder</Button>
125+
</span>
126+
}
127+
</>;
109128
},
110129
};
111130
const outlinePanel = {
@@ -127,6 +146,7 @@ function init(extensionCtx: ExtensionService) {
127146
explorerService.push(editorPanel);
128147
explorerService.push(sampleFolderPanel);
129148
explorerService.push(outlinePanel);
149+
130150
}
131151

132152
export const ExtendExplore: IExtension = {

‎src/extensions/explore/tree.tsx

+29-12
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,35 @@
11
import * as React from 'react';
22
import { memo } from 'react';
3-
import { editorService } from 'mo';
4-
import Tree from 'mo/components/tree';
3+
import { editorService, explorerService } from 'mo';
4+
import Tree, { ITreeNodeItem, FileType, ITreeProps } from 'mo/components/tree';
55

6-
const onSelectFile = function (fileData) {
7-
const tabData = {
8-
...fileData,
9-
activeTab: fileData.id,
10-
modified: false,
11-
};
12-
editorService.open(tabData, tabData.activeTab);
13-
};
14-
const TreeView: React.FunctionComponent<any> = (props: any) => {
6+
const serviceProps = {
7+
onSelectFile: function (fileData) {
8+
const tabData = {
9+
...fileData,
10+
activeTab: fileData.id,
11+
modified: false,
12+
};
13+
editorService.open(tabData, tabData.activeTab);
14+
},
15+
newFileItem: function (fileData: ITreeNodeItem, type: FileType) {
16+
explorerService.newFileItem(fileData, type);
17+
},
18+
updateFile: function (fileData, newName, index) {
19+
explorerService.updateFile(fileData, newName, index);
20+
},
21+
reName: function (fileData) {
22+
explorerService.reName(fileData);
23+
},
24+
onDropTree: function (treeNode) {
25+
explorerService.onDropTree(treeNode);
26+
}
27+
}
28+
const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
1529
const { data } = props;
16-
return <Tree prefixCls="rc-tree" data={data} onSelectFile={onSelectFile} />;
30+
return <Tree prefixCls="rc-tree"
31+
data={data}
32+
{...serviceProps}
33+
/>;
1734
};
1835
export default memo(TreeView);

0 commit comments

Comments
 (0)