diff --git a/packages/components/src/upload/index.ts b/packages/components/src/upload/index.ts index 4a130d6..e8664a2 100644 --- a/packages/components/src/upload/index.ts +++ b/packages/components/src/upload/index.ts @@ -1,18 +1,94 @@ -import { connect, mapProps } from '@formily/vue' +import { connect, mapProps, h } from '@formily/vue' import { Upload as AntdUpload } from 'ant-design-vue' import { composeExport } from '../__builtins__' +import type { + UploadFile, + Upload as AntdUploadProps, +} from 'ant-design-vue/types/upload' +import { defineComponent } from '@vue/composition-api' + +export type IUploadOnchange = (fileList: UploadFile[]) => void + +export type IUploadProps = Omit & { + onChange?: IUploadOnchange +} + +export type IDraggerUploadProps = Omit & { + onChange?: IUploadOnchange +} + +const UploadWrapper = defineComponent({ + name: 'UploadWrapper', + setup(props, { slots, attrs, listeners, emit }) { + return () => { + const children = { + ...slots, + } + + return h( + AntdUpload, + { + attrs, + on: { + ...listeners, + change: ({ fileList }) => { + ;(attrs.onChange as IUploadOnchange)?.(fileList) + emit('change', fileList) + }, + }, + }, + children + ) + } + }, +}) + +const UploaDraggerdWrapper = defineComponent({ + name: 'UploaDraggerdWrapper', + setup(props, { slots, attrs, listeners, emit }) { + return () => { + const children = { + ...slots, + } + + return h( + 'div', + {}, + { + default: () => + h( + AntdUpload.Dragger, + { + attrs, + on: { + ...listeners, + change: ({ fileList }) => { + ;(attrs.onChange as IUploadOnchange)?.(fileList) + emit('change', fileList) + }, + }, + }, + children + ), + } + ) + } + }, +}) const _Upload = connect( - AntdUpload, + UploadWrapper, mapProps({ value: 'fileList', + onInput: 'onChange', }) ) const UploadDragger = connect( - AntdUpload.Dragger, + UploaDraggerdWrapper, mapProps({ value: 'fileList', + onInput: 'onChange', }) )