@mpxjs/webpack-plugin 2.10.4-beta.12 → 2.10.4-beta.14

package/lib/runtime/components/react/dist/mpx-swiper.jsx

@@ -4,7 +4,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS
 import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
 import { SwiperContext } from './context';
 /**
  * 默认的Style类型
@@ -70,11 +70,13 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, style = {}, autoplay = false, circular = false } = props;
+    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
     const nodeRef = useRef(null);
+    // 手势协同gesture 1.0
+    const swiperGestureRef = useRef();
     useNodesRef(props, ref, nodeRef, {});
     // 计算transfrom之类的
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
@@ -119,8 +121,29 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTranstion = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 的时间
     const moveTime = useSharedValue(0);
+    // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
+    const anotherDirectionMove = useSharedValue(0);
+    // 另一个方向的
+    const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase();
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
+    // 判断gesture手势是否需要协同处理、等待手势失败响应
+    const gestureSwitch = useRef(false);
+    // 初始化上一次的手势
+    const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
+    const prevWaitForHandlersRef = useRef(waitFor || []);
+    const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
+        (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index]);
+    const hasWaitForHandlersChanged = prevWaitForHandlersRef.current.length !== (waitFor?.length || 0) ||
+        (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index]);
+    if (hasSimultaneousHandlersChanged || hasWaitForHandlersChanged) {
+        gestureSwitch.current = !gestureSwitch.current;
+    }
+    // 存储上一次的手势
+    prevSimultaneousHandlersRef.current = originSimultaneousHandlers || [];
+    prevWaitForHandlersRef.current = waitFor || [];
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout });
@@ -384,6 +407,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     }, [children.length]);
     useEffect(() => {
+        // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
         updateCurrent(props.current || 0, step.value);
     }, [props.current]);
     useEffect(() => {
@@ -447,20 +471,26 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 targetOffset: -moveToTargetPos
             };
         }
-        function canMove(eventData) {
+        function checkUnCircular(eventData) {
             'worklet';
             const { translation } = eventData;
             const currentOffset = Math.abs(offset.value);
-            if (!circularShared.value) {
-                if (translation < 0) {
-                    return currentOffset < step.value * (childrenLength.value - 1);
-                }
-                else {
-                    return currentOffset > 0;
-                }
+            // 向右滑动swiper
+            if (translation < 0) {
+                const boundaryOffset = step.value * (childrenLength.value - 1);
+                const gestureMovePos = Math.abs(translation) + currentOffset;
+                return {
+                    // 防止快速连续向右滑动时，手势移动的距离 加 当前的offset超出边界
+                    targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
+                    canMove: currentOffset < boundaryOffset
+                };
             }
             else {
-                return true;
+                const gestureMovePos = currentOffset - translation;
+                return {
+                    targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
+                    canMove: currentOffset > 0
+                };
             }
         }
         function handleEnd(eventData) {
@@ -511,7 +541,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
             });
         }
-        function handleLongPress() {
+        function computeHalf() {
             'worklet';
             const currentOffset = Math.abs(offset.value);
             let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
@@ -521,6 +551,14 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
             const diffOffset = preOffset - currentOffset;
             const half = Math.abs(diffOffset) > step.value / 2;
+            return {
+                diffOffset,
+                half
+            };
+        }
+        function handleLongPress() {
+            'worklet';
+            const { diffOffset, half } = computeHalf();
             if (+diffOffset === 0) {
                 runOnJS(resumeLoop)();
             }
@@ -580,21 +618,32 @@ const SwiperWrapper = forwardRef((props, ref) => {
             runOnJS(pauseLoop)();
             preAbsolutePos.value = e[strAbso];
             moveTranstion.value = e[strAbso];
+            anotherDirectionMove.value = e[anotherAbso];
             moveTime.value = new Date().getTime();
         })
-            .onTouchesMove((e) => {
+            .onUpdate((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const touchEventData = e.changedTouches[0];
-            const moveDistance = touchEventData[strAbso] - preAbsolutePos.value;
+            const moveDistance = e[strAbso] - preAbsolutePos.value;
             const eventData = {
                 translation: moveDistance
             };
             // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-            if (!circularShared.value && !canMove(eventData)) {
+            const { canMove, targetOffset } = checkUnCircular(eventData);
+            if (!circularShared.value) {
+                if (canMove) {
+                    offset.value = targetOffset;
+                    preAbsolutePos.value = e[strAbso];
+                }
                 return;
             }
+            const { half } = computeHalf();
+            // 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
+            if (half) {
+                const { selectedIndex } = getTargetPosition(eventData);
+                currentIndex.value = selectedIndex;
+            }
             const { isBoundary, resetOffset } = reachBoundary(eventData);
             if (isBoundary && circularShared.value) {
                 offset.value = resetOffset;
@@ -602,20 +651,20 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 offset.value = moveDistance + offset.value;
             }
-            preAbsolutePos.value = touchEventData[strAbso];
+            preAbsolutePos.value = e[strAbso];
         })
-            .onTouchesUp((e) => {
+            .onFinalize((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const touchEventData = e.changedTouches[0];
-            const moveDistance = touchEventData[strAbso] - moveTranstion.value;
+            const moveDistance = e[strAbso] - moveTranstion.value;
             touchfinish.value = true;
             const eventData = {
                 translation: moveDistance
             };
             // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
-            if (!circularShared.value && !canMove(eventData)) {
+            const { canMove } = checkUnCircular(eventData);
+            if (!circularShared.value && !canMove) {
                 return;
             }
             const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000;
@@ -625,11 +674,25 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 handleEnd(eventData);
             }
-        });
+        }).withRef(swiperGestureRef);
+        // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
+        if (dir === 'x') {
+            gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
+        }
+        else {
+            gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+        }
+        // 手势协同2.0
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesturePan.requireExternalGestureToFail(...waitForHandlers);
+        }
         return {
             gestureHandler: gesturePan
         };
-    }, []);
+    }, [gestureSwitch.current]);
     const animatedStyles = useAnimatedStyle(() => {
         if (dir === 'x') {
             return { transform: [{ translateX: offset.value }], opacity: step.value > 0 ? 1 : 0 };
@@ -658,7 +721,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
       {showsPagination && renderPagination()}
     </View>);
     }
-    if (children.length === 1) {
+    if (children.length === 1 || disableGesture) {
         return renderSwiper();
     }
     else {

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -1,11 +1,11 @@
 import { View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
-import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import { GestureDetector, Gesture, PanGesture } from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated'
 
 import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture } from './utils'
 import { SwiperContext } from './context'
 /**
  * ✔ indicator-dots
@@ -22,6 +22,7 @@ import { SwiperContext } from './context'
  * ✔ easing-function  ="easeOutCubic"
  * ✘ display-multiple-items
  * ✘ snap-to-edge
+ * ✔ disableGesture
  */
 type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
 type StrAbsoType = 'absoluteX' | 'absoluteY'
