@arco-design/mobile-react 2.24.1 → 2.25.0

package/esm/sticky/index.js

@@ -4,7 +4,6 @@ import { cls, execRAF, getActualContainer, getScrollContainerRect } from '@arco-
 import { ContextLayout } from '../context-provider';
 import { useRefState } from '../_helpers';
 import Portal from '../portal';
-
 /**
  * 粘性布局组件，元素相对于窗口或指定容器的吸顶效果。
  * @en Sticky layout component, The sticky-to-top effect of the element relative to the window or specified container
@@ -15,43 +14,39 @@ import Portal from '../portal';
  */
 var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$position = props.position,
-      position = _props$position === void 0 ? 'top' : _props$position,
-      _props$topOffset = props.topOffset,
-      topOffset = _props$topOffset === void 0 ? 0 : _props$topOffset,
-      _props$bottomOffset = props.bottomOffset,
-      bottomOffset = _props$bottomOffset === void 0 ? 0 : _props$bottomOffset,
-      _props$followOffset = props.followOffset,
-      followOffset = _props$followOffset === void 0 ? 0 : _props$followOffset,
-      children = props.children,
-      className = props.className,
-      style = props.style,
-      _props$zIndex = props.zIndex,
-      zIndex = _props$zIndex === void 0 ? 100 : _props$zIndex,
-      _props$portalWhenStic = props.portalWhenSticky,
-      portalWhenSticky = _props$portalWhenStic === void 0 ? false : _props$portalWhenStic,
-      _props$stickyStyle = props.stickyStyle,
-      stickyStyle = _props$stickyStyle === void 0 ? 'fixed' : _props$stickyStyle,
-      userSetStickyCssStyle = props.stickyCssStyle,
-      getPortalContainer = props.getPortalContainer,
-      getContainer = props.getContainer,
-      getScrollContainer = props.getScrollContainer,
-      onStickyStateChange = props.onStickyStateChange,
-      onTopChange = props.onTopChange;
-
+    position = _props$position === void 0 ? 'top' : _props$position,
+    _props$topOffset = props.topOffset,
+    topOffset = _props$topOffset === void 0 ? 0 : _props$topOffset,
+    _props$bottomOffset = props.bottomOffset,
+    bottomOffset = _props$bottomOffset === void 0 ? 0 : _props$bottomOffset,
+    _props$followOffset = props.followOffset,
+    followOffset = _props$followOffset === void 0 ? 0 : _props$followOffset,
+    children = props.children,
+    className = props.className,
+    style = props.style,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 100 : _props$zIndex,
+    _props$portalWhenStic = props.portalWhenSticky,
+    portalWhenSticky = _props$portalWhenStic === void 0 ? false : _props$portalWhenStic,
+    _props$stickyStyle = props.stickyStyle,
+    stickyStyle = _props$stickyStyle === void 0 ? 'fixed' : _props$stickyStyle,
+    userSetStickyCssStyle = props.stickyCssStyle,
+    getPortalContainer = props.getPortalContainer,
+    getContainer = props.getContainer,
+    getScrollContainer = props.getScrollContainer,
+    onStickyStateChange = props.onStickyStateChange,
+    onTopChange = props.onTopChange;
   var _useRefState = useRefState(false),
-      isSticky = _useRefState[0],
-      isStickyRef = _useRefState[1],
-      setIsSticky = _useRefState[2];
-
+    isSticky = _useRefState[0],
+    isStickyRef = _useRefState[1],
+    setIsSticky = _useRefState[2];
   var _useRefState2 = useRefState(false),
-      wasSticky = _useRefState2[0],
-      wasStickyRef = _useRefState2[1],
-      setWasSticky = _useRefState2[2];
-
+    wasSticky = _useRefState2[0],
+    wasStickyRef = _useRefState2[1],
+    setWasSticky = _useRefState2[2];
   var _useState = useState({}),
-      stickyStateStyle = _useState[0],
-      setStickyStateStyle = _useState[1];
-
+    stickyStateStyle = _useState[0],
+    setStickyStateStyle = _useState[1];
   var contentRef = useRef(null);
   var placeholderRef = useRef(null);
   var contentCalculateHeightRef = useRef(0);
