@difizen/libro-jupyter 0.1.0 → 0.1.1

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

@@ -1,11 +1,12 @@
-import type { ModalItem, ModalItemProps, URI } from '@difizen/mana-app';
 import { useInject, ViewManager } from '@difizen/mana-app';
+import type { ModalItem, ModalItemProps, URI } from '@difizen/mana-app';
+import { Form, message, Input, Modal } from 'antd';
 import type { InputRef } from 'antd';
-import { Input, Modal } 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 ModalItemType {
   resource: URI;
@@ -19,8 +20,8 @@ export const FileRenameModalComponent: React.FC<ModalItemProps<ModalItemType>> =
 }: ModalItemProps<ModalItemType>) => {
   const fileService = useInject(JupyterFileService);
   const viewManager = useInject(ViewManager);
-  const [newFileName, setNewFileName] = useState(data.fileName);
   const inputRef = useRef<InputRef>(null);
+  const [form] = Form.useForm();
   const [fileView, setFileView] = useState<FileView>();
   useEffect(() => {
     viewManager
@@ -34,26 +35,64 @@ export const FileRenameModalComponent: React.FC<ModalItemProps<ModalItemType>> =
       });
     inputRef.current?.focus();
   });
+
+  const onFinish = async (values: { rename: string }) => {
+    await form.validateFields();
+    close();
+    try {
+      await fileService.rename(data.resource, values.rename);
+
+      if (fileView) {
+        fileView.model.refresh();
+      }
+    } catch {
+      message.error('重命名文件/文件夹失败');
+    }
+  };
+
+  const validateRename = async (rule: any, value: string, callback: any) => {
+    if (!value || !value.length) {
+      throw new Error('请输入文件夹名');
+    } else {
+      if (value === data.fileName) {
+        throw new Error('文件/文件夹名称已存在，请重新输入');
+      }
+    }
+  };
+
   return (
     <Modal
       title="文件重命名"
       open={visible}
       onCancel={close}
-      onOk={async () => {
-        await fileService.rename(data.resource, newFileName);
-        if (fileView) {
-          fileView.model.refresh();
-        }
-        close();
+      onOk={() => {
+        form.submit();
       }}
+      wrapClassName="libro-rename-file-modal"
     >
-      <Input
-        value={newFileName}
-        onChange={(e) => {
-          setNewFileName(e.target.value);
-        }}
-        ref={inputRef}
-      />
+      <Form
+        layout="vertical"
+        autoComplete="off"
+        form={form}
+        onFinish={onFinish}
+        className="libro-rename-file-form"
+      >
+        <Form.Item
+          name="rename"
+          label="文件/文件夹名称"
+          rules={[{ required: true, validator: validateRename }]}
+          initialValue={data.fileName}
+        >
+          <Input
+            ref={inputRef}
+            onKeyDown={async (e) => {
+              if (e.keyCode === 13) {
+                form.submit();
+              }
+            }}
+          />
+        </Form.Item>
+      </Form>
     </Modal>
   );
 };

package/src/file/index.less

@@ -0,0 +1,98 @@
+.libro-create-file-type {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 24px;
+  height: 100px;
+  width: 100px;
+  border: 1px solid rgba(0, 10, 26, 10%);
+  border-radius: 4px;
+  cursor: pointer;
+
+  &.active {
+    border: 1px solid #1677ff;
+    background-color: rgba(22, 122, 255, 9%);
+  }
+
+  &.active::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    right: 18px;
+    height: 0;
+    width: 0;
+    border-top: 12px solid #1677ff;
+    border-left: 12px solid transparent;
+  }
+}
+
+.libro-create-file-modal,
+.libro-create-dir-modal,
+.libro-rename-file-modal {
+  .ant-modal-content {
+    padding: unset;
+  }
+
+  .ant-modal-body {
+    padding: 20px 24px;
+  }
+
+  .ant-modal-header {
+    padding: 16px 24px;
+    border-bottom: 1px solid rgba(0, 10, 26, 7%);
+    margin: unset;
+  }
+
+  .ant-modal-footer {
+    margin: unset;
+    padding: 10px 24px;
+    border-top: 1px solid rgba(0, 10, 26, 7%);
+  }
+
+  .ant-modal-title {
+    font-weight: 500;
+    color: rgba(0, 10, 26, 89%);
+  }
+}
+
+.libro-remove-file-modal {
+  .ant-modal-confirm-title {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 88%);
+  }
+}
+
+.libro-create-file-modal {
+  .ant-form-item-control-input {
+    width: 370px;
+  }
+}
+
+.libro-create-dir-modal,
+.libro-rename-file-modal {
+  .ant-form-item-control-input {
+    width: 316px;
+  }
+}
+
+.libro-create-file-path-container {
+  margin-bottom: 8px;
+}
+
+.libro-create-file-des {
+  margin-bottom: 8px;
+  display: inline-block;
+  color: rgba(0, 0, 0, 85%);
+  letter-spacing: 0;
+  line-height: 22px;
+}
+
+.libro-create-file-path {
+  color: rgba(0, 0, 0, 65%);
+}
+
+.libro-create-file-type-text {
+  margin-top: 8px;
+  color: rgba(0, 10, 26, 68%);
+}

