@mpxjs/webpack-plugin 2.10.14-beta.14 → 2.10.14-beta.15

package/lib/runtime/components/react/dist/mpx-swiper.d.ts

@@ -47,6 +47,8 @@ interface SwiperProps {
     'simultaneous-handlers'?: Array<GestureHandler>;
     disableGesture?: boolean;
     bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    bindtransition?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    bindanimationfinish?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }
 declare const SwiperWrapper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<HandlerRef<View, SwiperProps>>>;
 export default SwiperWrapper;

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

@@ -71,7 +71,7 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showPagination, '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, current: propCurrent = 0, bindchange } = props;
+    const { 'indicator-dots': showPagination, '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, current: propCurrent = 0, bindchange, bindtransition, bindanimationfinish } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -275,6 +275,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }, () => {
                     currentIndex.value = nextIndex;
                     runOnJS(runOnJSCallback)('loop');
+                    bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', nextIndex);
                 });
             }
             else {
@@ -291,6 +292,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                         offset.value = initOffset;
                         currentIndex.value = nextIndex;
                         runOnJS(runOnJSCallback)('loop');
+                        bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', nextIndex);
                     });
                 }
                 else {
@@ -303,6 +305,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     }, () => {
                         currentIndex.value = nextIndex;
                         runOnJS(runOnJSCallback)('loop');
+                        runOnJS(runOnJSCallback)('handleAnimationfinish', nextIndex);
                     });
                 }
             }
@@ -331,11 +334,21 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
         bindchange && bindchange(eventData);
     }
+    function handleTransition(transData) {
+        const eventData = getCustomEvent('change', {}, { detail: transData, layoutRef: layoutRef });
+        bindtransition && bindtransition(eventData);
+    }
+    function handleAnimationfinish(current) {
+        const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
+        bindanimationfinish && bindanimationfinish(eventData);
+    }
     const runOnJSCallbackRef = useRef({
         loop,
         pauseLoop,
         resumeLoop,
-        handleSwiperChange
+        handleSwiperChange,
+        handleTransition,
+        handleAnimationfinish
     });
     const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     function getOffset(index, stepValue) {
@@ -361,6 +374,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     easing: easeMap[easeingFunc]
                 }, () => {
                     currentIndex.value = propCurrent;
+                    bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', propCurrent);
                 });
             }
             else {
@@ -383,6 +397,28 @@ const SwiperWrapper = forwardRef((props, ref) => {
             runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent);
         }
     });
+    useAnimatedReaction(() => offset.value, (curOffset, preOffset) => {
+        const curAbsOffset = Math.abs(curOffset);
+        const preAbsOffset = Math.abs(preOffset || 0);
+        const computeOffset = step.value * (currentIndex.value + patchElmNumShared.value);
+        // 有小数点的情况
+        const isEqual = Math.abs(Math.floor(computeOffset) - Math.floor(Math.abs(offset.value))) <= 2;
+        if (curAbsOffset !== preAbsOffset && curAbsOffset && !isEqual) {
+            // 移动的距离，手向左滑动正数( curAbsOffset >= preAbsOffset)，右右滑动是负数( curAbsOffset < preAbsOffset)
+            let trans = 0;
+            if (curAbsOffset >= preAbsOffset) {
+                trans = curAbsOffset % step.value;
+            }
+            else {
+                trans = -(step.value - curAbsOffset % step.value);
+            }
+            const transData = {
+                dx: dir === 'x' ? trans : 0,
+                dy: dir === 'y' ? trans : 0
+            };
+            bindtransition && runOnJS(runOnJSCallback)('handleTransition', transData);
+        }
+    });
     useEffect(() => {
         let patchStep = 0;
         if (preMargin !== preMarginShared.value) {
@@ -510,6 +546,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                         currentIndex.value = selectedIndex;
                         offset.value = resetOffset;
                         runOnJS(runOnJSCallback)('resumeLoop');
+                        bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', selectedIndex);
                     }
                 });
             }
@@ -521,6 +558,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     if (touchfinish.value !== false) {
                         currentIndex.value = selectedIndex;
                         runOnJS(runOnJSCallback)('resumeLoop');
+                        bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', selectedIndex);
                     }
                 });
             }
@@ -543,6 +581,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 if (touchfinish.value !== false) {
                     currentIndex.value = moveToIndex;
                     runOnJS(runOnJSCallback)('resumeLoop');
+                    bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', moveToIndex);
                 }
             });
         }

package/lib/runtime/components/react/dist/nav.jsx

