[Upload 上传] 新增拖拽排序功能 (#2527)

* feat: 初始交互完成 * feat: 交互功能完成 * feat: 删除添加配合排序完成 * feat: 完成交互 * feat: 完成拖拽排序 * feat: 完成示例 * feat: 完成拖拽排序 * chore: 优化注释 * fix: 修复优化 * fix: 修复bug * test: update snapshots --------- Co-authored-by: anlyyao <[email protected]>
Tencent · Jan 16, 2024 · 8fb4efd · 8fb4efd
1 parent 5167bee
commit 8fb4efd
Show file tree

Hide file tree

Showing 17 changed files with 736 additions and 83 deletions.
diff --git a/src/upload/README.en-US.md b/src/upload/README.en-US.md
@@ -20,6 +20,8 @@ media-type | Array | ['image', 'video'] | Typescript：`Array<MediaType>` `type
 request-method | Function | - | \- | N
 size-limit | Number / Object | - | Typescript：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 source | String | media | options：media/messageFile | N
+draggable | Boolean / Object | - | Does it support drag and drop sorting. Whether it vibrates during long periods of time and whether it vibrates during collisions。。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
+transition | Object | `{ backTransition: true, duration: 300, timingFunction: 'ease' }` | Transition parameters when dragging and moving positions。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 
 ### Upload Events
 
@@ -31,6 +33,9 @@ fail | \- | \-
 remove | `(index: number; file: UploadFile)` | \-
 select-change | `(currentSelectedFiles: MediaContext[])` | \-
 success | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
+click | `(file: VideoContext \| ImageContext)` | -
+drop | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface 
+ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
 
 
 ### CSS Variables
@@ -44,3 +49,4 @@ Name | Default Value | Description
 --td-upload-add-icon-font-size | 56rpx | - 
 --td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - 
 --td-upload-radius | @radius-default | - 
+--td-upload-drag-z-index | 999 | - 
diff --git a/src/upload/README.md b/src/upload/README.md
@@ -32,6 +32,10 @@ isComponent: true
 
 {{ multiple }}
 
+### 长按拖拽排序图片
+
+{{ drag }}
+
 ### 加载状态
 
 支持多种状态：`loading`、`reload`、`failed`；
@@ -66,6 +70,9 @@ media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片
 request-method | Function | - | 自定义上传方法 | N
 size-limit | Number / Object | - | 图片文件大小限制，单位 KB。可选单位有：`'B' \| 'KB' \| 'MB' \| 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 source | String | media | 来源。可选项：media/messageFile | N
+draggable | Boolean / Object | - | 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
+transition | Object | `{ backTransition: true, duration: 300, timingFunction: 'ease' }` | 拖拽位置移动时的过渡参数。TS 类型：`{ backTransition: boolean, duration: number, timingFunction: string }`，`duration`单位为ms。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
+
 
 ### Upload Events
 
@@ -78,6 +85,7 @@ remove | `(index: number; file: UploadFile)` | 移除文件时触发
 select-change | `(files: MediaContext[]; currentSelectedFiles: MediaContext[])` | 选择文件或图片之后，上传之前，触发该事件。<br />`files` 表示之前已经上传完成的文件列表。<br />`currentSelectedFiles` 表示本次上传选中的文件列表
 success | `(files: MediaContext)` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
 click | `(file: VideoContext \| ImageContext)` | 点击已选文件时触发；常用于重新上传
+drop | `(files: MediaContext)` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
 
 
 ### CSS 变量
@@ -91,3 +99,4 @@ click | `(file: VideoContext \| ImageContext)` | 点击已选文件时触发；
 --td-upload-add-icon-font-size | 56rpx | - 
 --td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - 
 --td-upload-radius | @radius-default | - 
+--td-upload-drag-z-index | 999 | - 
diff --git a/src/upload/__test__/__snapshots__/demo.test.js.snap b/src/upload/__test__/__snapshots__/demo.test.js.snap
@@ -62,7 +62,7 @@ exports[`Upload Upload multiple demo works fine 1`] = `
             "url": "https://tdesign.gtimg.com/miniprogram/images/example6.png",
           },
           Object {
-            "name": "uploaded1.png",
+            "name": "uploaded3.png",
             "type": "image",
             "url": "https://tdesign.gtimg.com/miniprogram/images/example5.png",
           },
@@ -83,6 +83,7 @@ exports[`Upload Upload multiple demo works fine 1`] = `
       }}"
       bind:click="handleClick"
       bind:remove="handleRemove"
