Skip to content

Commit cd6fa5b

Browse files
zhangtengjinwewoor
zhangtengjin
authored and
wewoor
committed
fix: fix function params
fix function params
1 parent 2af86cd commit cd6fa5b

File tree

7 files changed

+105
-40
lines changed

7 files changed

+105
-40
lines changed

‎src/components/collapse/index.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface ICollapseProps<T = any> {
1919
}
2020

2121
interface IState {
22-
activePanelKey: React.Key | React.Key[];
22+
activePanelKeys: React.Key[];
2323
}
2424
const defaultCollapseClassName = prefixClaName('collapse');
2525
export const contentPaddingClassName = getBEMModifier(
@@ -28,15 +28,15 @@ export const contentPaddingClassName = getBEMModifier(
2828
);
2929

3030
const initState = {
31-
activePanelKey: '',
31+
activePanelKeys: [],
3232
};
3333
const Collapse: React.FunctionComponent<ICollapseProps> = (
3434
props: ICollapseProps
3535
) => {
3636
const [state, setState] = useState<IState>(initState);
3737
const { className, data = [], ...restProps } = props;
38-
const onChangeCallback = (key: React.Key | React.Key[]) => {
39-
setState((state: IState) => ({ ...state, activePanelKey: key }));
38+
const onChangeCallback = (key: React.Key[]) => {
39+
setState((state: IState) => ({ ...state, activePanelKeys: key }));
4040
};
4141
const onClick = (e, item) => {
4242
e.stopPropagation();
@@ -53,14 +53,13 @@ const Collapse: React.FunctionComponent<ICollapseProps> = (
5353
);
5454
}
5555
};
56-
const { activePanelKey } = state;
56+
const { activePanelKeys } = state;
5757
return (
5858
<div className={classNames(defaultCollapseClassName, className)}>
5959
<RcCollapse
6060
{...restProps}
61-
activeKey={activePanelKey}
62-
onChange={(activeKey: React.Key | React.Key[]) => {
63-
onChangeCallback(activeKey);
61+
onChange={(activeKeys: React.Key[]) => {
62+
onChangeCallback(activeKeys);
6463
}}
6564
expandIcon={({ isActive }: IExpandProps) => (
6665
<Icon type={isActive ? 'chevron-down' : 'chevron-right'} />
@@ -71,7 +70,7 @@ const Collapse: React.FunctionComponent<ICollapseProps> = (
7170
key={panel.id}
7271
header={panel.name}
7372
extra={
74-
activePanelKey === panel.id && (
73+
activePanelKeys?.includes(panel.id) && (
7574
<Toolbar
7675
key={panel.id}
7776
data={panel.toolbar}

‎src/components/tree/index.tsx

+17-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import { useState } from 'react';
23
import { memo } from 'react';
34
import RcTree, { TreeNode as RcTreeNode } from 'rc-tree';
45
import { DataNode, IconType, Key, EventDataNode } from 'rc-tree/lib/interface';
@@ -51,11 +52,11 @@ export interface ITreeProps {
5152
expandedKeys?: Key[];
5253
defaultCheckedKeys?: Key[];
5354
checkedKeys?:
54-
| Key[]
55-
| {
56-
checked: Key[];
57-
halfChecked: Key[];
58-
};
55+
| Key[]
56+
| {
57+
checked: Key[];
58+
halfChecked: Key[];
59+
};
5960
defaultSelectedKeys?: Key[];
6061
selectedKeys?: Key[];
6162
titleRender?: (node: DataNode) => React.ReactNode;
@@ -119,6 +120,7 @@ export interface ITreeProps {
119120

120121
data?: ITreeNodeItem[];
121122
onSelectFile?: (IMenuItem) => void;
123+
onSelectTree?: (id) => void;
122124
renderTitle?: (node, index) => React.ReactDOM | string;
123125
onDropTree?(treeNode): void;
124126
}
@@ -129,9 +131,16 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
129131
draggable,
130132
onDropTree,
131133
onRightClick,
134+
onSelectTree,
132135
renderTitle, // custom title
133136
...restProps
134137
} = props;
138+
const [expandedKeys, setExpandedKeys] = useState([]);
139+
const onExpand = (expandedKeys) => {
140+
console.log('onExpand', expandedKeys);
141+
setExpandedKeys(expandedKeys);
142+
};
143+
135144
const onDrop = (info) => {
136145
if (!draggable) return;
137146
console.log(info);
@@ -218,12 +227,15 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
218227
draggable={draggable}
219228
onDrop={onDrop}
220229
switcherIcon={<Icon type="chevron-right" />}
230+
expandedKeys={expandedKeys}
231+
onExpand={onExpand}
221232
onSelect={(selectedKeys, e: any) => {
222233
const { fileType, modify } = e.node.data;
223234
const isFile = fileType === FileTypes.file;
224235
if (isFile && !modify && props.onSelectFile) {
225236
props.onSelectFile(e.node.data);
226237
}
238+
onSelectTree?.(e.node?.data?.id);
227239
}}
228240
onRightClick={onRightClick}
229241
{...restProps}

‎src/controller/explorer/explorer.tsx

+15-1
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,17 @@ export class ExplorerController
100100
id: 'new_file',
101101
title: 'New File',
102102
iconName: 'codicon-new-file',
103-
onClick: () => {},
103+
onClick: (e) => {
104+
this.createFile(e, 'newFile');
105+
},
104106
},
105107
{
106108
id: 'new_folder',
107109
title: 'New Folder',
108110
iconName: 'codicon-new-folder',
111+
onClick: (e) => {
112+
this.createFile(e, 'newFolder');
113+
},
109114
},
110115
{
111116
id: 'refresh',
@@ -151,6 +156,15 @@ export class ExplorerController
151156
]);
152157
}
153158

159+
private createFile = (e, type) => {
160+
e.stopPropagation();
161+
const explorerState = explorerService.getState();
162+
const { data, current } = explorerState?.folderTree || {};
163+
// The current selected node id or the first root node
164+
const nodeId = current?.id || data?.[0]?.id;
165+
explorerService[type]?.(nodeId);
166+
};
167+
154168
public readonly onClick = (event: React.MouseEvent) => {
155169
// console.log('onClick:', panelService);
156170
};

‎src/controller/explorer/folderTree.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const confirm = Modal.confirm;
1111

1212
export interface IFolderTreeController {
1313
readonly onSelectFile?: (file: ITreeNodeItem) => void;
14+
readonly onSelectTree?: (id: number) => void;
1415
readonly onDropTree?: (treeNode: ITreeNodeItem[]) => void;
1516
readonly onClickContextMenu?: (
1617
e: React.MouseEvent,
@@ -50,6 +51,10 @@ export class FolderTreeController
5051
editorService.open(tabData);
5152
};
5253

54+
public onSelectTree = (id: number) => {
55+
explorerService.setActive(id);
56+
};
57+
5358
public readonly onDropTree = (treeNode: ITreeNodeItem[]) => {
5459
explorerService.onDropTree(treeNode);
5560
};

‎src/model/workbench/explorer.ts

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface IPanelItem<T = any> extends IActionBarItem {
1515
export interface IFolderTree {
1616
data?: ITreeNodeItem[];
1717
contextMenu?: IMenuItem[];
18+
current?: ITreeNodeItem | null;
1819
}
1920
export interface IExplorer {
2021
data?: IPanelItem[];
@@ -75,6 +76,7 @@ export class IExplorerModel implements IExplorer {
7576
public data: IPanelItem[] = [];
7677
public folderTree: IFolderTree = {
7778
contextMenu: commonContextMenu,
79+
current: null,
7880
data: [],
7981
};
8082
public headerToolBar: IActionBarItem[] = builtInHeaderToolbar;

‎src/services/workbench/explorerService.ts

+41-19
Original file line numberDiff line numberDiff line change
@@ -228,9 +228,10 @@ export interface IExplorerService extends Component<IExplorer> {
228228
getRootFolderByRootId(id: number): ITreeNodeItem | undefined;
229229
addRootFolder(folder?: ITreeNodeItem | ITreeNodeItem[]): void;
230230
removeRootFolder(id: number): void;
231+
setActive(id: number): void;
231232
updateFile(file: ITreeNodeItem, callback?: Function): void;
232233
newFile(id?: number, callback?: Function): void;
233-
newFolder(id: number, callback?: Function): void;
234+
newFolder(id?: number, callback?: Function): void;
234235
rename(id: number, callback?: Function): void;
235236
delete(id: number, callback?: Function): void;
236237
onDropTree(treeData: ITreeNodeItem[]): void;
@@ -319,6 +320,23 @@ export class ExplorerService
319320
};
320321
}
321322

323+
private createTargetNodeById(
324+
id: number,
325+
treeInstance,
326+
extra?: ITreeNodeItem
327+
) {
328+
const currentIndex = treeInstance.getIndex(id);
329+
// If the node type of the current id is a file, insert it at the parent node above it
330+
if (currentIndex?.node?.fileType === FileTypes.file) {
331+
treeInstance.prepend(
332+
new TreeNodeModel(extra),
333+
currentIndex?.parent
334+
);
335+
} else {
336+
treeInstance.append(new TreeNodeModel(extra), id);
337+
}
338+
}
339+
322340
public getRootFolderIndexByRootId(id: number): number | undefined {
323341
return this.state.folderTree?.data!.findIndex(
324342
(folder) => folder.id === id
@@ -365,6 +383,16 @@ export class ExplorerService
365383
});
366384
}
367385

386+
public setActive(id: number) {
387+
const { folderTree } = this.state;
388+
const { currentRootFolder } = this.getCurrentRootFolderAndIndex(id);
389+
const tree = new TreeView(currentRootFolder);
390+
const currentNode = tree.get(id);
391+
this.setState({
392+
folderTree: { ...folderTree, current: currentNode },
393+
});
394+
}
395+
368396
public updateFile(file, callback) {
369397
const { folderTree } = this.state;
370398
const { id, name, fileType } = file;
@@ -421,14 +449,14 @@ export class ExplorerService
421449
if (callback) callback();
422450
}
423451

424-
public newFile(parentId: number, callback?: Function) {
452+
public newFile(id: number, callback?: Function) {
425453
const { folderTree } = this.state;
426454
const cloneData: ITreeNodeItem[] = folderTree?.data || [];
427455
const { currentRootFolder, index } = this.getCurrentRootFolderAndIndex(
428-
parentId
456+
id
429457
);
430458
const tree = new TreeView(currentRootFolder);
431-
if (!parentId) {
459+
if (!id) {
432460
const tabData = {
433461
id: `${Math.random() * 10 + 1}`,
434462
name: `Untitled`,
@@ -438,33 +466,27 @@ export class ExplorerService
438466
};
439467
editorService.open(tabData);
440468
}
441-
tree.append(
442-
new TreeNodeModel({
443-
modify: true,
444-
}),
445-
parentId
446-
);
469+
this.createTargetNodeById(id, tree, {
470+
modify: true,
471+
});
447472
if (index > -1) cloneData[index] = tree.obj;
448473
this.setState({
449474
folderTree: { ...folderTree, data: cloneData },
450475
});
451476
if (callback) callback();
452477
}
453478

454-
public newFolder(parentId, callback: Function) {
479+
public newFolder(id, callback: Function) {
455480
const { folderTree } = this.state;
456481
const cloneData: ITreeNodeItem[] = folderTree?.data || [];
457482
const { currentRootFolder, index } = this.getCurrentRootFolderAndIndex(
458-
parentId
483+
id
459484
);
460485
const tree = new TreeView(currentRootFolder);
461-
tree.append(
462-
new TreeNodeModel({
463-
fileType: FileTypes.folder as FileType,
464-
modify: true,
465-
}),
466-
parentId
467-
);
486+
this.createTargetNodeById(id, tree, {
487+
fileType: FileTypes.folder as FileType,
488+
modify: true,
489+
});
468490
if (index > -1) cloneData[index] = tree.obj;
469491
this.setState({
470492
folderTree: { ...folderTree, data: cloneData },

‎src/style/theme/tree.scss

+17-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
@import 'mo/style/common';
22

33
// =============== Tree =============== //
4-
#{$tree} {
5-
.rc-tree-treenode {
4+
#{$rcTree} {
5+
.rc-tree-treenode:not(.rc-tree-treenode-selected) {
66
&:hover {
77
background-color: var(--list-hoverBackground);
88
color: var(--list-hoverForeground);
99
}
10-
11-
.draggable {
12-
color: var(--list-activeSelectionForeground);
13-
}
1410
}
1511

1612
.rc-tree-treenode.drag-over > .draggable {
@@ -31,4 +27,19 @@
3127
background-color: var(--list-activeSelectionBackground);
3228
color: var(--list-activeSelectionForeground);
3329
}
30+
31+
.rc-tree-treenode-selected {
32+
background: var(--button-background);
33+
34+
.rc-tree-node-content-wrapper {
35+
color: var(--list-activeSelectionForeground);
36+
}
37+
}
38+
39+
input {
40+
background-color: var(--list-activeSelectionBackground);
41+
border-width: 0;
42+
color: inherit;
43+
outline: 1px solid var(--button-background);
44+
}
3445
}

0 commit comments

Comments
 (0)