feat(Upload): support addBtn and removeBtn props

src/common/utils.wxs

@@ -24,6 +24,10 @@ function isObject(obj) {
   return obj && obj.constructor === 'Object';
 }
 
+function isBoolean(value) {
+  return typeof value === 'boolean';
+}
+
 var isNoEmptyObj = function (obj) {
   return isObject(obj) && JSON.stringify(obj) !== '{}';
 };
@@ -135,6 +139,7 @@ module.exports = {
   isString: isString,
   isArray: isArray,
   isObject: isObject,
+  isBoolean: isBoolean,
   isNoEmptyObj: isNoEmptyObj,
   includes: includes,
   cls: cls,

src/upload/README.en-US.md

@@ -8,6 +8,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+add-btn | Boolean | true | \- | N
 add-content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 allow-upload-duplicate-file | Boolean | false | `暂不支持`。allow to upload duplicate name files | N
 config | Object | - | Typescript：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
@@ -20,6 +21,7 @@ gutter | Number | 16 | \- | N
 image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 max | Number | 0 | max count of files limit | N
 media-type | Array | ['image', 'video'] | Typescript：`Array<MediaType>` `type MediaType = 'image' \| 'video'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
+remove-btn | Boolean | true | \- | N
 request-method | Function | - | \- | N
 size-limit | Number / Object | - | files size limit。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

src/upload/README.md

@@ -71,6 +71,7 @@ isComponent: true
 -- | -- | -- | -- | --
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+add-btn | Boolean | true | 添加按钮 | N
 add-content | String / Slot | - | 添加按钮内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 allow-upload-duplicate-file | Boolean | false | `暂不支持`。是否允许重复上传相同文件名的文件 | N
 config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
@@ -83,6 +84,7 @@ gutter | Number | 16 | 预览窗格的 `gutter` 大小，单位 rpx | N
 image-props | Object | - | 透传 Image 组件全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N
 media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片或视频。TS 类型：`Array<MediaType>` `type MediaType = 'image' \| 'video'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
+remove-btn | Boolean | true | 移除按钮 | N
 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

src/upload/__test__/__snapshots__/demo.test.js.snap

@@ -102,16 +102,19 @@ exports[`Upload Upload multiple demo works fine 1`] = `
         Array [
           Object {
             "name": "uploaded1.png",
+            "removeBtn": true,
             "type": "image",
             "url": "https://tdesign.gtimg.com/mobile/demos/example4.png",
           },
           Object {
             "name": "uploaded2.png",
+            "removeBtn": true,
             "type": "image",
             "url": "https://tdesign.gtimg.com/mobile/demos/example6.png",
           },
           Object {
             "name": "uploaded3.png",
+            "removeBtn": true,
             "type": "image",
             "url": "https://tdesign.gtimg.com/mobile/demos/example5.png",
           },
@@ -130,6 +133,7 @@ exports[`Upload Upload multiple demo works fine 1`] = `
           "image",
         ]
       }}"
+      removeBtn="{{false}}"
       bind:click="handleClick"
       bind:remove="handleRemove"
       bind:sort-end="handleSortEnd"

src/upload/_example/multiple/index.js

