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

package/esm/steps/style/index.less

@@ -47,7 +47,7 @@
             .vertical & {
                 height: 100%;
                 .use-var(width, steps-icon-width);
-                .rem(top, 9);
+                .use-var(top, steps-tail-vertical-top);
                 .use-var(padding, steps-tail-vertical-padding);
 
                 &:after {
@@ -65,21 +65,17 @@
             }
         }
 
-        &-custom-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            .use-var(width, steps-custom-icon-width);
-            .use-var(height, steps-custom-icon-height);
-        }
-
+        &-custom-icon,
         &-icon {
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            border-radius: 50%;
             .use-var(width, steps-icon-width);
             .use-var(height, steps-icon-height);
+        }
+
+        &-icon {
+            border-radius: 50%;
 
             .number.finish & {
                 .use-var(background, steps-finish-icon-num-background);

package/esm/style.d.ts

@@ -22,6 +22,7 @@ import './ellipsis/style';
 import './grid/style';
 import './image/style';
 import './show-monitor/style';
+import './image-picker/style';
 import './image-preview/style';
 import './input/style';
 import './load-more/style';

package/esm/style.js

@@ -22,6 +22,7 @@ import './ellipsis/style';
 import './grid/style';
 import './image/style';
 import './show-monitor/style';
+import './image-picker/style';
 import './image-preview/style';
 import './input/style';
 import './load-more/style';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.19.1",
+    "version": "2.19.2-ee92494.5+ee92494",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -36,5 +36,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "87bdcdc779e527c26b07dd8a950d8e7cec0982dd"
+    "gitHead": "ee92494c3ea43e107da7cc829f25cd1567d14933"
 }

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

@@ -518,6 +518,7 @@
     --steps-padding: ~`pxtorem(16)` 0;
     --steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
     --steps-tail-vertical-padding: ~`pxtorem(14)` 0;
+    --steps-tail-vertical-top: ~`pxtorem(9)`;
     --steps-tail-standard-size: 1PX;
     --steps-tail-standard-background: var(--line-color);
     --steps-tail-finish-background: var(--primary-color);
@@ -544,8 +545,6 @@
     --steps-wait-description-color: var(--sub-info-font-color);
     --steps-icon-width: 18PX;
     --steps-icon-height: 18PX;
-    --steps-custom-icon-width: 20PX;
-    --steps-custom-icon-height: 20PX;
     --steps-dot-width: 8PX;
     --steps-dot-height: 8PX;
     --steps-dot-border-width: 1.5PX;
@@ -647,4 +646,20 @@
     --action-sheet-header-padding: ~`pxtorem(16)`;
     --action-sheet-title-font-size: ~`pxtorem(16)`;
     --action-sheet-sub-title-font-size: ~`pxtorem(14)`;
+    --image-picker-font-size: ~`pxtorem(14)`;
+    --image-picker-disabled-opacity: 0.7;
+    --image-picker-border-radius: ~`pxtorem(2)`;
+    --image-picker-add-background: #f7f8fa;
+    --image-picker-add-icon-font-size: ~`pxtorem(30)`;
+    --image-picker-add-icon-color: #d8d8d8;
+    --image-picker-add-text-font-size: ~`pxtorem(12)`;
+    --image-picker-add-text-color: var(--sub-info-font-color);
+    --image-picker-error-color: #ffffff;
+    --image-picker-error-background: rgba(0, 0, 0, 0.5);
+    --image-picker-close-color: #ffffff;
+    --image-picker-close-font-size: ~`pxtorem(12)`;
+    --image-picker-close-width: ~`pxtorem(18)`;
+    --image-picker-close-height: ~`pxtorem(18)`;
+    --image-picker-close-background: rgba(0, 0, 0, 0.3);
+    --image-picker-close-border-radius: 0 ~`pxtorem(2)`;
 }

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

