@arco-design/mobile-react 2.21.2 → 2.22.0

package/esm/_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/esm/_helpers/index.js

@@ -6,6 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 export * from './hooks';
 export * from './type';
+export * from './react-dom';
 export function getStyleWithVendor(style) {
   var allowReg = /(transform|transition|animation)/i;
   var newStyle = Object.keys(style).reduce(function (acc, key) {

package/esm/_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/esm/_helpers/react-dom.js

@@ -0,0 +1,57 @@
+var _CopyReactDOM$version;
+
+import ReactDOM from 'react-dom';
+
+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;
+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);
+      }
+    };
+  };
+}
+
+export var render = copyRender;

package/esm/_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/esm/_helpers/render.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render as copyRender } from './react-dom';
+export 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.createElement(CustomApp, props));
+    } else {
+      _this.root = copyRender( /*#__PURE__*/React.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;
+};

package/esm/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/esm/ellipsis/components/js-ellipsis.js

@@ -113,7 +113,13 @@ var JsEllipsis = /*#__PURE__*/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/esm/image-picker/index.js

@@ -166,7 +166,6 @@ var ImagePicker = /*#__PURE__*/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/esm/image-picker/style/css/index.d.ts

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

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

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

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

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

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

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

package/esm/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/esm/image-preview/methods.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { appendElementById, removeElement } from '@arco-design/mobile-utils';
+import { ReactDOMRender } from '../_helpers/render';
 export function open(Component) {
   return function (config) {
     var baseProps = _extends({
@@ -21,13 +20,8 @@ export function open(Component) {
 
     var leaving = false;
 
-    function render(props) {
-      ReactDOM.render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-        getContainer: function getContainer() {
-          return div;
-        }
-      })), div);
-    }
+    var _ReactDOMRender = new ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render;
 
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, newConfig || {});

package/esm/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/esm/masking/methods.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { appendElementById, removeElement, nextTick } from '@arco-design/mobile-utils';
+import { ReactDOMRender } from '../_helpers/render';
 export function getOpenMethod(Component, containerId, normalize) {
   if (normalize === void 0) {
     normalize = function normalize(config) {
@@ -27,13 +26,8 @@ export function getOpenMethod(Component, containerId, normalize) {
 
     var leaving = false;
 
-    function render(props) {
-      ReactDOM.render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-        getContainer: function getContainer() {
-          return div;
-        }
-      })), div);
-    }
+    var _ReactDOMRender = new ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render;
 
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, normalize(newConfig));

package/esm/notify/methods.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { nextTick } from '@arco-design/mobile-utils';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { ReactDOMRender } from '../_helpers/render';
 export function notify(Component, type) {
   return function (originConfig) {
     var config = typeof originConfig === 'string' ? {
@@ -22,16 +21,16 @@ export function notify(Component, type) {
       document.body.appendChild(div);
     }
 
-    function render(props) {
-      ReactDOM.render( /*#__PURE__*/React.createElement(Component, props), div);
-    }
+    var _ReactDOMRender = new ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render,
+        unmount = _ReactDOMRender.unmount;
 
     function destroy() {
       var onClose = config.onClose;
       onClose && onClose();
-      var unmountResult = ReactDOM.unmountComponentAtNode(div);
+      unmount();
 
-      if (unmountResult && div.parentNode) {
+      if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }

package/esm/popover/hooks/useEvent.js

@@ -40,6 +40,7 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
     onVisibleChange(false);
     window.clearTimeout(closeTimer.current);
     closeTimer.current = 0;
+    mayRemoveEventListenerOnBody();
   };
 
   var throttleHandleVerticalScroll = useMemo(function () {
@@ -59,7 +60,7 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
     };
   }, [throttleHandleVerticalScroll, getVerticalScrollContainer, autoVerticalDirection, visibleRef]);
   var mayRemoveEventListenerOnBody = useCallback(function () {
-    document.body.removeEventListener('click', handleClickBody);
+    document.body.removeEventListener('click', handleClickBody, true);
     document.body.removeEventListener('touchstart', handleTouchBody);
     var el = getVerticalScrollContainer();
 
@@ -74,7 +75,6 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
     // 仅处理子元素和气泡元素外的点击事件
     // @en Only handle click events outside of children elements and bubble elements
     if (!isContains(wrapperRef.current, e.target) && !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();
@@ -100,13 +100,13 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
     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);
   };
 
@@ -149,7 +149,7 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
       var el = getVerticalScrollContainer();
       el && el.addEventListener('scroll', handleScrollBody);
     } else if (clickOtherToClose) {
-      document.body.addEventListener('click', handleClickBody);
+      document.body.addEventListener('click', handleClickBody, true);
     }
   };
   /**

package/esm/swipe-action/index.js

@@ -51,6 +51,7 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var dampRateRef = useLatestRef(dampRate);
   var forbidClick = useRef(false);
+  var scrollingRef = useRef(null);
 
   var _useRefState = useRefState(false),
       moving = _useRefState[0],
@@ -67,6 +68,7 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var startRef = useRef(0);
   var startX = useRef(0);
+  var startY = useRef(0);
   var slideX = useRef(0);
   var isLayer = openStyleType === 'layer';
   var transitionStyle = useMemo(function () {
@@ -77,6 +79,7 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
 
   function resetMoveData() {
     startX.current = 0;
+    startY.current = 0;
     slideX.current = 0;
   }
 
@@ -88,19 +91,34 @@ var SwipeAction = /*#__PURE__*/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);