@arco-design/mobile-react 2.25.2 → 2.25.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.25.2",
+    "version": "2.25.4",
     "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.13.2",
+        "@arco-design/mobile-utils": "2.13.4",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -35,5 +35,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "181b8d60014ef9b1992c9011c8be3ab7c7f08f2e"
+    "gitHead": "156c02f85026ec594e9d5c83edfb1728e97dc13b"
 }

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

@@ -728,4 +728,18 @@
     --form-item-label-item-required-asterisk-color: var(--danger-color);
     --form-item-error-message-color: var(--danger-color);
     --form-item-warning-message-color: var(--warning-color);
+    --time-line-dot-width: ~`pxtorem(9)`;
+    --time-line-dot-border-color: var(--primary-color);
+    --time-line-dot-background-color: var(--background-color);
+    --time-line-axis-width: ~`pxtorem(1)`;
+    --time-line-axis-color: var(--line-color);
+    --time-line-label-font-size: ~`pxtorem(12)`;
+    --time-line-label-color: var(--sub-info-font-color);
+    --time-line-content-margin-top: ~`pxtorem(7)`;
+    --time-line-content-margin-bottom: ~`pxtorem(19)`;
+    --time-line-content-margin-left: ~`pxtorem(8)`;
+    --time-line-content-border-radius: ~`pxtorem(4)`;
+    --time-line-content-font-size: ~`pxtorem(16)`;
+    --time-line-content-background-color: var(--line-color);
+    --time-line-content-color: var(--font-color);
 }

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

@@ -727,6 +727,20 @@ export interface ArcodesignToken extends Record<string, string> {
     'form-item-label-item-required-asterisk-color': string;
     'form-item-error-message-color': string;
     'form-item-warning-message-color': string;
+    'time-line-dot-width': string;
+    'time-line-dot-border-color': string;
+    'time-line-dot-background-color': string;
+    'time-line-axis-width': string;
+    'time-line-axis-color': string;
+    'time-line-label-font-size': string;
+    'time-line-label-color': string;
+    'time-line-content-margin-top': string;
+    'time-line-content-margin-bottom': string;
+    'time-line-content-margin-left': string;
+    'time-line-content-border-radius': string;
+    'time-line-content-font-size': string;
+    'time-line-content-background-color': string;
+    'time-line-content-color': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;

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

@@ -736,7 +736,21 @@ var tokens = {
   "form-item-border-divider-color": "rgba(0, 0, 0, 0.08)",
   "form-item-label-item-required-asterisk-color": "var(--danger-color)",
   "form-item-error-message-color": "var(--danger-color)",
-  "form-item-warning-message-color": "var(--warning-color)"
+  "form-item-warning-message-color": "var(--warning-color)",
+  "time-line-dot-width": "0.18rem",
+  "time-line-dot-border-color": "var(--primary-color)",
+  "time-line-dot-background-color": "var(--background-color)",
+  "time-line-axis-width": "0.02rem",
+  "time-line-axis-color": "var(--line-color)",
+  "time-line-label-font-size": "0.24rem",
+  "time-line-label-color": "var(--sub-info-font-color)",
+  "time-line-content-margin-top": "0.14rem",
+  "time-line-content-margin-bottom": "0.38rem",
+  "time-line-content-margin-left": "0.16rem",
+  "time-line-content-border-radius": "0.08rem",
+  "time-line-content-font-size": "0.32rem",
+  "time-line-content-background-color": "var(--line-color)",
+  "time-line-content-color": "var(--font-color)"
 };
 var _default = tokens;
 exports["default"] = _default;

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

@@ -8481,6 +8481,174 @@
             "en": "Textareaword count font size"
         }
     },
