Skip to content

Commit

Permalink
feat: delete service add
Browse files Browse the repository at this point in the history
delete service add
  • Loading branch information
zhangtengjin committed Dec 17, 2020
1 parent 3816eb5 commit 293d0ee
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 52 deletions.
88 changes: 53 additions & 35 deletions src/components/tree/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import { IMenuItem } from 'mo/components/menu';
import { Icon } from 'mo/components/icon';
import { Menu } from 'mo/components/menu';
import { useContextMenu } from 'mo/components/contextMenu';
import Modal from 'mo/components/dialog';
import { prefixClaName, classNames } from 'mo/common/className';
import { select } from 'mo/common/dom';
import './style.scss';

const confirm = Modal.confirm;
export function generateTreeId(id?: string): string {
return `mo_treeNode_${id}`;
}
Expand All @@ -32,9 +34,10 @@ export interface ITreeNodeItem {
export interface ITreeProps extends TreeProps {
data: ITreeNodeItem[];
onSelectFile?: (IMenuItem) => void;
newFileItem?: (fileData: ITreeNodeItem, type: FileType) => void;
newFileItem?: (fileData: ITreeNodeItem, type: FileType, callback: Function) => void;
updateFile?(fileData: ITreeNodeItem, newName: string, index: number): void;
reName?(fileData: ITreeNodeItem): void;
reName?(fileData: ITreeNodeItem, callback: Function): void;
deleteFile?(fileData: ITreeNodeItem): void;
onDropTree?(treeNode): void;
className?: string;
}
Expand All @@ -45,75 +48,87 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
newFileItem,
updateFile,
reName,
deleteFile,
onDropTree,
...others
} = props;
const [activeData, setActiveData] = useState<ITreeNodeItem>({});
const [expandedKeys, setExpandedKeys] = useState<any[]>([]);
const inputRef = useRef<any>(null);

const onFocus = () => {
setTimeout(() => {
if (inputRef.current) {
inputRef.current.focus();
}
})
}
const handleDelte = (activeData: ITreeNodeItem) => {
confirm({
title: `Are you sure you want to delete '${activeData?.name}' ?`,
content: 'This action is irreversible!',
onOk() {
deleteFile && deleteFile(activeData)
},
onCancel() {
},
});
}
const addExpandedKeys = (activeData: ITreeNodeItem) => {
const keys: any = [...expandedKeys]
keys.push(activeData?.id)
setExpandedKeys(keys);
}
const getContextMenuList = (type?: FileType) => {
let contextMenu: IMenuItem[] = [];
const commContextMenu = [
{
id: 'rename',
name: 'Rename',
onClick: (e, active) => {
reName && reName(activeData, onFocus);
},
},
{
id: 'delete',
name: 'Delete',
onClick: (e, active) => {
handleDelte(activeData)
}
}
]
if (type === FileTypes.FOLDER) {
contextMenu = [
{
id: 'newFile',
name: 'New File',
onClick: (e, active) => {
addExpandedKeys(activeData)
newFileItem &&
newFileItem(activeData, FileTypes.FILE as FileType);
onFocus();
newFileItem(activeData, FileTypes.FILE as FileType, onFocus);
},
},
{
id: 'newFolder',
name: 'New Folder',
onClick: (e, active) => {
addExpandedKeys(activeData)
newFileItem &&
newFileItem(
activeData,
FileTypes.FOLDER as FileType
FileTypes.FOLDER as FileType,
onFocus
);
onFocus();
},
},
{
id: 'rename',
name: 'Rename',
onClick: (e, active) => {
reName && reName(activeData);
onFocus();
},
},
{
id: 'delete',
name: 'Delete',
},
];
}
].concat(commContextMenu);
} else if (type === FileTypes.FILE) {
contextMenu = [
{
id: 'openToSide',
name: 'Open to the side',
},
{
id: 'rename',
name: 'Rename',
onClick: (e, active) => {
reName && reName(activeData);
onFocus();
},
},
{
id: 'delete',
name: 'Delete',
},
];
}
].concat(commContextMenu);
}
return contextMenu;
};
Expand Down Expand Up @@ -228,7 +243,6 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
</TreeNode>
);
});

