[Feature] Add file types. (#4)
diff --git a/studio/components/search-bar/index.tsx b/studio/components/search-bar/index.tsx
index b7ee5d5..6c2e48a 100644
--- a/studio/components/search-bar/index.tsx
+++ b/studio/components/search-bar/index.tsx
@@ -16,20 +16,26 @@
*/
import { defineComponent, h } from 'vue'
-import { NSpace, NInput, NIcon, NButton } from 'naive-ui'
+import { NSpace, NInput, NIcon, NButton, NDropdown } from 'naive-ui'
import {
SearchOutlined,
FileAddOutlined,
FolderAddOutlined
} from '@vicons/antd'
+import { FILE_TYPES } from '@/constants/file'
import styles from './index.module.scss'
+import type { FileType } from '@/types/file'
export const SearchBar = defineComponent({
name: 'search-bar',
emits: ['fileClick', 'folderClick'],
setup(props, { emit }) {
- const onFileClick = () => {
- emit('fileClick')
+ const typesOptions = FILE_TYPES.map((type) => ({
+ key: type,
+ label: type
+ }))
+ const onFileClick = (type: FileType) => {
+ emit('fileClick', type)
}
const onFolderClick = () => {
emit('folderClick')
@@ -42,9 +48,15 @@
prefix: () => h(NIcon, { component: SearchOutlined })
}}
</NInput>
- <NButton tertiary size='small' onClick={onFileClick}>
- {{ icon: () => h(NIcon, { component: FileAddOutlined }) }}
- </NButton>
+ <NDropdown
+ options={typesOptions}
+ trigger='click'
+ onSelect={onFileClick}
+ >
+ <NButton tertiary size='small'>
+ {{ icon: () => h(NIcon, { component: FileAddOutlined }) }}
+ </NButton>
+ </NDropdown>
<NButton tertiary size='small' onClick={onFolderClick}>
{{ icon: () => h(NIcon, { component: FolderAddOutlined }) }}
</NButton>
diff --git a/studio/components/studio-sider/types.ts b/studio/components/studio-sider/types.ts
new file mode 100644
index 0000000..47e3dc5
--- /dev/null
+++ b/studio/components/studio-sider/types.ts
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { FileType, IFileRecord } from '@/types/file'
+
+export interface IFileState {
+ currentKey: number
+ files: IFileRecord[]
+ isCreating: boolean
+}
+export { FileType, IFileRecord }
diff --git a/studio/components/studio-sider/use-file.ts b/studio/components/studio-sider/use-file.ts
index 25eaa93..fdd7ffd 100644
--- a/studio/components/studio-sider/use-file.ts
+++ b/studio/components/studio-sider/use-file.ts
@@ -15,11 +15,12 @@
* limitations under the License.
*/
import { reactive } from 'vue'
+import type { FileType } from './types'
export const useFile = () => {
const state = reactive({ files: [] })
- const onCreateFile = () => {}
+ const onCreateFile = (type: FileType) => {}
const onCreateFolder = () => {}
