@arco-design/mobile-react 2.19.1-941e02b.7 → 2.20.0

package/esm/transition/index.js

@@ -14,10 +14,12 @@ import { ContextLayout } from '../context-provider';
  * @name_en Transition
  */
 export default function Transition(props) {
-  var children = props.children,
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement("div", null) : _props$children,
       type = props.type,
       transIn = props.in,
-      timeout = props.timeout,
+      _props$timeout = props.timeout,
+      timeout = _props$timeout === void 0 ? 300 : _props$timeout,
       _props$mountOnEnter = props.mountOnEnter,
       mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
       _props$unmountOnExit = props.unmountOnExit,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.19.1-941e02b.7+941e02b",
+    "version": "2.20.0",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "^2.10.1-941e02b.7+941e02b",
+        "@arco-design/mobile-utils": "^2.11.0",
         "@arco-design/transformable": "^1.0.0",
         "es6-promise": "^4.2.8",
         "lodash.throttle": "^4.1.1",
@@ -36,5 +36,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "941e02ba8f305b84634211b1a65cb7254c6c617d"
+    "gitHead": "ab07cde0e974fa874dc63f9520da4e91b510c28f"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -159,8 +159,9 @@
     --avatar-desc-ultra-small-margin-top: ~`pxtorem(2)`;
     --avatar-name-color: var(--font-color);
     --avatar-desc-color: var(--sub-info-font-color);
-    --button-border-color: var(--primary-color);
+    --button-line-height: 1.2;
     --button-radius: 2PX;
+    --button-icon-text-gutter: ~`pxtorem(4)`;
     --button-primary-background: var(--primary-color);
     --button-primary-clicked-background: #0E42D2;
     --button-primary-disabled-background: var(--primary-disabled-color);

package/tokens/app/arcodesign/default/index.d.ts

@@ -158,8 +158,9 @@ export interface ArcodesignToken extends Record<string, string> {
     'avatar-desc-ultra-small-margin-top': string;
     'avatar-name-color': string;
     'avatar-desc-color': string;
-    'button-border-color': string;
+    'button-line-height': string;
     'button-radius': string;
+    'button-icon-text-gutter': string;
     'button-primary-background': string;
     'button-primary-clicked-background': string;
     'button-primary-disabled-background': string;

package/tokens/app/arcodesign/default/index.js

@@ -170,8 +170,9 @@ var tokens = {
   "avatar-desc-ultra-small-margin-top": "0.04rem",
   "avatar-name-color": "#1d2129",
   "avatar-desc-color": "#86909c",
-  "button-border-color": "#165dff",
+  "button-line-height": "1.2",
   "button-radius": "2PX",
+  "button-icon-text-gutter": "0.08rem",
   "button-primary-background": "#165dff",
   "button-primary-clicked-background": "#0E42D2",
   "button-primary-disabled-background": "#94bfff",

package/tokens/app/arcodesign/default/index.json

@@ -971,18 +971,6 @@
             "en": "Base font size used for rem conversion"
         }
     },
-    "buttonBorderColor": {
-        "cssKey": "button-border-color",
-        "desc": "border颜色",
-        "override": "button-border",
-        "value": "@primary-color",
-        "jsValue": "@global@primaryColor",
-        "staticValue": "#165dff",
-        "localeDesc": {
-            "ch": "border颜色",
-            "en": "Button Border color"
-        }
-    },
     "buttonDefaultBackground": {
         "cssKey": "button-default-background",
         "desc": "default 类型按钮背景色",
@@ -1139,6 +1127,18 @@
             "en": "Huge button font size"
         }
     },
+    "buttonIconTextGutter": {
+        "cssKey": "button-icon-text-gutter",
+        "desc": "按钮图标与文字的间距",
+        "override": "",
+        "value": "~`pxtorem(4)`",
+        "jsValue": "@getRem@4",
+        "staticValue": "0.08rem",
+        "localeDesc": {
+            "ch": "按钮图标与文字的间距",
+            "en": "Gutter between icon and text"
+        }
+    },
     "buttonLargeHeight": {
         "cssKey": "button-large-height",
         "desc": "large 按钮高度",
@@ -1175,6 +1175,18 @@
             "en": "Large button font size"
         }
     },