return (
<div className={classNames(prefixClaName('tree'), className)}>
<div className={prefixClaName('tree', 'sidebar')}>
Expand All @@ -240,6 +254,10 @@ const TreeView: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
onRightClick={({ event, node }: any) => {
setActiveData(node.data);
}}
onExpand={(expandedKeys) => {
setExpandedKeys(expandedKeys)
}}
expandedKeys={expandedKeys}
onSelect={(selectedKeys, e: any) => {
const isFile = e.node.data.type === FileTypes.FILE;
const idModify = e.node.data.modify;
Expand Down
11 changes: 7 additions & 4 deletions src/extensions/explore/tree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,17 @@ const serviceProps = {
};
editorService.open(tabData, tabData.activeTab);
},
newFileItem: function (fileData: ITreeNodeItem, type: FileType) {
explorerService.newFileItem(fileData, type);
newFileItem: function (fileData: ITreeNodeItem, type: FileType, callback: Function) {
explorerService.newFileItem(fileData, type, callback);
},
updateFile: function (fileData, newName, index) {
explorerService.updateFile(fileData, newName, index);
},
reName: function (fileData) {
explorerService.reName(fileData);
reName: function (fileData, callback: Function) {
explorerService.reName(fileData, callback);
},
deleteFile: function (fileData) {
explorerService.deleteFile(fileData);
},
onDropTree: function (treeNode) {
explorerService.onDropTree(treeNode);
Expand Down
11 changes: 7 additions & 4 deletions src/model/workbench/explorer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,15 @@ export const findParentNodeId = (treeData, id) => {
/**
*
* @param tree tree Data
* @param id prevParentNode ID
* @param id currentNode ID
*/
export const getPrevParentNode = (tree, id) => {
export const getPrevParentNode = (tree, currentNodeId) => {
let prevParentNode = {};
const parentIds: string[] = findParentNodeId(tree, currentNodeId);
const prevPatentNodeId = parentIds.slice(-2)[0]; // prevParentNode Id
const loop = (data: any) => {
for (const item of data) {
if (item.id === id) {
if (item.id === prevPatentNodeId) {
prevParentNode = item;
}
if (item.children) {
Expand All @@ -52,6 +54,7 @@ export const getPrevParentNode = (tree, id) => {
loop(tree);
return prevParentNode;
};

/**
* 生成规则:
* id不能带 querySelector 非法字符(小数点、_、数字开头..)
Expand Down Expand Up @@ -99,7 +102,7 @@ export const getFileIconByName = (name: string): string => {
return icon;
};

export enum ExplorerEvent {}
export enum ExplorerEvent { }
export interface IPanelItem<T = any> extends IActionBarItem {
renderPanel?: (props) => React.ReactNode | JSX.Element;
toolbar?: T;
Expand Down
45 changes: 37 additions & 8 deletions src/services/workbench/explorerService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import {
IPanelItem,
getFileIconByName,
generateFileTemplate,
findParentNodeId,
getPrevParentNode,
} from 'mo/model/workbench/explorer';
import { ITreeNodeItem, FileType, FileTypes } from 'mo/components/tree';
export interface IExplorerService extends Component<IExpolorer> {
push(data: IPanelItem): void;
newFileItem(fileData: ITreeNodeItem, type: FileType): void;
newFileItem(fileData: ITreeNodeItem, type: FileType, callback: Function): void;
updateFile(fileData: ITreeNodeItem, newName: string, index: number): void;
reName(fileData: ITreeNodeItem): void;
reName(fileData: ITreeNodeItem, callback: Function): void;
deleteFile(fileData: ITreeNodeItem): void;
onDropTree(treeData: ITreeNodeItem[]): void;
}

Expand Down Expand Up @@ -51,7 +51,7 @@ export class ExplorerService
* @param fileData treeNode ite
* @param type new type
*/
public newFileItem(fileData: ITreeNodeItem, type: FileType) {
public newFileItem(fileData: ITreeNodeItem, type: FileType, callback: Function) {
const original = this.state.treeData;
const loop = (data: ITreeNodeItem[]) => {
for (const item of data) {
Expand Down Expand Up @@ -79,18 +79,17 @@ export class ExplorerService
original?.push(fileData);
}
}
if (callback) callback()
}

/**
* new file / new folder / Rename 最终都走这步
*/
public updateFile(fileData: ITreeNodeItem, newName: string, index: number) {
const original = this.state.treeData;
const parentIds: string[] = findParentNodeId(original, fileData.id);
const prevPatentNodeId = parentIds.slice(-2)[0]; // prevParentNode Id
const prevParentNode: ITreeNodeItem = getPrevParentNode(
original,
prevPatentNodeId
fileData.id
);
const update = (tree) => {
const rootNode = tree[0];
Expand Down Expand Up @@ -131,7 +130,7 @@ export class ExplorerService
update(original);
}

public reName(fileData: ITreeNodeItem) {
public reName(fileData: ITreeNodeItem, callback: Function) {
const original = this.state.treeData;
const updateName = (tree, id) => {
const rootNode = tree[0];
Expand All @@ -154,6 +153,36 @@ export class ExplorerService
return tree;
};
updateName(original, fileData.id);
if (callback) callback();
}

public deleteFile(fileData: ITreeNodeItem) {
const original = this.state.treeData;
const prevParentNode: ITreeNodeItem = getPrevParentNode(
original,
fileData.id
);
const curIndex = (prevParentNode.children || []).findIndex(item => item.id === fileData.id);
const deleteItem = (tree, id) => {
const rootNode = tree[0];
if (rootNode.id === id) {
return tree;
}
const loopNode = (file, id) => {
for (const item of file) {
if (item.id === id) {
prevParentNode.children?.splice(curIndex, 1);
return;
}
if (item.children) {
loopNode(item.children, id);
}
}
};
loopNode(tree[0]?.children, id);
return tree;
};
deleteItem(original, fileData.id);
}

public onDropTree = (treeData: ITreeNodeItem[]) => {
Expand Down
2 changes: 1 addition & 1 deletion stories/components/2-Collapse.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const Basic = () => {
<h2>简述</h2>
<p>Collapse 可以折叠/展开的内容区域。</p>
<h3>使用示例 尝试点击下方面板看看~</h3>
<Collapse data={[editorPanel, sampleFolderPanel]} />;
<Collapse data={[editorPanel, sampleFolderPanel]} />
</div>
);
};

0 comments on commit 293d0ee

Please sign in to comment.