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

package/cjs/badge/index.js

@@ -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/demo/style/mobile.less

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

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

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

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];
@@ -71,8 +73,13 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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
@@ -84,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;
@@ -107,37 +115,24 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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;