@@ -517,6 +517,7 @@ export interface ArcodesignToken extends Record<string, string> {
     'steps-padding': string;
     'steps-tail-horizontal-padding': string;
     'steps-tail-vertical-padding': string;
+    'steps-tail-vertical-top': string;
     'steps-tail-standard-size': string;
     'steps-tail-standard-background': string;
     'steps-tail-finish-background': string;
@@ -543,8 +544,6 @@ export interface ArcodesignToken extends Record<string, string> {
     'steps-wait-description-color': string;
     'steps-icon-width': string;
     'steps-icon-height': string;
-    'steps-custom-icon-width': string;
-    'steps-custom-icon-height': string;
     'steps-dot-width': string;
     'steps-dot-height': string;
     'steps-dot-border-width': string;
@@ -646,6 +645,22 @@ export interface ArcodesignToken extends Record<string, string> {
     'action-sheet-header-padding': string;
     'action-sheet-title-font-size': string;
     'action-sheet-sub-title-font-size': string;
+    'image-picker-font-size': string;
+    'image-picker-disabled-opacity': string;
+    'image-picker-border-radius': string;
+    'image-picker-add-background': string;
+    'image-picker-add-icon-font-size': string;
+    'image-picker-add-icon-color': string;
+    'image-picker-add-text-font-size': string;
+    'image-picker-add-text-color': string;
+    'image-picker-error-color': string;
+    'image-picker-error-background': string;
+    'image-picker-close-color': string;
+    'image-picker-close-font-size': string;
+    'image-picker-close-width': string;
+    'image-picker-close-height': string;
+    'image-picker-close-background': string;
+    'image-picker-close-border-radius': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;

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

@@ -529,6 +529,7 @@ var tokens = {
   "steps-padding": "0.32rem 0",
   "steps-tail-horizontal-padding": "0 0.36rem",
   "steps-tail-vertical-padding": "0.28rem 0",
+  "steps-tail-vertical-top": "0.18rem",
   "steps-tail-standard-size": "1PX",
   "steps-tail-standard-background": "#e5e6eb",
   "steps-tail-finish-background": "#165dff",
@@ -555,8 +556,6 @@ var tokens = {
   "steps-wait-description-color": "#86909c",
   "steps-icon-width": "18PX",
   "steps-icon-height": "18PX",
-  "steps-custom-icon-width": "20PX",
-  "steps-custom-icon-height": "20PX",
   "steps-dot-width": "8PX",
   "steps-dot-height": "8PX",
   "steps-dot-border-width": "1.5PX",
@@ -657,7 +656,23 @@ var tokens = {
   "action-sheet-cancel-border-width": "0.16rem",
   "action-sheet-header-padding": "0.32rem",
   "action-sheet-title-font-size": "0.32rem",
-  "action-sheet-sub-title-font-size": "0.28rem"
+  "action-sheet-sub-title-font-size": "0.28rem",
+  "image-picker-font-size": "0.28rem",
+  "image-picker-disabled-opacity": "0.7",
+  "image-picker-border-radius": "0.04rem",
+  "image-picker-add-background": "#f7f8fa",
+  "image-picker-add-icon-font-size": "0.6rem",
+  "image-picker-add-icon-color": "#d8d8d8",
+  "image-picker-add-text-font-size": "0.24rem",
+  "image-picker-add-text-color": "#86909c",
+  "image-picker-error-color": "#ffffff",
+  "image-picker-error-background": "rgba(0, 0, 0, 0.5)",
+  "image-picker-close-color": "#ffffff",
+  "image-picker-close-font-size": "0.24rem",
+  "image-picker-close-width": "0.36rem",
+  "image-picker-close-height": "0.36rem",
+  "image-picker-close-background": "rgba(0, 0, 0, 0.3)",
+  "image-picker-close-border-radius": "0 0.04rem"
 };
 var _default = tokens;
 exports["default"] = _default;

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

@@ -3359,6 +3359,198 @@
             "en": "Default mask background color when image loads or retries"
         }
     },
+    "imagePickerAddBackground": {
+        "cssKey": "image-picker-add-background",
+        "desc": "图片选择器添加图片按钮的背景色",
+        "override": "",
+        "value": "#f7f8fa",
+        "jsValue": "#f7f8fa",
+        "staticValue": "#f7f8fa",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的背景色",
+            "en": "Background of the add button of ImagePicker"
+        }
+    },
+    "imagePickerAddIconColor": {
+        "cssKey": "image-picker-add-icon-color",
+        "desc": "图片选择器添加图片按钮的图标颜色",
+        "override": "",
+        "value": "#d8d8d8",
+        "jsValue": "#d8d8d8",
+        "staticValue": "#d8d8d8",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的图标颜色",
+            "en": "Icon color of the add button of ImagePicker"
+        }
+    },
+    "imagePickerAddIconFontSize": {
+        "cssKey": "image-picker-add-icon-font-size",
+        "desc": "图片选择器添加图片按钮的图标大小",
+        "override": "",
+        "value": "~`pxtorem(30)`",
+        "jsValue": "@getRem@30",
+        "staticValue": "0.6rem",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的图标大小",
+            "en": "Icon size of the add button of ImagePicker"
+        }
+    },
+    "imagePickerAddTextColor": {
+        "cssKey": "image-picker-add-text-color",
+        "desc": "图片选择器添加图片按钮的字体颜色",
+        "override": "",
+        "value": "@sub-info-font-color",
+        "jsValue": "@global@subInfoFontColor",
+        "staticValue": "#86909c",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的字体颜色",
+            "en": "Font color of the add button of ImagePicker"
+        }
+    },
+    "imagePickerAddTextFontSize": {
+        "cssKey": "image-picker-add-text-font-size",
+        "desc": "图片选择器添加图片按钮的字体大小",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的字体大小",
+            "en": "Font size of the add button of ImagePicker"
+        }
+    },
+    "imagePickerBorderRadius": {
+        "cssKey": "image-picker-border-radius",
+        "desc": "图片选择器中图片的圆角值",
+        "override": "",
+        "value": "~`pxtorem(2)`",
+        "jsValue": "@getRem@2",
+        "staticValue": "0.04rem",
+        "localeDesc": {
+            "ch": "图片选择器中图片的圆角值",
+            "en": "Border radius of the image in ImagePicker"
+        }
+    },
+    "imagePickerCloseBackground": {
+        "cssKey": "image-picker-close-background",
+        "desc": "图片选择器关闭按钮背景色",
+        "override": "",
+        "value": "rgba(0, 0, 0, 0.3)",
+        "jsValue": "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": "图片选择器关闭按钮圆角值",
+        "override": "",
+        "value": "0 ~`pxtorem(2)`",
+        "jsValue": "0 @getRem@2",
+        "staticValue": "0 0.04rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮圆角值",
+            "en": "Border radius of the close button of ImagePicker"
+        }
+    },
+    "imagePickerCloseColor": {
+        "cssKey": "image-picker-close-color",
+        "desc": "图片选择器关闭按钮字体颜色",
+        "override": "",
+        "value": "#ffffff",
+        "jsValue": "#ffffff",
+        "staticValue": "#ffffff",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮字体颜色",
+            "en": "Font color of the close button of ImagePicker"
+        }
+    },
+    "imagePickerCloseFontSize": {
+        "cssKey": "image-picker-close-font-size",
+        "desc": "图片选择器关闭按钮字体大小",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮字体大小",
+            "en": "Font size of the close button of ImagePicker"
+        }
+    },
+    "imagePickerCloseHeight": {
+        "cssKey": "image-picker-close-height",
+        "desc": "图片选择器关闭按钮高度",
+        "override": "",
+        "value": "~`pxtorem(18)`",
+        "jsValue": "@getRem@18",
+        "staticValue": "0.36rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮高度",
+            "en": "Height of the close button of ImagePicker"
+        }
+    },
+    "imagePickerCloseWidth": {
+        "cssKey": "image-picker-close-width",
+        "desc": "图片选择器关闭按钮宽度",
+        "override": "",
+        "value": "~`pxtorem(18)`",
+        "jsValue": "@getRem@18",
+        "staticValue": "0.36rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮宽度",
+            "en": "Width of the close button of ImagePicker"
+        }
+    },
+    "imagePickerDisabledOpacity": {
+        "cssKey": "image-picker-disabled-opacity",
+        "desc": "图片选择器禁用状态下的透明度",
+        "override": "",
+        "value": "0.7",
+        "jsValue": "0.7",
+        "staticValue": "0.7",
+        "localeDesc": {
+            "ch": "图片选择器禁用状态下的透明度",
+            "en": "Opacity of disabled ImagePicker"
+        }
+    },
+    "imagePickerErrorBackground": {
+        "cssKey": "image-picker-error-background",
+        "desc": "图片选择器中图片错误状态下的背景色",
+        "override": "",
+        "value": "rgba(0, 0, 0, 0.5)",
+        "jsValue": "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": "图片选择器中图片错误状态下的文字颜色",
+        "override": "",
+        "value": "#ffffff",
+        "jsValue": "#ffffff",
+        "staticValue": "#ffffff",
+        "localeDesc": {
+            "ch": "图片选择器中图片错误状态下的文字颜色",
+            "en": "Text color for image error state in the image picker"
+        }
+    },
+    "imagePickerFontSize": {
+        "cssKey": "image-picker-font-size",
+        "desc": "图片选择器内部字体大小",
+        "override": "",
+        "value": "~`pxtorem(14)`",
+        "jsValue": "@getRem@14",
+        "staticValue": "0.28rem",
+        "localeDesc": {
+            "ch": "图片选择器内部字体大小",
+            "en": "Font size of ImagePicker"
+        }
+    },
     "imagePlaceholderBackground": {
         "cssKey": "image-placeholder-background",
         "desc": "图片 placeholder 背景色",
@@ -5699,30 +5891,6 @@
             "en": "Label distance  of horizoverticalntal slider from the right of the mark"
         }
     },