+    "timeLineAxisColor": {
+        "cssKey": "time-line-axis-color",
+        "desc": "时间轴轴线的颜色",
+        "override": "",
+        "value": "@line-color",
+        "jsValue": "@global@lineColor",
+        "staticValue": "#e5e6eb",
+        "localeDesc": {
+            "ch": "时间轴轴线的颜色",
+            "en": "Color of the Axis of TimeLine"
+        }
+    },
+    "timeLineAxisWidth": {
+        "cssKey": "time-line-axis-width",
+        "desc": "时间轴轴线的宽度",
+        "override": "",
+        "value": "~`pxtorem(1)`",
+        "jsValue": "@getRem@1",
+        "staticValue": "0.02rem",
+        "localeDesc": {
+            "ch": "时间轴轴线的宽度",
+            "en": "Width of the Axis of TimeLine"
+        }
+    },
+    "timeLineContentBackgroundColor": {
+        "cssKey": "time-line-content-background-color",
+        "desc": "时间轴content的背景色",
+        "override": "",
+        "value": "@line-color",
+        "jsValue": "@global@lineColor",
+        "staticValue": "#e5e6eb",
+        "localeDesc": {
+            "ch": "时间轴content的背景色",
+            "en": "Background color of the Content of TimeLine"
+        }
+    },
+    "timeLineContentBorderRadius": {
+        "cssKey": "time-line-content-border-radius",
+        "desc": "时间轴content的圆角值",
+        "override": "",
+        "value": "~`pxtorem(4)`",
+        "jsValue": "@getRem@4",
+        "staticValue": "0.08rem",
+        "localeDesc": {
+            "ch": "时间轴content的圆角值",
+            "en": "Border radius of the Content of TimeLine"
+        }
+    },
+    "timeLineContentColor": {
+        "cssKey": "time-line-content-color",
+        "desc": "时间轴content的字体颜色",
+        "override": "",
+        "value": "@font-color",
+        "jsValue": "@global@fontColor",
+        "staticValue": "#1d2129",
+        "localeDesc": {
+            "ch": "时间轴content的字体颜色",
+            "en": "Font color of the Content of TimeLine"
+        }
+    },
+    "timeLineContentFontSize": {
+        "cssKey": "time-line-content-font-size",
+        "desc": "时间轴content的字体大小",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "时间轴content的字体大小",
+            "en": "Font size of the content of TimeLine"
+        }
+    },
+    "timeLineContentMarginBottom": {
+        "cssKey": "time-line-content-margin-bottom",
+        "desc": "时间轴content的下外边距（13 + 12 / 2）",
+        "override": "",
+        "value": "~`pxtorem(19)`",
+        "jsValue": "@getRem@19",
+        "staticValue": "0.38rem",
+        "localeDesc": {
+            "ch": "时间轴content的下外边距（13 + 12 / 2）",
+            "en": "Bottom margin of the Content of TimeLine"
+        }
+    },
+    "timeLineContentMarginLeft": {
+        "cssKey": "time-line-content-margin-left",
+        "desc": "时间轴content的左外边距",
+        "override": "",
+        "value": "~`pxtorem(8)`",
+        "jsValue": "@getRem@8",
+        "staticValue": "0.16rem",
+        "localeDesc": {
+            "ch": "时间轴content的左外边距",
+            "en": "Left margin of the Content of TimeLine"
+        }
+    },
+    "timeLineContentMarginTop": {
+        "cssKey": "time-line-content-margin-top",
+        "desc": "时间轴content的上外边距（13 - 12 / 2）",
+        "override": "",
+        "value": "~`pxtorem(7)`",
+        "jsValue": "@getRem@7",
+        "staticValue": "0.14rem",
+        "localeDesc": {
+            "ch": "时间轴content的上外边距（13 - 12 / 2）",
+            "en": "Top margin of the Content of TimeLine"
+        }
+    },
+    "timeLineDotBackgroundColor": {
+        "cssKey": "time-line-dot-background-color",
+        "desc": "时间轴节点的背景色",
+        "override": "",
+        "value": "@background-color",
+        "jsValue": "@global@backgroundColor",
+        "staticValue": "#ffffff",
+        "localeDesc": {
+            "ch": "时间轴节点的背景色",
+            "en": "Background color of the dot of TimeLine"
+        }
+    },
+    "timeLineDotBorderColor": {
+        "cssKey": "time-line-dot-border-color",
+        "desc": "时间轴节点的线颜色",
+        "override": "",
+        "value": "@primary-color",
+        "jsValue": "@global@primaryColor",
+        "staticValue": "#165dff",
+        "localeDesc": {
+            "ch": "时间轴节点的线颜色",
+            "en": "Border color of the dot of TimeLine"
+        }
+    },
+    "timeLineDotWidth": {
+        "cssKey": "time-line-dot-width",
+        "desc": "时间轴节点的宽度",
+        "override": "",
+        "value": "~`pxtorem(9)`",
+        "jsValue": "@getRem@9",
+        "staticValue": "0.18rem",
+        "localeDesc": {
+            "ch": "时间轴节点的宽度",
+            "en": "Width of the dot of TimeLine"
+        }
+    },
+    "timeLineLabelColor": {
+        "cssKey": "time-line-label-color",
+        "desc": "时间轴label的字体颜色",
+        "override": "",
+        "value": "@sub-info-font-color",
+        "jsValue": "@global@subInfoFontColor",
+        "staticValue": "#86909c",
+        "localeDesc": {
+            "ch": "时间轴label的字体颜色",
+            "en": "Font color of the label of TimeLine"
+        }
+    },
+    "timeLineLabelFontSize": {
+        "cssKey": "time-line-label-font-size",
+        "desc": "时间轴label的字体大小",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "时间轴label的字体大小",
+            "en": "Font size of the label of TimeLine"
+        }
+    },
     "toastBackground": {
         "cssKey": "toast-background",
         "desc": "toast 背景色",

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

@@ -727,4 +727,18 @@
 @form-item-label-item-required-asterisk-color: @danger-color;
 @form-item-error-message-color: @danger-color;
 @form-item-warning-message-color: @warning-color;
+@time-line-dot-width: ~`pxtorem(9)`;
+@time-line-dot-border-color: @primary-color;
+@time-line-dot-background-color: @background-color;
+@time-line-axis-width: ~`pxtorem(1)`;
+@time-line-axis-color: @line-color;
+@time-line-label-font-size: ~`pxtorem(12)`;
+@time-line-label-color: @sub-info-font-color;
+@time-line-content-margin-top: ~`pxtorem(7)`;
+@time-line-content-margin-bottom: ~`pxtorem(19)`;
+@time-line-content-margin-left: ~`pxtorem(8)`;
+@time-line-content-border-radius: ~`pxtorem(4)`;
+@time-line-content-font-size: ~`pxtorem(16)`;
+@time-line-content-background-color: @line-color;
+@time-line-content-color: @font-color;
 

package/umd/ellipsis/type.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export interface EllipsisBaseProps {
     /**
      * 需要缩略的文本内容
@@ -38,12 +38,12 @@ export interface EllipsisBaseProps {
      * 缩略节点点击事件
      * @en Ellipsis node click event
      */
-    onEllipsisNodeClick?: () => void;
+    onEllipsisNodeClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
     /**
      * 收起节点点击事件
      * @en Collapse node click event
      */
-    onCollapseNodeClick?: () => void;
+    onCollapseNodeClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
 }
 export interface EllipsisRef {
     /**

package/umd/image-preview/index.js

@@ -761,7 +761,7 @@
     // @en In iOS when resetting the style, the image will disappear and cause flickering, so put a image at the bottom
     // 优先过渡图，其次用原图
     // @en Prioritize the transition image, followed by the original image
-    function renderImagePlaceholder(src, index) {
+    function renderImagePlaceholder(src, index, fitCss) {
       var _ref2 = imagesStatus[index] || {},
         originWidth = _ref2.originWidth,
         originHeight = _ref2.originHeight,
@@ -771,6 +771,9 @@
       var trans = hasOverflow ? {} : (0, _helpers.getStyleWithVendor)({
         transform: 'translateY(-50%)'
       });
+      var fitObj = fitCss ? {
+        objectFit: fitCss
+      } : {};
       return system === 'ios' && showPlaceholders[index] && originWidth && originHeight ? /*#__PURE__*/_react.default.createElement("img", {
         src: src,
         style: (0, _extends5.default)({
@@ -779,7 +782,7 @@
           height: originHeight,
           left: originLeft,
           top: originTop
-        }, trans)
+        }, fitObj, trans)
       }) : null;
     }
     function renderLoadingArea(index) {
@@ -845,7 +848,7 @@
           animateDuration: transImageInfo ? 0 : void 0,
           style: getImageStyle(),
           className: getImageClass(index),
-          bottomOverlap: renderImagePlaceholder(image.fallbackSrc || image.src, index),
+          bottomOverlap: renderImagePlaceholder(image.fallbackSrc || image.src, index, image.fit || fit),
           onLoad: function onLoad(_, imageEle) {
             imageDomsRef.current[index] = imageEle;
             setImagesStatusByIndex(index, {

package/umd/nav-bar/index.d.ts

@@ -105,6 +105,11 @@ export interface NavBarProps {
      * @en Set a custom style according to the scroll offset value. After setting this property, the scroll event of the scroll container will be monitored.
      */
     getComputedStyleByScroll?: (offset: number) => CSSProperties;
+    /**
+     * 滚动时回调，设置该属性后将监听滚动容器的滚动事件
+     * @en Callback when scrolling. After setting this property, the scroll event of the scroll container will be monitored.
+     */
+    onScrollChange?: (offset: number) => void;
     /**
      * 无障碍aria-label属性
      * @en Accessibility attribute aria-label

package/umd/nav-bar/index.js

@@ -55,6 +55,7 @@
       getScrollContainer = props.getScrollContainer,
       _props$showOffset = props.showOffset,
       showOffset = _props$showOffset === void 0 ? 0 : _props$showOffset,
+      onScrollChange = props.onScrollChange,
       getComputedStyleByScroll = props.getComputedStyleByScroll,
       _props$ariaLabel = props.ariaLabel,
       ariaLabel = _props$ariaLabel === void 0 ? '' : _props$ariaLabel,
@@ -71,6 +72,7 @@
     var system = (0, _helpers.useSystem)();
     var onElementScroll = function onElementScroll(curOffset) {
       setScrollToggleHide(curOffset < showOffset);
+      onScrollChange == null ? void 0 : onScrollChange(curOffset);
       if (getComputedStyleByScroll) {
         var cstyle = getComputedStyleByScroll(curOffset);
         setCustomStyle(cstyle);
@@ -90,7 +92,7 @@
       onElementScroll(top);
     };
     (0, _react.useEffect)(function () {
-      var needBind = showOffset || getComputedStyleByScroll;
+      var needBind = showOffset || getComputedStyleByScroll || onScrollChange;
       var container = (0, _mobileUtils.getValidScrollContainer)(getScrollContainer);
       handleEleScroll();
       if (needBind && container) {
@@ -101,7 +103,7 @@
           container.removeEventListener('scroll', handleEleScroll, false);
         }
       };
-    }, [showOffset, getComputedStyleByScroll, getScrollContainer]);
+    }, [showOffset, getComputedStyleByScroll, onScrollChange, getScrollContainer]);
     function handleClickLeft(e) {
       if (onClickLeft) {
         onClickLeft(e);

package/umd/search-bar/style/css/index.css

@@ -53,6 +53,7 @@
 .arco-search-bar-input::placeholder {
   color:  #c9cdd4 ;
 }
+.arco-search-bar-input::-webkit-search-decoration,
 .arco-search-bar-input::-webkit-search-cancel-button {
   display: none;
 }

package/umd/search-bar/style/index.less

@@ -46,6 +46,7 @@
       .use-var(color, search-bar-input-placeholder-color);
     }
 
+    &::-webkit-search-decoration,
     &::-webkit-search-cancel-button {
       display: none;
     }