@arco-design/mobile-react 2.34.0 → 2.35.1

package/esm/date-picker/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["currentTs", "className", "visible", "onOk", "onChange", "onValueChange", "mode", "typeArr", "minTs", "maxTs", "formatter", "valueFilter", "columnsProcessor", "touchToStop", "useUTC", "renderLinkedContainer"];
 import React, { useEffect, useRef, useState, useMemo, forwardRef, useImperativeHandle } from 'react';
-import { cls, componentWrapper, formatDateNumber } from '@arco-design/mobile-utils';
+import { cls, componentWrapper, formatDateNumber, isEmptyValue } from '@arco-design/mobile-utils';
 import Picker from '../picker';
 import { ContextLayout } from '../context-provider';
 import { convertTsToDateObj, oneOf, judgeObj, convertObjToTs } from './helper';
@@ -317,7 +317,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       onOk: _handlePickerConfirm,
       touchToStop: touchToStop,
       renderLinkedContainer: renderLinkedContainer ? function () {
-        return renderLinkedContainer(currentTs, keyOptions);
+        return renderLinkedContainer(isEmptyValue(props.currentTs) ? undefined : currentTs, keyOptions);
       } : undefined
     }));
   });

package/esm/date-picker/type.d.ts

@@ -110,5 +110,5 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
 }

package/esm/popup-swiper/index.d.ts

