@mpxjs/webpack-plugin 2.9.59 → 2.9.62

package/lib/runtime/components/react/dist/mpx-scroll-view.jsx

@@ -31,16 +31,17 @@
  * ✔ bindscrolltolower
  * ✔ bindscroll
  */
-import { ScrollView, RefreshControl } from 'react-native';
-import React, { useRef, useState, useEffect, forwardRef } from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
+import { RefreshControl } from 'react-native';
+import { useRef, useState, useEffect, forwardRef } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
+import { throwReactWarning } from './utils';
 const _ScrollView = forwardRef((props = {}, ref) => {
     const { children, enhanced = false, bounces = true, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'enable-offset': enableOffset, 'show-scrollbar': showScrollbar = true } = props;
-    const [snapScrollTop, setSnapScrollTop] = useState(0);
-    const [snapScrollLeft, setSnapScrollLeft] = useState(0);
     const [refreshing, setRefreshing] = useState(true);
-    const [scrollEnabled, setScrollEnabled] = useState(true);
+    const snapScrollTop = useRef(0);
+    const snapScrollLeft = useRef(0);
     const layoutRef = useRef({});
     const scrollOptions = useRef({
         contentLength: 0,
@@ -56,7 +57,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
     const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
         scrollOffset: scrollOptions,
         node: {
-            scrollEnabled,
+            scrollEnabled: scrollX || scrollY,
             bounces,
             showScrollbar,
             pagingEnabled,
@@ -65,11 +66,20 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             scrollTo: scrollToOffset
         }
     });
+    if (scrollX && scrollY) {
+        throwReactWarning('[Mpx runtime warn]: scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
+    }
     useEffect(() => {
-        if (snapScrollTop !== props['scroll-top'] ||
-            snapScrollLeft !== props['scroll-left']) {
-            setSnapScrollTop(props['scroll-top'] || 0);
-            setSnapScrollLeft(props['scroll-left'] || 0);
+        if (snapScrollTop.current !== props['scroll-top'] ||
+            snapScrollLeft.current !== props['scroll-left']) {
+            snapScrollTop.current = props['scroll-top'] || 0;
+            snapScrollLeft.current = props['scroll-left'] || 0;
+            initialTimeout.current = setTimeout(() => {
+                scrollToOffset(snapScrollLeft.current, snapScrollTop.current);
+            }, 0);
+            return () => {
+                initialTimeout.current && clearTimeout(initialTimeout.current);
+            };
         }
     }, [props['scroll-top'], props['scroll-left']]);
     useEffect(() => {
@@ -77,24 +87,6 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             setRefreshing(!!props['refresher-triggered']);
         }
     }, [props['refresher-triggered']]);
-    useEffect(() => {
-        if (!props['scroll-x'] && !props['scroll-y']) {
-            setScrollEnabled(false);
-        }
-        else {
-            setScrollEnabled(true);
-        }
-    }, [props['scroll-x'], props['scroll-y']]);
-    useEffect(() => {
-        if (snapScrollTop || snapScrollLeft) {
-            initialTimeout.current = setTimeout(() => {
-                scrollToOffset(snapScrollLeft, snapScrollTop);
-            }, 0);
-        }
-        return () => {
-            initialTimeout.current && clearTimeout(initialTimeout.current);
-        };
-    }, [snapScrollTop, snapScrollLeft]);
     function selectLength(size) {
         return !scrollX ? size.height : size.width;
     }
@@ -149,6 +141,19 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             });
         }
     }
+    function updateScrollOptions(e, position) {
+        const visibleLength = selectLength(e.nativeEvent.layoutMeasurement);
+        const contentLength = selectLength(e.nativeEvent.contentSize);
+        const offset = selectOffset(e.nativeEvent.contentOffset);
+        scrollOptions.current = {
+            ...scrollOptions.current,
+            contentLength,
+            offset,
+            scrollLeft: position.scrollLeft,
+            scrollTop: position.scrollTop,
+            visibleLength,
+        };
+    }
     function onScroll(e) {
         const { bindscroll } = props;
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
@@ -165,17 +170,23 @@ const _ScrollView = forwardRef((props = {}, ref) => {
                 },
                 layoutRef
             }, props));
-        const visibleLength = selectLength(e.nativeEvent.layoutMeasurement);
-        const contentLength = selectLength(e.nativeEvent.contentSize);
-        const offset = selectOffset(e.nativeEvent.contentOffset);
-        scrollOptions.current = {
-            ...scrollOptions.current,
-            contentLength,
-            offset,
-            scrollLeft,
-            scrollTop,
-            visibleLength,
-        };
+        updateScrollOptions(e, { scrollLeft, scrollTop });
+    }
+    function onScrollEnd(e) {
+        const { bindscrollend } = props;
+        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+        const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        bindscrollend &&
+            bindscrollend(getCustomEvent('scrollend', e, {
+                detail: {
+                    scrollLeft,
+                    scrollTop,
+                    scrollHeight,
+                    scrollWidth
+                },
+                layoutRef
+            }, props));
+        updateScrollOptions(e, { scrollLeft, scrollTop });
         onStartReached(e);
         onEndReached(e);
     }
@@ -198,8 +209,8 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             binddragstart &&
                 binddragstart(getCustomEvent('dragstart', e, {
                     detail: {
-                        scrollLeft: scrollOptions.current.scrollLeft || 0,
-                        scrollTop: scrollOptions.current.scrollTop || 0,
+                        scrollLeft: scrollOptions.current.scrollLeft,
+                        scrollTop: scrollOptions.current.scrollTop,
                     },
                     layoutRef
                 }, props));
@@ -219,35 +230,40 @@ const _ScrollView = forwardRef((props = {}, ref) => {
                 }, props));
         }
     }
-    function onScrollTouchEnd(e) {
-        const { binddragend, bindtouchend, enhanced } = props;
-        bindtouchend && bindtouchend(e);
+    function onScrollEndDrag(e) {
+        const { binddragend, enhanced } = props;
         if (enhanced) {
+            const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+            const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
             binddragend &&
                 binddragend(getCustomEvent('dragend', e, {
                     detail: {
-                        scrollLeft: scrollOptions.current.scrollLeft || 0,
-                        scrollTop: scrollOptions.current.scrollTop || 0,
+                        scrollLeft: scrollLeft,
+                        scrollTop: scrollTop,
+                        scrollHeight,
+                        scrollWidth
                     },
                     layoutRef
                 }, props));
+            updateScrollOptions(e, { scrollLeft, scrollTop });
         }
     }
     let scrollAdditionalProps = {
         pinchGestureEnabled: false,
-        horizontal: scrollX || !scrollY,
+        horizontal: scrollX && !scrollY,
         scrollEventThrottle: scrollEventThrottle,
         scrollsToTop: enableBackToTop,
         showsHorizontalScrollIndicator: scrollX && showScrollbar,
         showsVerticalScrollIndicator: scrollY && showScrollbar,
-        scrollEnabled: scrollEnabled,
+        scrollEnabled: scrollX || scrollY,
         ref: scrollViewRef,
         onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
         bindtouchstart: onScrollTouchStart,
-        bindtouchend: onScrollTouchEnd,
         bindtouchmove: onScrollTouchMove,
-        onLayout
+        onLayout,
+        onScrollEndDrag,
+        onMomentumScrollEnd: onScrollEnd
     };
     if (enhanced) {
         scrollAdditionalProps = {