-    "stepsCustomIconHeight": {
-        "cssKey": "steps-custom-icon-height",
-        "desc": "steps 步骤自定义图标高度",
-        "override": "",
-        "value": "20PX",
-        "jsValue": "20PX",
-        "staticValue": "20PX",
-        "localeDesc": {
-            "ch": "steps 步骤自定义图标高度",
-            "en": "Steps custom icon height"
-        }
-    },
-    "stepsCustomIconWidth": {
-        "cssKey": "steps-custom-icon-width",
-        "desc": "steps 步骤自定义图标宽度",
-        "override": "",
-        "value": "20PX",
-        "jsValue": "20PX",
-        "staticValue": "20PX",
-        "localeDesc": {
-            "ch": "steps 步骤自定义图标宽度",
-            "en": "Steps custom icon width"
-        }
-    },
     "stepsDescriptionColor": {
         "cssKey": "steps-description-color",
         "desc": "steps 步骤默认描述文字颜色",
@@ -6119,6 +6287,18 @@
             "en": "Left and right spacing of the vertical dividing line of Steps"
         }
     },
+    "stepsTailVerticalTop": {
+        "cssKey": "steps-tail-vertical-top",
+        "desc": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
+        "override": "",
+        "value": "~`pxtorem(9)`",
+        "jsValue": "@getRem@9",
+        "staticValue": "0.18rem",
+        "localeDesc": {
+            "ch": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
+            "en": "Left and right spacing of the vertical dividing line of Steps"
+        }
+    },
     "stepsTitleFontSize": {
         "cssKey": "steps-title-font-size",
         "desc": "steps 标题文字大小",

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

@@ -517,6 +517,7 @@
 @steps-padding: ~`pxtorem(16)` 0;
 @steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
 @steps-tail-vertical-padding: ~`pxtorem(14)` 0;
+@steps-tail-vertical-top: ~`pxtorem(9)`;
 @steps-tail-standard-size: 1PX;
 @steps-tail-standard-background: @line-color;
 @steps-tail-finish-background: @primary-color;
@@ -543,8 +544,6 @@
 @steps-wait-description-color: @sub-info-font-color;
 @steps-icon-width: 18PX;
 @steps-icon-height: 18PX;
-@steps-custom-icon-width: 20PX;
-@steps-custom-icon-height: 20PX;
 @steps-dot-width: 8PX;
 @steps-dot-height: 8PX;
 @steps-dot-border-width: 1.5PX;
@@ -646,4 +645,20 @@
 @action-sheet-header-padding: ~`pxtorem(16)`;
 @action-sheet-title-font-size: ~`pxtorem(16)`;
 @action-sheet-sub-title-font-size: ~`pxtorem(14)`;
+@image-picker-font-size: ~`pxtorem(14)`;
+@image-picker-disabled-opacity: 0.7;
+@image-picker-border-radius: ~`pxtorem(2)`;
+@image-picker-add-background: #f7f8fa;
+@image-picker-add-icon-font-size: ~`pxtorem(30)`;
+@image-picker-add-icon-color: #d8d8d8;
+@image-picker-add-text-font-size: ~`pxtorem(12)`;
+@image-picker-add-text-color: @sub-info-font-color;
+@image-picker-error-color: #ffffff;
+@image-picker-error-background: rgba(0, 0, 0, 0.5);
+@image-picker-close-color: #ffffff;
+@image-picker-close-font-size: ~`pxtorem(12)`;
+@image-picker-close-width: ~`pxtorem(18)`;
+@image-picker-close-height: ~`pxtorem(18)`;
+@image-picker-close-background: rgba(0, 0, 0, 0.3);
+@image-picker-close-border-radius: 0 ~`pxtorem(2)`;
 

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

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

package/umd/button/index.d.ts

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

package/umd/button/index.js

@@ -71,7 +71,9 @@
         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 ? false : _props$coverIconWhenL;
     var domRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
@@ -99,6 +101,14 @@
       setActive(false);
     };
 
