@arco-design/mobile-react 2.19.1 → 2.21.0

package/esm/avatar/style/css/index.css

@@ -1,74 +1,3 @@
-.arco-avatar-wrapper {
-  display: inline-block;
-}
-.arco-avatar-wrapper.with-info.ultra-small {
-  height:  1.12rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-name {
-  font-size:  0.26rem ;
-  line-height:  0.36rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.2rem ;
-  line-height:  0.28rem ;
-}
-.arco-avatar-wrapper.with-info.smaller {
-  height:  1.28rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-name {
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.small {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-name {
-  font-size:  0.32rem ;
-  line-height:  0.48rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.medium {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info.large {
-  height:  1.76rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-}
 .arco-avatar {
   position: relative;
   font-size: 0;
@@ -84,104 +13,134 @@
   color:  #fff ;
   background-color:  #4080FF ;
 }
-.arco-avatar.arco-image-avatar {
+.arco-avatar-mode-image {
   background-color: transparent;
 }
-.arco-avatar.default-overlap {
+.arco-avatar-default-overlap {
   background-color:  #c9cdd4 ;
 }
-.arco-avatar.circle {
+.arco-avatar-shape-circle {
   border-radius: 50%;
 }
-.arco-avatar.circle .arco-avatar-img .image-content {
+.arco-avatar-shape-circle .arco-avatar-img .image-content {
   border-radius: 50%;
 }
-.arco-avatar.square {
+.arco-avatar-shape-square {
   border-radius: 0.08rem;
 }
-.arco-avatar.square .arco-avatar-img .image-content {
+.arco-avatar-shape-square .arco-avatar-img .image-content {
   border-radius: 0.08rem;
 }
-.arco-avatar.group-ultra-small .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
-}
-.arco-avatar.group-ultra-small .arco-avatar {
-  border-width:  0.02rem ;
-}
-.arco-avatar.ultra-small {
+.arco-avatar-size-ultra-small {
   width:  0.48rem ;
   height:  0.48rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-default {
+.arco-avatar-default-icon-size-ultra-small {
   font-size:  0.24rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-text {
+.arco-avatar-text-size-ultra-small {
   font-size:  0.2rem ;
 }
-.arco-avatar.group-smaller .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
+.arco-avatar-wrapper-with-info-size-ultra-small {
+  height:  1.12rem ;
 }
-.arco-avatar.group-smaller .arco-avatar {
-  border-width:  0.02rem ;
+.arco-avatar-name-size-ultra-small {
+  font-size:  0.26rem ;
+  line-height:  0.36rem ;
 }
-.arco-avatar.smaller {
+.arco-avatar-desc-size-ultra-small {
+  margin-top:  0.04rem ;
+  font-size:  0.2rem ;
+  line-height:  0.28rem ;
+}
+.arco-avatar-size-smaller {
   width:  0.64rem ;
   height:  0.64rem ;
 }
-.arco-avatar.smaller .arco-avatar-default {
+.arco-avatar-default-icon-size-smaller {
   font-size:  0.32rem ;
 }
-.arco-avatar.smaller .arco-avatar-text {
+.arco-avatar-text-size-smaller {
   font-size:  0.24rem ;
 }
-.arco-avatar.group-small .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-smaller {
+  height:  1.28rem ;
 }
-.arco-avatar.group-small .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-smaller {
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.small {
+.arco-avatar-desc-size-smaller {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
+}
+.arco-avatar-size-small {
   width:  0.8rem ;
   height:  0.8rem ;
 }
-.arco-avatar.small .arco-avatar-default {
+.arco-avatar-default-icon-size-small {
   font-size:  0.4rem ;
 }
-.arco-avatar.small .arco-avatar-text {
+.arco-avatar-text-size-small {
   font-size:  0.28rem ;
 }
-.arco-avatar.group-medium .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-small {
+  height:  1.6rem ;
 }
-.arco-avatar.group-medium .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-small {
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+}
+.arco-avatar-desc-size-small {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
 }
-.arco-avatar.medium {
+.arco-avatar-size-medium {
   width:  0.96rem ;
   height:  0.96rem ;
 }
-.arco-avatar.medium .arco-avatar-default {
+.arco-avatar-default-icon-size-medium {
   font-size:  0.48rem ;
 }
-.arco-avatar.medium .arco-avatar-text {
+.arco-avatar-text-size-medium {
   font-size:  0.32rem ;
 }
-.arco-avatar.group-large .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-medium {
+  height:  1.6rem ;
 }
-.arco-avatar.group-large .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-medium {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-medium {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.large {
+.arco-avatar-size-large {
   width:  1.12rem ;
   height:  1.12rem ;
 }
-.arco-avatar.large .arco-avatar-default {
+.arco-avatar-default-icon-size-large {
   font-size:  0.56rem ;
 }
-.arco-avatar.large .arco-avatar-text {
+.arco-avatar-text-size-large {
   font-size:  0.32rem ;
 }
+.arco-avatar-wrapper-with-info-size-large {
+  height:  1.76rem ;
+}
+.arco-avatar-name-size-large {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-large {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
 .arco-avatar-img {
   width: 100%;
   height: 100%;
@@ -195,6 +154,17 @@
           flex: 0 0 auto;
   font-weight: bold;
 }
+.arco-avatar-wrapper {
+  display: inline-block;
+}
+.arco-avatar-wrapper-with-info {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
 .arco-avatar-info {
   display: -webkit-box;
   display: -webkit-flex;
@@ -214,43 +184,43 @@
 .arco-avatar-desc {
   color:  #86909c ;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle {
   position: relative;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle:first-child {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle:first-child {
   margin-left: 0;
 }
 .arco-avatar-group .arco-avatar {
   border-style: solid;
   border-color:  #ffffff ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar-wrapper {
+.arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar {
+.arco-avatar-group-size-ultra-small .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar-wrapper {
+.arco-avatar-group-size-smaller .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar {
+.arco-avatar-group-size-smaller .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-small .arco-avatar-wrapper {
+.arco-avatar-group-size-small .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-small .arco-avatar {
+.arco-avatar-group-size-small .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar-wrapper {
+.arco-avatar-group-size-medium .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar {
+.arco-avatar-group-size-medium .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-large .arco-avatar-wrapper {
+.arco-avatar-group-size-large .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-large .arco-avatar {
+.arco-avatar-group-size-large .arco-avatar {
   border-width:  0.03rem ;
 }

package/esm/avatar/style/index.less

@@ -2,16 +2,6 @@
 
 @size-map: @avatar-size-map;
 
-.@{prefix}-avatar-wrapper {
-    display: inline-block;
-    .set-with-info-avatar-size(length(@size-map));
-
-    &.with-info {
-        display: flex;
-        align-items: center;
-    }
-}
-
 .@{prefix}-avatar {
     position: relative;
     font-size: 0;
@@ -20,21 +10,23 @@
     justify-content: center;
     .use-var(color, avatar-text-font-color);
     .use-var(background-color, avatar-background);
-    &.@{prefix}-image-avatar {
+
+    &-mode-image {
         background-color: transparent;
     }
 
-    &.default-overlap {
+    &-default-overlap {
         .use-var(background-color, avatar-default-overlap-background);
     }
 
-    &.circle {
+    &-shape-circle {
         .set-avatar-radius(50%);
     }
 
-    &.square {
+    &-shape-square {
         .set-avatar-radius(.08rem);
     }
+
     .set-avatar-size(length(@size-map));
 
     &-img {
@@ -50,26 +42,34 @@
         flex: 0 0 auto;
         font-weight: bold;
     }
-}
 
-.@{prefix}-avatar-info {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    .rem(margin-left, 16);
-}
+    &-wrapper {
+        display: inline-block;
 
-.@{prefix}-avatar-name {
-    .use-var(color, avatar-name-color);
-}
+        &-with-info {
+            display: flex;
+            align-items: center;
+        }
+    }
 
-.@{prefix}-avatar-desc {
-    .use-var(color, avatar-desc-color);
-}
+    &-info {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .rem(margin-left, 16);
+    }
 
+    &-name {
+        .use-var(color, avatar-name-color);
+    }
+
+    &-desc {
+        .use-var(color, avatar-desc-color);
+    }
+}
 
 .@{prefix}-avatar-group {
-    .@{prefix}-avatar-wrapper.circle {
+    .@{prefix}-avatar-wrapper-shape-circle {
         position: relative; // 为了让z-index属性生效
 
         &:first-child {
@@ -92,39 +92,12 @@
     }
 }
 
-// 循环设置各头像大小的属性
-
-.set-with-info-avatar-size(@index) when (@index > 0) {
-
-    @size: extract(@size-map, @index);
-
-    // 有辅助信息的样式
-    &.with-info.@{size} {
-        .use-var(height, "avatar-info-box-@{size}-size");
-    }
-
-    // 用户名样式
-    &.@{size} .@{prefix}-avatar-name {
-        .use-var(font-size, "avatar-name-@{size}-font-size");
-        .use-var(line-height, "avatar-name-@{size}-line-height");
-    }
-
-    // 用户描述样式
-    &.@{size} .@{prefix}-avatar-desc {
-        .use-var(margin-top, "avatar-desc-@{size}-margin-top");
-        .use-var(font-size, "avatar-desc-@{size}-font-size");
-        .use-var(line-height, "avatar-desc-@{size}-line-height");
-    }
-
-    .set-with-info-avatar-size(@index - 1);
-}
-
 // 循环设置头像叠层的样式
 .set-avatar-group-size(@index) when (@index > 0) {
 
     @size: extract(@size-map, @index);
 
-    &.group-@{size} {
+    &-size-@{size} {
         .@{prefix}-avatar-wrapper {
             .use-var(margin-left, "avatar-group-@{size}-size-offset");
         }
@@ -141,24 +114,33 @@
 
     @size: extract(@size-map, @index);
 
-    &.group-@{size} {
-        .@{prefix}-avatar-wrapper {
-            .use-var(margin-left, "avatar-group-@{size}-size-offset");
-        }
-        .@{prefix}-avatar {
-            .use-var(border-width, "avatar-group-@{size}-size-border");
-        }
-    }
-
-    &.@{size} {
+    &-size-@{size} {
         .use-var(width, "avatar-@{size}-size");
         .use-var(height, "avatar-@{size}-size");
-        .@{prefix}-avatar-default {
-            .use-var(font-size, "avatar-default-overlap-@{size}-size");
-        }
-        .@{prefix}-avatar-text {
-            .use-var(font-size, "avatar-@{size}-text-font-size");
-        }
+    }
+    &-default-icon-size-@{size} {
+        .use-var(font-size, "avatar-default-overlap-@{size}-size");
+    }
+    &-text-size-@{size} {
+        .use-var(font-size, "avatar-@{size}-text-font-size");
+    }
+
+    // 有辅助信息的样式
+    &-wrapper-with-info-size-@{size} {
+        .use-var(height, "avatar-info-box-@{size}-size");
+    }
+
+    // 用户名样式
+    &-name-size-@{size} {
+        .use-var(font-size, "avatar-name-@{size}-font-size");
+        .use-var(line-height, "avatar-name-@{size}-line-height");
+    }
+
+    // 用户描述样式
+    &-desc-size-@{size} {
+        .use-var(margin-top, "avatar-desc-@{size}-margin-top");
+        .use-var(font-size, "avatar-desc-@{size}-font-size");
+        .use-var(line-height, "avatar-desc-@{size}-line-height");
     }
 
     .set-avatar-size(@index - 1);

package/esm/badge/index.d.ts

@@ -71,7 +71,7 @@ export interface BadgeRef {
 /**
  * 在右上角展示徽标数字或小红点
  * @en Display the badge number or small red dot in the upper right corner
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 徽标
  * @name_en Badge

package/esm/badge/index.js

@@ -6,7 +6,7 @@ import { ContextLayout } from '../context-provider';
 /**
  * 在右上角展示徽标数字或小红点
  * @en Display the badge number or small red dot in the upper right corner
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 徽标
  * @name_en Badge
@@ -38,27 +38,25 @@ var Badge = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   });
 
-  function renderInnerBadge() {
+  function renderInnerBadge(prefix) {
     return dot ? null : /*#__PURE__*/React.createElement("span", {
-      className: "badge-text"
+      className: prefix + "-text badge-text"
     }, Number(text) && Number(text) > maxCount ? maxCount + "+" : text);
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var _cls;
+
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement(Transition, {
       in: visible,
       timeout: timeout,
       type: "scale"
     }, /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-badge", className, {
-        dot: dot,
-        bordered: bordered,
-        absolute: absolute
-      }),
+      className: cls(prefixCls + "-badge", className, (_cls = {}, _cls[prefixCls + "-badge-dot dot"] = dot, _cls[prefixCls + "-badge-bordered bordered"] = bordered, _cls[prefixCls + "-badge-absolute absolute"] = absolute, _cls)),
       style: style,
       ref: domRef
-    }, children || renderInnerBadge()));
+    }, children || renderInnerBadge(prefixCls + "-badge")));
   });
 });
 export default Badge;

package/esm/badge/style/css/index.css

@@ -68,28 +68,28 @@
   min-width: 8PX;
   padding: 0 4PX ;
 }
-.arco-badge .badge-text {
+.arco-badge-text {
   display: block;
   font-weight: 500;
   font-size: 12PX;
 }
-.arco-badge.dot {
+.arco-badge-dot {
   width:  8PX ;
   height:  8PX ;
   padding: 0;
   min-width: auto;
 }
-.arco-badge.bordered {
+.arco-badge-bordered {
   border: 1PX solid #FFFFFF ;
 }
-.arco-badge.absolute {
+.arco-badge-absolute {
   position: absolute;
   top: 0;
   left: 100%;
   margin-left:  -8PX ;
   margin-top:  -8PX ;
 }
-.arco-badge.absolute.dot {
+.arco-badge-absolute.arco-badge-dot {
   margin-left:  -4PX ;
   margin-top:  -4PX ;
 }

package/esm/badge/style/index.less

@@ -40,24 +40,24 @@
     .set-content-box-width-var(min-width, badge-text-width, badge-text-padding, badge-text-padding);
     .use-var(padding, badge-text-padding, 0);
 
-    .badge-text {
+    &-text {
         display: block;
         font-weight: 500;
         .set-font-size-var(badge-font-size);
     }
 
-    &.dot {
+    &-dot {
         .use-var(width, badge-dot-width);
         .use-var(height, badge-dot-width);
         padding: 0;
         min-width: auto;
     }
 
-    &.bordered {
+    &-bordered {
         .use-var(border, badge-border-color, 1PX solid);
     }
 
-    &.absolute {
+    &-absolute {
         position: absolute;
         top: 0;
         left: 100%;
@@ -65,7 +65,7 @@
         .use-var(margin-top, badge-text-deviation);
     }
 
-    &.absolute.dot {
+    &-absolute&-dot {
         .use-var(margin-left, badge-dot-deviation);
         .use-var(margin-top, badge-dot-deviation);
     }

package/esm/button/hooks.d.ts

@@ -1,8 +1,7 @@
 import { CSSProperties } from 'react';
 import { ButtonProps } from '.';
-export declare const useCustomColor: ({ color, bgColor, borderColor, isActive: active, disabled, }: Pick<ButtonProps, "color" | "borderColor" | "type" | "bgColor"> & {
+export declare const useCustomColor: ({ color, bgColor, borderColor, isActive: active, disabled, halfBorder, }: Pick<ButtonProps, 'color' | 'bgColor' | 'borderColor' | 'type' | 'disabled' | 'halfBorder'> & {
     isActive: boolean;
-    disabled: boolean;
 }) => {
     customColorStyle: CSSProperties;
     customColorClass: string[];

package/esm/button/hooks.js

@@ -22,7 +22,8 @@ export var useCustomColor = function useCustomColor(_ref) {
       bgColor = _ref.bgColor,
       borderColor = _ref.borderColor,
       active = _ref.isActive,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      halfBorder = _ref.halfBorder;
   var state = {
     active: active,
     disabled: disabled
@@ -59,8 +60,9 @@ export var useCustomColor = function useCustomColor(_ref) {
     return res;
   }, [styleConfig, active, disabled]);
   var customColorClass = useMemo(function () {
-    return styleConfig.borderColor ? ['has-custom-border'] : [];
-  }, [diffColor(borderColor)]);
+    var borderCls = halfBorder ? 'half-border' : '';
+    return styleConfig.borderColor ? ['has-custom-border'] : [borderCls];
+  }, [styleConfig.borderColor, halfBorder]);
   return {
     customColorStyle: customColorStyle,
     customColorClass: customColorClass

package/esm/button/index.d.ts

@@ -115,6 +115,12 @@ export interface ButtonProps {
      * @default true
      */
     disableWhenLoading?: boolean;
+    /**
+     * 加载中是否覆盖Icon
+     * @en Whether to override Icon during loading
+     * @default true
+     */
+    coverIconWhenLoading?: boolean;
 }
 export interface ButtonRef {
     /**