feat: improve the options of the upload component

This commit is contained in:
chenos 2021-08-15 00:04:14 +08:00
parent a635c955c6
commit ce63f0fbe6
3 changed files with 11 additions and 170 deletions

View File

@ -91,7 +91,7 @@ const schema: ISchema = {
type: 'string',
title: 'LOGO',
'x-decorator': 'FormItem',
'x-component': 'Upload.File',
'x-component': 'Upload.Attachment',
'x-component-props': {
// accept: 'jpg,png'
},

View File

@ -13,12 +13,19 @@ export const attachment: ISchema = {
uiSchema: {
type: 'array',
// title,
'x-component': 'Upload',
'x-component': 'Upload.Attachment',
'x-decorator': 'FormItem',
'x-designable-bar': 'Upload.DesignableBar',
} as ISchema,
},
properties: {
...defaultProps,
'uiSchema.x-component-props.multiple': {
type: 'boolean',
'x-content': '允许上传多个文件',
'x-decorator': 'FormItem',
'x-component': 'Checkbox',
default: true,
},
},
};

View File

@ -293,174 +293,6 @@ const toImages = (fileList) => {
});
};
Upload.File = connect(
(props: UploadProps & { value?: any }) => {
const {
multiple,
listType = 'picture-card',
value,
onChange,
...others
} = props;
const [map, { set, setAll, remove }] = useMap<string, any>(toMap(value));
const images = toImages(value);
const [photoIndex, setPhotoIndex] = useState(0);
const [visible, setVisible] = useState(false);
useEffect(() => {
setAll(toMap(value));
}, [value]);
console.log('mapmapmapmapmap', map);
return (
<div>
<AntdUpload
action={`${process.env.API_URL}attachments:upload`}
{...useUploadProps({ ...others, multiple })}
onChange={({ file }) => {
console.log({ multiple, file });
const f = toItem(file);
if (multiple) {
set(f.id, f);
} else {
setAll([[f.id, f]]);
}
if (file.status === 'done') {
if (multiple) {
onChange([...toArr(value), file?.response?.data]);
} else {
onChange(file?.response?.data);
}
}
}}
showUploadList={false}
>
<Button icon={<UploadOutlined />}></Button>
</AntdUpload>
{[...map.entries()].map(
([key, item]) =>
item.id && (
<div>
{item.url ? (
<a
target={'_blank'}
href={item.url}
title={item.title}
onClick={(e) => {
e.preventDefault();
const index = images.findIndex(
(image) => image.id === item.id,
);
setVisible(true);
setPhotoIndex(index);
}}
>
<img style={{ height: 16 }} src={item.imageUrl} />{' '}
{listType !== 'picture-card' && item.title}{' '}
<DeleteOutlined
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
remove(key);
if (multiple) {
const values = toArr(value).filter(
(v) => v.id === item.id,
);
onChange(values);
} else {
onChange(null);
}
}}
/>
</a>
) : (
<span>
{item.title}
<Progress percent={item.percent} showInfo={false} />
</span>
)}
</div>
),
)}
{visible && (
<Lightbox
// discourageDownloads={true}
mainSrc={images[photoIndex]?.imageUrl}
nextSrc={images[(photoIndex + 1) % images.length]?.imageUrl}
prevSrc={
images[(photoIndex + images.length - 1) % images.length]?.imageUrl
}
onCloseRequest={() => setVisible(false)}
onMovePrevRequest={() =>
setPhotoIndex((photoIndex + images.length - 1) % images.length)
}
onMoveNextRequest={() =>
setPhotoIndex((photoIndex + 1) % images.length)
}
imageTitle={images[photoIndex]?.title}
// toolbarButtons={[
// <div>下载</div>,
// ]}
// imageCaption={'xxx'}
/>
)}
</div>
);
},
mapReadPretty(
observer((props) => {
const field = useField<Formily.Core.Models.Field>();
const images = toImages(field.value);
const [photoIndex, setPhotoIndex] = useState(0);
const [visible, setVisible] = useState(false);
console.log('field.value', field.value, images);
return (
<div>
{images.map((item) => (
<div>
<a
target={'_blank'}
href={item.url}
onClick={(e) => {
e.preventDefault();
const index = images.indexOf(item);
setVisible(true);
setPhotoIndex(index);
}}
>
<img style={{ height: 16 }} src={item.imageUrl} /> {item.title}
</a>
</div>
))}
{visible && (
<Lightbox
// discourageDownloads={true}
mainSrc={images[photoIndex]?.imageUrl}
nextSrc={images[(photoIndex + 1) % images.length]?.imageUrl}
prevSrc={
images[(photoIndex + images.length - 1) % images.length]
?.imageUrl
}
onCloseRequest={() => setVisible(false)}
onMovePrevRequest={() =>
setPhotoIndex((photoIndex + images.length - 1) % images.length)
}
onMoveNextRequest={() =>
setPhotoIndex((photoIndex + 1) % images.length)
}
imageTitle={images[photoIndex]?.title}
// toolbarButtons={[
// <div>下载</div>,
// ]}
// imageCaption={'xxx'}
/>
)}
</div>
);
}),
),
);
Upload.Dragger = Dragger;
Upload.Attachment = connect(
(props: UploadProps) => {
const { disabled, multiple, value, onChange } = props;
@ -751,4 +583,6 @@ Upload.Attachment = connect(
}),
);
Upload.Dragger = Dragger;
export default Upload;