feat: Upload组件新增 disabled属性，首页补充服务声明 (#2489)

* feat(Upload): add disabled props * feat(Upload): recover trd-privacy content * feat(Upload): fix md
Tencent · Dec 13, 2023 · b7e89e7 · b7e89e7
1 parent db6dfc2
commit b7e89e7
Show file tree

Hide file tree

Showing 17 changed files with 73 additions and 5 deletions.
diff --git a/example/pages/home/home.json b/example/pages/home/home.json
@@ -1,7 +1,8 @@
 {
   "usingComponents": {
     "pull-down-list": "../../components/pull-down-list/index",
-    "t-footer": "tdesign-miniprogram/footer/footer"
+    "t-footer": "tdesign-miniprogram/footer/footer",
+    "trd-privacy": "/components/trd-privacy/privacy"
   },
   "navigationBarTitleText": "TDesign UI",
   "navigationBarBackgroundColor": "#f6f6f6",

diff --git a/example/pages/home/home.less b/example/pages/home/home.less
@@ -16,6 +16,14 @@ page {
   text-align: center;
 }
 
+.show_privacy {
+  color: #576b95;
+  text-align: right;
+  line-height: 50rpx;
+  font-size: 24rpx;
+  text-align: center;
+}
+
 .title-wrap {
   display: flex;
   align-items: center;

diff --git a/example/pages/home/home.ts b/example/pages/home/home.ts
@@ -18,6 +18,12 @@ Page({
         url: `/pages/${str.page}/${str.page}`,
       });
     }
+
+    this.trdPrivacy = this.selectComponent('#trdPrivacy');
+  },
+
+  showPrivacyWin() {
+    this.trdPrivacy.showPrivacyWin();
   },
 
   clickHandle(e) {

diff --git a/example/pages/home/home.wxml b/example/pages/home/home.wxml
@@ -13,5 +13,7 @@
   />
 </view>
 <view class="footer">
+  <view class="show_privacy" bindtap="showPrivacyWin">《TDesign组件库服务声明》</view>
   <t-footer text="Copyright © 1998 - {{currentYear}} Tencent. All Rights Reserved. 腾讯公司 版权所有"></t-footer>
 </view>
+<trd-privacy id="trdPrivacy" name="TDesign组件库" date="2023年11月14日" winStyle="{{winStyle}}"></trd-privacy>
diff --git a/src/upload/README.en-US.md b/src/upload/README.en-US.md
@@ -8,6 +8,7 @@ name | type | default | description | required
 add-content | String / Slot | - | \- | N
 allow-upload-duplicate-file | Boolean | false | \- | 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
+disabled | Boolean | false | \- | N
 file-list-display | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 files | Array | - | Typescript：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 default-files | Array | undefined | uncontrolled property。Typescript：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
@@ -38,5 +39,8 @@ Name | Default Value | Description
 -- | -- | --
 --td-upload-add-bg-color | @bg-color-secondarycontainer | - 
 --td-upload-add-color | @font-gray-3 | - 
+--td-upload-add-disabled-bg-color | @bg-color-component-disabled | - 
+--td-upload-add-icon-disabled-color | @text-color-disabled | - 
 --td-upload-add-icon-font-size | 56rpx | - 
+--td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - 
 --td-upload-radius | @radius-default | - 
diff --git a/src/upload/README.md b/src/upload/README.md
@@ -54,6 +54,7 @@ isComponent: true
 add-content | String / Slot | - | 添加按钮内容 | 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
+disabled | Boolean | false | 是否禁用组件| N
 file-list-display | Slot | - | 【开发中】用于完全自定义文件列表内容。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 files | Array | - | 已上传文件列表。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 default-files | Array | undefined | 已上传文件列表。非受控属性。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
@@ -85,5 +86,8 @@ click | `(file: VideoContext \| ImageContext)` | 点击已选文件时触发；
 -- | -- | --
 --td-upload-add-bg-color | @bg-color-secondarycontainer | - 
 --td-upload-add-color | @font-gray-3 | - 
+--td-upload-add-disabled-bg-color | @bg-color-component-disabled | - 
+--td-upload-add-icon-disabled-color | @text-color-disabled | - 
 --td-upload-add-icon-font-size | 56rpx | - 
+--td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - 
 --td-upload-radius | @radius-default | - 
diff --git a/src/upload/__test__/__snapshots__/demo.test.js.snap b/src/upload/__test__/__snapshots__/demo.test.js.snap
@@ -11,6 +11,7 @@ exports[`Upload Upload messageFile demo works fine 1`] = `
           "count": 1,
         }
       }}"
+      disabled="{{true}}"
       files="{{
         Array [
           Object {
@@ -47,6 +48,7 @@ exports[`Upload Upload multiple demo works fine 1`] = `
     class="wrapper"
   >
     <t-upload
+      disabled="{{true}}"
       files="{{
         Array [
           Object {
@@ -93,6 +95,7 @@ exports[`Upload Upload single demo works fine 1`] = `
     class="wrapper"
   >
     <t-upload
+      disabled="{{true}}"
       files="{{Array []}}"
       max="{{1}}"
       mediaType="{{
@@ -114,6 +117,7 @@ exports[`Upload Upload status demo works fine 1`] = `
     class="wrapper"
   >
     <t-upload
+      disabled="{{true}}"
       files="{{
         Array [
           Object {

diff --git a/src/upload/_example/messageFile/index.wxml b/src/upload/_example/messageFile/index.wxml
@@ -1,5 +1,6 @@
 <view class="wrapper">
   <t-upload
+    disabled
     mediaType="{{['video','image']}}"
     files="{{originFiles}}"
     gridConfig="{{gridConfig}}"

diff --git a/src/upload/_example/multiple/index.wxml b/src/upload/_example/multiple/index.wxml
@@ -1,5 +1,6 @@
 <view class="wrapper">
   <t-upload
+    disabled
     media-type="{{['video','image']}}"
     files="{{originFiles}}"
     gridConfig="{{gridConfig}}"

diff --git a/src/upload/_example/single/index.wxml b/src/upload/_example/single/index.wxml
@@ -1,5 +1,6 @@
 <view class="wrapper">
   <t-upload
+    disabled
     mediaType="{{['video','image']}}"
     max="{{1}}"
     files="{{fileList}}"

diff --git a/src/upload/_example/status/index.wxml b/src/upload/_example/status/index.wxml
@@ -1,5 +1,6 @@
 <view class="wrapper">
   <t-upload
+    disabled
     media-type="{{['video','image']}}"
     files="{{originFiles}}"
     gridConfig="{{gridConfig}}"

diff --git a/src/upload/_example/upload.wxml b/src/upload/_example/upload.wxml
@@ -1,6 +1,8 @@
 <view class="demo">
   <view class="demo-title">Upload 上传</view>
-  <view class="demo-desc">用于相册读取或拉起拍照的图片上传功能。</view>
+  <view class="demo-desc"
+    >用于相册读取或拉起拍照的图片上传功能。（目前示例均为禁用态，使用时请自行取消禁用态，以便正常使用上传动能。）</view
+  >
   <t-demo title="01 组件类型" desc="单选上传图片">
     <view class="upload-demo">
       <view class="upload-demo__title">上传图片</view>

diff --git a/src/upload/props.ts b/src/upload/props.ts
@@ -19,6 +19,11 @@ const props: TdUploadProps = {
   config: {
     type: Object,
   },
+  /** 是否禁用组件 */
+  disabled: {
+    type: Boolean,
+    value: false,
+  },
   /** 已上传文件列表 */
   files: {
     type: Array,

diff --git a/src/upload/type.ts b/src/upload/type.ts
@@ -29,6 +29,14 @@ export interface TdUploadProps {
     type: ObjectConstructor;
     value?: UploadMpConfig;
   };
+  /**
+   * 是否禁用组件
+   * @default false
+   */
+  disabled?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 自定义组件样式
    * @default ''

diff --git a/src/upload/upload.less b/src/upload/upload.less
@@ -2,8 +2,11 @@
 
 @upload-add-color: var(--td-upload-add-color, @font-gray-3);
 @upload-add-bg-color: var(--td-upload-add-bg-color, @bg-color-secondarycontainer);
+@upload-add-disabled-bg-color: var(--td-upload-add-disabled-bg-color, @bg-color-component-disabled);
 @upload-radius: var(--td-upload-radius, @radius-default);
 @upload-add-icon-font-size: var(--td-upload-add-icon-font-size, 56rpx);
+@upload-add-icon-disabled-color: var(--td-upload-add-icon-disabled-color, @text-color-disabled);
+@upload-disabled-mask: var(--td-upload-disabled-mask, rgba(255, 255, 255, 0.55));
 
 .@{prefix}-upload {
   &__grid {
@@ -27,6 +30,11 @@
     color: @upload-add-color;
     border-radius: @upload-radius;
 
+    &--disabled {
+      background-color: @upload-add-disabled-bg-color;
+      color: @upload-add-icon-disabled-color;
+    }
+
     &:only-child {
       display: flex;
     }
@@ -43,6 +51,17 @@
     position: relative;
     border-radius: @upload-radius;
     overflow: hidden;
+
+    &--disabled::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: @upload-disabled-mask;
+      z-index: 1;
+    }
   }
 
   &__close-btn {

diff --git a/src/upload/upload.ts b/src/upload/upload.ts
@@ -168,7 +168,8 @@ export default class Upload extends SuperComponent {
     },
 
     onAddTap() {
-      const { mediaType, source } = this.properties;
+      const { disabled, mediaType, source } = this.properties;
+      if (disabled) return;
 
       if (source === 'media') {
         this.chooseMedia(mediaType);

diff --git a/src/upload/upload.wxml b/src/upload/upload.wxml
@@ -13,7 +13,7 @@
       aria-role="presentation"
     >
       <view
-        class="{{classPrefix}}__wrapper"
+        class="{{classPrefix}}__wrapper {{disabled? classPrefix + '__wrapper--disabled' : '' }}"
         style="{{gridItemStyle}}"
         aria-role="{{ariaRole || this.getWrapperAriaRole(file)}}"
         aria-label="{{ariaLabel || this.getWrapperAriaLabel(file)}}"
@@ -86,7 +86,7 @@
       <view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}">
         <slot name="add-content" />
         <block wx:if="{{addContent}}">{{addContent}}</block>
-        <view wx:else class="{{classPrefix}}__add-icon">
+        <view wx:else class="{{classPrefix}}__add-icon {{disabled? classPrefix + '__add-icon--disabled' : '' }}">
           <t-icon name="add" />
         </view>
       </view>