import React, { useState } from 'react' import { connect } from '@formily/react-schema-renderer' import { Button, Upload as AntdUpload, Popconfirm } from 'antd' import { toArr, isArr, isEqual, mapStyledProps } from '../shared' import { LoadingOutlined, PlusOutlined, UploadOutlined, InboxOutlined } from '@ant-design/icons' const { Dragger: UploadDragger } = AntdUpload const exts = [ { ext: /\.docx?$/i, icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png' }, { ext: /\.pptx?$/i, icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png' }, { ext: /\.jpe?g$/i, icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' }, { ext: /\.pdf$/i, icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png' }, { ext: /\.png$/i, icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png' }, { ext: /\.eps$/i, icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png' }, { ext: /\.ai$/i, icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png' }, { ext: /\.gif$/i, icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png' }, { ext: /\.svg$/i, icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png' }, { ext: /\.xlsx?$/i, icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png' }, { ext: /\.psd?$/i, icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png' }, { ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)$/i, icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png' }, { ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)$/i, icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' }, { ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)$/i, icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png' }, { ext: /\.[^.]+$/i, icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png' } ] const testOpts = (ext, options) => { if (options && isArr(options.include)) { return options.include.some(url => ext.test(url)) } if (options && isArr(options.exclude)) { return !options.exclude.some(url => ext.test(url)) } return true } export const testUrl = (url, options) => { for (let i = 0; i < exts.length; i++) { if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) { return false; } } return true; } export const getImageByUrl = (url, options) => { for (let i = 0; i < exts.length; i++) { if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) { return exts[i].icon || url } } return url } function toFileObject(item) { console.log(item); if (typeof item === 'number') { return { id: item, } } if (item.id && item.uid && item.url) { return item; } if (item.response && item.response.data) { return toFileObject(item.response.data); } // if (item.org) return { id: item.id, uid: `${item.id}`, name: item.title, url: item.url, status: 'done', }; } function toFileList(value: any) { if (!value) { return []; } if (!Array.isArray(value) && typeof value === 'object') { value = [value]; } return value.map(toFileObject); } function toValue(item) { if (typeof item === 'number') { return { id: item, } } if (item.id && item.uid && item.url) { return item; } if (item.response && item.response.data) { return toValue(item.response.data); } if (item.originFileObj) { return item; } return { id: item.id, uid: `${item.id}`, name: item.title, url: item.url, }; } function toValues(fileList) { if (!fileList) { return []; } if (!Array.isArray(fileList) && typeof fileList === 'object') { fileList = [fileList]; } return fileList.map(toValue); } export const Upload = connect({ getProps: mapStyledProps })((props) => { const { value, onChange } = props; const [fileList, setFileList] = useState(toFileList(value)); const uploadProps = { name: 'file', action: `${process.env.API}/attachments:upload`, onChange({ fileList }) { console.log(fileList); setFileList((fileList)); onChange(toValues(fileList)); }, }; return (
) }); export default Upload;