feat: add story of open any file on disk

DTStack · Aug 4, 2021 · dc885c6 · dc885c6
1 parent 0033963
commit dc885c6
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 6 deletions.
diff --git a/src/model/workbench/menuBar.ts b/src/model/workbench/menuBar.ts
@@ -8,6 +8,7 @@ import {
     ACTION_QUICK_REDO,
     ACTION_QUICK_CREATE_FILE,
 } from 'mo/model/keybinding';
+
 /**
  * The activity bar event definition
  */
@@ -30,11 +31,7 @@ export interface IMenuBar {
     data?: IMenuBarItem[];
 }
 
-/**
- * menu preset action
- */
-export const MENU_FILE_CREATE = 'newFile';
-export const MENU_FILE_OPEN = 'openFile'; // default encoding with utf-8 ?
+export const MENU_FILE_OPEN = 'openFile';
 
 export const MENU_QUICK_COMMAND = 'editor.action.quickCommand';
 

diff --git a/stories/extensions/test/index.tsx b/stories/extensions/test/index.tsx
@@ -6,6 +6,7 @@ import {
     MENU_VIEW_STATUSBAR,
 } from 'mo/model/workbench/menuBar';
 import { FileTypes, IExtension, TreeNodeModel } from 'mo/model';
+import { MENU_FILE_OPEN } from 'mo/model/workbench/menuBar';
 
 import TestPane from './testPane';
 import { Entry } from './entry';
@@ -85,6 +86,58 @@ export const ExtendTestPane: IExtension = {
             }
         });
 
+        molecule.menuBar.onSelect((menuId: string) => {
+            const openFile = () => {
+                const input = document.createElement('input');
+                const getFile = (event: Event) => {
+                    const input = event.target as HTMLInputElement;
+                    const file = (input.files?.[0] || {
+                        arrayBuffer: Promise.resolve(null),
+                    }) as File;
+
+                    document.removeEventListener('click', getFile);
+                    document.getElementById('upload')?.remove();
+                    if (!file) return;
+                    file.arrayBuffer().then((res) => {
+                        if (!res) return;
+
+                        const decoder = new TextDecoder();
+                        const nameArr = file.name?.split('.') || [];
+                        const extName = nameArr[nameArr.length - 1] || '';
+                        /**
+                         * TODO: Also need to deal with the display of static resources such as pictures
+                         */
+                        const contentFile = {
+                            data: {
+                                value: decoder.decode(res),
+                                language: extName,
+                            },
+                            fileType: 'File',
+                            icon: 'file-code',
+                            id: file.lastModified.toString(),
+                            location: `molecule/${file.name}`,
+                            name: file.name,
+                        };
+
+                        molecule.editor.open(contentFile);
+                    });
+                };
+
+                input.type = 'file';
+                input.id = 'upload';
+                input.hidden = true;
+                input.addEventListener('change', getFile);
+                document.body.append(input);
+                input.click();
+            };
+
+            switch (menuId) {
+                case MENU_FILE_OPEN:
+                    openFile();
+                    break;
+            }
+        });
+
         molecule.folderTree.onCreate((type, nodeId) => {
             if (type === 'RootFolder') {
                 molecule.folderTree.add(
@@ -110,7 +163,6 @@ export const ExtendTestPane: IExtension = {
                 );
             }
         });
-
         molecule.search.onSearch((value) => {
             const children = new Array(5).fill(1).map((_, index) => ({
                 key: index.toFixed(),