@@ -90,11 +90,12 @@ const MpxNav = memo(({ pageConfig, navigation }) => {
     const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle]);
     // 状态栏的颜色
     const statusBarElement = (<StatusBar translucent backgroundColor='transparent' barStyle={navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content'}></StatusBar>);
-    if (isCustom)
+    if (isCustom) {
         return (<>
         {statusBarElement}
         {customNav}
       </>);
+    }
     // 假设是栈导航，获取栈的长度
     const stackLength = navigation.getState()?.routes?.length;
     const onStackTopBack = mpxGlobal?.__mpx?.config?.rnConfig?.onStackTopBack;

package/lib/runtime/components/react/mpx-nav-container.tsx

@@ -9,7 +9,7 @@ interface MpxNavContainerProps {
   children?: React.ReactNode
 }
 
-export default function MpxNavContainer(props: MpxNavContainerProps) {
+export default function MpxNavContainer (props: MpxNavContainerProps) {
   const [, setCustomNav] = useNavShared()
 
   useLayoutEffect(() => {
@@ -26,7 +26,7 @@ export default function MpxNavContainer(props: MpxNavContainerProps) {
   return isAndroid ? null : props.children
 }
 
-export function NavSharedProvider({ children }: { children?: React.ReactNode }) {
+export function NavSharedProvider ({ children }: { children?: React.ReactNode }) {
   const [customNav, setCustomNav] = useState()
   const value = useMemo(() => ({ customNav, setCustomNav } as NavSharedValue), [customNav])
   return <NavSharedContext.Provider value={value}>{children}</NavSharedContext.Provider>

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

@@ -33,6 +33,11 @@ type EventDataType = {
   // onUpdate时根据上一个判断方向，onFinalize根据transformStart判断
   transdir: number
 }
+// bindtransition回调的参数
+type EventTransition = {
+  dx: number
+  dy: number
+}
 
 interface SwiperProps {
   children?: ReactNode
@@ -64,6 +69,8 @@ interface SwiperProps {
   'simultaneous-handlers'?: Array<GestureHandler>
   disableGesture?: boolean
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindtransition?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindanimationfinish?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 /**
@@ -149,7 +156,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     circular = false,
     disableGesture = false,
     current: propCurrent = 0,
-    bindchange
+    bindchange,
+    bindtransition,
+    bindanimationfinish
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
@@ -378,6 +387,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }, () => {
           currentIndex.value = nextIndex
           runOnJS(runOnJSCallback)('loop')
+          bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', nextIndex)
         })
       } else {
         // 默认向右, 向下
@@ -393,6 +403,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             offset.value = initOffset
             currentIndex.value = nextIndex
             runOnJS(runOnJSCallback)('loop')
+            bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', nextIndex)
           })
         } else {
           nextIndex = currentIndex.value + 1
@@ -404,6 +415,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           }, () => {
             currentIndex.value = nextIndex
             runOnJS(runOnJSCallback)('loop')
+            runOnJS(runOnJSCallback)('handleAnimationfinish', nextIndex)
           })
         }
       }
@@ -436,11 +448,23 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     bindchange && bindchange(eventData)
   }
 
+  function handleTransition (transData: EventTransition) {
+    const eventData = getCustomEvent('change', {}, { detail: transData, layoutRef: layoutRef })
+    bindtransition && bindtransition(eventData)
+  }
+
+  function handleAnimationfinish (current: number) {
+    const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+    bindanimationfinish && bindanimationfinish(eventData)
+  }
+
   const runOnJSCallbackRef = useRef({
     loop,
     pauseLoop,
     resumeLoop,
-    handleSwiperChange
+    handleSwiperChange,
+    handleTransition,
+    handleAnimationfinish
   })
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
 
@@ -466,6 +490,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           easing: easeMap[easeingFunc]
         }, () => {
           currentIndex.value = propCurrent
+          bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', propCurrent)
         })
       } else {
         offset.value = targetOffset
@@ -486,7 +511,27 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
   })
-
+  useAnimatedReaction(() => offset.value, (curOffset, preOffset) => {
+    const curAbsOffset = Math.abs(curOffset)
+    const preAbsOffset = Math.abs(preOffset || 0)
+    const computeOffset = step.value * (currentIndex.value + patchElmNumShared.value)
+    // 有小数点的情况
+    const isEqual = Math.abs(Math.floor(computeOffset) - Math.floor(Math.abs(offset.value))) <= 2
+    if (curAbsOffset !== preAbsOffset && curAbsOffset && !isEqual) {
+      // 移动的距离，手向左滑动正数( curAbsOffset >= preAbsOffset)，右右滑动是负数( curAbsOffset < preAbsOffset)
+      let trans = 0
+      if (curAbsOffset >= preAbsOffset) {
+        trans = curAbsOffset % step.value
+      } else {
+        trans = -(step.value - curAbsOffset % step.value)
+      }
+      const transData = {
+        dx: dir === 'x' ? trans : 0,
+        dy: dir === 'y' ? trans : 0
+      }
+      bindtransition && runOnJS(runOnJSCallback)('handleTransition', transData)
+    }
+  })
   useEffect(() => {
     let patchStep = 0
     if (preMargin !== preMarginShared.value) {
@@ -613,6 +658,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             currentIndex.value = selectedIndex
             offset.value = resetOffset
             runOnJS(runOnJSCallback)('resumeLoop')
+            bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', selectedIndex)
           }
         })
       } else {
@@ -623,6 +669,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           if (touchfinish.value !== false) {
             currentIndex.value = selectedIndex
             runOnJS(runOnJSCallback)('resumeLoop')
+            bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', selectedIndex)
           }
         })
       }
@@ -645,6 +692,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         if (touchfinish.value !== false) {
           currentIndex.value = moveToIndex
           runOnJS(runOnJSCallback)('resumeLoop')
+          bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', moveToIndex)
         }
       })
     }

package/lib/runtime/components/react/nav.tsx

@@ -105,13 +105,14 @@ const MpxNav = memo(({ pageConfig, navigation }: MpxNavProps) => {
       barStyle={navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content'}></StatusBar>
   )
 
-  if (isCustom)
+  if (isCustom) {
     return (
       <>
         {statusBarElement}
         {customNav}
       </>
     )
+  }
   // 假设是栈导航，获取栈的长度
   const stackLength = navigation.getState()?.routes?.length
   const onStackTopBack = mpxGlobal?.__mpx?.config?.rnConfig?.onStackTopBack

package/package.json

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