From c1f128e6608b4230462551109951349fcf78e7e9 Mon Sep 17 00:00:00 2001 From: shifeng1993 Date: Fri, 10 Feb 2023 21:15:05 +0800 Subject: [PATCH 1/3] refcator:upload --- components/style.ts | 2 +- components/theme/interface/components.ts | 4 +- components/upload/Upload.tsx | 47 +- components/upload/UploadList/ListItem.tsx | 20 +- components/upload/UploadList/index.tsx | 2 +- components/upload/style/dragger.ts | 76 +++ components/upload/style/index.less | 563 ---------------------- components/upload/style/index.ts | 66 +++ components/upload/style/index.tsx | 8 - components/upload/style/list.ts | 129 +++++ components/upload/style/motion.ts | 52 ++ components/upload/style/picture.ts | 227 +++++++++ components/upload/style/rtl.less | 165 ------- components/upload/style/rtl.ts | 15 + 14 files changed, 616 insertions(+), 760 deletions(-) create mode 100644 components/upload/style/dragger.ts delete mode 100644 components/upload/style/index.less create mode 100644 components/upload/style/index.ts delete mode 100644 components/upload/style/index.tsx create mode 100644 components/upload/style/list.ts create mode 100644 components/upload/style/motion.ts create mode 100644 components/upload/style/picture.ts delete mode 100644 components/upload/style/rtl.less create mode 100644 components/upload/style/rtl.ts diff --git a/components/style.ts b/components/style.ts index 23700052aa..bf1d0539e5 100644 --- a/components/style.ts +++ b/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'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index cfd7a4500c..ba71169723 100644 --- a/components/theme/interface/components.ts +++ b/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; diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index f1fe7bad3d..c4aa8848a5 100644 --- a/components/upload/Upload.tsx +++ b/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 ( - + + return wrapSSR( +
{renderUploadList()} - + , ); } @@ -417,17 +434,29 @@ export default defineComponent({ ); if (listType === 'picture-card') { - return ( - + return wrapSSR( + {renderUploadList(renderUploadButton, !!(children && children.length))} - + , ); } - return ( - + return wrapSSR( + {renderUploadButton(children && children.length ? undefined : { display: 'none' })} {renderUploadList()} - + , ); }; }, diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx index eaf294e81c..213c9ed133 100644 --- a/components/upload/UploadList/ListItem.tsx +++ b/components/upload/UploadList/ListItem.tsx @@ -93,7 +93,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 =
{iconNode}
; @@ -162,7 +161,7 @@ export default defineComponent({ - {icon} - {preview} - - ); const dom = (
-
{iconAndPreview}
+ {icon} + {preview} {actions} {showProgress.value && (
{'percent' in file ? ( - + ) : null}
@@ -254,7 +252,7 @@ export default defineComponent({
); const listContainerNameClass = { - [`${prefixCls}-list-${listType}-container`]: true, + [`${prefixCls}-list-item-container`]: true, [`${className}`]: !!className, }; const item = diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx index 7d4e450f15..0051015f73 100644 --- a/components/upload/UploadList/index.tsx +++ b/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