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 (
}
onClick={() => {
saveAs(file.url, `${file.title}${file.extname}`);
}}
/>
{!disabled && (
}
onClick={() => {
setSync(false);
setFileList((prevFileList) => {
if (!multiple) {
onChange(null);
return [];
}
const index = prevFileList.indexOf(file);
prevFileList.splice(index, 1);
onChange(toValue([...prevFileList]));
return [...prevFileList];
});
}}
/>
)}
{file.status === 'uploading' && (
)}
);
})}
{!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;