@@ -26,7 +26,7 @@ export interface PopupSwiperProps extends PopupProps {
      * @default direction 属性指定的方向性
      * @default_en The value of direction property
      */
-    allowSwipeDirections: DirectionType[];
+    allowSwipeDirections?: DirectionType[];
     /**
      * 固定弹窗退出方向，默认跟随手势滑动方向
      * @en Fixed the exit direction of the pop-up window, and the default sliding direction follows the gesture

package/esm/sticky/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle, useEffect, useMemo, useState, useCallback } from 'react';
-import { cls, execRAF, getActualContainer, getScrollContainerRect } from '@arco-design/mobile-utils';
+import { cls, execRAF, getActualContainer, getScrollContainerRect, safeGetComputedStyle, convertCssPropertyToNumber } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import { useRefState } from '../_helpers';
 import Portal from '../portal';
@@ -76,9 +76,14 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
     var _getScrollContainerRe = getScrollContainerRect(scrollContainerRef.current),
         containerRect = _getScrollContainerRe.containerRect;
 
-    var containerTop = containerRect.top,
-        containerBottom = containerRect.bottom,
+    var rectTop = containerRect.top,
+        rectBottom = containerRect.bottom,
         containerHeight = containerRect.height;
+    var scrollStyle = safeGetComputedStyle(scrollContainerRef.current);
+    var borderTop = needTop ? convertCssPropertyToNumber(scrollStyle, 'borderTopWidth') : 0;
+    var borderBottom = needBottom ? convertCssPropertyToNumber(scrollStyle, 'borderBottomWidth') : 0;
+    var containerTop = rectTop + borderTop;
+    var containerBottom = rectBottom - borderBottom;
     var disFromTop = Math.round(placeholderClientRect.top - containerTop);
     var disFromBottom = Math.round(placeholderClientRect.top + calculatedHeight - containerBottom);
     var topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop;
@@ -87,8 +92,32 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
     var isTopSticky = needTop ? disFromTop <= topOffset && followBottom > containerTop + followOffset : false;
     var isBottomSticky = needBottom ? disFromBottom >= -bottomOffset && followTop < containerBottom - followOffset : false;
     var newStickyState = isTopSticky || isBottomSticky;
-    var cssTop = (stickyStyle === 'absolute' ? 0 : containerTop) + topOffset;
-    var cssBottom = (stickyStyle === 'absolute' ? 0 : window.innerHeight - containerBottom) + bottomOffset;
+    var stickyTop = containerTop;
+    var stickyBottom = window.innerHeight - containerBottom;
+    var stickyLeft = placeholderClientRect.left;
+
+    if (stickyStyle === 'absolute') {
+      var offsetParent = contentRef.current.offsetParent;
+
+      if (offsetParent) {
+        var _getScrollContainerRe2 = getScrollContainerRect(offsetParent),
+            parentRect = _getScrollContainerRe2.containerRect;
+
+        var parentStyle = safeGetComputedStyle(offsetParent);
+        var parentBorderTop = needTop ? convertCssPropertyToNumber(parentStyle, 'borderTopWidth') : 0;
+        var parentBorderBottom = needBottom ? convertCssPropertyToNumber(parentStyle, 'borderBottomWidth') : 0;
+        var parentBorderLeft = convertCssPropertyToNumber(parentStyle, 'borderLeftWidth');
+        stickyTop = containerTop - parentRect.top - parentBorderTop;
+        stickyBottom = parentRect.bottom - containerBottom - parentBorderBottom;
+        stickyLeft = placeholderClientRect.left - parentRect.left - parentBorderLeft;
+      } else {
+        stickyTop = 0;
+        stickyBottom = 0;
+      }
+    }
+
+    var cssTop = stickyTop + topOffset;
+    var cssBottom = stickyBottom + bottomOffset;
     var stickyCssStyle = {};
 
     if (newStickyState) {
@@ -102,7 +131,7 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
       } : {}, isBottomSticky ? {
         bottom: bottomFollowDifference > 0 ? cssBottom : cssBottom + bottomFollowDifference
       } : {}, {
-        left: placeholderClientRect.left,
+        left: stickyLeft,
         width: placeholderClientRect.width
       }, userSetStickyCssStyle || {});
     }

package/esnext/date-picker/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState, useMemo, forwardRef, useImperativeHandle, } from 'react';
-import { cls, componentWrapper, formatDateNumber } from '@arco-design/mobile-utils';
+import { cls, componentWrapper, formatDateNumber, isEmptyValue } from '@arco-design/mobile-utils';
 import Picker from '../picker';
 import { ContextLayout } from '../context-provider';
 import { convertTsToDateObj, oneOf, judgeObj, convertObjToTs } from './helper';
@@ -202,7 +202,7 @@ const DatePicker = forwardRef((props, ref) => {
         }
     }, [visible]);
     return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(Picker, Object.assign({}, otherProps, { ref: pickerRef, visible: visible, className: cls(className, `${prefixCls}-date-picker`), cascade: false, data: data, value: value, onPickerChange: _handlePickerChange, onOk: _handlePickerConfirm, touchToStop: touchToStop, renderLinkedContainer: renderLinkedContainer
-            ? () => renderLinkedContainer(currentTs, keyOptions)
+            ? () => renderLinkedContainer(isEmptyValue(props.currentTs) ? undefined : currentTs, keyOptions)
             : undefined })))));
 });
 /**

package/esnext/date-picker/type.d.ts

@@ -110,5 +110,5 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
 }

package/esnext/popup-swiper/index.d.ts

@@ -26,7 +26,7 @@ export interface PopupSwiperProps extends PopupProps {
      * @default direction 属性指定的方向性
      * @default_en The value of direction property
      */
-    allowSwipeDirections: DirectionType[];
+    allowSwipeDirections?: DirectionType[];
     /**
      * 固定弹窗退出方向，默认跟随手势滑动方向
      * @en Fixed the exit direction of the pop-up window, and the default sliding direction follows the gesture

package/esnext/sticky/index.js

@@ -1,5 +1,5 @@
 import React, { useRef, forwardRef, useImperativeHandle, useEffect, useMemo, useState, useCallback, } from 'react';
-import { cls, execRAF, getActualContainer, getScrollContainerRect, } from '@arco-design/mobile-utils';
+import { cls, execRAF, getActualContainer, getScrollContainerRect, safeGetComputedStyle, convertCssPropertyToNumber, } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import { useRefState } from '../_helpers';
 import Portal from '../portal';
@@ -33,7 +33,16 @@ const Sticky = forwardRef((props, ref) => {
         const calculatedHeight = contentClientRect.height;
         contentCalculateHeightRef.current = contentClientRect.height;
         const { containerRect } = getScrollContainerRect(scrollContainerRef.current);
-        const { top: containerTop, bottom: containerBottom, height: containerHeight, } = containerRect;
+        const { top: rectTop, bottom: rectBottom, height: containerHeight } = containerRect;
+        const scrollStyle = safeGetComputedStyle(scrollContainerRef.current);
+        const borderTop = needTop
+            ? convertCssPropertyToNumber(scrollStyle, 'borderTopWidth')
+            : 0;
+        const borderBottom = needBottom
+            ? convertCssPropertyToNumber(scrollStyle, 'borderBottomWidth')
+            : 0;
+        const containerTop = rectTop + borderTop;
+        const containerBottom = rectBottom - borderBottom;
         const disFromTop = Math.round(placeholderClientRect.top - containerTop);
         const disFromBottom = Math.round(placeholderClientRect.top + calculatedHeight - containerBottom);
         const topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop;
@@ -46,9 +55,32 @@ const Sticky = forwardRef((props, ref) => {
             ? disFromBottom >= -bottomOffset && followTop < containerBottom - followOffset
             : false;
         const newStickyState = isTopSticky || isBottomSticky;
-        const cssTop = (stickyStyle === 'absolute' ? 0 : containerTop) + topOffset;
-        const cssBottom = (stickyStyle === 'absolute' ? 0 : window.innerHeight - containerBottom) +
-            bottomOffset;
+        let stickyTop = containerTop;
+        let stickyBottom = window.innerHeight - containerBottom;
+        let stickyLeft = placeholderClientRect.left;
+        if (stickyStyle === 'absolute') {
+            const offsetParent = contentRef.current.offsetParent;
+            if (offsetParent) {
+                const { containerRect: parentRect } = getScrollContainerRect(offsetParent);
+                const parentStyle = safeGetComputedStyle(offsetParent);
+                const parentBorderTop = needTop
+                    ? convertCssPropertyToNumber(parentStyle, 'borderTopWidth')
+                    : 0;
+                const parentBorderBottom = needBottom
+                    ? convertCssPropertyToNumber(parentStyle, 'borderBottomWidth')
+                    : 0;
+                const parentBorderLeft = convertCssPropertyToNumber(parentStyle, 'borderLeftWidth');
+                stickyTop = containerTop - parentRect.top - parentBorderTop;
+                stickyBottom = parentRect.bottom - containerBottom - parentBorderBottom;
+                stickyLeft = placeholderClientRect.left - parentRect.left - parentBorderLeft;
+            }
+            else {
+                stickyTop = 0;
+                stickyBottom = 0;
+            }
+        }
+        const cssTop = stickyTop + topOffset;
+        const cssBottom = stickyBottom + bottomOffset;
         let stickyCssStyle = {};
         if (newStickyState) {
             stickyCssStyle = {
@@ -68,7 +100,7 @@ const Sticky = forwardRef((props, ref) => {
                             : cssBottom + bottomFollowDifference,
                     }
                     : {}),
-                left: placeholderClientRect.left,
+                left: stickyLeft,
                 width: placeholderClientRect.width,
                 ...(userSetStickyCssStyle || {}),
             };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.34.0",
+    "version": "2.35.1",
     "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.20.1",
+        "@arco-design/mobile-utils": "2.20.3",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "42445e5c9d62da918bdbcf48afc01c77916f8519"
+    "gitHead": "f80cdb93f0ea56337715dc7218c997fafa5af0a9"
 }

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

@@ -1,7 +1,8 @@
 @import '../../../mixin/index.less';
 
 :root when (@use-css-vars = 1) {
-    --prefix: arco;
+    --prefix: var(--prefix-mobile);
+    --prefix-mobile: arco;
     --base-font-size: 50;
     --arco-dark-mode-selector: .arco-theme-dark;
     --background-color: #FFFFFF;

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

@@ -1,6 +1,7 @@
 export declare function getRem(px: number, baseFontSize: number): string;
 export interface ArcodesignToken extends Record<string, string> {
     'prefix': string;
+    'prefix-mobile': string;
     'base-font-size': string;
     'arco-dark-mode-selector': string;
     'background-color': string;

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

@@ -12,7 +12,8 @@ function getRem(px, baseFontSize) {
 }
 
 var tokens = {
-  "prefix": "arco",
+  "prefix": "var(--prefix-mobile)",
+  "prefix-mobile": "arco",
   "base-font-size": "50",
   "arco-dark-mode-selector": ".arco-theme-dark",
   "background-color": "#FFFFFF",

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

@@ -8049,14 +8049,27 @@
         "cssKey": "prefix",
         "desc": "类前缀，需配合 context-provider 中的 prefixCls 使用",
         "override": "",
-        "value": "arco",
-        "jsValue": "arco",
+        "value": "@prefix-mobile",
+        "jsValue": "@global@prefixMobile",
         "staticValue": "arco",
         "localeDesc": {
             "ch": "类前缀，需配合 context-provider 中的 prefixCls 使用",
+            "default": "'arco'",
             "en": "Classname prefix, it needs to be used with prefixCls in context-provider"
         }
     },
+    "prefixMobile": {
+        "cssKey": "prefix-mobile",
+        "desc": "功能同 prefix，与 PC 版同用时可使用该变量修改类前缀解决冲突",
+        "override": "",
+        "value": "arco",
+        "jsValue": "arco",
+        "staticValue": "arco",
+        "localeDesc": {
+            "ch": "功能同 prefix，与 PC 版同用时可使用该变量修改类前缀解决冲突",
+            "en": "Same as `prefix`, it can avoid conflicts when used with arco pc"
+        }
+    },
     "primaryColor": {
         "cssKey": "primary-color",
         "desc": "基础主题色",

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

@@ -1,6 +1,7 @@
 @import '../../../mixin/pxtorem.less';
 
-@prefix: arco;
+@prefix: @prefix-mobile;
+@prefix-mobile: arco;
 @base-font-size: 50;
 @arco-dark-mode-selector: .arco-theme-dark;
 @background-color: #FFFFFF;

package/umd/date-picker/index.js

@@ -345,7 +345,7 @@
         onOk: _handlePickerConfirm,
         touchToStop: touchToStop,
         renderLinkedContainer: renderLinkedContainer ? function () {
-          return renderLinkedContainer(currentTs, keyOptions);
+          return renderLinkedContainer((0, _mobileUtils.isEmptyValue)(props.currentTs) ? undefined : currentTs, keyOptions);
         } : undefined
       }));
     });

package/umd/date-picker/type.d.ts

@@ -110,5 +110,5 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
 }

package/umd/popup-swiper/index.d.ts

@@ -26,7 +26,7 @@ export interface PopupSwiperProps extends PopupProps {
      * @default direction 属性指定的方向性
      * @default_en The value of direction property
      */
-    allowSwipeDirections: DirectionType[];
+    allowSwipeDirections?: DirectionType[];
     /**
      * 固定弹窗退出方向，默认跟随手势滑动方向
      * @en Fixed the exit direction of the pop-up window, and the default sliding direction follows the gesture

package/umd/sticky/index.js

@@ -96,9 +96,14 @@
       var _getScrollContainerRe = (0, _mobileUtils.getScrollContainerRect)(scrollContainerRef.current),
           containerRect = _getScrollContainerRe.containerRect;
 
-      var containerTop = containerRect.top,
-          containerBottom = containerRect.bottom,
+      var rectTop = containerRect.top,
+          rectBottom = containerRect.bottom,
           containerHeight = containerRect.height;
+      var scrollStyle = (0, _mobileUtils.safeGetComputedStyle)(scrollContainerRef.current);
+      var borderTop = needTop ? (0, _mobileUtils.convertCssPropertyToNumber)(scrollStyle, 'borderTopWidth') : 0;
+      var borderBottom = needBottom ? (0, _mobileUtils.convertCssPropertyToNumber)(scrollStyle, 'borderBottomWidth') : 0;
+      var containerTop = rectTop + borderTop;
+      var containerBottom = rectBottom - borderBottom;
       var disFromTop = Math.round(placeholderClientRect.top - containerTop);
       var disFromBottom = Math.round(placeholderClientRect.top + calculatedHeight - containerBottom);
       var topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop;
@@ -107,8 +112,32 @@
       var isTopSticky = needTop ? disFromTop <= topOffset && followBottom > containerTop + followOffset : false;
       var isBottomSticky = needBottom ? disFromBottom >= -bottomOffset && followTop < containerBottom - followOffset : false;
       var newStickyState = isTopSticky || isBottomSticky;
-      var cssTop = (stickyStyle === 'absolute' ? 0 : containerTop) + topOffset;
-      var cssBottom = (stickyStyle === 'absolute' ? 0 : window.innerHeight - containerBottom) + bottomOffset;
+      var stickyTop = containerTop;
+      var stickyBottom = window.innerHeight - containerBottom;
+      var stickyLeft = placeholderClientRect.left;
+
+      if (stickyStyle === 'absolute') {
+        var offsetParent = contentRef.current.offsetParent;
+
+        if (offsetParent) {
+          var _getScrollContainerRe2 = (0, _mobileUtils.getScrollContainerRect)(offsetParent),
+              parentRect = _getScrollContainerRe2.containerRect;
+
+          var parentStyle = (0, _mobileUtils.safeGetComputedStyle)(offsetParent);
+          var parentBorderTop = needTop ? (0, _mobileUtils.convertCssPropertyToNumber)(parentStyle, 'borderTopWidth') : 0;
+          var parentBorderBottom = needBottom ? (0, _mobileUtils.convertCssPropertyToNumber)(parentStyle, 'borderBottomWidth') : 0;
+          var parentBorderLeft = (0, _mobileUtils.convertCssPropertyToNumber)(parentStyle, 'borderLeftWidth');
+          stickyTop = containerTop - parentRect.top - parentBorderTop;
+          stickyBottom = parentRect.bottom - containerBottom - parentBorderBottom;
+          stickyLeft = placeholderClientRect.left - parentRect.left - parentBorderLeft;
+        } else {
+          stickyTop = 0;
+          stickyBottom = 0;
+        }
+      }
+
+      var cssTop = stickyTop + topOffset;
+      var cssBottom = stickyBottom + bottomOffset;
       var stickyCssStyle = {};
 
       if (newStickyState) {
@@ -122,7 +151,7 @@
         } : {}, isBottomSticky ? {
           bottom: bottomFollowDifference > 0 ? cssBottom : cssBottom + bottomFollowDifference
         } : {}, {
-          left: placeholderClientRect.left,
+          left: stickyLeft,
           width: placeholderClientRect.width
         }, userSetStickyCssStyle || {});
       }