feat(loading): refactor loading (#351)

* feat(loading): refactor loading * feat(loading): refactor loading * feat(loading): refactor loading Co-authored-by: 彧衡 <yuheng.lh@antgroup.com>
ant-design · Nov 18, 2022 · 2528b02 · 2528b02
1 parent 4af7017
commit 2528b02
Show file tree

Hide file tree

Showing 12 changed files with 169 additions and 174 deletions.
diff --git a/demo/pages/Loading/index.acss b/demo/pages/Loading/index.acss
@@ -0,0 +1,11 @@
+page {
+  padding: 24rpx;
+}
+
+page .amd-container {
+  padding-bottom: 24rpx;
+}
+
+.amd-container-content {
+  background-color: #1A1A1A;
+}
diff --git a/demo/pages/Loading/index.axml b/demo/pages/Loading/index.axml
@@ -1,34 +1,28 @@
-<view class="demo">
-  <demo-block title="基础用法" padding="0" background="rgba(0, 0, 0, 0.7)">
-    <loading type="mini"></loading>
-  </demo-block>
-  <demo-block title="主题色 Loading"  padding="0">
-    <loading type="mini" color="#1677ff"></loading>
-  </demo-block>
-  <demo-block title="spin" background="rgba(0, 0, 0, 0.7)">
-    <loading type="spin" size="x-large" text="x-large" />
-    <loading type="spin" size="large" text="large" />
-    <loading type="spin" size="medium" text="medium" />
-    <loading type="spin" size="small" text="small" />
-  </demo-block>
-  <demo-block title="浅色spin" background="rgba(0, 0, 0, 0.7)">
-    <loading size="x-large" text="x-large" theme="light" />
-    <loading size="large" text="large" theme="light" />
-    <loading size="medium" text="medium" theme="light" />
-    <loading size="small" text="small" theme="light" />
-  </demo-block>
-  <demo-block title="自定义颜色">
-    <loading size="x-large" text="x-large" color="#ff0000" />
-    <loading size="large" text="large" color="#ff0000" />
-    <loading size="medium" text="medium" color="#ff0000" />
-    <loading size="small" text="small" color="#ff0000" />
-  </demo-block>
-  <demo-block title="延迟3000ms出现">
-    <loading  delay="{{3000}}" />
-  </demo-block>
-  <demo-block title="自定义图标">
-    <loading text="自定义图标">
-      <am-icon slot="indicator" type="HeartFill" />
-    </loading>
-  </demo-block>
-</view>
+<container title="基础用法-mini">
+  <loading type="mini" />
+</container>
+
+<container title="基础用法-spin">
+  <loading type="spin" size="{{60}}" />
+  <loading type="spin" size="{{48}}" />
+  <loading type="spin" size="{{36}}" />
+  <loading type="spin" size="{{24}}" />
+</container>
+
+<container title="自定义颜色">
+  <loading type="mini" color="#1677ff" />
+  <loading size="{{60}}" color="#1677ff" />
+  <loading size="{{48}}" color="#34B368" />
+  <loading size="{{36}}" color="#ff8f1f" />
+  <loading size="{{24}}" color="#ff0000" />
+</container>
+
+<container title="延迟3000ms出现">
+  <loading delay="{{3000}}" />
+</container>
+
+<container title="自定义图标">
+  <loading>
+    <am-icon slot="indicator" type="HeartFill" style="color: #1677ff" size="{{40}}" />
+  </loading>
+</container>
diff --git a/demo/pages/Loading/index.json b/demo/pages/Loading/index.json
@@ -3,6 +3,7 @@
   "usingComponents": {
     "loading": "../../../src/Loading/index",
     "am-icon": "../../../src/Icon/index",
-    "demo-block": "../../components/DemoBlock/index"
+    "demo-block": "../../components/DemoBlock/index",
+    "container": "../../../src/Container/index"
   }
 }
