Skip to content

Commit

Permalink
fix: fix function params
Browse files Browse the repository at this point in the history
fix function params
  • Loading branch information
zhangtengjin authored and wewoor committed Mar 11, 2021
1 parent 2af86cd commit cd6fa5b
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 40 deletions.
17 changes: 8 additions & 9 deletions src/components/collapse/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export interface ICollapseProps<T = any> {
}

interface IState {
activePanelKey: React.Key | React.Key[];
activePanelKeys: React.Key[];
}
const defaultCollapseClassName = prefixClaName('collapse');
export const contentPaddingClassName = getBEMModifier(
Expand All @@ -28,15 +28,15 @@ export const contentPaddingClassName = getBEMModifier(
);

const initState = {
activePanelKey: '',
activePanelKeys: [],
};
const Collapse: React.FunctionComponent<ICollapseProps> = (
props: ICollapseProps
) => {
const [state, setState] = useState<IState>(initState);
const { className, data = [], ...restProps } = props;
const onChangeCallback = (key: React.Key | React.Key[]) => {
setState((state: IState) => ({ ...state, activePanelKey: key }));
const onChangeCallback = (key: React.Key[]) => {
setState((state: IState) => ({ ...state, activePanelKeys: key }));
};
const onClick = (e, item) => {
e.stopPropagation();
Expand All @@ -53,14 +53,13 @@ const Collapse: React.FunctionComponent<ICollapseProps> = (
);
}
};
const { activePanelKey } = state;
const { activePanelKeys } = state;
return (
<div className={classNames(defaultCollapseClassName, className)}>
<RcCollapse
{...restProps}
activeKey={activePanelKey}
onChange={(activeKey: React.Key | React.Key[]) => {
onChangeCallback(activeKey);
onChange={(activeKeys: React.Key[]) => {
onChangeCallback(activeKeys);
}}
expandIcon={({ isActive }: IExpandProps) => (
<Icon type={isActive ? 'chevron-down' : 'chevron-right'} />
Expand All @@ -71,7 +70,7 @@ const Collapse: React.FunctionComponent<ICollapseProps> = (
key={panel.id}
header={panel.name}
extra={
activePanelKey === panel.id && (
activePanelKeys?.includes(panel.id) && (
<Toolbar
key={panel.id}
data={panel.toolbar}
Expand Down
22 changes: 17 additions & 5 deletions src/components/tree/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import { useState } from 'react';
import { memo } from 'react';
import RcTree, { TreeNode as RcTreeNode } from 'rc-tree';
import { DataNode, IconType, Key, EventDataNode } from 'rc-tree/lib/interface';
Expand Down Expand Up @@ -51,11 +52,11 @@ export interface ITreeProps {
expandedKeys?: Key[];
defaultCheckedKeys?: Key[];
checkedKeys?:
| Key[]
| {
checked: Key[];
halfChecked: Key[];
};
| Key[]
| {
checked: Key[];
halfChecked: Key[];
};
defaultSelectedKeys?: Key[];
selectedKeys?: Key[];
titleRender?: (node: DataNode) => React.ReactNode;
Expand Down Expand Up @@ -119,6 +120,7 @@ export interface ITreeProps {

data?: ITreeNodeItem[];
onSelectFile?: (IMenuItem) => void;
onSelectTree?: (id) => void;
renderTitle?: (node, index) => React.ReactDOM | string;
onDropTree?(treeNode): void;
}
Expand All @@ -129,9 +131,16 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
draggable,
onDropTree,
onRightClick,
onSelectTree,
renderTitle, // custom title
...restProps
} = props;
const [expandedKeys, setExpandedKeys] = useState([]);
const onExpand = (expandedKeys) => {
console.log('onExpand', expandedKeys);
setExpandedKeys(expandedKeys);
};

const onDrop = (info) => {
if (!draggable) return;
console.log(info);
Expand Down Expand Up @@ -218,12 +227,15 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
draggable={draggable}
onDrop={onDrop}
switcherIcon={<Icon type="chevron-right" />}
expandedKeys={expandedKeys}
onExpand={onExpand}
onSelect={(selectedKeys, e: any) => {
const { fileType, modify } = e.node.data;
const isFile = fileType === FileTypes.file;
if (isFile && !modify && props.onSelectFile) {
props.onSelectFile(e.node.data);
}
onSelectTree?.(e.node?.data?.id);
}}
onRightClick={onRightClick}
{...restProps}
Expand Down
16 changes: 15 additions & 1 deletion src/controller/explorer/explorer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,17 @@ export class ExplorerController
id: 'new_file',
title: 'New File',
iconName: 'codicon-new-file',
onClick: () => {},
onClick: (e) => {
this.createFile(e, 'newFile');
},
},
{
id: 'new_folder',
title: 'New Folder',
iconName: 'codicon-new-folder',
onClick: (e) => {
this.createFile(e, 'newFolder');
},
},
{
id: 'refresh',
Expand Down Expand Up @@ -151,6 +156,15 @@ export class ExplorerController
]);
}

private createFile = (e, type) => {
e.stopPropagation();
const explorerState = explorerService.getState();
const { data, current } = explorerState?.folderTree || {};
// The current selected node id or the first root node
const nodeId = current?.id || data?.[0]?.id;
explorerService[type]?.(nodeId);
};

public readonly onClick = (event: React.MouseEvent) => {
// console.log('onClick:', panelService);
};
Expand Down
5 changes: 5 additions & 0 deletions src/controller/explorer/folderTree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const confirm = Modal.confirm;

export interface IFolderTreeController {
readonly onSelectFile?: (file: ITreeNodeItem) => void;
readonly onSelectTree?: (id: number) => void;
readonly onDropTree?: (treeNode: ITreeNodeItem[]) => void;
readonly onClickContextMenu?: (
e: React.MouseEvent,
Expand Down Expand Up @@ -50,6 +51,10 @@ export class FolderTreeController
editorService.open(tabData);
};

public onSelectTree = (id: number) => {
explorerService.setActive(id);
};

public readonly onDropTree = (treeNode: ITreeNodeItem[]) => {
explorerService.onDropTree(treeNode);
};
Expand Down
2 changes: 2 additions & 0 deletions src/model/workbench/explorer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface IPanelItem<T = any> extends IActionBarItem {
export interface IFolderTree {
data?: ITreeNodeItem[];
contextMenu?: IMenuItem[];
current?: ITreeNodeItem | null;
}
export interface IExplorer {
data?: IPanelItem[];
Expand Down Expand Up @@ -75,6 +76,7 @@ export class IExplorerModel implements IExplorer {
public data: IPanelItem[] = [];
public folderTree: IFolderTree = {
contextMenu: commonContextMenu,
current: null,
data: [],
};
public headerToolBar: IActionBarItem[] = builtInHeaderToolbar;
Expand Down
60 changes: 41 additions & 19 deletions src/services/workbench/explorerService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -228,9 +228,10 @@ export interface IExplorerService extends Component<IExplorer> {
getRootFolderByRootId(id: number): ITreeNodeItem | undefined;
addRootFolder(folder?: ITreeNodeItem | ITreeNodeItem[]): void;
removeRootFolder(id: number): void;
setActive(id: number): void;
updateFile(file: ITreeNodeItem, callback?: Function): void;
newFile(id?: number, callback?: Function): void;
newFolder(id: number, callback?: Function): void;
newFolder(id?: number, callback?: Function): void;
rename(id: number, callback?: Function): void;
delete(id: number, callback?: Function): void;
onDropTree(treeData: ITreeNodeItem[]): void;
Expand Down Expand Up @@ -319,6 +320,23 @@ export class ExplorerService
};
}

private createTargetNodeById(
id: number,
treeInstance,
extra?: ITreeNodeItem
) {
const currentIndex = treeInstance.getIndex(id);
// If the node type of the current id is a file, insert it at the parent node above it
if (currentIndex?.node?.fileType === FileTypes.file) {
treeInstance.prepend(
new TreeNodeModel(extra),
currentIndex?.parent
);
} else {
treeInstance.append(new TreeNodeModel(extra), id);
}
}

public getRootFolderIndexByRootId(id: number): number | undefined {
return this.state.folderTree?.data!.findIndex(
(folder) => folder.id === id
Expand Down Expand Up @@ -365,6 +383,16 @@ export class ExplorerService
});
}

public setActive(id: number) {
const { folderTree } = this.state;
const { currentRootFolder } = this.getCurrentRootFolderAndIndex(id);
const tree = new TreeView(currentRootFolder);
const currentNode = tree.get(id);
this.setState({
folderTree: { ...folderTree, current: currentNode },
});
}

public updateFile(file, callback) {
const { folderTree } = this.state;
const { id, name, fileType } = file;
Expand Down Expand Up @@ -421,14 +449,14 @@ export class ExplorerService
if (callback) callback();
}

public newFile(parentId: number, callback?: Function) {
public newFile(id: number, callback?: Function) {
const { folderTree } = this.state;
const cloneData: ITreeNodeItem[] = folderTree?.data || [];
const { currentRootFolder, index } = this.getCurrentRootFolderAndIndex(
parentId
id
);
const tree = new TreeView(currentRootFolder);
if (!parentId) {
if (!id) {
const tabData = {
id: `${Math.random() * 10 + 1}`,
name: `Untitled`,
Expand All @@ -438,33 +466,27 @@ export class ExplorerService
};
editorService.open(tabData);
}
tree.append(
new TreeNodeModel({
modify: true,
}),
parentId
);
this.createTargetNodeById(id, tree, {
modify: true,
});
if (index > -1) cloneData[index] = tree.obj;
this.setState({
folderTree: { ...folderTree, data: cloneData },
});
if (callback) callback();
}

public newFolder(parentId, callback: Function) {
public newFolder(id, callback: Function) {
const { folderTree } = this.state;
const cloneData: ITreeNodeItem[] = folderTree?.data || [];
const { currentRootFolder, index } = this.getCurrentRootFolderAndIndex(
parentId
id
);
const tree = new TreeView(currentRootFolder);
tree.append(
new TreeNodeModel({
fileType: FileTypes.folder as FileType,
modify: true,
}),
parentId
);
this.createTargetNodeById(id, tree, {
fileType: FileTypes.folder as FileType,
modify: true,
});
if (index > -1) cloneData[index] = tree.obj;
this.setState({
folderTree: { ...folderTree, data: cloneData },
Expand Down
23 changes: 17 additions & 6 deletions src/style/theme/tree.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
@import 'mo/style/common';

// =============== Tree =============== //
#{$tree} {
.rc-tree-treenode {
#{$rcTree} {
.rc-tree-treenode:not(.rc-tree-treenode-selected) {
&:hover {
background-color: var(--list-hoverBackground);
color: var(--list-hoverForeground);
}

.draggable {
color: var(--list-activeSelectionForeground);
}
}

.rc-tree-treenode.drag-over > .draggable {
Expand All @@ -31,4 +27,19 @@
background-color: var(--list-activeSelectionBackground);
color: var(--list-activeSelectionForeground);
}

.rc-tree-treenode-selected {
background: var(--button-background);

.rc-tree-node-content-wrapper {
color: var(--list-activeSelectionForeground);
}
}

input {
background-color: var(--list-activeSelectionBackground);
border-width: 0;
color: inherit;
outline: 1px solid var(--button-background);
}
}

0 comments on commit cd6fa5b

Please sign in to comment.