+      bind:sort-end="handleSortEnd"
       bind:success="handleSuccess"
     />
   </wx-view>

diff --git a/src/upload/_example/drag/index.js b/src/upload/_example/drag/index.js
@@ -0,0 +1,55 @@
+Component({
+  data: {
+    originFiles: [
+      {
+        url: 'https://tdesign.gtimg.com/miniprogram/images/example4.png',
+        name: 'uploaded1.png',
+        type: 'image',
+      },
+      {
+        url: 'https://tdesign.gtimg.com/miniprogram/images/example6.png',
+        name: 'uploaded2.png',
+        type: 'image',
+      },
+      {
+        url: 'https://tdesign.gtimg.com/miniprogram/images/example5.png',
+        name: 'uploaded3.png',
+        type: 'image',
+      },
+    ],
+    gridConfig: {
+      column: 4,
+      width: 160,
+      height: 160,
+    },
+    config: {
+      count: 1,
+    },
+  },
+  methods: {
+    handleSuccess(e) {
+      const { files } = e.detail;
+      this.setData({
+        originFiles: files,
+      });
+    },
+    handleRemove(e) {
+      const { index } = e.detail;
+      const { originFiles } = this.data;
+      originFiles.splice(index, 1);
+      this.setData({
+        originFiles,
+      });
+    },
+    handleClick(e) {
+      console.log(e.detail.file);
+    },
+
+    handleDrop(e) {
+      const { files } = e.detail;
+      this.setData({
+        originFiles: files,
+      });
+    },
+  },
+});
diff --git a/src/upload/_example/drag/index.json b/src/upload/_example/drag/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-upload": "tdesign-miniprogram/upload/upload"
+  }
+}
diff --git a/src/upload/_example/drag/index.wxml b/src/upload/_example/drag/index.wxml
@@ -0,0 +1,13 @@
+<view class="wrapper">
+  <t-upload
+    draggable
+    disabled
+    media-type="{{['video','image']}}"
+    files="{{originFiles}}"
+    gridConfig="{{gridConfig}}"
+    bind:success="handleSuccess"
+    bind:remove="handleRemove"
+    bind:click="handleClick"
+    bind:drop="handleDrop"
+  />
+</view>
diff --git a/src/upload/_example/drag/index.wxss b/src/upload/_example/drag/index.wxss
diff --git a/src/upload/_example/multiple/index.js b/src/upload/_example/multiple/index.js
@@ -13,7 +13,7 @@ Component({
       },
       {
         url: 'https://tdesign.gtimg.com/miniprogram/images/example5.png',
-        name: 'uploaded1.png',
+        name: 'uploaded3.png',
         type: 'image',
       },
     ],

diff --git a/src/upload/_example/multiple/index.wxml b/src/upload/_example/multiple/index.wxml
@@ -7,5 +7,6 @@
     bind:success="handleSuccess"
     bind:remove="handleRemove"
     bind:click="handleClick"
+    bind:sort-end="handleSortEnd"
   />
 </view>
diff --git a/src/upload/_example/upload.json b/src/upload/_example/upload.json
@@ -4,6 +4,7 @@
     "single": "./single",
     "multiple": "./multiple",
     "status": "./status",
-    "messageFile": "./messageFile"
+    "messageFile": "./messageFile",
+    "drag": "./drag"
   }
 }
diff --git a/src/upload/_example/upload.wxml b/src/upload/_example/upload.wxml
@@ -15,6 +15,12 @@
       <multiple />
     </view>
   </t-demo>
+  <t-demo title="" desc="长按拖拽排序图片">
+    <view class="upload-demo">
+      <view class="upload-demo__title">上传图片</view>
+      <drag />
+    </view>
+  </t-demo>
   <t-demo title="02 组件状态" desc="加载状态">
     <view class="upload-demo">
       <view class="upload-demo__title">上传图片</view>