package/src/file/index.ts

@@ -4,3 +4,6 @@ export * from './navigatable-view.js';
 export * from './open-handler-contribution.js';
 export * from './file-service.js';
 export * from './file-protocol.js';
+export * from './file-icon.js';
+export * from './file-create-modal.js';
+export * from './file-createdir-modal.js';

package/src/file/navigatable-view.tsx

@@ -1,7 +1,6 @@
 import type { LibroView } from '@difizen/libro-core';
-import { LibroService } from '@difizen/libro-core';
-import type { NavigatableView } from '@difizen/mana-app';
-import { CommandRegistry } from '@difizen/mana-app';
+import { LibroService, DocumentCommands } from '@difizen/libro-core';
+import type { NavigatableView, Saveable } from '@difizen/mana-app';
 import {
   BaseView,
   inject,
@@ -17,11 +16,11 @@ import {
   ViewRender,
   Deferred,
   URI,
+  CommandRegistry,
+  Emitter,
 } from '@difizen/mana-app';
 import { createRef, forwardRef } from 'react';
 
-import type { EditorView } from './file-protocol.js';
-
 export const LibroEditorComponent = forwardRef(function LibroEditorComponent() {
   const instance = useInject<LibroNavigatableView>(ViewInstance);
 
@@ -37,7 +36,7 @@ export const LibroNavigatableViewFactoryId = 'libro-navigatable-view-factory';
 @view(LibroNavigatableViewFactoryId)
 export class LibroNavigatableView
   extends BaseView
-  implements NavigatableView, EditorView
+  implements NavigatableView, Saveable
 {
   @inject(LibroService) protected libroService: LibroService;
 
@@ -49,6 +48,14 @@ export class LibroNavigatableView
 
   @prop() filePath?: string;
 
+  dirtyEmitter = new Emitter<void>();
+
+  get onDirtyChanged() {
+    return this.dirtyEmitter.event;
+  }
+
+  readonly autoSave = 'off';
+
   @prop()
   dirty: boolean;
 
@@ -80,6 +87,14 @@ export class LibroNavigatableView
     this.getOrCreateLibroView();
   }
 
+  save = () => {
+    this.commandRegistry.executeCommand(
+      DocumentCommands['Save'].id,
+      undefined,
+      this.libroView,
+    );
+  };
+
   protected async getOrCreateLibroView() {
     const libroView = await this.libroService.getOrCreateView({
       id: this.filePath,
@@ -91,9 +106,11 @@ export class LibroNavigatableView
     this.libroView = libroView;
     this.libroView.model.onContentChanged(() => {
       this.dirty = true;
+      this.dirtyEmitter.fire();
     });
     this.libroView.onSave(() => {
       this.dirty = false;
+      this.dirtyEmitter.fire();
     });
     await this.libroView.initialized;
     this.libroView.focus();