diff --git a/src/Container/ContainerHeader/index.less b/src/Container/ContainerHeader/index.less
@@ -4,37 +4,37 @@
 @containerPrefix: amd-container;
 
 .@{containerPrefix} {
-    &-header {
-        position: relative;
-        display: flex;
-        height: 93 * @rpx;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+  &-header {
+    position: relative;
+    display: flex;
+    height: 93 * @rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-        &-title {
-            font-size: @container-header-size;
-            font-weight: bold;
-            color: @container-header-color;
-            display: flex;
-            align-items: center;
-            height: 45 * @rpx;
-        }
-
-        &-right {
-            color: @COLOR_TEXT_ASSIST;
-        }
+    &-title {
+      font-size: @container-header-size;
+      font-weight: bold;
+      color: @container-header-color;
+      display: flex;
+      align-items: center;
+      height: 45 * @rpx;
     }
 
-    &-headerInBox {
-        background-color: @container-background-color;
-        border-radius: @container-radius @container-radius 0 0;
-        padding: 0 @container-spacing;
+    &-right {
+      color: @COLOR_TEXT_ASSIST;
+    }
+  }
+
+  &-headerInBox {
+    background-color: @container-background-color;
+    border-radius: @container-radius @container-radius 0 0;
+    padding: 0 @container-spacing;
 
-        &::after {
-            .scale-hairline-common(@COLOR_BORDER, auto, @container-spacing, 0, @container-spacing);
-            height: 1px;
-            transform: scaleY(0.5);
-        }
+    &::after {
+      .scale-hairline-common(@COLOR_BORDER, auto, @container-spacing, 0, @container-spacing);
+      height: 1px;
+      transform: scaleY(0.5);
     }
+  }
 }
diff --git a/src/Form/FormItem/index.less b/src/Form/FormItem/index.less
@@ -10,16 +10,19 @@
   font-size: 34 * @rpx;
   line-height: 48 * @rpx;
 }
+
 .formItemLabelVertical() {
   font-size: 34 * @rpx;
   line-height: 42 * @rpx;
   color: @COLOR_TEXT_SECONDARY;
   margin-bottom: 8 * @rpx;
 }
+
 .formItemContentHorizontal() {
   display: flex;
   align-items: center;
 }
+
 .formItemFieldHorizontal() {
   text-align: right;
 }
@@ -50,12 +53,15 @@
     //   opacity: 0.4;
     // }
   }
+
   &-content {
     flex: 1;
+
     &-horizontal {
       .formItemContentHorizontal();
     }
   }
+
   &-error-info {
     font-family: PingFangSC-Regular;
     font-size: 13px;
@@ -84,17 +90,21 @@
     line-height: 48 * @rpx;
     overflow: visible;
     position: relative;
+
     &-text {
       display: flex;
       align-items: center;
       position: relative;
     }
+
     .amd-icon {
       margin-left: 4 * @rpx;
     }
+
     .amd-popover-content {
       min-width: 0;
     }
+
     &-help-content {
       color: @COLOR_WHITE_CHANGE;
       font-size: 30 * @rpx;
@@ -115,8 +125,10 @@
     //   opacity: 0.4;
     // }
   }
+
   &-field {
     flex: 1;
+
     &-horizontal {
       .formItemFieldHorizontal();
     }
@@ -127,6 +139,7 @@
     color: @COLOR_TEXT_WEAK;
     display: flex;
     align-items: center;
+
     .amd-icon {
       font-size: 36 * @rpx;
       display: flex;
@@ -147,14 +160,13 @@
     margin-left: 24 * @rpx;
     font-size: 32 * @rpx;
     color: @COLOR_TEXT_ASSIST;
+
     &:empty {
       display: none;
     }
   }
 }
 
-
-
 .amd-form-require-style {
   &-asterisk {
     .amd-form-item-label-required .amd-form-item-label-text {
@@ -164,10 +176,11 @@
         left: -18 * @rpx;
         font-family: PingFangSC-Regular;
         font-size: 30 * @rpx;
-       color: @COLOR_TEXT_WARNING;
+        color: @COLOR_TEXT_WARNING;
       }
     }
   }
+
   &-text-required {
     .amd-form-item-label-required .amd-form-item-label-text {
       &::after {
@@ -181,6 +194,7 @@
       }
     }
   }
+
   &-text-optional {
     .amd-form-item-label .amd-form-item-label-text {
       &::after {
@@ -193,11 +207,11 @@
         color: @COLOR_TEXT_WEAK;
       }
     }
+
     .amd-form-item-label-required .amd-form-item-label-text {
       &::after {
         content: none;
       }
     }
   }
 }
-
diff --git a/src/Loading/index.axml b/src/Loading/index.axml
@@ -1,36 +1,39 @@
 <import-sjs name="{getLoadingColor}" from="./index.sjs" />
-<view class="amd-loading {{className ? className : ''}} {{type === 'spin' ? 'amd-loading-spin-container' :'amd-loading-mini-container'}}"
+
+<view 
+  class="amd-loading {{className ? className : ''}} {{type === 'spin' ? 'amd-loading-spin-container' :'amd-loading-mini-container'}}" 
   style="{{style}}"
-  a:if="{{_loading}}">
+  a:if="{{_loading}}"
+>
   <view a:if="{{type=== 'spin'}}" class="amd-loading-spin amd-loading-spin-{{theme}}">
     <view class="amd-loading-spin-icon amd-loading-spin-icon-indicator">
       <slot name="indicator" />
     </view>