+    "buttonLineHeight": {
+        "cssKey": "button-line-height",
+        "desc": "按钮的行高",
+        "override": "button-border",
+        "value": "1.2",
+        "jsValue": "1.2",
+        "staticValue": "1.2",
+        "localeDesc": {
+            "ch": "按钮的行高",
+            "en": "Button line height"
+        }
+    },
     "buttonMediumHeight": {
         "cssKey": "button-medium-height",
         "desc": "medium 按钮高度",
@@ -1309,14 +1321,14 @@
     },
     "buttonRadius": {
         "cssKey": "button-radius",
-        "desc": "圆角大小",
+        "desc": "shape=semi时圆角大小",
         "override": "",
         "value": "2PX",
         "jsValue": "2PX",
         "staticValue": "2PX",
         "localeDesc": {
-            "ch": "圆角大小",
-            "en": "Button border radius"
+            "ch": "shape=semi时圆角大小",
+            "en": "Button border radius when shape=semi"
         }
     },
     "buttonSmallHeight": {
@@ -3361,131 +3373,195 @@
     },
     "imagePickerAddBackground": {
         "cssKey": "image-picker-add-background",
-        "desc": "",
+        "desc": "图片选择器添加图片按钮的背景色",
         "override": "",
         "value": "#f7f8fa",
         "jsValue": "#f7f8fa",
-        "staticValue": "#f7f8fa"
+        "staticValue": "#f7f8fa",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的背景色",
+            "en": "Background of the add button of ImagePicker"
+        }
     },
     "imagePickerAddIconColor": {
         "cssKey": "image-picker-add-icon-color",
-        "desc": "",
+        "desc": "图片选择器添加图片按钮的图标颜色",
         "override": "",
         "value": "#d8d8d8",
         "jsValue": "#d8d8d8",
-        "staticValue": "#d8d8d8"
+        "staticValue": "#d8d8d8",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的图标颜色",
+            "en": "Icon color of the add button of ImagePicker"
+        }
     },
     "imagePickerAddIconFontSize": {
         "cssKey": "image-picker-add-icon-font-size",
-        "desc": "",
+        "desc": "图片选择器添加图片按钮的图标大小",
         "override": "",
         "value": "~`pxtorem(30)`",
         "jsValue": "@getRem@30",
-        "staticValue": "0.6rem"
+        "staticValue": "0.6rem",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的图标大小",
+            "en": "Icon size of the add button of ImagePicker"
+        }
     },
     "imagePickerAddTextColor": {
         "cssKey": "image-picker-add-text-color",
-        "desc": "",
+        "desc": "图片选择器添加图片按钮的字体颜色",
         "override": "",
         "value": "@sub-info-font-color",
         "jsValue": "@global@subInfoFontColor",
-        "staticValue": "#86909c"
+        "staticValue": "#86909c",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的字体颜色",
+            "en": "Font color of the add button of ImagePicker"
+        }
     },
     "imagePickerAddTextFontSize": {
         "cssKey": "image-picker-add-text-font-size",
-        "desc": "",
+        "desc": "图片选择器添加图片按钮的字体大小",
         "override": "",
         "value": "~`pxtorem(12)`",
         "jsValue": "@getRem@12",
-        "staticValue": "0.24rem"
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的字体大小",
+            "en": "Font size of the add button of ImagePicker"
+        }
     },
     "imagePickerBorderRadius": {
         "cssKey": "image-picker-border-radius",
-        "desc": "",
+        "desc": "图片选择器中图片的圆角值",
         "override": "",
         "value": "~`pxtorem(2)`",
         "jsValue": "@getRem@2",
-        "staticValue": "0.04rem"
+        "staticValue": "0.04rem",
+        "localeDesc": {
+            "ch": "图片选择器中图片的圆角值",
+            "en": "Border radius of the image in ImagePicker"
+        }
     },
     "imagePickerCloseBackground": {
         "cssKey": "image-picker-close-background",
-        "desc": "",
+        "desc": "图片选择器关闭按钮背景色",
         "override": "",
         "value": "rgba(0, 0, 0, 0.3)",
         "jsValue": "rgba(0, 0, 0, 0.3)",
-        "staticValue": "rgba(0, 0, 0, 0.3)"
+        "staticValue": "rgba(0, 0, 0, 0.3)",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮背景色",
+            "en": "Background of the close button of ImagePicker"
+        }
     },
     "imagePickerCloseBorderRadius": {
         "cssKey": "image-picker-close-border-radius",
-        "desc": "",
+        "desc": "图片选择器关闭按钮圆角值",
         "override": "",
         "value": "0 ~`pxtorem(2)`",
         "jsValue": "0 @getRem@2",
-        "staticValue": "0 0.04rem"
+        "staticValue": "0 0.04rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮圆角值",
+            "en": "Border radius of the close button of ImagePicker"
+        }
     },
     "imagePickerCloseColor": {
         "cssKey": "image-picker-close-color",
-        "desc": "",
+        "desc": "图片选择器关闭按钮字体颜色",
         "override": "",
         "value": "#ffffff",
         "jsValue": "#ffffff",
-        "staticValue": "#ffffff"
+        "staticValue": "#ffffff",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮字体颜色",
+            "en": "Font color of the close button of ImagePicker"
+        }
     },
     "imagePickerCloseFontSize": {
         "cssKey": "image-picker-close-font-size",
-        "desc": "",
+        "desc": "图片选择器关闭按钮字体大小",
         "override": "",
         "value": "~`pxtorem(12)`",
         "jsValue": "@getRem@12",
-        "staticValue": "0.24rem"
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮字体大小",
+            "en": "Font size of the close button of ImagePicker"
+        }
     },
     "imagePickerCloseHeight": {
         "cssKey": "image-picker-close-height",
-        "desc": "",
+        "desc": "图片选择器关闭按钮高度",
         "override": "",
         "value": "~`pxtorem(18)`",
         "jsValue": "@getRem@18",
-        "staticValue": "0.36rem"
+        "staticValue": "0.36rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮高度",
+            "en": "Height of the close button of ImagePicker"
+        }
     },
     "imagePickerCloseWidth": {
         "cssKey": "image-picker-close-width",
-        "desc": "",
+        "desc": "图片选择器关闭按钮宽度",
         "override": "",
         "value": "~`pxtorem(18)`",
         "jsValue": "@getRem@18",
-        "staticValue": "0.36rem"
+        "staticValue": "0.36rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮宽度",
+            "en": "Width of the close button of ImagePicker"
+        }
     },
     "imagePickerDisabledOpacity": {
         "cssKey": "image-picker-disabled-opacity",
-        "desc": "",
+        "desc": "图片选择器禁用状态下的透明度",
         "override": "",
         "value": "0.7",
         "jsValue": "0.7",
-        "staticValue": "0.7"
+        "staticValue": "0.7",
+        "localeDesc": {
+            "ch": "图片选择器禁用状态下的透明度",
+            "en": "Opacity of disabled ImagePicker"
+        }
     },
     "imagePickerErrorBackground": {
         "cssKey": "image-picker-error-background",
-        "desc": "",
+        "desc": "图片选择器中图片错误状态下的背景色",
         "override": "",
         "value": "rgba(0, 0, 0, 0.5)",
         "jsValue": "rgba(0, 0, 0, 0.5)",
-        "staticValue": "rgba(0, 0, 0, 0.5)"
+        "staticValue": "rgba(0, 0, 0, 0.5)",
+        "localeDesc": {
+            "ch": "图片选择器中图片错误状态下的背景色",
+            "en": "Background for image error state in the image picker"
+        }
     },
     "imagePickerErrorColor": {
         "cssKey": "image-picker-error-color",
-        "desc": "",
+        "desc": "图片选择器中图片错误状态下的文字颜色",
         "override": "",
         "value": "#ffffff",
         "jsValue": "#ffffff",
-        "staticValue": "#ffffff"
+        "staticValue": "#ffffff",
+        "localeDesc": {
+            "ch": "图片选择器中图片错误状态下的文字颜色",
+            "en": "Text color for image error state in the image picker"
+        }
     },
     "imagePickerFontSize": {
         "cssKey": "image-picker-font-size",
-        "desc": "",
+        "desc": "图片选择器内部字体大小",
         "override": "",
         "value": "~`pxtorem(14)`",
         "jsValue": "@getRem@14",
-        "staticValue": "0.28rem"
+        "staticValue": "0.28rem",
+        "localeDesc": {
+            "ch": "图片选择器内部字体大小",
+            "en": "Font size of ImagePicker"
+        }
     },
     "imagePlaceholderBackground": {
         "cssKey": "image-placeholder-background",

package/tokens/app/arcodesign/default/index.less

@@ -158,8 +158,9 @@
 @avatar-desc-ultra-small-margin-top: ~`pxtorem(2)`;
 @avatar-name-color: @font-color;
 @avatar-desc-color: @sub-info-font-color;
-@button-border-color: @primary-color;
+@button-line-height: 1.2;
 @button-radius: 2PX;
+@button-icon-text-gutter: ~`pxtorem(4)`;
 @button-primary-background: @primary-color;
 @button-primary-clicked-background: #0E42D2;
 @button-primary-disabled-background: @primary-disabled-color;

package/umd/_helpers/type.d.ts

@@ -25,6 +25,6 @@ export interface BaseRef {
     /**
      * 组件外层dom元素
      * @en The outer DOM element of the component
-     * */
+     */
     dom: HTMLDivElement | null;
 }

package/umd/avatar/group.js

@@ -64,7 +64,7 @@
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: domRef,
       style: style,
-      className: (0, _mobileUtils.cls)(className, prefixCls + "-avatar-group", "group-" + size)
+      className: (0, _mobileUtils.cls)(className, prefixCls + "-avatar-group", prefixCls + "-avatar-group-size-" + size, "group-" + size)
     }, /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
       value: {
         isGroup: true,

package/umd/avatar/index.js

@@ -38,7 +38,7 @@
 
   function componentGenerator(Comp) {
     return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-      var _cls;
+      var _cls, _cls2;
 
       var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
           prefixCls = _useContext.prefixCls;
@@ -77,10 +77,7 @@
           style = _props$style === void 0 ? {} : _props$style,
           _props$imageProps = props.imageProps,
           imageProps = _props$imageProps === void 0 ? {} : _props$imageProps,
-          _props$defaultOverLap = props.defaultOverLap,
-          defaultOverLap = _props$defaultOverLap === void 0 ? /*#__PURE__*/_react.default.createElement(_IconUserFill.default, {
-        className: prefixCls + "-avatar-default"
-      }) : _props$defaultOverLap,
+          defaultOverLap = props.defaultOverLap,
           onClickDecoration = props.onClickDecoration,
           onClick = props.onClick;
       var domRef = (0, _react.useRef)(null);
@@ -140,19 +137,19 @@
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: domRef,
         style: style,
-        className: (0, _mobileUtils.cls)(prefixCls + "-avatar-wrapper", className, size, shape, {
-          'with-info': Boolean(avatarName)
-        }),
+        className: (0, _mobileUtils.cls)(prefixCls + "-avatar-wrapper", className, size, shape, prefixCls + "-avatar-wrapper-shape-" + shape, (_cls = {}, _cls[prefixCls + "-avatar-wrapper-with-info " + prefixCls + "-avatar-wrapper-with-info-size-" + size + " with-info"] = Boolean(avatarName), _cls)),
         onClick: onClick
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-avatar", size, shape, (_cls = {}, _cls[prefixCls + "-text-avatar"] = isTextAvatar, _cls[prefixCls + "-image-avatar"] = isImageAvatar, _cls['default-overlap'] = useDefaultAvatar, _cls)),
+        className: (0, _mobileUtils.cls)(prefixCls + "-avatar", prefixCls + "-avatar-size-" + size, size, prefixCls + "-avatar-shape-" + shape, shape, (_cls2 = {}, _cls2[prefixCls + "-text-avatar " + prefixCls + "-avatar-mode-text"] = isTextAvatar, _cls2[prefixCls + "-image-avatar " + prefixCls + "-avatar-mode-image"] = isImageAvatar, _cls2[prefixCls + "-avatar-default-overlap default-overlap"] = useDefaultAvatar, _cls2)),
         style: avatarStyle,
         ref: avatarRef
-      }, children, useDefaultAvatar && defaultOverLap, isImageAvatar && src && /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+      }, children, useDefaultAvatar && (defaultOverLap === void 0 ? /*#__PURE__*/_react.default.createElement(_IconUserFill.default, {
+        className: prefixCls + "-avatar-default " + prefixCls + "-avatar-default-icon-size-" + size
+      }) : defaultOverLap), isImageAvatar && src && /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
         className: prefixCls + "-avatar-img",
         src: src
       }, imageProps)), isTextAvatar && /*#__PURE__*/_react.default.createElement("span", {
-        className: prefixCls + "-avatar-text",
+        className: prefixCls + "-avatar-text " + prefixCls + "-avatar-text-size-" + size,
         ref: avatarTextRef,
         style: {
           transform: "scale(" + textScale + ")"
@@ -163,9 +160,9 @@
       }, decoration)), renderInfo, !renderInfo && avatarName && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-avatar-info")
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-avatar-name")
+        className: prefixCls + "-avatar-name " + prefixCls + "-avatar-name-size-" + size
       }, avatarName), avatarDesc && /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-avatar-desc")
+        className: prefixCls + "-avatar-desc " + prefixCls + "-avatar-desc-size-" + size
       }, avatarDesc)));
     });
   }