@ithinkdt/naive/src/components/Files.jsx

iThinkDT Naive UI

import { defineComponent, reactive, shallowReactive, shallowRef, watch } from 'vue'
import { NFlex } from 'ithinkdt-ui'

import { debouncedWatch } from '@vueuse/core'

import { CORE_CTX } from '@ithinkdt/core'

import { NUpload } from './lazy'

const lazyFileInfo = shallowReactive({})

debouncedWatch(
    lazyFileInfo,
    (infos) => {
        const keys = Object.keys(infos)
        if (keys.length === 0) return
        CORE_CTX.fileInfo(keys).then((data) => {
            for (const it of data) {
                const f = lazyFileInfo[it.fileId]
                delete lazyFileInfo[it.fileId]
                f.name = it.fileName
            }
        })
    },
    { debounce: 1000 / 60 },
)

export const NFiles = defineComponent({
    name: 'NFiles',
    props: {
        type: {
            type: String,
            default: 'file',
        },
        files: {
            type: [Array, String],
            default: () => [],
        },
    },

    setup(props) {
        const fileList = shallowRef([])

        watch(
            [() => props.type, () => props.files],
            ([type, files]) => {
                if (typeof files === 'string') {
                    files = files.split(',')
                }

                fileList.value = files.map((f) => {
                    let it =
                        typeof f === 'string'
                            ? {
                                  id: f,
                                  fileId: f,
                                  _name: f,
                                  name: '',
                                  status: 'finished',
                                  type: type === 'image' ? 'image/*' : undefined,
                                  thumbnailUrl: CORE_CTX.filePreview(f),
                                  url: type === 'image' ? CORE_CTX.filePreview(f) : CORE_CTX.fileDownload(f),
                              }
                            : f

                    if (type !== 'image' && !it.name) {
                        it = reactive(it)
                        lazyFileInfo[it.fileId] = it
                    }

                    return it
                })
            },
            { immediate: true },
        )
        return () => {
            return props.type === 'file' ? (
                <NFlex size="small">
                    {fileList.value.map((it) => (
                        <a href={it.url} download={it.name}>
                            {it.name || it._name}
                        </a>
                    ))}
                </NFlex>
            ) : (
                <NUpload disabled listType="image-card" max={fileList.value.length} fileList={fileList.value} />
            )
        }
    },
})