@@ -60,25 +55,21 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
   var framePendingRef = useRef(false);
   var containerEventHandler = useCallback(function (_ref) {
     var followTop = _ref.followTop,
-        followBottom = _ref.followBottom;
-
+      followBottom = _ref.followBottom;
     if (!contentRef.current) {
       return;
     }
-
     var needTop = position === 'top' || position === 'both';
     var needBottom = position === 'bottom' || position === 'both';
     var placeholderClientRect = placeholderRef.current.getBoundingClientRect();
     var contentClientRect = contentRef.current.getBoundingClientRect();
     var calculatedHeight = contentClientRect.height;
     contentCalculateHeightRef.current = contentClientRect.height;
-
     var _getScrollContainerRe = getScrollContainerRect(scrollContainerRef.current),
-        containerRect = _getScrollContainerRe.containerRect;
-
+      containerRect = _getScrollContainerRe.containerRect;
     var containerTop = containerRect.top,
-        containerBottom = containerRect.bottom,
-        containerHeight = containerRect.height;
+      containerBottom = containerRect.bottom,
+      containerHeight = containerRect.height;
     var disFromTop = placeholderClientRect.top - containerTop;
     var disFromBottom = placeholderClientRect.top + calculatedHeight - containerBottom;
     var topFollowDifference = followBottom - followOffset - calculatedHeight - topOffset - containerTop;
@@ -90,7 +81,6 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
     var cssTop = (stickyStyle === 'absolute' ? 0 : containerTop) + topOffset;
     var cssBottom = (stickyStyle === 'absolute' ? 0 : window.innerHeight - containerBottom) + bottomOffset;
     var stickyCssStyle = {};
-
     if (newStickyState) {
       stickyCssStyle = _extends({
         transform: 'translateZ(0)',
@@ -106,11 +96,9 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
         width: placeholderClientRect.width
       }, userSetStickyCssStyle || {});
     }
-
     onTopChange == null ? void 0 : onTopChange(Math.max(0, contentClientRect.top - containerTop - topOffset));
     setIsSticky(newStickyState);
     setStickyStateStyle(stickyCssStyle);
-
     if (newStickyState !== wasStickyRef.current) {
       onStickyStateChange && onStickyStateChange({
         isTopSticky: isTopSticky,
@@ -119,20 +107,17 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
         wasSticky: wasStickyRef.current
       });
     }
-  }, [position, topOffset, bottomOffset, followOffset, zIndex, stickyStyle, onStickyStateChange, onTopChange]);
+  }, [position, topOffset, bottomOffset, followOffset, zIndex, stickyStyle, onStickyStateChange, onTopChange, userSetStickyCssStyle]);
   var recalculatePosition = useCallback(function () {
     if (framePendingRef.current) {
       return;
     }
-
     execRAF(function () {
       framePendingRef.current = false;
-
       if (containerRef.current) {
         var _containerRef$current = containerRef.current.getBoundingClientRect(),
-            _top = _containerRef$current.top,
-            bottom = _containerRef$current.bottom;
-
+          _top = _containerRef$current.top,
+          bottom = _containerRef$current.bottom;
         containerEventHandler({
           followTop: _top,
           followBottom: bottom
@@ -147,15 +132,12 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
     var eventTarget = getScrollContainer ? getActualContainer(getScrollContainer) : window;
     if (!eventTarget) return;
     scrollContainerRef.current = eventTarget;
-
     var attachEventListeners = function attachEventListeners(target) {
       target.addEventListener('scroll', recalculatePosition);
     };
-
     var removeEventListeners = function removeEventListeners(target) {
       target.removeEventListener('scroll', recalculatePosition);
     };
-
     attachEventListeners(eventTarget);
     recalculatePosition();
     return function () {
@@ -178,7 +160,6 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
   var computedStyle = useMemo(function () {
     return _extends({}, style || {}, stickyStateStyle);
   }, [stickyStateStyle, style]);
-
   function renderSticky(prefixCls) {
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-sticky", className),
@@ -186,7 +167,6 @@ var Sticky = /*#__PURE__*/forwardRef(function (props, ref) {
       style: computedStyle
     }, children);
   }
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
     var prefixCls = _ref2.prefixCls;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {

package/esm/style.d.ts

@@ -19,12 +19,17 @@ import './date-picker/style';
 import './dropdown/style';
 import './dropdown-menu/style';
 import './ellipsis/style';
+import './form/style';
+import './input/style';
+import './textarea/style';
+import './radio/style';
+import './image-picker/style';
+import './rate/style';
+import './slider/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';
 import './masking/style';
 import './nav-bar/style';
@@ -39,9 +44,6 @@ import './popup-swiper/style';
 import './portal/style';
 import './progress/style';
 import './pull-refresh/style';
-import './radio/style';
-import './rate/style';
-import './slider/style';
 import './search-bar/style';
 import './stepper/style';
 import './steps/style';
@@ -50,5 +52,4 @@ import './swipe-action/style';
 import './swipe-load/style';
 import './tab-bar/style';
 import './tag/style';
-import './textarea/style';
 import './transition/style';

package/esm/style.js

@@ -19,12 +19,17 @@ import './date-picker/style';
 import './dropdown/style';
 import './dropdown-menu/style';
 import './ellipsis/style';
+import './form/style';
+import './input/style';
+import './textarea/style';
+import './radio/style';
+import './image-picker/style';
+import './rate/style';
+import './slider/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';
 import './masking/style';
 import './nav-bar/style';
@@ -39,9 +44,6 @@ import './popup-swiper/style';
 import './portal/style';
 import './progress/style';
 import './pull-refresh/style';
-import './radio/style';
-import './rate/style';
-import './slider/style';
 import './search-bar/style';
 import './stepper/style';
 import './steps/style';
@@ -50,5 +52,4 @@ import './swipe-action/style';
 import './swipe-load/style';
 import './tab-bar/style';
 import './tag/style';
-import './textarea/style';
 import './transition/style';

package/esm/swipe-action/index.js

@@ -5,6 +5,7 @@ import { GlobalContext } from '../context-provider';
 import RenderAction from './item';
 import { getStyleWithVendor, useLatestRef, useRefState } from '../_helpers';
 export * from './type';
+
 /**
  * 滑动操作组件，左右滑动拉出菜单栏
  * @en SwipeAction component, slide left and right to pull out the menu bar
@@ -16,57 +17,49 @@ export * from './type';
 
 var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      children = props.children,
-      leftActions = props.leftActions,
-      rightActions = props.rightActions,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$threshold = props.threshold,
-      threshold = _props$threshold === void 0 ? 0.15 : _props$threshold,
-      closeOnTouchOutside = props.closeOnTouchOutside,
-      _props$transitionDura = props.transitionDuration,
-      transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
-      _props$dampRate = props.dampRate,
-      dampRate = _props$dampRate === void 0 ? 15 : _props$dampRate,
-      _props$openStyleType = props.openStyleType,
-      openStyleType = _props$openStyleType === void 0 ? 'layer' : _props$openStyleType,
-      onClose = props.onClose,
-      onOpen = props.onOpen;
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    children = props.children,
+    leftActions = props.leftActions,
+    rightActions = props.rightActions,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$threshold = props.threshold,
+    threshold = _props$threshold === void 0 ? 0.15 : _props$threshold,
+    closeOnTouchOutside = props.closeOnTouchOutside,
+    _props$transitionDura = props.transitionDuration,
+    transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
+    _props$dampRate = props.dampRate,
+    dampRate = _props$dampRate === void 0 ? 15 : _props$dampRate,
+    _props$openStyleType = props.openStyleType,
+    openStyleType = _props$openStyleType === void 0 ? 'layer' : _props$openStyleType,
+    onClose = props.onClose,
+    onOpen = props.onOpen;
   var domRef = useRef(null);
   var leftRef = useRef(null);
   var rightRef = useRef(null);
   var isOpen = useRef(false);
   var leftMenuWidthRef = useRef(0);
-
   var _useState = useState([]),
-      leftMenuWidthArr = _useState[0],
-      setLeftMenuWidthArr = _useState[1];
-
+    leftMenuWidthArr = _useState[0],
+    setLeftMenuWidthArr = _useState[1];
   var rightMenuWidthRef = useRef(0);
-
   var _useState2 = useState([]),
-      rightMenuWidthArr = _useState2[0],
-      setRightMenuWidthArr = _useState2[1];
-
+    rightMenuWidthArr = _useState2[0],
+    setRightMenuWidthArr = _useState2[1];
   var dampRateRef = useLatestRef(dampRate);
   var forbidClick = useRef(false);
   var scrollingRef = useRef(null);
-
   var _useRefState = useRefState(false),
-      moving = _useRefState[0],
-      movingRef = _useRefState[1],
-      setMoving = _useRefState[2];
-
+    moving = _useRefState[0],
+    movingRef = _useRefState[1],
+    setMoving = _useRefState[2];
   var _useRefState2 = useRefState(0),
-      offset = _useRefState2[0],
-      offsetRef = _useRefState2[1],
-      setOffset = _useRefState2[2];
-
+    offset = _useRefState2[0],
+    offsetRef = _useRefState2[1],
+    setOffset = _useRefState2[2];
   var _useContext = useContext(GlobalContext),
-      prefixCls = _useContext.prefixCls;
-
+    prefixCls = _useContext.prefixCls;
   var startRef = useRef(0);
   var startX = useRef(0);
   var startY = useRef(0);
@@ -77,18 +70,15 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
       transitionDuration: moving ? '0ms' : transitionDuration + "ms"
     });
   }, [moving, transitionDuration]);
-
   function resetMoveData() {
     startX.current = 0;
     startY.current = 0;
     slideX.current = 0;
   }
-
   function getMenuCurrentWidth(a, min, max) {
     var buffer = Math.abs(a) / dampRateRef.current;
     return Math.min(Math.max(a, min - buffer), max + buffer);
   }
-
   function touchstart(e) {
     startRef.current = offsetRef.current;
     resetMoveData();
@@ -96,28 +86,23 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
     startX.current = e.touches[0].pageX;
     startY.current = e.touches[0].pageY;
   }
-
   function touchmove(e) {
     var x = e.changedTouches[0].pageX - startX.current;
     var y = e.changedTouches[0].pageY - startY.current;
-
     if (scrollingRef.current === null) {
       scrollingRef.current = Math.abs(x) < Math.abs(y);
     }
-
     if (scrollingRef.current) {
       setMoving(false);
       setOffset(0);
       return;
     }
-
     e.cancelable && e.preventDefault();
     slideX.current = x;
     forbidClick.current = true;
     setMoving(true);
     setOffset(getMenuCurrentWidth(slideX.current + startRef.current, -rightMenuWidthRef.current, leftMenuWidthRef.current));
   }
-
   function touchend() {
     if (movingRef.current && !scrollingRef.current) {
       var currentMenu = offsetRef.current > 0 ? 'left' : 'right';
@@ -128,18 +113,15 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
   }
-
   function changeMenu(dir) {
     var cookedThreshold = isOpen.current ? 1 - threshold : threshold;
     var width = dir === 'left' ? leftMenuWidthRef.current : rightMenuWidthRef.current;
-
     if (width && Math.abs(offsetRef.current) > width * cookedThreshold) {
       open(dir);
     } else {
       close(dir);
     }
   }
-
   function getWidthByRef(widthRef) {
     if (!widthRef.current) {
       return {
@@ -147,13 +129,11 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
         widthArr: []
       };
     }
-
     var totalWidth = 0;
     var widthArr = [];
     var allEle = widthRef.current.getElementsByClassName(prefixCls + "-swipe-action-menu-action-info-container");
     Array.prototype.forEach.call(allEle, function (ele) {
       var _ele$getBoundingClien;
-
       var w = (_ele$getBoundingClien = ele.getBoundingClientRect().width) != null ? _ele$getBoundingClien : 0;
       totalWidth += w;
       widthArr.push(w);
@@ -163,16 +143,13 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
       widthArr: widthArr
     };
   }
-
   useEffect(function () {
     var container = domRef.current;
-
     if (!disabled && container) {
       container.addEventListener('touchstart', touchstart);
       container.addEventListener('touchmove', touchmove);
       container.addEventListener('touchend', touchend);
     }
-
     return function () {
       if (!disabled && container) {
         container.removeEventListener('touchstart', touchstart);
@@ -180,35 +157,32 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
         container.removeEventListener('touchend', touchend);
       }
     };
-  }, [disabled]); // 获取左右菜单的宽度
-  // @en Get the width of the left and right menu
+  }, [disabled]);
 
+  // 获取左右菜单的宽度
+  // @en Get the width of the left and right menu
   useEffect(function () {
     var _getWidthByRef = getWidthByRef(leftRef),
-        leftTotalWidth = _getWidthByRef.totalWidth,
-        leftWidthArr = _getWidthByRef.widthArr;
-
+      leftTotalWidth = _getWidthByRef.totalWidth,
+      leftWidthArr = _getWidthByRef.widthArr;
     leftMenuWidthRef.current = leftTotalWidth;
     setLeftMenuWidthArr(leftWidthArr);
-
     var _getWidthByRef2 = getWidthByRef(rightRef),
-        rightTotalWidth = _getWidthByRef2.totalWidth,
-        rightWidthArr = _getWidthByRef2.widthArr;
-
+      rightTotalWidth = _getWidthByRef2.totalWidth,
+      rightWidthArr = _getWidthByRef2.widthArr;
     rightMenuWidthRef.current = rightTotalWidth;
     setRightMenuWidthArr(rightWidthArr);
-  }, [leftActions, rightActions]); // 点击外部区域事件
-  // @en Event when clicking outside of the element
+  }, [leftActions, rightActions]);
 
+  // 点击外部区域事件
+  // @en Event when clicking outside of the element
   useEffect(function () {
     var handle = function handle(e) {
       var _domRef$current;
-
       if (!((_domRef$current = domRef.current) != null && _domRef$current.contains(e.target)) && isOpen.current) {
         close();
       }
     };
-
     closeOnTouchOutside && document.addEventListener('touchstart', handle);
     return function () {
       closeOnTouchOutside && document.removeEventListener('touchstart', handle);
@@ -221,70 +195,56 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
       open: open
     };
   });
-
   function close(dir) {
     setOffset(0);
-
     if (isOpen.current) {
       isOpen.current = false;
-
       if (!dir && offsetRef.current !== 0) {
         var noDir = offsetRef.current > 0 ? 'left' : 'right';
         handleClose(noDir);
         return;
       }
-
       handleClose(dir);
     }
   }
-
   function open(dir) {
     if (dir === void 0) {
       dir = 'right';
     }
-
     if (!isOpen.current) {
       isOpen.current = true;
       handleOpen(dir);
     }
-
     setOffset(dir === 'left' ? leftMenuWidthRef.current : -rightMenuWidthRef.current);
   }
-
   function handleOpen(dir) {
     setTimeout(function () {
       onOpen == null ? void 0 : onOpen(dir);
     }, transitionDuration);
   }
-
   function handleClose(dir) {
     setTimeout(function () {
       onClose == null ? void 0 : onClose(dir);
     }, transitionDuration);
   }
-
   function actionClick(e) {
     var _leftRef$current, _rightRef$current;
-
     if (isOpen.current && !forbidClick.current && !((_leftRef$current = leftRef.current) != null && _leftRef$current.contains(e.target)) && !((_rightRef$current = rightRef.current) != null && _rightRef$current.contains(e.target))) {
       close();
     }
   }
-
   function getActionRightByIndex(index) {
     var preWidth = leftMenuWidthArr.slice(index + 1).reduce(function (acc, cur) {
       return acc + cur;
     }, 0);
     return (preWidth / leftMenuWidthRef.current || 0) * 100 + "%";
   }
-
   function getActionLeftByIndex(index) {
     var preWidth = rightMenuWidthArr.slice(0, index).reduce(function (acc, cur) {
       return acc + cur;
     }, 0);
     return (preWidth / rightMenuWidthRef.current || 0) * 100 + "%";
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-swipe-action", className, offset === 0 ? 'action-close' : 'action-open'),
     style: getStyleWithVendor(_extends({}, style || {}, transitionStyle, {

package/esm/swipe-action/item.js

@@ -3,20 +3,18 @@ import React from 'react';
 import { cls } from '@arco-design/mobile-utils';
 export default function renderAction(_ref) {
   var action = _ref.action,
-      prefixCls = _ref.prefixCls,
-      index = _ref.index,
-      type = _ref.type,
-      close = _ref.close;
+    prefixCls = _ref.prefixCls,
+    index = _ref.index,
+    type = _ref.type,
+    close = _ref.close;
   var text = action.text,
-      actionStyle = action.style,
-      className = action.className,
-      onClick = action.onClick,
-      icon = action.icon,
-      children = action.children;
-
+    actionStyle = action.style,
+    className = action.className,
+    onClick = action.onClick,
+    icon = action.icon,
+    children = action.children;
   function click() {
     var result = (onClick == null ? void 0 : onClick()) || null;
-
     if (!result || typeof result === 'boolean') {
       !result && close();
     } else if (result && result.then) {
@@ -25,7 +23,6 @@ export default function renderAction(_ref) {
       });
     }
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-" + type + " " + prefixCls + "-info-container", className),
     style: _extends({