@arco-design/mobile-react 2.21.2 → 2.22.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.22.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.3...@arco-design/mobile-react@2.22.0) (2022-10-28)
+
+
+### Bug Fixes
+
+*  `SwipeAction` prevent touchmove by gesture ([#59](https://github.com/arco-design/arco-design-mobile/issues/59)) ([c9ef474](https://github.com/arco-design/arco-design-mobile/commit/c9ef474312eb9f9af736431f16147cfb56dee623))
+* `Tabs` supports tabBarStopPropagation ([#62](https://github.com/arco-design/arco-design-mobile/issues/62)) ([ba24d17](https://github.com/arco-design/arco-design-mobile/commit/ba24d178320e12b0aa95e5d75feb34e5e5163af4))
+
+
+### Features
+
+* add support for react18 ([#57](https://github.com/arco-design/arco-design-mobile/issues/57)) ([7cbb4fc](https://github.com/arco-design/arco-design-mobile/commit/7cbb4fcd5bd8c2809141bf0546f42ecf3367fd73))
+
+
+
+
+
+## [2.21.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.2...@arco-design/mobile-react@2.21.3) (2022-09-30)
+
+
+### Bug Fixes
+
+* `Ellipsis` special case for truncateHTML ([fa9db03](https://github.com/arco-design/arco-design-mobile/commit/fa9db03baecbb378e38d2217eddb85dec59d27d4))
+* `ImagePicker` import grid style ([e257ce0](https://github.com/arco-design/arco-design-mobile/commit/e257ce00dc3ecd4c61934149751fb817d3242159))
+* `Tabs` tab bar underline optimize ([20c9621](https://github.com/arco-design/arco-design-mobile/commit/20c962113e8a0dc43995813dda328239a1807a50))
+
+
+
+
+
 ## [2.21.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.1...@arco-design/mobile-react@2.21.2) (2022-09-07)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/_helpers/index.d.ts

@@ -5,6 +5,7 @@
 import { CSSProperties } from 'react';
 export * from './hooks';
 export * from './type';
+export * from './react-dom';
 export declare function getStyleWithVendor(style: CSSProperties): CSSProperties;
 /**
  * 计算默认值，仅未定义时使用默认值

package/cjs/_helpers/index.js

@@ -30,6 +30,15 @@ Object.keys(_type).forEach(function (key) {
   exports[key] = _type[key];
 });
 
+var _reactDom = require("./react-dom");
+
+Object.keys(_reactDom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _reactDom[key]) return;
+  exports[key] = _reactDom[key];
+});
+
 /**
  * @type utils
  * @name componentUtils

package/cjs/_helpers/react-dom.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+export interface RootType {
+    render: (container: ReactElement) => void;
+    _unmount: () => void;
+}
+export interface RootTypeReact extends RootType {
+    unmount?: () => void;
+}
+export declare type CreateRootFnType = (container: Element | DocumentFragment) => RootTypeReact;
+export declare const render: (app: ReactElement, container: Element | DocumentFragment) => {
+    render: (container: ReactElement) => void;
+    _unmount: () => void;
+};

package/cjs/_helpers/react-dom.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.render = void 0;
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _CopyReactDOM$version;
+
+function isObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+var __SECRET_INTERNALS__ = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
+var CopyReactDOM = _reactDom.default;
+var copyRender;
+var isReact18 = Number((_CopyReactDOM$version = CopyReactDOM.version) == null ? void 0 : _CopyReactDOM$version.split('.')[0]) > 17;
+
+var updateUsingClientEntryPoint = function updateUsingClientEntryPoint(skipWarning) {
+  // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
+  // Avoid console warning
+  if (isObject(CopyReactDOM[__SECRET_INTERNALS__])) {
+    CopyReactDOM[__SECRET_INTERNALS__].usingClientEntryPoint = skipWarning;
+  }
+};
+
+var createRoot;
+
+try {
+  createRoot = CopyReactDOM.createRoot;
+} catch (_) {}
+
+if (isReact18 && createRoot) {
+  copyRender = function copyRender(app, container) {
+    updateUsingClientEntryPoint(true);
+    var root = createRoot(container);
+    updateUsingClientEntryPoint(false);
+    root.render(app);
+
+    root._unmount = function () {
+      setTimeout(function () {
+        root == null ? void 0 : root.unmount == null ? void 0 : root.unmount();
+      });
+    };
+
+    return root;
+  };
+} else {
+  copyRender = function copyRender(app, container) {
+    CopyReactDOM.render(app, container);
+    return {
+      render: function render(comment) {
+        CopyReactDOM.render(comment, container);
+      },
+      _unmount: function _unmount() {
+        CopyReactDOM.unmountComponentAtNode(container);
+      }
+    };
+  };
+}
+
+var render = copyRender;
+exports.render = render;

package/cjs/_helpers/render.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { RootType } from './react-dom';
+export declare class ReactDOMRender {
+    root: RootType | undefined;
+    app: FunctionComponent;
+    container: Element | DocumentFragment;
+    constructor(app: FunctionComponent, container: Element | DocumentFragment);
+    render: (props: any) => void;
+    unmount: () => void;
+}

package/cjs/_helpers/render.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.ReactDOMRender = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = require("./react-dom");
+
+var ReactDOMRender = function ReactDOMRender(app, container) {
+  var _this = this;
+
+  this.root = void 0;
+  this.app = void 0;
+  this.container = void 0;
+
+  this.render = function (props) {
+    var CustomApp = _this.app;
+
+    if (_this.root) {
+      _this.root.render( /*#__PURE__*/_react.default.createElement(CustomApp, props));
+    } else {
+      _this.root = (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(CustomApp, props), _this.container);
+    }
+  };
+
+  this.unmount = function () {
+    var _this$root;
+
+    (_this$root = _this.root) == null ? void 0 : _this$root._unmount();
+    _this.root = undefined;
+  };
+
+  this.app = app;
+  this.container = container;
+};
+
+exports.ReactDOMRender = ReactDOMRender;

package/cjs/action-sheet/index.d.ts

@@ -26,7 +26,7 @@ export interface ActionSheetItemOptions {
      * 点击选项事件，返回值为 true 时可以阻止动作面板关闭
      * @en Click option event, actionSheet will be prevent from closing when returning true
      */
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
 }
 export interface ActionSheetProps extends Omit<PopupProps, 'children' | 'getScrollContainer' | 'orientationDirection' | 'direction'> {
     /**

package/cjs/ellipsis/components/js-ellipsis.js

@@ -127,7 +127,13 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
             _height = _container$getBoundin3.height;
 
         if (_height > max) {
-          break;
+          if (nodes[i].childNodes && nodes[i].childNodes.length) {
+            break;
+          } else {
+            textContainer.removeChild(nodes[i]);
+            handleOnReflow(true, textContainer.innerHTML);
+            return;
+          }
         }
 
         i++;

package/cjs/image-picker/index.js

@@ -194,7 +194,6 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var timeOutEvent;
 
   var handleTouchStart = function handleTouchStart(e, image, index) {
-    e.preventDefault();
     timeOutEvent = setTimeout(function () {
       timeOutEvent = 0;
       onLongPress == null ? void 0 : onLongPress(e, image, index);

package/cjs/image-picker/style/css/index.d.ts

@@ -1,2 +1,3 @@
 import '../../../../style/css/public.css';
+import '../../../grid/style/css';
 import './index.css';

package/cjs/image-picker/style/css/index.js

@@ -2,4 +2,6 @@
 
 require("../../../../style/css/public.css");
 
+require("../../../grid/style/css");
+
 require("./index.css");

package/cjs/image-picker/style/index.d.ts

@@ -1,2 +1,3 @@
 import '../../../style/public.less';
+import '../../grid/style';
 import './index.less';

package/cjs/image-picker/style/index.js

@@ -2,4 +2,6 @@
 
 require("../../../style/public.less");
 
+require("../../grid/style");
+
 require("./index.less");

package/cjs/image-preview/index.d.ts

@@ -254,11 +254,7 @@ export declare function methodsGenerator<P extends ImagePreviewProps>(Comp: Reac
      */
     open: (config: Pick<P, Exclude<keyof P, "close">>) => {
         close: () => void;
-        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void; /**
-         * 是否可循环滑动
-         * @en Whether it can be swiped circularly
-         * @default false
-         */
+        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void;
     };
 };
 declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>> & {
@@ -270,11 +266,7 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      */
     open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
         close: () => void;
-        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
-         * 是否可循环滑动
-         * @en Whether it can be swiped circularly
-         * @default false
-         */
+        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
     };
 };
 /**

package/cjs/image-preview/methods.js

@@ -7,12 +7,10 @@ exports.open = open;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _render = require("../_helpers/render");
+
 function open(Component) {
   return function (config) {
     var baseProps = (0, _extends2.default)({
@@ -30,13 +28,8 @@ function open(Component) {
 
     var leaving = false;
 
-    function render(props) {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-        getContainer: function getContainer() {
-          return div;
-        }
-      })), div);
-    }
+    var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render;
 
     function update(newConfig) {
       dynamicProps = (0, _extends2.default)({}, dynamicProps, newConfig || {});

package/cjs/masking/index.d.ts

@@ -192,6 +192,11 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
     open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;
     }) => {
+        /**
+         * 点击蒙层是否关闭菜单
+         * @en Whether to click the mask to close the menu
+         * @default true
+         */
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
             key?: string | undefined;
@@ -208,6 +213,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
     open: (config: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
         key?: string | undefined;
     }) => {
+        /**
+         * 点击蒙层是否关闭菜单
+         * @en Whether to click the mask to close the menu
+         * @default true
+         */
         close: () => void;
         update: (newConfig: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
             key?: string | undefined;

package/cjs/masking/methods.js

@@ -8,12 +8,10 @@ exports.open = open;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _render = require("../_helpers/render");
+
 function getOpenMethod(Component, containerId, normalize) {
   if (normalize === void 0) {
     normalize = function normalize(config) {
@@ -37,13 +35,8 @@ function getOpenMethod(Component, containerId, normalize) {
 
     var leaving = false;
 
-    function render(props) {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-        getContainer: function getContainer() {
-          return div;
-        }
-      })), div);
-    }
+    var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render;
 
     function update(newConfig) {
       dynamicProps = (0, _extends2.default)({}, dynamicProps, normalize(newConfig));

package/cjs/notify/methods.js

@@ -9,9 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _mobileUtils = require("@arco-design/mobile-utils");
 
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _render = require("../_helpers/render");
 
 function notify(Component, type) {
   return function (originConfig) {
@@ -33,17 +31,16 @@ function notify(Component, type) {
       document.body.appendChild(div);
     }
 
-    function render(props) {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, props), div);
-    }
+    var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render,
+        unmount = _ReactDOMRender.unmount;
 
     function destroy() {
       var onClose = config.onClose;
       onClose && onClose();
+      unmount();
 
-      var unmountResult = _reactDom.default.unmountComponentAtNode(div);
-
-      if (unmountResult && div.parentNode) {
+      if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }

package/cjs/popover/hooks/useEvent.js

@@ -52,6 +52,7 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
     onVisibleChange(false);
     window.clearTimeout(closeTimer.current);
     closeTimer.current = 0;
+    mayRemoveEventListenerOnBody();
   };
 
   var throttleHandleVerticalScroll = (0, _react.useMemo)(function () {
@@ -71,7 +72,7 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
     };
   }, [throttleHandleVerticalScroll, getVerticalScrollContainer, autoVerticalDirection, visibleRef]);
   var mayRemoveEventListenerOnBody = (0, _react.useCallback)(function () {
-    document.body.removeEventListener('click', handleClickBody);
+    document.body.removeEventListener('click', handleClickBody, true);
     document.body.removeEventListener('touchstart', handleTouchBody);
     var el = getVerticalScrollContainer();
 
@@ -86,7 +87,6 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
     // 仅处理子元素和气泡元素外的点击事件
     // @en Only handle click events outside of children elements and bubble elements
     if (!(0, _mobileUtils.isContains)(wrapperRef.current, e.target) && !(0, _mobileUtils.isContains)(((_popoverInnerRef$curr = popoverInnerRef.current) == null ? void 0 : _popoverInnerRef$curr.dom) || null, e.target)) {
-      // TODO: 这里仅阻止了react事件，react 18 将不再在document上挂事件，这里的stop会失效
       if (preventBodyClick) {
         e.stopPropagation();
         e.preventDefault();
@@ -112,13 +112,13 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
     var handle = function handle(e) {
       e.stopPropagation();
       e.preventDefault();
-      document.body.removeEventListener('click', handle);
+      document.body.removeEventListener('click', handle, true);
       clearTimeout(preventRecentClickTimer);
     };
 
-    document.body.addEventListener('click', handle);
+    document.body.addEventListener('click', handle, true);
     preventRecentClickTimer = window.setTimeout(function () {
-      document.body.removeEventListener('click', handle);
+      document.body.removeEventListener('click', handle, true);
     }, 500);
   };
 
@@ -161,7 +161,7 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
       var el = getVerticalScrollContainer();
       el && el.addEventListener('scroll', handleScrollBody);
     } else if (clickOtherToClose) {
-      document.body.addEventListener('click', handleClickBody);
+      document.body.addEventListener('click', handleClickBody, true);
     }
   };
   /**

package/cjs/swipe-action/index.js

@@ -67,6 +67,7 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var dampRateRef = (0, _helpers.useLatestRef)(dampRate);
   var forbidClick = (0, _react.useRef)(false);
+  var scrollingRef = (0, _react.useRef)(null);
 
   var _useRefState = (0, _helpers.useRefState)(false),
       moving = _useRefState[0],
@@ -83,6 +84,7 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var startRef = (0, _react.useRef)(0);
   var startX = (0, _react.useRef)(0);
+  var startY = (0, _react.useRef)(0);
   var slideX = (0, _react.useRef)(0);
   var isLayer = openStyleType === 'layer';
   var transitionStyle = (0, _react.useMemo)(function () {
@@ -93,6 +95,7 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   function resetMoveData() {
     startX.current = 0;
+    startY.current = 0;
     slideX.current = 0;
   }
 
@@ -104,19 +107,34 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   function touchstart(e) {
     startRef.current = offsetRef.current;
     resetMoveData();
+    scrollingRef.current = null;
     startX.current = e.touches[0].pageX;
+    startY.current = e.touches[0].pageY;
   }
 
   function touchmove(e) {
-    e.preventDefault();
-    slideX.current = e.touches[0].pageX - startX.current;
+    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) {
+    if (movingRef.current && !scrollingRef.current) {
       var currentMenu = offsetRef.current > 0 ? 'left' : 'right';
       changeMenu(currentMenu);
       setMoving(false);