commit 482e51fe526d4806de8b0e515297fa39bcc6e085
author Amy0104 <amywang0104@163.com> Tue Sep 06 11:07:11 2022 +0800
committer GitHub <noreply@github.com> Tue Sep 06 11:07:11 2022 +0800
tree 18e08dc497b5542664c6423d54f53493aeffe737
parent f8ecc0ff9af407f640b9d6540072bc812b94d8bc

[Feature] New file and folder creation. (#6)

studio/components/studio-sider/index.tsx

diff --git a/studio/components/studio-sider/index.tsx b/studio/components/studio-sider/index.tsx
index 3211c0b..61a5654 100644
--- a/studio/components/studio-sider/index.tsx
+++ b/studio/components/studio-sider/index.tsx
@@ -28,7 +28,7 @@
     const inputRef = ref()
     const fileRef = ref()
     const { state, onCreateFile, onCreateFolder, onSelectFile, onInputBlur } =
-      useFile()
+      useFile(inputRef, fileRef)
 
     return () => (
       <NLayoutSider class={styles['studio-sider']} width={widthRef.value}>

studio/components/studio-sider/use-file.ts

diff --git a/studio/components/studio-sider/use-file.ts b/studio/components/studio-sider/use-file.ts
index d8ea16e..a4acb07 100644
--- a/studio/components/studio-sider/use-file.ts
+++ b/studio/components/studio-sider/use-file.ts
@@ -14,19 +14,54 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { reactive } from 'vue'
-import type { IFileState, FileType } from './types'
+import { reactive, Ref, nextTick } from 'vue'
+import type { IFileState, FileType, IFileRecord } from './types'
 
-export const useFile = () => {
+export const useFile = (inputRef: Ref, fileRef: Ref) => {
   const state = reactive({
     currentKey: 0,
     files: [],
     isCreating: false
   } as IFileState)
 
+  const filesCached = {} as { [key: number]: IFileRecord }
+
+  const freshFiles = () => {
+    fileRef.value.refresh()
+  }
+
+  const getCurrentFolderKey = (): number => {
+    if (state.currentKey === 0) return 0
+    const currentRecord = filesCached[state.currentKey]
+    return currentRecord.type ? currentRecord.pid : currentRecord.key
+  }
+
   const create = async (isFile: boolean, type?: FileType) => {
     if (state.isCreating) return
     state.isCreating = true
+    const currentFolderKey = getCurrentFolderKey()
+    const record = {
+      isCreate: true,
+      key: Date.now(),
+      label: '',
+      pid: currentFolderKey
+    } as IFileRecord
+
+    isFile ? (record.type = type) : (record.children = [])
+
+    filesCached[record.key] = record
+
+    if (currentFolderKey === 0) {
+      state.files.unshift(record)
+    } else {
+      filesCached[currentFolderKey].children.unshift(record)
+    }
+
+    state.currentKey = record.key
+
+    freshFiles()
+    await nextTick()
+    inputRef.value?.focus()
   }
 
   const onCreateFile = (type: FileType) => void create(true, type)
@@ -39,6 +74,23 @@
 
   const onInputBlur = (value: string) => {
     state.isCreating = false
+    if (!value) {
+      const currentFolderKey = getCurrentFolderKey()
+
+      currentFolderKey
+        ? filesCached[currentFolderKey].children.shift()
+        : state.files.shift()
+
+      delete filesCached[state.currentKey]
+
+      state.currentKey = currentFolderKey
+
+      freshFiles()
+      return
+    }
+    filesCached[state.currentKey].isCreate = false
+    filesCached[state.currentKey].label = value
+    freshFiles()
   }
 
   return { state, onCreateFile, onCreateFolder, onSelectFile, onInputBlur }