@arco-design/mobile-react 2.29.2 → 2.29.3

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.29.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.2...@arco-design/mobile-react@2.29.3) (2023-09-12)
+
+
+### Bug Fixes
+
+* `ImagePreview` remove duplicate setTimeout for double-click judgment ([0a5565b](https://github.com/arco-design/arco-design-mobile/commit/0a5565bf06c5d5737d730a59227dd239feaf50d1))
+* `PickerView` adjust animation duration ([#164](https://github.com/arco-design/arco-design-mobile/issues/164)) ([6c7f020](https://github.com/arco-design/arco-design-mobile/commit/6c7f020baeb8b2a7ba00d08bf9feaf8f8ebcca3f))
+* `Popover` fix the problem that popover.menu does not show when defaultVisible=true ([b9c7397](https://github.com/arco-design/arco-design-mobile/commit/b9c73975f4333482152b207bb6bee8dfd7f0b7e3))
+
+
+
+
+
 ## [2.29.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.1...@arco-design/mobile-react@2.29.2) (2023-08-28)
 
 

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.29.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.29.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.2/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.29.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.29.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.2/dist/index.min.js"></script>
 ```
 
 ## 引入全部

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

@@ -139,6 +139,11 @@ export interface ImagePreviewProps extends Pick<CarouselProps, 'animateDurationS
      * @default "start"
      */
     indicatorPos?: CarouselProps['indicatorPos'];
+    /**
+     * 渲染自定义元素，如自定义关闭按钮
+     * @en Render custom elements such as custom close buttons
+     */
+    extra?: ReactNode;
     /**
      * 图片捏合时最小缩放倍数，松手后仍会恢复到1的状态，默认为0.7
      * @en The minimum zoom factor when the image is pinched, it will still return to the state of 1 after letting go, the default is 0.7
@@ -269,9 +274,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      * @param {ImagePreviewProps} config configuration
      * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "loadingArea" | "onClose" | "fit" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "loadingArea" | "onClose" | "fit" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "loadingArea" | "onClose" | "fit" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "loadingArea" | "onClose" | "fit" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
     };
 };
 /**

package/cjs/image-preview/index.js

@@ -42,7 +42,7 @@ Object.keys(_methods).forEach(function (key) {
 
 var _loading = _interopRequireDefault(require("../loading"));
 
-var _excluded = ["style", "className", "images", "loop", "openIndex", "fit", "noselect", "displayDuration", "spaceBetween", "showLoading", "loadingArea", "errorArea", "showError", "retryTime", "staticLabel", "replaceFallbackWhenLoaded", "scrollBezier", "lazyloadCount", "swipeToClose", "getMinScale", "getMaxScale", "getDoubleClickScale", "getContainer", "getThumbBounds", "renderIndicator", "onChange", "onAfterChange", "onImageClick", "onImageDoubleClick", "onImageLongTap", "close", "onClose", "onTouchStart", "onTouchMove", "onTouchEnd", "indicatorPos"];
+var _excluded = ["style", "className", "images", "loop", "openIndex", "fit", "noselect", "displayDuration", "spaceBetween", "showLoading", "loadingArea", "errorArea", "showError", "retryTime", "staticLabel", "replaceFallbackWhenLoaded", "scrollBezier", "lazyloadCount", "swipeToClose", "extra", "getMinScale", "getMaxScale", "getDoubleClickScale", "getContainer", "getThumbBounds", "renderIndicator", "onChange", "onAfterChange", "onImageClick", "onImageDoubleClick", "onImageLongTap", "close", "onClose", "onTouchStart", "onTouchMove", "onTouchEnd", "indicatorPos"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -80,6 +80,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       lazyloadCount = _props$lazyloadCount === void 0 ? 1 : _props$lazyloadCount,
       _props$swipeToClose = props.swipeToClose,
       swipeToClose = _props$swipeToClose === void 0 ? true : _props$swipeToClose,
+      extra = props.extra,
       getMinScale = props.getMinScale,
       getMaxScale = props.getMaxScale,
       getDoubleClickScale = props.getDoubleClickScale,
@@ -104,7 +105,6 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var imagesRef = (0, _react.useRef)([]);
   var carouselRef = (0, _react.useRef)(null);
   var transformersRef = (0, _react.useRef)([]);
-  var dblTimerRef = (0, _react.useRef)(null);
   var longTimerRef = (0, _react.useRef)(null);
   var transImageRef = (0, _react.useRef)(null);
   var imageDomsRef = (0, _react.useRef)([]);
@@ -588,17 +588,15 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   function handleImageClick(e) {
     if (movedRef.current) {
       return;
-    } // 300ms内再次点击则触发doubleClick，否则触发click
-    // @en Click again within 300ms to trigger doubleClick, otherwise trigger click
+    } // 如果正在触发doubleClick就不触发click
+    // @en If doubleClick is being triggered, click will not be triggered
 
 
-    dblTimerRef.current = window.setTimeout(function () {
-      if (!dblClickingRef.current) {
-        if (!onImageClick || !onImageClick(innerIndexRef.current, e)) {
-          goClose(e);
-        }
+    if (!dblClickingRef.current) {
+      if (!onImageClick || !onImageClick(innerIndexRef.current, e)) {
+        goClose(e);
       }
-    }, 300);
+    }
   }
 
   function handleImageDoubleClick(e) {
@@ -608,12 +606,6 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
 
     dblClickingRef.current = true;
-
-    if (dblTimerRef.current) {
-      clearTimeout(dblTimerRef.current);
-      dblTimerRef.current = null;
-    }
-
     var index = innerIndexRef.current;
     onImageDoubleClick && onImageDoubleClick(index, e); // 双击时根据配置放大或缩小
     // @en Zoom in or out according to configuration when double-clicking
@@ -1007,7 +999,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         onLoad: transImageInfo.onLoad,
         onError: transImageInfo.onError
       };
-    })) : null)), transImageInfo ? /*#__PURE__*/_react.default.createElement("div", {
+    })) : null, extra)), transImageInfo ? /*#__PURE__*/_react.default.createElement("div", {
       className: "image-preview-lock-modal",
       onClick: goClose
     }) : null);

package/cjs/picker-view/components/picker-cell.js

@@ -208,9 +208,9 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   function momentum(current, start, duration, minY, maxY) {
     var durationMap = {
-      noBounce: 2000,
-      weekBounce: 500,
-      strongBounce: 300
+      noBounce: 400,
+      weekBounce: 100,
+      strongBounce: 75
     };
     var bezierMap = {
       noBounce: 'cubic-bezier(.17, .89, .45, 1)',
@@ -269,7 +269,7 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var absDistY = Math.abs(transformY - lastTransformY); // 计算动量，保证滚动顺畅，条件：手势时间小于300ms && 移动距离绝对值大于30时
     // @en Calculate the momentum to ensure smooth scrolling, condition: the gesture time is less than 300ms && the absolute value of the moving distance is greater than 30
 
-    if (duration < 300 && absDistY > 30) {
+    if (duration < 300 && absDistY > 90) {
       var momentumY = momentum(transformY, lastTransformY, duration, wrapperHeight - scrollerHeight, 0);
       var newItemIndex = Math.max(0, Math.min(data.length - 1, Math.round(-1 * momentumY.destination / itemHeight)));
       setBezier(momentumY.bezier);

package/cjs/picker-view/index.js

@@ -84,7 +84,14 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var barRef = (0, _react.useRef)(null);
   var scrollValueRef = (0, _helpers.useLatestRef)(scrollValue);
   var pickerCellsRef = (0, _react.useRef)([]);
-  var cascaderRef = (0, _react.useRef)(null);
+  var cascaderRef = (0, _react.useRef)(null); // itemStyle height 同时对 selection-bar 生效，这里不单独抛出 selection-bar 的高度设置属性
+  // @en The height of itemStyle applies to the selection-bar as well, without separately exposing the height setting property for the selection-bar.
+
+  var selectionBarHeight = (0, _react.useMemo)(function () {
+    return itemStyle != null && itemStyle.height ? {
+      height: itemStyle.height
+    } : {};
+  }, [itemStyle]);
   var innerData = (0, _react.useMemo)(function () {
     var newData;
 
@@ -254,7 +261,8 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       className: prefixCls + "-picker-selection-mask " + prefixCls + "-picker-selection-mask-top"
     }), /*#__PURE__*/_react.default.createElement("div", {
       ref: barRef,
-      className: prefixCls + "-picker-selection-bar"
+      className: prefixCls + "-picker-selection-bar",
+      style: selectionBarHeight
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-picker-selection-mask " + prefixCls + "-picker-selection-mask-bottom"
     })));

package/cjs/popover/menu.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _contextProvider = require("../context-provider");
 
+var _helpers = require("../_helpers");
+
 var _excluded = ["menu", "menuLayout", "onSelect", "onClickMenuItem", "className", "useClickStatus", "clickStatusDuration", "clickSelfToClose", "touchSelfToClose", "defaultVisible", "visible", "onChange"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -68,7 +70,7 @@ function componentGenerator(Comp) {
         visibleState = _useState2[0],
         setVisibleState = _useState2[1];
 
-    (0, _react.useEffect)(function () {
+    (0, _helpers.useUpdateEffect)(function () {
       setVisibleState(Boolean(visible));
     }, [visible]);
     var popoverRef = (0, _react.useRef)(null);

package/dist/index.js

@@ -11125,9 +11125,9 @@
 
       function momentum(current, start, duration, minY, maxY) {
         var durationMap = {
-          noBounce: 2000,
-          weekBounce: 500,
-          strongBounce: 300
+          noBounce: 400,
+          weekBounce: 100,
+          strongBounce: 75
         };
         var bezierMap = {
           noBounce: 'cubic-bezier(.17, .89, .45, 1)',
@@ -11186,7 +11186,7 @@
         var absDistY = Math.abs(transformY - lastTransformY); // 计算动量，保证滚动顺畅，条件：手势时间小于300ms && 移动距离绝对值大于30时
         // @en Calculate the momentum to ensure smooth scrolling, condition: the gesture time is less than 300ms && the absolute value of the moving distance is greater than 30
 
-        if (duration < 300 && absDistY > 30) {
+        if (duration < 300 && absDistY > 90) {
           var momentumY = momentum(transformY, lastTransformY, duration, wrapperHeight - scrollerHeight, 0);
           var newItemIndex_1 = Math.max(0, Math.min(data.length - 1, Math.round(-1 * momentumY.destination / itemHeight)));
           setBezier(momentumY.bezier);
@@ -11454,7 +11454,14 @@
       var barRef = React.useRef(null);
       var scrollValueRef = useLatestRef(scrollValue);
       var pickerCellsRef = React.useRef([]);
-      var cascaderRef = React.useRef(null);
+      var cascaderRef = React.useRef(null); // itemStyle height 同时对 selection-bar 生效，这里不单独抛出 selection-bar 的高度设置属性
+      // @en The height of itemStyle applies to the selection-bar as well, without separately exposing the height setting property for the selection-bar.
+
+      var selectionBarHeight = React.useMemo(function () {
+        return (itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.height) ? {
+          height: itemStyle.height
+        } : {};
+      }, [itemStyle]);
       var innerData = React.useMemo(function () {
         var newData;
 
@@ -11625,7 +11632,8 @@
           className: prefixCls + "-picker-selection-mask " + prefixCls + "-picker-selection-mask-top"
         }), /*#__PURE__*/React__default["default"].createElement("div", {
           ref: barRef,
-          className: prefixCls + "-picker-selection-bar"
+          className: prefixCls + "-picker-selection-bar",
+          style: selectionBarHeight
         }), /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-picker-selection-mask " + prefixCls + "-picker-selection-mask-bottom"
         })));
@@ -17325,7 +17333,7 @@
     var index$h = componentWrapper(ImagePicker, 'ImagePicker');
 
     /*!
-    * @arco-design/transformable v1.0.1
+    * @arco-design/transformable v1.0.2
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -19565,6 +19573,7 @@
           lazyloadCount = _j === void 0 ? 1 : _j,
           _k = props.swipeToClose,
           swipeToClose = _k === void 0 ? true : _k,
+          extra = props.extra,
           getMinScale = props.getMinScale,
           getMaxScale = props.getMaxScale,
           getDoubleClickScale = props.getDoubleClickScale,
@@ -19583,14 +19592,13 @@
           onTouchEnd = props.onTouchEnd,
           _l = props.indicatorPos,
           indicatorPos = _l === void 0 ? 'start' : _l,
-          otherProps = __rest$1(props, ["style", "className", "images", "loop", "openIndex", "fit", "noselect", "displayDuration", "spaceBetween", "showLoading", "loadingArea", "errorArea", "showError", "retryTime", "staticLabel", "replaceFallbackWhenLoaded", "scrollBezier", "lazyloadCount", "swipeToClose", "getMinScale", "getMaxScale", "getDoubleClickScale", "getContainer", "getThumbBounds", "renderIndicator", "onChange", "onAfterChange", "onImageClick", "onImageDoubleClick", "onImageLongTap", "close", "onClose", "onTouchStart", "onTouchMove", "onTouchEnd", "indicatorPos"]);
+          otherProps = __rest$1(props, ["style", "className", "images", "loop", "openIndex", "fit", "noselect", "displayDuration", "spaceBetween", "showLoading", "loadingArea", "errorArea", "showError", "retryTime", "staticLabel", "replaceFallbackWhenLoaded", "scrollBezier", "lazyloadCount", "swipeToClose", "extra", "getMinScale", "getMaxScale", "getDoubleClickScale", "getContainer", "getThumbBounds", "renderIndicator", "onChange", "onAfterChange", "onImageClick", "onImageDoubleClick", "onImageLongTap", "close", "onClose", "onTouchStart", "onTouchMove", "onTouchEnd", "indicatorPos"]);
 
       var system = useSystem();
       var domRef = React.useRef(null);
       var imagesRef = React.useRef([]);
       var carouselRef = React.useRef(null);
       var transformersRef = React.useRef([]);
-      var dblTimerRef = React.useRef(null);
       var longTimerRef = React.useRef(null);
       var transImageRef = React.useRef(null);
       var imageDomsRef = React.useRef([]);
@@ -20075,17 +20083,15 @@
       function handleImageClick(e) {
         if (movedRef.current) {
           return;
-        } // 300ms内再次点击则触发doubleClick，否则触发click
-        // @en Click again within 300ms to trigger doubleClick, otherwise trigger click
+        } // 如果正在触发doubleClick就不触发click
+        // @en If doubleClick is being triggered, click will not be triggered
 
 
-        dblTimerRef.current = window.setTimeout(function () {
-          if (!dblClickingRef.current) {
-            if (!onImageClick || !onImageClick(innerIndexRef.current, e)) {
-              goClose(e);
-            }
+        if (!dblClickingRef.current) {
+          if (!onImageClick || !onImageClick(innerIndexRef.current, e)) {
+            goClose(e);
           }
-        }, 300);
+        }
       }
 
       function handleImageDoubleClick(e) {
@@ -20095,12 +20101,6 @@
         }
 
         dblClickingRef.current = true;
-
-        if (dblTimerRef.current) {
-          clearTimeout(dblTimerRef.current);
-          dblTimerRef.current = null;
-        }
-
         var index = innerIndexRef.current;
         onImageDoubleClick && onImageDoubleClick(index, e); // 双击时根据配置放大或缩小
         // @en Zoom in or out according to configuration when double-clicking
@@ -20493,7 +20493,7 @@
             onLoad: transImageInfo.onLoad,
             onError: transImageInfo.onError
           };
-        })) : null)), transImageInfo ? /*#__PURE__*/React__default["default"].createElement("div", {
+        })) : null, extra)), transImageInfo ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-preview-lock-modal",
           onClick: goClose
         }) : null);
@@ -22383,7 +22383,7 @@
             visibleState = _j[0],
             setVisibleState = _j[1];
 
-        React.useEffect(function () {
+        useUpdateEffect(function () {
           setVisibleState(Boolean(visible));
         }, [visible]);
         var popoverRef = React.useRef(null);