From ce63f0fbe6efba5b9b20c00a36c61a12b257607a Mon Sep 17 00:00:00 2001 From: chenos Date: Sun, 15 Aug 2021 00:04:14 +0800 Subject: [PATCH] feat: improve the options of the upload component --- .../src/components/admin-layout/More.tsx | 2 +- .../database-field/interfaces/attachment.ts | 9 +- packages/client/src/schemas/upload/index.tsx | 170 +----------------- 3 files changed, 11 insertions(+), 170 deletions(-) diff --git a/packages/client/src/components/admin-layout/More.tsx b/packages/client/src/components/admin-layout/More.tsx index 92540375a..a44936477 100644 --- a/packages/client/src/components/admin-layout/More.tsx +++ b/packages/client/src/components/admin-layout/More.tsx @@ -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' }, diff --git a/packages/client/src/schemas/database-field/interfaces/attachment.ts b/packages/client/src/schemas/database-field/interfaces/attachment.ts index 10c22b421..5e1d286d8 100644 --- a/packages/client/src/schemas/database-field/interfaces/attachment.ts +++ b/packages/client/src/schemas/database-field/interfaces/attachment.ts @@ -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, + }, }, }; diff --git a/packages/client/src/schemas/upload/index.tsx b/packages/client/src/schemas/upload/index.tsx index 88f6317a5..fe43c8caa 100644 --- a/packages/client/src/schemas/upload/index.tsx +++ b/packages/client/src/schemas/upload/index.tsx @@ -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(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 ( -
- { - 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} - > - - - {[...map.entries()].map( - ([key, item]) => - item.id && ( -
- {item.url ? ( - { - e.preventDefault(); - const index = images.findIndex( - (image) => image.id === item.id, - ); - setVisible(true); - setPhotoIndex(index); - }} - > - {' '} - {listType !== 'picture-card' && item.title}{' '} - { - e.preventDefault(); - e.stopPropagation(); - remove(key); - if (multiple) { - const values = toArr(value).filter( - (v) => v.id === item.id, - ); - onChange(values); - } else { - onChange(null); - } - }} - /> - - ) : ( - - {item.title} - - - )} -
- ), - )} - {visible && ( - setVisible(false)} - onMovePrevRequest={() => - setPhotoIndex((photoIndex + images.length - 1) % images.length) - } - onMoveNextRequest={() => - setPhotoIndex((photoIndex + 1) % images.length) - } - imageTitle={images[photoIndex]?.title} - // toolbarButtons={[ - //
下载
, - // ]} - // imageCaption={'xxx'} - /> - )} -
- ); - }, - mapReadPretty( - observer((props) => { - const field = useField(); - const images = toImages(field.value); - const [photoIndex, setPhotoIndex] = useState(0); - const [visible, setVisible] = useState(false); - console.log('field.value', field.value, images); - return ( -
- {images.map((item) => ( -
- { - e.preventDefault(); - const index = images.indexOf(item); - setVisible(true); - setPhotoIndex(index); - }} - > - {item.title} - -
- ))} - {visible && ( - setVisible(false)} - onMovePrevRequest={() => - setPhotoIndex((photoIndex + images.length - 1) % images.length) - } - onMoveNextRequest={() => - setPhotoIndex((photoIndex + 1) % images.length) - } - imageTitle={images[photoIndex]?.title} - // toolbarButtons={[ - //
下载
, - // ]} - // imageCaption={'xxx'} - /> - )} -
- ); - }), - ), -); - -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;