@difizen/libro-jupyter 0.0.2-alpha.0 → 0.1.1

package/src/file/file-command.tsx

@@ -0,0 +1,325 @@
+import pathUtil from 'path';
+
+import { ReloadOutlined } from '@ant-design/icons';
+import type {
+  CommandRegistry,
+  MenuPath,
+  MenuRegistry,
+  ToolbarRegistry,
+} from '@difizen/mana-app';
+import { ViewManager } from '@difizen/mana-app';
+import {
+  CommandContribution,
+  FileStatNode,
+  FileTreeCommand,
+  inject,
+  MenuContribution,
+  ModalService,
+  OpenerService,
+  singleton,
+  ToolbarContribution,
+  URI,
+} from '@difizen/mana-app';
+import { message, Modal } from 'antd';
+
+import { FileCreateModal } from './file-create-modal.js';
+import { FileDirCreateModal } from './file-createdir-modal.js';
+import { FileRenameModal } from './file-rename-modal.js';
+import { JupyterFileService } from './file-service.js';
+import { FileView } from './file-view/index.js';
+import { copy2clipboard } from './utils.js';
+import './index.less';
+
+const FileCommands = {
+  OPEN_FILE: {
+    id: 'fileTree.command.openfile',
+    label: '打开',
+  },
+  COPY: {
+    id: 'fileTree.command.copy',
+    label: '复制',
+  },
+  PASTE: {
+    id: 'fileTree.command.paste',
+    label: '粘贴',
+  },
+  CUT: {
+    id: 'fileTree.command.cut',
+    label: '剪切',
+  },
+  RENAME: {
+    id: 'fileTree.command.rename',
+    label: '重命名',
+  },
+  COPY_PATH: {
+    id: 'fileTree.command.copyPath',
+    label: '复制路径',
+  },
+  COPY_RELATIVE_PATH: {
+    id: 'fileTree.command.copyRelativePath',
+    label: '复制相对路径',
+  },
+  CREATE_FILE: {
+    id: 'fileTree.command.createfile',
+    label: '新建文件',
+  },
+  CREATE_DIR: {
+    id: 'fileTree.command.createdir',
+    label: '新建文件夹',
+  },
+  REFRESH: {
+    id: 'fileTree.command.refresh',
+    label: '刷新',
+  },
+};
+export const FileTreeContextMenuPath: MenuPath = ['file-tree-context-menu'];
+
+@singleton({
+  contrib: [CommandContribution, MenuContribution, ToolbarContribution],
+})
+export class FileCommandContribution
+  implements CommandContribution, MenuContribution, ToolbarContribution
+{
+  protected viewManager: ViewManager;
+  @inject(JupyterFileService) fileService: JupyterFileService;
+  @inject(ModalService) modalService: ModalService;
+  @inject(OpenerService) protected openService: OpenerService;
+  fileView: FileView;
+  lastAction: 'COPY' | 'CUT';
+  lastActionNode: FileStatNode;
+
+  constructor(@inject(ViewManager) viewManager: ViewManager) {
+    this.viewManager = viewManager;
+    this.viewManager
+      .getOrCreateView(FileView)
+      .then((view) => {
+        this.fileView = view;
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }
+
+  registerMenus(menu: MenuRegistry) {
+    menu.registerMenuAction(FileTreeContextMenuPath, {
+      id: FileCommands.CREATE_FILE.id,
+      command: FileCommands.CREATE_FILE.id,
+      order: 'a',
+    });
+    menu.registerMenuAction(FileTreeContextMenuPath, {
+      id: FileCommands.CREATE_DIR.id,
+      command: FileCommands.CREATE_DIR.id,
+      order: 'a',
+    });
+    menu.registerMenuAction(FileTreeContextMenuPath, {
+      id: FileCommands.OPEN_FILE.id,
+      command: FileCommands.OPEN_FILE.id,
+      order: 'a',
+    });
+    menu.registerMenuAction(FileTreeContextMenuPath, {
+      id: FileCommands.COPY.id,
+      command: FileCommands.COPY.id,
+      order: 'b',
+    });
+    menu.registerMenuAction(FileTreeContextMenuPath, {
+      id: FileCommands.PASTE.id,
+      command: FileCommands.PASTE.id,
+      order: 'c',
+    });
+    menu.registerMenuAction(FileTreeContextMenuPath, {
+      id: FileCommands.CUT.id,
+      command: FileCommands.CUT.id,
+      order: 'd',
+    });
+    menu.registerMenuAction(FileTreeContextMenuPath, {
+      id: FileCommands.RENAME.id,
+      command: FileCommands.RENAME.id,
+      order: 'e',
+    });
+    menu.registerMenuAction(FileTreeContextMenuPath, {
+      id: FileCommands.COPY_PATH.id,
+      command: FileCommands.COPY_PATH.id,
+      order: 'g',
+    });
+    menu.registerMenuAction(FileTreeContextMenuPath, {
+      id: FileCommands.COPY_RELATIVE_PATH.id,
+      command: FileCommands.COPY_RELATIVE_PATH.id,
+      order: 'g',
+    });
+  }
+  registerCommands(command: CommandRegistry): void {
+    command.registerCommand(FileCommands.OPEN_FILE, {
+      execute: (node) => {
+        try {
+          if (node.fileStat.isFile) {
+            this.openService
+              .getOpener(node.uri)
+              .then((opener) => {
+                if (opener) {
+                  opener.open(node.uri, {
+                    viewOptions: {
+                      name: node.fileStat.name,
+                    },
+                  });
+                }
+                return;
+              })
+              .catch(() => {
+                throw Error();
+              });
+          }
+        } catch {
+          message.error('文件打开失败');
+        }
+      },
+      isVisible: (node) => {
+        return FileStatNode.is(node) && node.fileStat.isFile;
+      },
+    });
+    command.registerHandler(FileTreeCommand.REMOVE.id, {
+      execute: (node) => {
+        if (FileStatNode.is(node)) {
+          const filePath = node.uri.path.toString();
+          Modal.confirm({
+            width: 424,
+            title: '确认要删除这个文件/文件夹吗？',
+            content: `请确认是否删除文件 ${filePath} ，删除后将不可恢复，请谨慎操作。`,
+            wrapClassName: 'libro-remove-file-modal',
+            cancelText: '取消',
+            okText: '确定',
+            onOk: async () => {
+              try {
+                await this.fileService.delete(node.uri);
+              } catch {
+                message.error('删除文件失败!');
+              }
+              this.fileView.model.refresh();
+            },
+          });
+        }
+      },
+      isVisible: (node) => {
+        return FileStatNode.is(node);
+      },
+    });
+    command.registerCommand(FileCommands.COPY, {
+      execute: (node) => {
+        this.lastAction = 'COPY';
+        this.lastActionNode = node;
+      },
+      isVisible: (node) => {
+        return FileStatNode.is(node) && node.fileStat.isFile;
+      },
+    });
+    command.registerCommand(FileCommands.CUT, {
+      execute: (node) => {
+        this.lastAction = 'CUT';
+        this.lastActionNode = node;
+      },
+      isVisible: (node) => {
+        return FileStatNode.is(node) && node.fileStat.isFile;
+      },
+    });
+    command.registerCommand(FileCommands.PASTE, {
+      execute: async (data) => {
+        try {
+          if (FileStatNode.is(data)) {
+            const targetUri = data.fileStat.isDirectory ? data.uri : data.uri.parent;
+            await this.fileService.copy(this.lastActionNode.uri, targetUri);
+          } else if (data instanceof FileView) {
+            const targetPath = '/';
+            await this.fileService.copy(this.lastActionNode.uri, new URI(targetPath));
+          }
+          if (this.lastAction === 'CUT') {
+            await this.fileService.delete(this.lastActionNode.uri);
+          }
+          this.fileView.model.refresh();
+          return;
+        } catch {
+          message.error('粘贴失败!');
+        }
+      },
+      isVisible: () => {
+        return this.lastAction === 'CUT' || this.lastAction === 'COPY';
+      },
+    });
+    command.registerCommand(FileCommands.RENAME, {
+      execute: async (node) => {
+        this.modalService.openModal(FileRenameModal, {
+          resource: node.uri,
+          fileName: node.uri.path.base,
+        });
+      },
+      isVisible: (node) => {
+        return FileStatNode.is(node);
+      },
+    });
+    command.registerCommand(FileCommands.CREATE_FILE, {
+      execute: async (data) => {
+        let path = this.fileView.model.location?.path.toString() || '/';
+        if (FileStatNode.is(data)) {
+          path = data.fileStat.isDirectory
+            ? data.uri.path.toString()
+            : data.uri.path.dir.toString();
+        }
+        this.modalService.openModal(FileCreateModal, {
+          path,
+        });
+      },
+    });
+    command.registerCommand(FileCommands.CREATE_DIR, {
+      execute: async (data) => {
+        let path = this.fileView.model.location?.path.toString() || '/';
+        if (FileStatNode.is(data)) {
+          path = data.fileStat.isDirectory
+            ? data.uri.path.toString()
+            : data.uri.path.dir.toString();
+        }
+        this.modalService.openModal(FileDirCreateModal, {
+          path,
+        });
+      },
+    });
+
+    command.registerCommand(FileCommands.COPY_PATH, {
+      execute: async (data) => {
+        let path = this.fileView.model.location?.path.toString() || '/';
+        if (FileStatNode.is(data)) {
+          path = data.uri.path.toString();
+        }
+        copy2clipboard(path);
+      },
+    });
+
+    command.registerCommand(FileCommands.COPY_RELATIVE_PATH, {
+      execute: async (data) => {
+        let relative = '';
+        if (FileStatNode.is(data)) {
+          relative = pathUtil.relative('/', data.uri.path.toString());
+        }
+        copy2clipboard(relative);
+      },
+    });
+
+    command.registerCommand(FileCommands.REFRESH, {
+      execute: async (view) => {
+        if (view instanceof FileView) {
+          view.model.refresh();
+        }
+      },
+      isVisible: (view) => {
+        return view instanceof FileView;
+      },
+    });
+  }
+
+  registerToolbarItems(toolbarRegistry: ToolbarRegistry): void {
+    toolbarRegistry.registerItem({
+      id: FileCommands.REFRESH.id,
+      command: FileCommands.REFRESH.id,
+      icon: <ReloadOutlined />,
+      tooltip: '刷新',
+    });
+  }
+}

package/src/file/file-create-modal-contribution.ts

@@ -0,0 +1,10 @@
+import { ModalContribution, singleton } from '@difizen/mana-app';
+
+import { FileCreateModal } from './file-create-modal.js';
+
+@singleton({ contrib: ModalContribution })
+export class FileCreateModalContribution implements ModalContribution {
+  registerModal() {
+    return FileCreateModal;
+  }
+}

package/src/file/file-create-modal.tsx

@@ -0,0 +1,176 @@
+import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { URI, useInject, ViewManager } from '@difizen/mana-app';
+import { Col, Form, message, Row, Input, Modal } from 'antd';
+import type { InputRef } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import './index.less';
+
+import {
+  FileView,
+  JSONIcon,
+  JupyterFileService,
+  MoreIcon,
+  NotebookIcon,
+  PythonIcon,
+} from './index.js';
+
+export interface ModalItemType {
+  path: string;
+  fileType?: FileType;
+}
+
+type FileType = '.ipynb' | '.py' | '.json' | '.sql' | undefined;
+
+export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> = ({
+  visible,
+  close,
+  data,
+}: ModalItemProps<ModalItemType>) => {
+  const fileService = useInject(JupyterFileService);
+  const viewManager = useInject(ViewManager);
+  const [fileType, setFileType] = useState<FileType>(data.fileType);
+  const [fileView, setFileView] = useState<FileView>();
+  const inputRef = useRef<InputRef>(null);
+  const [form] = Form.useForm();
+
+  const onFinish = async (values: { fileName: string }) => {
+    await form.validateFields();
+    close();
+    try {
+      await fileService.newFile(values.fileName + fileType || '', new URI(data.path));
+      if (fileView) {
+        fileView.model.refresh();
+      }
+    } catch {
+      message.error('新建文件失败');
+    }
+  };
+
+  const validateFileName = async (rule: any, value: string, callback: any) => {
+    if (!value || !value.length) {
+      throw new Error('请输入文件名');
+    } else {
+      const targetURI = new URI(data.path + value + (fileType || ''));
+      const fileRes = await fileService.resolve(targetURI);
+      if (fileRes.isFile) {
+        throw new Error('文件名称已存在，请重新输入');
+      }
+    }
+  };
+
+  useEffect(() => {
+    viewManager
+      .getOrCreateView(FileView)
+      .then((view) => {
+        setFileView(view);
+        return;
+      })
+      .catch(() => {
+        //
+      });
+    inputRef.current?.focus();
+  });
+  return (
+    <Modal
+      title="新建文件"
+      open={visible}
+      onCancel={close}
+      width={788}
+      cancelText="取消"
+      okText="确定"
+      onOk={() => {
+        form.submit();
+      }}
+      keyboard={true}
+      wrapClassName="libro-create-file-modal"
+    >
+      <div className="libro-create-file-path-container">
+        <div className="libro-create-file-des">创建位置：</div>
+        <span className="libro-create-file-path">{data.path}</span>
+      </div>
+      <div className="libro-create-file-des">文件类型：</div>
+      <Row>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
+        >
+          <div
+            className={`libro-create-file-type ${
+              fileType === '.ipynb' ? 'active' : ''
+            }`}
+            onClick={() => {
+              setFileType('.ipynb');
+            }}
+          >
+            <NotebookIcon />
+            <span className="libro-create-file-type-text">Notebook</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
+        >
+          <div
+            className={`libro-create-file-type ${fileType === '.py' ? 'active' : ''}`}
+            onClick={() => {
+              setFileType('.py');
+            }}
+          >
+            <PythonIcon />
+            <span className="libro-create-file-type-text">Python</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
+        >
+          <div
+            className={`libro-create-file-type ${fileType === '.json' ? 'active' : ''}`}
+            onClick={() => {
+              setFileType('.json');
+            }}
+          >
+            <JSONIcon />
+            <span className="libro-create-file-type-text">JSON</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
+        >
+          <div
+            className={`libro-create-file-type ${
+              fileType === undefined ? 'active' : ''
+            }`}
+            onClick={() => {
+              setFileType(undefined);
+            }}
+          >
+            <MoreIcon />
+            <span className="libro-create-file-type-text">其他</span>
+          </div>
+        </Col>
+      </Row>
+      <Form
+        layout="vertical"
+        autoComplete="off"
+        form={form}
+        onFinish={onFinish}
+        className="libro-create-file-form"
+      >
+        <Form.Item
+          name="fileName"
+          label="文件名称"
+          rules={[{ required: true, validator: validateFileName }]}
+        >
+          <Input addonAfter={fileType || ''} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export const FileCreateModal: ModalItem<ModalItemType> = {
+  id: 'file.create.modal',
+  component: FileCreateModalComponent,
+};

package/src/file/file-createdir-modal-contribution.ts

@@ -0,0 +1,10 @@
+import { ModalContribution, singleton } from '@difizen/mana-app';
+
+import { FileDirCreateModal } from './file-createdir-modal.js';
+
+@singleton({ contrib: ModalContribution })
+export class FileCreateDirModalContribution implements ModalContribution {
+  registerModal() {
+    return FileDirCreateModal;
+  }
+}

package/src/file/file-createdir-modal.tsx

@@ -0,0 +1,108 @@
+import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
+import { URI } from '@difizen/mana-app';
+import { ViewManager } from '@difizen/mana-app';
+import { useInject } from '@difizen/mana-app';
+import { Form, message, Input, Modal } from 'antd';
+import type { InputRef } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+
+import { JupyterFileService } from './file-service.js';
+import { FileView } from './file-view/index.js';
+import './index.less';
+
+export interface FileDirCreateModalItemType {
+  path: string;
+}
+
+export const FileCreateDirModalComponent: React.FC<
+  ModalItemProps<FileDirCreateModalItemType>
+> = ({ visible, close, data }: ModalItemProps<FileDirCreateModalItemType>) => {
+  const fileService = useInject(JupyterFileService);
+  const viewManager = useInject(ViewManager);
+  const inputRef = useRef<InputRef>(null);
+  const [fileView, setFileView] = useState<FileView>();
+  const [form] = Form.useForm();
+
+  const onFinish = async (values: { dirName: string }) => {
+    await form.validateFields();
+    close();
+    try {
+      await fileService.newFileDir(values.dirName, new URI(data.path));
+      if (fileView) {
+        fileView.model.refresh();
+      }
+    } catch {
+      message.error('新建文件夹失败');
+    }
+  };
+
+  const validateDirName = async (rule: any, value: string, callback: any) => {
+    if (!value || !value.length) {
+      throw new Error('请输入文件夹名');
+    } else {
+      const targetURI = new URI(data.path + value);
+      const fileRes = await fileService.resolve(targetURI);
+      if (fileRes.isDirectory) {
+        throw new Error('文件夹名称已存在，请重新输入');
+      }
+    }
+  };
+
+  useEffect(() => {
+    viewManager
+      .getOrCreateView(FileView)
+      .then((view) => {
+        setFileView(view);
+        return;
+      })
+      .catch(() => {
+        //
+      });
+    inputRef.current?.focus();
+  });
+  return (
+    <Modal
+      title="新建文件夹"
+      open={visible}
+      onCancel={close}
+      cancelText="取消"
+      okText="确定"
+      onOk={() => {
+        form.submit();
+      }}
+      keyboard={true}
+      wrapClassName="libro-create-dir-modal"
+      width={524}
+    >
+      <div className="libro-create-file-des">创建位置：</div>
+      <span className="libro-create-file-path">{data.path}</span>
+      <Form
+        layout="vertical"
+        autoComplete="off"
+        form={form}
+        onFinish={onFinish}
+        className="libro-create-dir-file-form"
+      >
+        <Form.Item
+          name="dirName"
+          label="文件夹名称"
+          rules={[{ required: true, validator: validateDirName }]}
+        >
+          <Input
+            ref={inputRef}
+            onKeyDown={async (e) => {
+              if (e.keyCode === 13) {
+                form.submit();
+              }
+            }}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export const FileDirCreateModal: ModalItem<FileDirCreateModalItemType> = {
+  id: 'file.createdir.modal',
+  component: FileCreateDirModalComponent,
+};