Feat/upload list shape (ant-design#40134)

* 💄 STYLE: add **picture-circle** to `listType` * 📖 DOC: update API table * Update components/upload/index.en-US.md Co-authored-by: lijianan <574980606@qq.com> * Update components/upload/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> * Update components/upload/Upload.tsx Co-authored-by: Amumu <yoyo837@hotmail.com> * 👌 IMPROVE: classNames * 👌 IMPROVE: add missing className * 📖 DOC: update Upload demo for icons * 👌 IMPROVE: classNames order * 🧪 TEST: update snapshots * 👌 IMPROVE: Upload list classNames & snapshots * 📖 DOC: add new demo & revert previous ones * Update components/upload/index.zh-CN.md Co-authored-by: Amumu <yoyo837@hotmail.com> * Update components/upload/index.en-US.md Co-authored-by: Amumu <yoyo837@hotmail.com> * Update components/upload/index.zh-CN.md Co-authored-by: Amumu <yoyo837@hotmail.com> --------- Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: Amumu <yoyo837@hotmail.com>
RedJue · Apr 25, 2023 · 325afc8 · 325afc8
1 parent 50ba8e2
commit 325afc8
Show file tree

Hide file tree

Showing 13 changed files with 931 additions and 127 deletions.
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
@@ -428,12 +428,15 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const uploadButton = renderUploadButton(children ? undefined : { display: 'none' });
 
-  if (listType === 'picture-card') {
+  if (listType === 'picture-card' || listType === 'picture-circle') {
     return wrapSSR(
       <span
         className={classNames(
           `${prefixCls}-wrapper`,
-          `${prefixCls}-picture-card-wrapper`,
+          {
+            [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
+            [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
+          },
           rtlCls,
           className,
           hashId,

diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx
@@ -96,7 +96,7 @@ const ListItem = React.forwardRef(
 
     const iconNode = iconRender(file);
     let icon = <div className={`${prefixCls}-icon`}>{iconNode}</div>;
-    if (listType === 'picture' || listType === 'picture-card') {
+    if (listType === 'picture' || listType === 'picture-card' || listType === 'picture-circle') {
       if (mergedStatus === 'uploading' || (!file.thumbUrl && !file.url)) {
         const uploadingClassName = classNames({
           [`${prefixCls}-list-item-thumbnail`]: true,
@@ -161,7 +161,7 @@ const ListItem = React.forwardRef(
             locale.downloadFile,
           )
         : null;
-    const downloadOrDelete = listType !== 'picture-card' && (
+    const downloadOrDelete = listType !== 'picture-card' && listType !== 'picture-circle' && (
       <span
         key="download-delete"
         className={classNames(`${prefixCls}-list-item-actions`, {
@@ -220,13 +220,14 @@ const ListItem = React.forwardRef(
       </a>
     ) : null;
 
-    const pictureCardActions = listType === 'picture-card' && mergedStatus !== 'uploading' && (
-      <span className={`${prefixCls}-list-item-actions`}>
-        {previewIcon}
-        {mergedStatus === 'done' && downloadIcon}
-        {removeIcon}
-      </span>
-    );
+    const pictureCardActions = (listType === 'picture-card' || listType === 'picture-circle') &&
+      mergedStatus !== 'uploading' && (
+        <span className={`${prefixCls}-list-item-actions`}>
+          {previewIcon}
+          {mergedStatus === 'done' && downloadIcon}
+          {removeIcon}
+        </span>
+      );
 
     const { getPrefixCls } = React.useContext(ConfigContext);
     const rootPrefixCls = getPrefixCls();

diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx
@@ -48,7 +48,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
 
   // ============================= Effect =============================
   React.useEffect(() => {
-    if (listType !== 'picture' && listType !== 'picture-card') {
+    if (listType !== 'picture' && listType !== 'picture-card' && listType !== 'picture-circle') {
       return;
     }
     (items || []).forEach((file: InternalUploadFile) => {
@@ -107,7 +107,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     let icon: React.ReactNode = isLoading ? <LoadingOutlined /> : <PaperClipOutlined />;
     if (listType === 'picture') {
       icon = isLoading ? <LoadingOutlined /> : fileIcon;
-    } else if (listType === 'picture-card') {
+    } else if (listType === 'picture-card' || listType === 'picture-circle') {
       icon = isLoading ? locale.uploading : fileIcon;
     }
     return icon;
@@ -172,7 +172,8 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     })),
   ];
 
-  const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
+  const animationDirection =
+    listType === 'picture-card' || listType === 'picture-circle' ? 'animate-inline' : 'animate';
   // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
 
   let motionConfig: Omit<CSSMotionListProps, 'onVisibleChanged'> = {
@@ -194,7 +195,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     return motion;
   }, [rootPrefixCls]);
 
-  if (listType !== 'picture-card') {
+  if (listType !== 'picture-card' && listType !== 'picture-circle') {
     motionConfig = {
       ...listItemMotion,
       ...motionConfig,