-    <view class="amd-loading-spin-icon amd-loading-spin-icon-{{size}}" style="background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%2224%2024%2048%2048%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20repeatCount%3D%22indefinite%22%20from%3D%220%22%20to%3D%22360%22%20dur%3D%221400ms%22%3E%3C%2FanimateTransform%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2248%22%20r%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22{{getLoadingColor(theme,color)}}%22%20stroke-width%3D%222%22%20transform%3D%22translate%5C\(0%2C0%5C\)%22%3E%3Canimate%20attributeName%3D%22stroke-dasharray%22%20values%3D%221px%2C%20200px%3B100px%2C%20200px%3B100px%2C%20200px%22%20dur%3D%221400ms%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%3Canimate%20attributeName%3D%22stroke-dashoffset%22%20values%3D%220px%3B-15px%3B-125px%22%20dur%3D%221400ms%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fsvg%3E);">
-    </view>
-    <view class="amd-loading-spin-text amd-loading-spin-text-{{theme}}">
-      <block a:if="{{text != null}}">
-        {{text}}
-      </block>
-      <block a:else>
-        <slot name="text" />
-      </block>
+    <view 
+      class="amd-loading-spin-icon" 
+      style="width: {{size}}px;height: {{size}}px; background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%2224%2024%2048%2048%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20repeatCount%3D%22indefinite%22%20from%3D%220%22%20to%3D%22360%22%20dur%3D%221400ms%22%3E%3C%2FanimateTransform%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2248%22%20r%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22%23{{getLoadingColor(theme,color)}}%22%20stroke-width%3D%222%22%20transform%3D%22translate%5C\(0%2C0%5C\)%22%3E%3Canimate%20attributeName%3D%22stroke-dasharray%22%20values%3D%221px%2C%20200px%3B100px%2C%20200px%3B100px%2C%20200px%22%20dur%3D%221400ms%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%3Canimate%20attributeName%3D%22stroke-dashoffset%22%20values%3D%220px%3B-15px%3B-125px%22%20dur%3D%221400ms%22%20repeatCount%3D%22indefinite%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fsvg%3E);">
     </view>
   </view>
-  <view a:else class="amd-loading-mini" style="{{height?'min-height:' + height + ';': ''}}
-      height: {{height?height:miniSize}};
-      width: {{miniSize}};">
-    <view class="amd-loading-mini-item amd-loading-mini-item__1" style="
-        {{color ? `background-color: ${color};` : ''}}
-        {{miniSize ? `flex-basis: calc(${miniSize} * 0.2); width: calc(${miniSize} * 0.2); height: calc(${miniSize} * 0.2);` : ''}}
+  <view 
+    a:else 
+    class="amd-loading-mini" 
+    style="{{height ? `min-height: ${height}px;` : ''}}height: {{height ? `${height}px` : `${miniSize}px`}}; width: {{miniSize}}px;">
+    <view 
+      class="amd-loading-mini-item amd-loading-mini-item__1" 
+      style="{{color ? `background-color: ${color};` : ''}}
+        {{miniSize ? `flex-basis: calc(${miniSize}px * 0.2); width: calc(${miniSize}px * 0.2); height: calc(${miniSize}px * 0.2);` : ''}}
       ">.</view>
-    <view class="amd-loading-mini-item amd-loading-mini-item__2" style="
+    <view 
+      class="amd-loading-mini-item amd-loading-mini-item__2" 
+      style="
         {{color ? `background-color: ${color};` : ''}}
-        {{miniSize ? `flex-basis: calc(${miniSize} * 0.2); width: calc(${miniSize} * 0.2); height: calc(${miniSize} * 0.2);` : ''}}
+        {{miniSize ? `flex-basis: calc(${miniSize}px * 0.2); width: calc(${miniSize}px * 0.2); height: calc(${miniSize}px * 0.2);` : ''}}
       ">.</view>
-    <view class="amd-loading-mini-item amd-loading-mini-item__3" style="
+    <view 
+      class="amd-loading-mini-item amd-loading-mini-item__3" 
+      style="
         {{color ? `background-color: ${color};` : ''}}
-        {{miniSize ? `flex-basis: calc(${miniSize} * 0.2); width: calc(${miniSize} * 0.2); height: calc(${miniSize} * 0.2);` : ''}}
+        {{miniSize ? `flex-basis: calc(${miniSize}px * 0.2); width: calc(${miniSize}px * 0.2); height: calc(${miniSize}px * 0.2);` : ''}}
       ">.</view>
   </view>
 </view>