@@ -5,16 +5,19 @@ Component({
         url: 'https://tdesign.gtimg.com/mobile/demos/example4.png',
         name: 'uploaded1.png',
         type: 'image',
+        removeBtn: true,
       },
       {
         url: 'https://tdesign.gtimg.com/mobile/demos/example6.png',
         name: 'uploaded2.png',
         type: 'image',
+        removeBtn: true,
       },
       {
         url: 'https://tdesign.gtimg.com/mobile/demos/example5.png',
         name: 'uploaded3.png',
         type: 'image',
+        removeBtn: true,
       },
     ],
     gridConfig: {

src/upload/_example/multiple/index.wxml

@@ -4,6 +4,7 @@
     media-type="{{['video','image']}}"
     files="{{originFiles}}"
     gridConfig="{{gridConfig}}"
+    removeBtn="{{false}}"
     bind:success="handleSuccess"
     bind:remove="handleRemove"
     bind:click="handleClick"

src/upload/props.ts

@@ -6,6 +6,11 @@
 
 import { TdUploadProps } from './type';
 const props: TdUploadProps = {
+  /** 添加按钮 */
+  addBtn: {
+    type: Boolean,
+    value: true,
+  },
   /** 添加按钮内容 */
   addContent: {
     type: String,
@@ -60,6 +65,11 @@ const props: TdUploadProps = {
     type: Array,
     value: ['image', 'video'],
   },
+  /** 移除按钮 */
+  removeBtn: {
+    type: Boolean,
+    value: true,
+  },
   /** 自定义上传方法 */
   requestMethod: {
     type: null,

src/upload/type.ts

@@ -7,6 +7,14 @@
 import { ImageProps } from '../image/index';
 
 export interface TdUploadProps {
+  /**
+   * 添加按钮
+   * @default true
+   */
+  addBtn?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 添加按钮内容
    */
@@ -95,6 +103,14 @@ export interface TdUploadProps {
     type: ArrayConstructor;
     value?: Array<MediaType>;
   };
+  /**
+   * 移除按钮
+   * @default true
+   */
+  removeBtn?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 自定义上传方法
    */

src/upload/upload.wxml

@@ -29,7 +29,6 @@
           <t-image
             wx:if="{{file.type !== 'video'}}"
             data-file="{{file}}"
-            bind:tap="onProofTap"
             data-index="{{index}}"
             t-class="{{classPrefix}}__thumbnail"
             style="{{imageProps && imageProps.style || ''}}"
@@ -41,23 +40,24 @@
             shape="{{imageProps && imageProps.shape || 'round'}}"
             webp="{{imageProps && imageProps.webp || false}}"
             showMenuByLongpress="{{imageProps && imageProps.showMenuByLongpress || false}}"
+            bind:tap="onProofTap"
           />
           <video
-            data-file="{{file}}"
-            bind:tap="onFileClick"
             wx:if="{{file.type === 'video'}}"
             class="{{classPrefix}}__thumbnail"
             src="{{file.url}}"
             poster="{{ file.thumb }}"
             controls
             autoplay="{{false}}"
             objectFit="contain"
+            data-file="{{file}}"
+            bind:tap="onFileClick"
           />
           <!-- 失败重试 -->
           <view
-            data-index="{{index}}"
             wx:if="{{file.status && file.status != 'done'}}"
             class="{{classPrefix}}__progress-mask"
+            data-index="{{index}}"
             data-file="{{file}}"
             bind:tap="onFileClick"
           >
@@ -73,11 +73,12 @@
 
           <!-- 删除 -->
           <view
+            wx:if="{{ _.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn}}"
             class="{{classPrefix}}__close-btn hotspot-expanded"
-            bindtap="onDelete"
             data-index="{{index}}"
             aria-role="button"
             aria-label="删除"
+            bindtap="onDelete"
           >
             <t-icon name="close" size="32rpx" color="#fff" />
           </view>
@@ -86,11 +87,11 @@
 
       <!-- 添加 -->
       <t-grid-item
-        wx:if="{{customLimit > 0}}"
+        wx:if="{{ addBtn && customLimit > 0}}"
         t-class="{{classPrefix}}__grid"
         t-class-content="{{classPrefix}}__grid-content"
-        bindclick="onAddTap"
         aria-label="上传"
+        bindclick="onAddTap"
       >
         <view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}">
           <slot name="add-content" />
@@ -112,14 +113,14 @@
       >
         <view
           class="{{classPrefix}}__drag-item"
+          style="width: {{100 / column}}%; --td-upload-drag-transition-duration: {{transition.duration}}ms; --td-upload-drag-transition-timing-function: {{transition.timingFunction}}"
           wx:for="{{customFiles}}"
           wx:key="url"
           wx:for-item="file"
-          style="width: {{100 / column}}%; --td-upload-drag-transition-duration: {{transition.duration}}ms; --td-upload-drag-transition-timing-function: {{transition.timingFunction}}"
+          data-index="{{index}}"
           bind:longpress="{{handler.longPress}}"
           catch:touchmove="{{dragging ? handler.touchMove : ''}}"
           catch:touchend="{{dragging ? handler.touchEnd : ''}}"
-          data-index="{{index}}"
         >
           <!-- 图片/视频 -->
           <t-grid-item
@@ -137,7 +138,6 @@
               <t-image
                 wx:if="{{file.type !== 'video'}}"
                 data-file="{{file}}"
-                bind:tap="onProofTap"
                 data-index="{{index}}"
                 t-class="{{classPrefix}}__thumbnail"
                 style="{{imageProps && imageProps.style || ''}}"
@@ -149,23 +149,24 @@
                 shape="{{imageProps && imageProps.shape || 'round'}}"
                 webp="{{imageProps && imageProps.webp || false}}"
                 showMenuByLongpress="{{imageProps && imageProps.showMenuByLongpress || false}}"
+                bind:tap="onProofTap"
               />
               <video
-                data-file="{{file}}"
-                bind:tap="onFileClick"
                 wx:if="{{file.type === 'video'}}"
                 class="{{classPrefix}}__thumbnail"
                 src="{{file.url}}"
                 poster="{{ file.thumb }}"
                 controls
                 autoplay="{{false}}"
                 objectFit="contain"
+                data-file="{{file}}"
+                bind:tap="onFileClick"
               />
               <!-- 失败重试 -->
               <view
-                data-index="{{index}}"
                 wx:if="{{file.status && file.status != 'done'}}"
                 class="{{classPrefix}}__progress-mask"
+                data-index="{{index}}"
                 data-file="{{file}}"
                 bind:tap="onFileClick"
               >
@@ -191,26 +192,27 @@
 
               <!-- 删除 -->
               <view
+                wx:if="{{ _.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn}}"
                 class="{{classPrefix}}__close-btn hotspot-expanded"
-                bindtap="onDelete"
                 data-index="{{index}}"
                 data-url="{{file.url}}"
                 aria-role="button"
                 aria-label="删除"
+                bindtap="onDelete"
               >
                 <t-icon name="close" size="32rpx" color="#fff" />
               </view>
             </view>
           </t-grid-item>
-          <!-- 添加 -->
         </view>
-        <view class="{{classPrefix}}__drag-item" style="width: {{100 / column}}%" wx:if="{{customLimit > 0}}">
+        <!-- 添加 -->
+        <view wx:if="{{addBtn && customLimit > 0}}" class="{{classPrefix}}__drag-item" style="width: {{100 / column}}%">
           <t-grid-item
             t-class="{{classPrefix}}__grid"
             t-class-content="{{classPrefix}}__grid-content"
-            bindclick="onAddTap"
             aria-label="上传"
             style="width: 100%"
+            bindclick="onAddTap"
           >
             <view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}">
               <slot name="add-content" />