@@ -55,6 +56,9 @@ interface SwiperProps {
   'parent-width'?: number
   'parent-height'?: number
   'external-var-context'?: Record<string, any>
+  'wait-for'?: Array<GestureHandler>
+  'simultaneous-handlers'?: Array<GestureHandler>
+  disableGesture?: boolean
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
@@ -134,14 +138,19 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     'external-var-context': externalVarContext,
+    'simultaneous-handlers': originSimultaneousHandlers = [],
+    'wait-for': waitFor = [],
     style = {},
     autoplay = false,
-    circular = false
+    circular = false,
+    disableGesture = false
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
   const horizontal = props.vertical !== undefined ? !props.vertical : true
   const nodeRef = useRef<View>(null)
+  // 手势协同gesture 1.0
+  const swiperGestureRef = useRef<PanGesture>()
   useNodesRef<View, SwiperProps>(props, ref, nodeRef, {})
   // 计算transfrom之类的
   const {
@@ -193,8 +202,31 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTranstion = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 的时间
   const moveTime = useSharedValue(0)
+  // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
+  const anotherDirectionMove = useSharedValue(0)
+  // 另一个方向的
+  const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase() as StrAbsoType
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
+  const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
+  const waitForHandlers = flatGesture(waitFor)
+  // 判断gesture手势是否需要协同处理、等待手势失败响应
+  const gestureSwitch = useRef(false)
+  // 初始化上一次的手势
+  const prevSimultaneousHandlersRef = useRef<Array<GestureHandler>>(originSimultaneousHandlers || [])
+  const prevWaitForHandlersRef = useRef<Array<GestureHandler>>(waitFor || [])
+  const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
+  (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index])
+
+  const hasWaitForHandlersChanged = prevWaitForHandlersRef.current.length !== (waitFor?.length || 0) ||
+    (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index])
+
+  if (hasSimultaneousHandlersChanged || hasWaitForHandlersChanged) {
+    gestureSwitch.current = !gestureSwitch.current
+  }
+  // 存储上一次的手势
+  prevSimultaneousHandlersRef.current = originSimultaneousHandlers || []
+  prevWaitForHandlersRef.current = waitFor || []
   const {
     // 存储layout布局信息
     layoutRef,
@@ -471,6 +503,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [children.length])
 
   useEffect(() => {
+    // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
     updateCurrent(props.current || 0, step.value)
   }, [props.current])
 
