diff --git a/components/components.ts b/components/components.ts index cb1a34586..168b44076 100644 --- a/components/components.ts +++ b/components/components.ts @@ -90,7 +90,7 @@ export { default as Image, ImagePreviewGroup } from './image'; export type { InputNumberProps } from './input-number'; export { default as InputNumber } from './input-number'; -export type { LayoutProps } from './layout'; +export type { LayoutProps, SiderProps } from './layout'; export { default as Layout, LayoutHeader, diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 7035ed2e8..196ec1a75 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -13,6 +13,7 @@ import { uploadProps } from './interface'; import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils'; import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'; import defaultLocale from '../locale/default'; +import type { CSSProperties } from 'vue'; import { computed, defineComponent, onMounted, ref, toRef } from 'vue'; import { flattenChildren, initDefaultProps } from '../_util/props-util'; import useMergedState from '../_util/hooks/useMergedState'; @@ -295,7 +296,7 @@ export default defineComponent({ defaultLocale.Upload, computed(() => props.locale), ); - const renderUploadList = (button?: VueNode) => { + const renderUploadList = (button?: VueNode, buttonVisible?: boolean) => { const { removeIcon, previewIcon, @@ -331,6 +332,7 @@ export default defineComponent({ isImageUrl={isImageUrl} progress={progress} itemRender={itemRender} + appendActionVisible={buttonVisible} v-slots={{ ...slots, appendAction: () => button }} /> ) : ( @@ -403,11 +405,8 @@ export default defineComponent({ [`${prefixCls.value}-rtl`]: direction.value === 'rtl', }); const children = flattenChildren(slots.default?.()); - const uploadButton = ( -
+ const renderUploadButton = (uploadButtonStyle?: CSSProperties) => ( +
); @@ -415,13 +414,13 @@ export default defineComponent({ if (listType === 'picture-card') { return ( - {renderUploadList(uploadButton)} + {renderUploadList(renderUploadButton(), !!(children && children.length))} ); } return ( - {uploadButton} + {renderUploadButton(children && children.length ? undefined : { display: 'none' })} {renderUploadList()} ); diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx index acd1fbb17..1e147ded1 100644 --- a/components/upload/UploadList/index.tsx +++ b/components/upload/UploadList/index.tsx @@ -33,6 +33,7 @@ export default defineComponent({ previewFile: previewImage, isImageUrl, items: [], + appendActionVisible: true, }), setup(props, { slots, expose }) { const motionAppear = ref(false); @@ -167,6 +168,7 @@ export default defineComponent({ progress, appendAction = slots.appendAction, itemRender, + appendActionVisible, } = props; const appendActionDom = appendAction?.()[0]; return ( @@ -201,7 +203,7 @@ export default defineComponent({ /> ); })} - {isValidElement(appendActionDom) ? ( + {appendActionVisible && isValidElement(appendActionDom) ? ( {appendActionDom} ) : null} diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index d1999ced8..d6cf897b8 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -105,7 +105,7 @@ When uploading state change, it returns: ## FAQ -### How to implement upload server side? +### How do I implement upload server side? - You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki#server-side) about how to implement server side upload interface. - There is a mock example of [express](https://github.com/react-component/upload/blob/master/server.js) in rc-upload. @@ -118,10 +118,10 @@ Please set property `url` of each item in `fileList` to control content of link. See . -### Why `fileList` in control will not trigger `change` `status` update when file not in the list? +### Why will the `fileList` that's in control not trigger `change` `status` update when the file is not in the list? `change` only trigger when file in the list, it will ignore left events when removed from the list. Please note that there exist bug which makes event still trigger even the file is not in the list before `3.0.0-beta.10`. -### Why sometime `change` return File object and sometime return { originFileObj: File }? +### Why does `change` sometimes return File object and other times return { originFileObj: File }? For compatible case, we return File object when `beforeUpload` return `false`. It will merge to `{ originFileObj: File }` in next major version. Current version is compatible to get origin file by `info.file.originFileObj`. You can change this before major release. diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx index b7898c31d..8e5d56322 100755 --- a/components/upload/interface.tsx +++ b/components/upload/interface.tsx @@ -114,8 +114,10 @@ function uploadProps() { FileList: FileType[], ) => BeforeUploadValueType | Promise >, - onChange: Function as PropType<(info: UploadChangeParam) => void>, - 'onUpdate:fileList': Function as PropType<(fileList: UploadChangeParam['fileList']) => void>, + onChange: Function as PropType<(info: UploadChangeParam>) => void>, + 'onUpdate:fileList': Function as PropType< + (fileList: UploadChangeParam>['fileList']) => void + >, onDrop: Function as PropType<(event: DragEvent) => void>, listType: String as PropType, onPreview: Function as PropType<(file: UploadFile) => void>, @@ -181,6 +183,7 @@ function uploadListProps() { >, isImageUrl: Function as PropType<(file: UploadFile) => boolean>, appendAction: Function as PropType<() => VueNode>, + appendActionVisible: { type: Boolean, default: undefined }, itemRender: Function as PropType>, }; }