@arco-design/mobile-react 2.19.2-ee92494.5 → 2.20.0

package/umd/badge/index.js

@@ -59,27 +59,25 @@
       };
     });
 
-    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/umd/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/umd/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/umd/button/demo/style/mobile.less

@@ -17,7 +17,3 @@
         }
     }
 }
-
-#demo-order-6 {
-
-}

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

@@ -38,7 +38,8 @@
         bgColor = _ref.bgColor,
         borderColor = _ref.borderColor,
         active = _ref.isActive,
-        disabled = _ref.disabled;
+        disabled = _ref.disabled,
+        halfBorder = _ref.halfBorder;
     var state = {
       active: active,
       disabled: disabled
@@ -75,8 +76,9 @@
       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/umd/button/index.d.ts

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

package/umd/button/index.js

@@ -34,6 +34,8 @@
    * @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];
@@ -73,8 +75,13 @@
         onClick = props.onClick,
         onClickDisabled = props.onClickDisabled,
         _props$coverIconWhenL = props.coverIconWhenLoading,
-        coverIconWhenLoading = _props$coverIconWhenL === void 0 ? false : _props$coverIconWhenL;
+        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
@@ -86,7 +93,8 @@
       bgColor: bgColor,
       borderColor: borderColor,
       isActive: isActive,
-      disabled: disabled
+      disabled: disabled,
+      halfBorder: halfBorder
     }),
         customColorClass = _useCustomColor.customColorClass,
         customColorStyle = _useCustomColor.customColorStyle;
@@ -109,37 +117,24 @@
       return icon;
     };
 
-    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"
-      }, renderIcon(), 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);
-    });
+    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;