feat: improve the options of the upload component
This commit is contained in:
parent
a635c955c6
commit
ce63f0fbe6
@ -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'
|
||||
},
|
||||
|
@ -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,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user