refcator:upload (#6261)

* refcator:upload

* docs:update & refactor: upload type

* Update style.ts

---------

Co-authored-by: tangjinzhou <[email protected]>

Author: shifeng1993

components/style.ts

@@ -43,7 +43,7 @@ import './timeline/style';
 import './input-number/style';
 // import './transfer/style';
 import './tree/style';
-import './upload/style';
+// import './upload/style';
 // import './layout/style';
 // import './anchor/style';
 // import './list/style';

components/theme/interface/components.ts

@@ -44,7 +44,7 @@ import type { ComponentToken as TagComponentToken } from '../../tag/style';
 import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
 import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
 import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
-// import type { ComponentToken as UploadComponentToken } from '../../upload/style';
+import type { ComponentToken as UploadComponentToken } from '../../upload/style';
 // import type { ComponentToken as TourComponentToken } from '../../tour/style';
 // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
 // import type { ComponentToken as AppComponentToken } from '../../app/style';
@@ -107,7 +107,7 @@ export interface ComponentTokenMap {
   Menu?: MenuComponentToken;
   Modal?: ModalComponentToken;
   Message?: MessageComponentToken;
-  //   Upload?: UploadComponentToken;
+  Upload?: UploadComponentToken;
   Tooltip?: TooltipComponentToken;
   //   Table?: TableComponentToken;
   Space?: SpaceComponentToken;

components/upload/Upload.tsx

@@ -23,6 +23,9 @@ import type { VueNode } from '../_util/type';
 import classNames from '../_util/classNames';
 import { useInjectFormItemContext } from '../form';
 
+// CSSINJS
+import useStyle from './style';
+
 export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
 
 export default defineComponent({
@@ -292,6 +295,10 @@ export default defineComponent({
     });
 
     const { prefixCls, direction } = useConfigInject('upload', props);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const [locale] = useLocaleReceiver(
       'Upload',
       defaultLocale.Upload,
@@ -366,6 +373,11 @@ export default defineComponent({
       if (!slots.default || disabled) {
         delete rcUploadProps.id;
       }
+
+      const rtlCls = {
+        [`${prefixCls}-rtl`]: direction.value === 'rtl',
+      };
+
       if (type === 'drag') {
         const dragCls = classNames(
           prefixCls.value,
@@ -379,9 +391,14 @@ export default defineComponent({
             [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
           },
           attrs.class,
+          hashId.value,
         );
-        return (
-          <span>
+
+        return wrapSSR(
+          <span
+            {...attrs}
+            class={classNames(`${prefixCls.value}-wrapper`, rtlCls, className, hashId.value)}
+          >
             <div
               class={dragCls}
               onDrop={onFileDrop}
@@ -399,7 +416,7 @@ export default defineComponent({
               </VcUpload>
             </div>
             {renderUploadList()}
-          </span>
+          </span>,
         );
       }
 
@@ -417,17 +434,29 @@ export default defineComponent({
       );
 
       if (listType === 'picture-card') {
-        return (
-          <span class={classNames(`${prefixCls.value}-picture-card-wrapper`, attrs.class)}>
+        return wrapSSR(
+          <span
+            {...attrs}
+            class={classNames(
+              `${prefixCls.value}-wrapper`,
+              `${prefixCls.value}-picture-card-wrapper`,
+              rtlCls,
+              attrs.class,
+              hashId.value,
+            )}
+          >
             {renderUploadList(renderUploadButton, !!(children && children.length))}
-          </span>
+          </span>,
         );
       }
-      return (
-        <span class={attrs.class}>
+      return wrapSSR(
+        <span
+          {...attrs}
+          class={classNames(`${prefixCls.value}-wrapper`, rtlCls, attrs.class, hashId.value)}
+        >
           {renderUploadButton(children && children.length ? undefined : { display: 'none' })}
           {renderUploadList()}
-        </span>
+        </span>,
       );
     };
   },

components/upload/UploadList/ListItem.tsx

@@ -1,5 +1,5 @@
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
-import type { ExtractPropTypes, PropType, CSSProperties } from 'vue';
+import type { ExtractPropTypes, CSSProperties } from 'vue';
 import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
 import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined';
 import DownloadOutlined from '@ant-design/icons-vue/DownloadOutlined';
@@ -16,36 +16,39 @@ import type {
 import type { VueNode } from '../../_util/type';
 import useConfigInject from '../../config-provider/hooks/useConfigInject';
 import Transition, { getTransitionProps } from '../../_util/transition';
+import { booleanType, stringType, functionType, arrayType, objectType } from '../../_util/type';
+
 export const listItemProps = () => {
   return {
     prefixCls: String,
-    locale: { type: Object as PropType<UploadLocale>, default: undefined as UploadLocale },
-    file: Object as PropType<UploadFile>,
-    items: Array as PropType<UploadFile[]>,
-    listType: String as PropType<UploadListType>,
-    isImgUrl: Function as PropType<(file: UploadFile) => boolean>,
+    locale: objectType<UploadLocale>(undefined as UploadLocale),
+    file: objectType<UploadFile>(),
+    items: arrayType<UploadFile[]>(),
+    listType: stringType<UploadListType>(),
+    isImgUrl: functionType<(file: UploadFile) => boolean>(),
 
-    showRemoveIcon: { type: Boolean, default: undefined },
-    showDownloadIcon: { type: Boolean, default: undefined },
-    showPreviewIcon: { type: Boolean, default: undefined },
-    removeIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
-    downloadIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
-    previewIcon: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
+    showRemoveIcon: booleanType(),
+    showDownloadIcon: booleanType(),
+    showPreviewIcon: booleanType(),
+    removeIcon: functionType<(opt: { file: UploadFile }) => VueNode>(),
+    downloadIcon: functionType<(opt: { file: UploadFile }) => VueNode>(),
+    previewIcon: functionType<(opt: { file: UploadFile }) => VueNode>(),
 
-    iconRender: Function as PropType<(opt: { file: UploadFile }) => VueNode>,
-    actionIconRender: Function as PropType<
-      (opt: {
-        customIcon: VueNode;
-        callback: () => void;
-        prefixCls: string;
-        title?: string | undefined;
-      }) => VueNode
-    >,
-    itemRender: Function as PropType<ItemRender>,
-    onPreview: Function as PropType<(file: UploadFile, e: Event) => void>,
-    onClose: Function as PropType<(file: UploadFile) => void>,
-    onDownload: Function as PropType<(file: UploadFile) => void>,
-    progress: Object as PropType<UploadListProgressProps>,
+    iconRender: functionType<(opt: { file: UploadFile }) => VueNode>(),
+    actionIconRender:
+      functionType<
+        (opt: {
+          customIcon: VueNode;
+          callback: () => void;
+          prefixCls: string;
+          title?: string | undefined;
+        }) => VueNode
+      >(),
+    itemRender: functionType<ItemRender>(),
+    onPreview: functionType<(file: UploadFile, e: Event) => void>(),
+    onClose: functionType<(file: UploadFile) => void>(),
+    onDownload: functionType<(file: UploadFile) => void>(),
+    progress: objectType<UploadListProgressProps>(),
   };
 };
 
@@ -93,7 +96,6 @@ export default defineComponent({
       const { class: className, style } = attrs;
       // This is used for legacy span make scrollHeight the wrong value.
       // We will force these to be `display: block` with non `picture-card`
-      const spanClassName = `${prefixCls}-span`;
 
       const iconNode = iconRender({ file });
       let icon = <div class={`${prefixCls}-text-icon`}>{iconNode}</div>;
@@ -162,7 +164,7 @@ export default defineComponent({
         <span
           key="download-delete"
           class={[
-            `${prefixCls}-list-item-card-actions`,
+            `${prefixCls}-list-item-actions`,
             {
               picture: listType === 'picture',
             },
@@ -231,30 +233,29 @@ export default defineComponent({
       } else {
         message = file.error?.statusText || file.error?.message || locale.uploadError;
       }
-      const iconAndPreview = (
-        <span class={spanClassName}>
-          {icon}
-          {preview}
-        </span>
-      );
 
       const dom = (
         <div class={infoUploadingClass}>
-          <div class={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
+          {icon}
+          {preview}
           {actions}
           {showProgress.value && (
             <Transition {...transitionProps.value}>
               <div v-show={file.status === 'uploading'} class={`${prefixCls}-list-item-progress`}>
                 {'percent' in file ? (
-                  <Progress {...progressProps} type="line" percent={file.percent} />
+                  <Progress
+                    {...(progressProps as UploadListProgressProps)}
+                    type="line"
+                    percent={file.percent}
+                  />
                 ) : null}
               </div>
             </Transition>
           )}
         </div>
       );
       const listContainerNameClass = {
-        [`${prefixCls}-list-${listType}-container`]: true,
+        [`${prefixCls}-list-item-container`]: true,
         [`${className}`]: !!className,
       };
       const item =

components/upload/UploadList/index.tsx

@@ -121,7 +121,7 @@ export default defineComponent({
         onClick: () => {
           callback();
         },
-        class: `${prefixCls}-list-item-card-actions-btn`,
+        class: `${prefixCls}-list-item-action`,
       };
       if (isValidElement(customIcon)) {
         return <Button {...btnProps} v-slots={{ icon: () => customIcon }} />;

components/upload/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Entry
 title: Upload
-cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*93ymR4RD4S0AAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Upload file by selecting or dragging.

components/upload/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 subtitle: 上传
 type: 数据录入
 title: Upload
-cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*93ymR4RD4S0AAAAAAAAAAAAADrJ8AQ/original
 ---
 
 文件选择上传和拖拽上传控件。