import DeleteOutlined from '@ant-design/icons/DeleteOutlined'; import DownloadOutlined from '@ant-design/icons/DownloadOutlined'; import PlusOutlined from '@ant-design/icons/PlusOutlined'; import { usePrefixCls } from '@formily/antd/lib/__builtins__'; import { connect, mapProps, mapReadPretty } from '@formily/react'; import { Button, Progress, Space, Upload as AntdUpload } from 'antd'; import cls from 'classnames'; import { saveAs } from 'file-saver'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import Lightbox from 'react-image-lightbox'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import { ReadPretty } from './ReadPretty'; import { isImage, toArr, toFileList, toItem, toValue, useUploadProps } from './shared'; import './style.less'; import type { ComposedUpload, DraggerProps, UploadProps } from './type'; export const Upload: ComposedUpload = connect( (props: UploadProps) => { return ; }, mapProps({ value: 'fileList', }), mapReadPretty(ReadPretty.Upload), ); Upload.Attachment = connect((props: UploadProps) => { const { disabled, multiple, value, onChange } = props; const [fileList, setFileList] = useState([]); const [sync, setSync] = useState(true); const images = fileList; const [photoIndex, setPhotoIndex] = useState(0); const [visible, setVisible] = useState(false); const { t } = useTranslation(); useEffect(() => { if (sync) { setFileList(toFileList(value)); } }, [value, sync]); const uploadProps = useUploadProps({ ...props }); return (
{fileList.map((file) => { const handleClick = (e) => { e.preventDefault(); e.stopPropagation(); const index = fileList.indexOf(file); if (isImage(file.extname)) { setVisible(true); setPhotoIndex(index); } else { saveAs(file.url, `${file.title}${file.extname}`); } }; return (
); })} {!disabled && (multiple || toArr(value).length < 1) && (
{ setSync(false); if (multiple) { if (info.file.status === 'done') { onChange(toValue(info.fileList)); } setFileList(info.fileList.map(toItem)); } else { if (info.file.status === 'done') { // TODO(BUG): object 的联动有问题,不响应,折中的办法先置空再赋值 onChange(null); onChange(info.file?.response?.data); } setFileList([toItem(info.file)]); } }} showUploadList={false} > {!disabled && (multiple || toArr(value).length < 1) && (
{t('Upload')}
)}
)}
{visible && ( setVisible(false)} onMovePrevRequest={() => setPhotoIndex((photoIndex + images.length - 1) % images.length)} onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % images.length)} imageTitle={images[photoIndex]?.title} toolbarButtons={[ , ]} /> )}
); }, mapReadPretty(ReadPretty.Attachment)); Upload.Dragger = connect( (props: DraggerProps) => { return (
); }, mapProps({ value: 'fileList', }), ); export default Upload;