diff --git a/components/style.ts b/components/style.ts index d19d3c202..c377c48a6 100644 --- a/components/style.ts +++ b/components/style.ts @@ -4,8 +4,8 @@ import './radio/style'; // import './checkbox/style'; // import './grid/style'; // import './tag/style'; -import './rate/style'; -import './pagination/style'; +// import './rate/style'; +// import './pagination/style'; // import './avatar/style'; // import './badge/style'; import './tabs/style'; @@ -29,14 +29,14 @@ import './auto-complete/style'; // import './affix/style'; import './cascader/style'; // import './back-top/style'; -import './modal/style'; +// import './modal/style'; // import './alert/style'; import './time-picker/style'; import './steps/style'; // import './breadcrumb/style'; import './calendar/style'; -import './date-picker/style'; -import './slider/style'; +// import './date-picker/style'; +// import './slider/style'; import './table/style'; // import './progress/style'; import './timeline/style'; @@ -52,7 +52,7 @@ import './drawer/style'; // import './skeleton/style'; // import './comment/style'; // import './config-provider/style'; -import './empty/style'; +// import './empty/style'; // import './statistic/style'; // import './result/style'; // import './descriptions/style'; diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index c4aa8848a..8d5c83578 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -1,14 +1,7 @@ import type { UploadProps as RcUploadProps } from '../vc-upload'; import VcUpload from '../vc-upload'; import UploadList from './UploadList'; -import type { - UploadType, - UploadListType, - UploadFile, - UploadChangeParam, - ShowUploadListInterface, - FileType, -} from './interface'; +import type { UploadFile, UploadChangeParam, ShowUploadListInterface, FileType } from './interface'; import { uploadProps } from './interface'; import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils'; import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'; @@ -25,6 +18,7 @@ import { useInjectFormItemContext } from '../form'; // CSSINJS import useStyle from './style'; +import { useInjectDisabled } from '../config-provider/DisabledContext'; export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`; @@ -33,18 +27,25 @@ export default defineComponent({ name: 'AUpload', inheritAttrs: false, props: initDefaultProps(uploadProps(), { - type: 'select' as UploadType, + type: 'select', multiple: false, action: '', data: {}, accept: '', showUploadList: true, - listType: 'text' as UploadListType, // or picture + listType: 'text', // or picture disabled: false, supportServerRender: true, }), setup(props, { slots, attrs, expose }) { const formItemContext = useInjectFormItemContext(); + const { prefixCls, direction, disabled } = useConfigInject('upload', props); + + // style + const [wrapSSR, hashId] = useStyle(prefixCls); + const disabledContext = useInjectDisabled(); + const mergedDisabled = computed(() => disabledContext.value ?? disabled.value); + const [mergedFileList, setMergedFileList] = useMergedState(props.defaultFileList || [], { value: toRef(props, 'fileList'), postState: list => { @@ -59,7 +60,7 @@ export default defineComponent({ }); const dragState = ref('drop'); - const upload = ref(); + const upload = ref(null); onMounted(() => { devWarning( props.fileList !== undefined || attrs.value === undefined, @@ -294,11 +295,6 @@ export default defineComponent({ upload, }); - const { prefixCls, direction } = useConfigInject('upload', props); - - // style - const [wrapSSR, hashId] = useStyle(prefixCls); - const [locale] = useLocaleReceiver( 'Upload', defaultLocale.Upload, @@ -312,7 +308,6 @@ export default defineComponent({ previewFile, onPreview, onDownload, - disabled, isImageUrl, progress, itemRender, @@ -330,7 +325,7 @@ export default defineComponent({ onPreview={onPreview} onDownload={onDownload} onRemove={handleRemove} - showRemoveIcon={!disabled && showRemoveIcon} + showRemoveIcon={!mergedDisabled.value && showRemoveIcon} showPreviewIcon={showPreviewIcon} showDownloadIcon={showDownloadIcon} removeIcon={removeIcon} @@ -350,7 +345,7 @@ export default defineComponent({ ); }; return () => { - const { listType, disabled, type } = props; + const { listType, type } = props; const { class: className, style: styleName, ...transAttrs } = attrs; const rcUploadProps = { onBatchStart, @@ -363,6 +358,7 @@ export default defineComponent({ prefixCls: prefixCls.value, beforeUpload: mergedBeforeUpload, onChange: undefined, + disabled: mergedDisabled.value, }; delete (rcUploadProps as any).remove; @@ -370,12 +366,12 @@ export default defineComponent({ // !children: https://github.com/ant-design/ant-design/issues/14298 // disabled: https://github.com/ant-design/ant-design/issues/16478 // https://github.com/ant-design/ant-design/issues/24197 - if (!slots.default || disabled) { + if (!slots.default || mergedDisabled.value) { delete rcUploadProps.id; } const rtlCls = { - [`${prefixCls}-rtl`]: direction.value === 'rtl', + [`${prefixCls.value}-rtl`]: direction.value === 'rtl', }; if (type === 'drag') { @@ -387,7 +383,7 @@ export default defineComponent({ file => file.status === 'uploading', ), [`${prefixCls.value}-drag-hover`]: dragState.value === 'dragover', - [`${prefixCls.value}-disabled`]: disabled, + [`${prefixCls.value}-disabled`]: mergedDisabled.value, [`${prefixCls.value}-rtl`]: direction.value === 'rtl', }, attrs.class, @@ -423,7 +419,7 @@ export default defineComponent({ const uploadButtonCls = classNames(prefixCls.value, { [`${prefixCls.value}-select`]: true, [`${prefixCls.value}-select-${listType}`]: true, - [`${prefixCls.value}-disabled`]: disabled, + [`${prefixCls.value}-disabled`]: mergedDisabled.value, [`${prefixCls.value}-rtl`]: direction.value === 'rtl', }); const children = flattenChildren(slots.default?.()); diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx index e12ef14eb..560b929e0 100644 --- a/components/upload/UploadList/ListItem.tsx +++ b/components/upload/UploadList/ListItem.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'; +import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'; import type { ExtractPropTypes, CSSProperties } from 'vue'; import EyeOutlined from '@ant-design/icons-vue/EyeOutlined'; import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined'; @@ -69,6 +69,15 @@ export default defineComponent({ onBeforeUnmount(() => { clearTimeout(progressRafRef.value); }); + const mergedStatus = ref(props.file?.status); + watch( + () => props.file?.status, + status => { + if (status !== 'removed') { + mergedStatus.value = status; + } + }, + ); const { rootPrefixCls } = useConfigInject('upload', props); const transitionProps = computed(() => getTransitionProps(`${rootPrefixCls.value}-fade`)); return () => { @@ -100,10 +109,10 @@ export default defineComponent({ const iconNode = iconRender({ file }); let icon =
; if (listType === 'picture' || listType === 'picture-card') { - if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) { + if (mergedStatus.value === 'uploading' || (!file.thumbUrl && !file.url)) { const uploadingClassName = { [`${prefixCls}-list-item-thumbnail`]: true, - [`${prefixCls}-list-item-file`]: file.status !== 'uploading', + [`${prefixCls}-list-item-file`]: mergedStatus.value !== 'uploading', }; icon =