@@ -534,18 +567,25 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         targetOffset: -moveToTargetPos
       }
     }
-    function canMove (eventData: EventDataType) {
+    function checkUnCircular (eventData: EventDataType) {
       'worklet'
       const { translation } = eventData
       const currentOffset = Math.abs(offset.value)
-      if (!circularShared.value) {
-        if (translation < 0) {
-          return currentOffset < step.value * (childrenLength.value - 1)
-        } else {
-          return currentOffset > 0
+      // 向右滑动swiper
+      if (translation < 0) {
+        const boundaryOffset = step.value * (childrenLength.value - 1)
+        const gestureMovePos = Math.abs(translation) + currentOffset
+        return {
+          // 防止快速连续向右滑动时，手势移动的距离 加 当前的offset超出边界
+          targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
+          canMove: currentOffset < boundaryOffset
         }
       } else {
-        return true
+        const gestureMovePos = currentOffset - translation
+        return {
+          targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
+          canMove: currentOffset > 0
+        }
       }
     }
     function handleEnd (eventData: EventDataType) {
@@ -595,7 +635,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
       })
     }
-    function handleLongPress () {
+    function computeHalf () {
       'worklet'
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
@@ -605,6 +645,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
       const diffOffset = preOffset - currentOffset
       const half = Math.abs(diffOffset) > step.value / 2
+      return {
+        diffOffset,
+        half
+      }
+    }
+    function handleLongPress () {
+      'worklet'
+      const { diffOffset, half } = computeHalf()
       if (+diffOffset === 0) {
         runOnJS(resumeLoop)()
       } else if (half) {
@@ -660,39 +708,50 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         runOnJS(pauseLoop)()
         preAbsolutePos.value = e[strAbso]
         moveTranstion.value = e[strAbso]
+        anotherDirectionMove.value = e[anotherAbso]
         moveTime.value = new Date().getTime()
       })
-      .onTouchesMove((e) => {
+      .onUpdate((e) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - preAbsolutePos.value
+        const moveDistance = e[strAbso] - preAbsolutePos.value
         const eventData = {
           translation: moveDistance
         }
         // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-        if (!circularShared.value && !canMove(eventData)) {
+        const { canMove, targetOffset } = checkUnCircular(eventData)
+        if (!circularShared.value) {
+          if (canMove) {
+            offset.value = targetOffset
+            preAbsolutePos.value = e[strAbso]
+          }
           return
         }
+        const { half } = computeHalf()
+        // 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
+        if (half) {
+          const { selectedIndex } = getTargetPosition(eventData)
+          currentIndex.value = selectedIndex
+        }
         const { isBoundary, resetOffset } = reachBoundary(eventData)
         if (isBoundary && circularShared.value) {
           offset.value = resetOffset
         } else {
           offset.value = moveDistance + offset.value
         }
-        preAbsolutePos.value = touchEventData[strAbso]
+        preAbsolutePos.value = e[strAbso]
       })
-      .onTouchesUp((e) => {
+      .onFinalize((e) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - moveTranstion.value
+        const moveDistance = e[strAbso] - moveTranstion.value
         touchfinish.value = true
         const eventData = {
           translation: moveDistance
         }
         // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
-        if (!circularShared.value && !canMove(eventData)) {
+        const { canMove } = checkUnCircular(eventData)
+        if (!circularShared.value && !canMove) {
           return
         }
         const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000
@@ -701,11 +760,25 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         } else {
           handleEnd(eventData)
         }
-      })
+      }).withRef(swiperGestureRef)
+    // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
+    if (dir === 'x') {
+      gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5])
+    } else {
+      gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5])
+    }
+    // 手势协同2.0
+    if (simultaneousHandlers && simultaneousHandlers.length) {
+      gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers)
+    }
+
+    if (waitForHandlers && waitForHandlers.length) {
+      gesturePan.requireExternalGestureToFail(...waitForHandlers)
+    }
     return {
       gestureHandler: gesturePan
     }
-  }, [])
+  }, [gestureSwitch.current])
 
   const animatedStyles = useAnimatedStyle(() => {
     if (dir === 'x') {
@@ -736,7 +809,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     </View>)
   }
 
-  if (children.length === 1) {
+  if (children.length === 1 || disableGesture) {
     return renderSwiper()
   } else {
     return (<GestureDetector gesture={gestureHandler}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.4-beta.12",
+  "version": "2.10.4-beta.14",
   "description": "mpx compile core",
   "keywords": [
     "mpx"