Merge pull request #673 from Tencent/feat/button/loading-props

feat(button): use t-loading && support loading-props
Tencent · Jul 29, 2022 · 2bf6d5c · 2bf6d5c
2 parents 153d88f + 50be127
commit 2bf6d5c
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 46 deletions.
diff --git a/src/button/README.md b/src/button/README.md
@@ -55,6 +55,7 @@ ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
 icon | String | - | 图标名称 | N
 icon-props | Object | {} | 图标属性，透传至 icon | N
 loading | Boolean | false | 是否显示为加载状态 | N
+loading-props | Object | - | 加载loading属性，透传至loading。TS 类型：`LoadingProps` | N
 shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
 size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
 theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger | N

diff --git a/src/button/button.json b/src/button/button.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "t-icon": "../icon/icon"
+    "t-icon": "../icon/icon",
+    "t-loading": "../loading/loading"
   }
 }
diff --git a/src/button/button.less b/src/button/button.less
@@ -1,4 +1,3 @@
-// @import (css) '../common/index.wxss';
 @import '../common/style/index.less';
 
 @primary-color-disabled: #bbd3fb;
@@ -203,12 +202,7 @@
         font-size: @button-icon-size-l;
       }
 
-      & .@{prefix}-button--loading {
-        width: @button-icon-size-l;
-        height: @button-icon-size-l;
-      }
-
-      .@{prefix}-button--loading + .@{prefix}-button__content:not(:empty),
+      .@{prefix}-button__loading + .@{prefix}-button__content:not(:empty),
       .@{prefix}-button__icon + .@{prefix}-button__content:not(:empty) {
         margin-left: 16rpx;
       }
@@ -219,12 +213,7 @@
         font-size: @button-icon-size-m;
       }
 
-      & .@{prefix}-button--loading {
-        width: @button-icon-size-m;
-        height: @button-icon-size-m;
-      }
-
-      .@{prefix}-button--loading + .@{prefix}-button__content:not(:empty),
+      .@{prefix}-button__loading + .@{prefix}-button__content:not(:empty),
       .@{prefix}-button__icon + .@{prefix}-button__content:not(:empty) {
         margin-left: 8rpx;
       }
@@ -238,12 +227,7 @@
         font-size: @button-icon-size-s;
       }
 
-      & .@{prefix}-button--loading {
-        width: @button-icon-size-s;
-        height: @button-icon-size-s;
-      }
-
-      .@{prefix}-button--loading + .@{prefix}-button__content:not(:empty),
+      .@{prefix}-button__loading + .@{prefix}-button__content:not(:empty),
       .@{prefix}-button__icon + .@{prefix}-button__content:not(:empty) {
         margin-left: 8rpx;
       }
@@ -323,30 +307,20 @@
     }
   }
 
-  &--loading {
-    box-sizing: border-box;
-    animation: rotate 0.8s linear infinite;
-    .@{prefix}-button__circular {
-      border-radius: 50%;
-      width: 100%;
-      height: 100%;
-      opacity: 1;
-      background: conic-gradient(
-        from 90deg at 50% 50%,
-        rgba(255, 255, 255, 0) 0% 0deg,
-        currentColor 360deg,
-        rgba(255, 255, 255, 1) 100% 360deg
-      );
-      mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
-
-      /* stylelint-disable-next-line */
-      -webkit-mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
-    }
-  }
-
   &.button-hover:after {
     border-radius: 8rpx;
   }
+
+  // loading
+  .position-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .indicator-blue {
+    color: white;
+  }
 }
 
 // button group

diff --git a/src/button/button.ts b/src/button/button.ts
@@ -65,9 +65,6 @@ export default class Button extends SuperComponent {
       if (this.data.disabled) {
         classList.push(`${prefix}-is-disabled`);
       }
-      // if (this.data.loading) {
-      //   classList.push(`${prefix}-is-loading`);
-      // }
       classList.push(`${name}--${this.data.variant}`);
       if (this.data.ghost) {
         classList.push(`${name}--ghost`);

diff --git a/src/button/button.wxml b/src/button/button.wxml
@@ -32,8 +32,23 @@
     customStyle="{{iconProps.customStyle}}"
     class="{{classPrefix}}__icon {{prefix}}-class-icon"
   ></t-icon>
-  <view wx:if="{{loading}}" class="{{classPrefix}}--loading {{prefix}}-class-loading">
-    <view class="{{classPrefix}}__circular"></view>
+  <view wx:if="{{loading}}" class="{{classPrefix}}__loading">
+    <t-loading
+      delay="{{loadingProps.delay || 0}}"
+      duration="{{loadingProps.duration || 800}}"
+      indicator="{{loadingProps.indicator || true}}"
+      inheritColor="{{loadingProps.indicator || false}}"
+      layout="{{loadingProps.layout || 'horizontal'}}"
+      pause="{{loadingProps.pause || false}}"
+      progress="{{loadingProps.progress}}"
+      reverse="{{loadingProps.reverse}}"
+      size="{{loadingProps.size || '40rpx'}}"
+      text="{{loadingProps.text }}"
+      theme="{{loadingProps.theme || 'circular'}}"
+      loading
+      t-class="position-center"
+      t-class-indicator="indicator-blue {{prefix}}-class-loading"
+    ></t-loading>
   </view>
   <view class="{{classPrefix}}__content">
     <slot name="content" />

diff --git a/src/button/props.ts b/src/button/props.ts
@@ -48,6 +48,10 @@ const props: TdButtonProps = {
     type: Boolean,
     value: false,
   },
+  /** 加载loading样式 */
+  loadingProps: {
+    type: Object,
+  },
   /** 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 */
   shape: {
     type: String,

diff --git a/src/button/type.ts b/src/button/type.ts
@@ -5,6 +5,7 @@
  * */
 
 import { SizeEnum } from '../common/common';
+import { LoadingProps } from '../loading/index';
 
 export interface TdButtonProps {
   /**
@@ -76,6 +77,13 @@ export interface TdButtonProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 加载loading样式
+   */
+  loadingProps?: {
+    type: ObjectConstructor;
+    value?: LoadingProps;
+  };
   /**
    * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
    * @default rectangle