@arco-design/mobile-react 2.19.1 → 2.21.0

package/cjs/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/cjs/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/cjs/badge/index.js

@@ -20,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 在右上角展示徽标数字或小红点
  * @en Display the badge number or small red dot in the upper right corner
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 徽标
  * @name_en Badge
@@ -52,27 +52,25 @@ var Badge = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     };
   });
 
-  function renderInnerBadge() {
+  function renderInnerBadge(prefix) {
     return dot ? null : /*#__PURE__*/_react.default.createElement("span", {
-      className: "badge-text"
+      className: prefix + "-text badge-text"
     }, Number(text) && Number(text) > maxCount ? maxCount + "+" : text);
   }
 
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var _cls;
+
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement(_transition.default, {
       in: visible,
       timeout: timeout,
       type: "scale"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-badge", className, {
-        dot: dot,
-        bordered: bordered,
-        absolute: absolute
-      }),
+      className: (0, _mobileUtils.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")));
   });
 });
 var _default = Badge;

package/cjs/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/cjs/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/cjs/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/cjs/button/hooks.js

@@ -27,7 +27,8 @@ 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
@@ -64,8 +65,9 @@ var useCustomColor = function useCustomColor(_ref) {
     return res;
   }, [styleConfig, active, disabled]);
   var customColorClass = (0, _react.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/cjs/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 {
     /**

package/cjs/button/index.js

@@ -32,6 +32,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @name_en Button
  */
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _ref, _cls;
+
   var _useState = (0, _react.useState)(false),
       isActive = _useState[0],
       setActive = _useState[1];
@@ -69,8 +71,15 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       children = _props$children === void 0 ? null : _props$children,
       loadingIcon = props.loadingIcon,
       onClick = props.onClick,
-      onClickDisabled = props.onClickDisabled;
+      onClickDisabled = props.onClickDisabled,
+      _props$coverIconWhenL = props.coverIconWhenLoading,
+      coverIconWhenLoading = _props$coverIconWhenL === void 0 ? true : _props$coverIconWhenL;
   var domRef = (0, _react.useRef)(null);
+
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  var prefix = prefixCls + "-button";
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       dom: domRef.current
@@ -82,7 +91,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     bgColor: bgColor,
     borderColor: borderColor,
     isActive: isActive,
-    disabled: disabled
+    disabled: disabled,
+    halfBorder: halfBorder
   }),
       customColorClass = _useCustomColor.customColorClass,
       customColorStyle = _useCustomColor.customColorStyle;
@@ -97,37 +107,32 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     setActive(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
-    var prefixCls = _ref.prefixCls;
-    return /*#__PURE__*/_react.default.createElement("button", {
-      type: "button",
-      ref: domRef,
-      style: (0, _extends2.default)({}, customColorStyle, style),
-      className: _mobileUtils.cls.apply(void 0, [prefixCls + "-button", className, "type-" + type, "size-" + size, "is-" + shape, system, {
-        inline: inline,
-        disabled: disabled,
-        loading: loading,
-        active: isActive,
-        'half-border': halfBorder
-      }].concat(customColorClass)),
-      onTouchStart: handleTouchStart,
-      onTouchEnd: handleTouchEnd,
-      onTouchCancel: handleTouchEnd,
-      onMouseDown: handleTouchStart,
-      onMouseUp: handleTouchEnd,
-      onClick: disabled || loading && disableWhenLoading ? onClickDisabled : onClick
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "btn-icon"
-    }, icon, loading && (loadingIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_loading.default, {
-      className: "loading-icon",
-      radius: 6,
-      type: "circle"
-    }) : loadingIcon)), (!loading || loading && showTextWhenLoading) && children ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)('btn-text', {
-        'has-icon': loading || icon
-      })
-    }, children) : null);
-  });
+  var renderIcon = function renderIcon() {
+    if (coverIconWhenLoading) {
+      return loading ? null : icon;
+    }
+
+    return icon;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    ref: domRef,
+    style: (0, _extends2.default)({}, customColorStyle, style),
+    className: _mobileUtils.cls.apply(void 0, [prefix, prefix + "-type-" + type + " type-" + type, prefix + "-size-" + size + " " + prefix + "-size-" + size + "-is-" + shape + " size-" + size, className, "is-" + shape, system, (_ref = {}, _ref[prefix + "-inline inline"] = inline, _ref[prefix + "-type-" + type + "-disabled disabled"] = disabled, _ref.loading = loading, _ref[prefix + "-type-" + type + "-active active"] = isActive, _ref)].concat(customColorClass)),
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
+    onTouchCancel: handleTouchEnd,
+    onClick: disabled || loading && disableWhenLoading ? onClickDisabled : onClick
+  }, icon || loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix + "-icon btn-icon"
+  }, renderIcon(), loading && (loadingIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_loading.default, {
+    className: prefix + "-loading-icon loading-icon",
+    radius: 6,
+    type: "circle"
+  }) : loadingIcon)) : null, (!loading || loading && showTextWhenLoading) && children ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefix + "-text", prefix + "-text-" + system, 'btn-text', (_cls = {}, _cls[prefix + "-text-has-icon has-icon"] = loading || icon, _cls))
+  }, children) : null);
 });
 var _default = Button;
 exports.default = _default;