+    var renderIcon = function renderIcon() {
+      if (coverIconWhenLoading) {
+        return loading ? null : icon;
+      }
+
+      return icon;
+    };
+
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/_react.default.createElement("button", {
@@ -120,7 +130,7 @@
         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, {
+      }, renderIcon(), loading && (loadingIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_loading.default, {
         className: "loading-icon",
         radius: 6,
         type: "circle"

package/umd/count-down/demo/style/mobile.less

@@ -32,7 +32,7 @@
     .btn-wrap {
         display: flex;
 
-        .arco-button.type-primary {
+        .@{prefix}-button.type-primary {
             display: flex;
             flex-direction: row;
             align-items: center;

package/umd/grid/index.js

@@ -57,14 +57,21 @@
     });
 
     var getRows = function getRows(prefix, rowsData, rows, row) {
-      var fakeGrids = new Array(!isSliding && columns && rowsData.length % columns ? columns - rowsData.length % columns : 0).fill('');
-      var widthStyle = {
-        minWidth: 1 / columns * 100 + "%"
-      };
+      var placeholders = !isSliding && rowsData.length % columns;
+      var renderData = rowsData;
+
+      if (placeholders) {
+        var fakeGrids = new Array(columns - placeholders).fill({
+          img: null,
+          title: ''
+        });
+        renderData = rowsData.concat(fakeGrids);
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefix + "-rows",
         key: row
-      }, rowsData.map(function (item, index) {
+      }, renderData.map(function (item, index) {
         var img = item.img,
             title = item.title,
             content = item.content,
@@ -78,7 +85,7 @@
         }
 
         var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.y) || 0;
-        var rowLen = rowsData.length;
+        var rowLen = renderData.length;
         var marginRight = index + 1 === rowLen ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.x) || 0;
         return /*#__PURE__*/_react.default.createElement("div", {
           key: index,
@@ -107,12 +114,6 @@
         }) : null, (row + 1) % rows !== 0 ? /*#__PURE__*/_react.default.createElement("i", {
           className: "horizontal-border"
         }) : null);
-      }), fakeGrids.map(function (_, i) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _mobileUtils.cls)(prefix + "-rows-item fake-col"),
-          key: i,
-          style: widthStyle
-        });
       }));
     };
 

package/umd/image/index.d.ts

@@ -14,7 +14,6 @@ export interface ImageProps {
     /**
      * 指定图片状态，staticLabel=false时有效
      * @en The specified image state, valid when staticLabel=false
-     * @default "init"
      */
     status?: ImageStatus;
     /**