@mpxjs/webpack-plugin 2.9.69-beta.0 → 2.9.69-beta.2

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -32,15 +32,14 @@
  * ✔ bindscroll
  */
 import { ScrollView } from 'react-native-gesture-handler'
-import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
-import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement } from 'react'
+import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle, Platform } from 'react-native'
+import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react'
 import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
-import { IntersectionObserverContext } from './context'
-
+import { IntersectionObserverContext, ScrollViewContext } from './context'
 interface ScrollViewProps {
   children?: ReactNode;
   enhanced?: boolean;
@@ -194,6 +193,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     gestureRef: scrollViewRef
   })
 
+  const contextValue = useMemo(() => {
+    return {
+      gestureRef: scrollViewRef
+    }
+  }, [])
+
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
 
   if (scrollX && scrollY) {
@@ -313,6 +318,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     })
   }
 
+  const observerTimers: {[key: string]: any} = {}
   function onScroll (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { bindscroll } = props
     const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
@@ -334,7 +340,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     updateScrollOptions(e, { scrollLeft, scrollTop })
     if (enableTriggerIntersectionObserver && intersectionObservers) {
       for (const key in intersectionObservers) {
-        intersectionObservers[key].throttleMeasure()
+        if (Platform.OS === 'android') {
+          intersectionObservers[key].throttleMeasure();
+        } else {
+          // TODO: 由于iOS在onScroll滚动的过程中view的计算measureInWindow计算的值不发生变化，所以暂时在ios上加一个延时计算
+          observerTimers[key] && clearTimeout(observerTimers[key])
+          observerTimers[key] = setTimeout(() => {
+              intersectionObservers[key].throttleMeasure();
+          }, 300)
+        }
       }
     }
   }
@@ -507,14 +521,17 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
         : undefined
     }),
-    wrapChildren(
-      props,
-      {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-      }
+    createElement(ScrollViewContext.Provider,
+      { value: contextValue },
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        }
+      )
     )
   )
 })

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

@@ -1,8 +1,10 @@
-import { View, LayoutChangeEvent } from 'react-native'
-import { ReactNode, forwardRef, useRef } from 'react'
+import { View } from 'react-native'
+import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
+import { ReactNode, forwardRef, useRef, useContext } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
+import { SwiperContext } from './context'
 
 interface SwiperItemProps {
   'item-id'?: string;
@@ -14,15 +16,29 @@ interface SwiperItemProps {
   'parent-height'?: number;
   children?: ReactNode;
   style?: Object;
+  customStyle: [];
+  itemIndex: number;
+}
+
+interface ContextType {
+  offset: SharedValue<number>;
+  step: SharedValue<number>;
+  scale: boolean;
 }
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
   const {
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
-    style
+    style,
+    customStyle,
+    itemIndex
   } = props
 
+  const contextValue = useContext(SwiperContext) as ContextType
+  const offset = contextValue.offset || 0
+  const step = contextValue.step || 0
+  const scale = contextValue.scale || false
   const { textProps } = splitProps(props)
   const nodeRef = useRef(null)
 
@@ -47,19 +63,31 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
 
   const innerProps = useInnerProps(props, {
-    style: { ...innerStyle, ...layoutStyle },
     ref: nodeRef,
     ...layoutProps
   }, [
     'children',
-    'enable-offset'
+    'enable-offset',
+    'style'
   ], { layoutRef })
 
+  const itemAnimatedStyle = useAnimatedStyle(() => {
+    if (!step.value) return {}
+    const inputRange = [step.value, 0]
+    const outputRange = [0.7, 1]
+    return {
+      transform: [{
+        scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
+      }]
+    }
+  })
+  const mergeStyle = [innerStyle, layoutStyle, { width: '100%', height: '100%' }, scale ? itemAnimatedStyle : {}].concat(customStyle)
   return (
-    <View
-      data-itemId={props['item-id']}
-      {...innerProps}>
-       {
+    <Animated.View
+      {...innerProps}
+      style={mergeStyle}
+      data-itemId={props['item-id']}>
+      {
         wrapChildren(
           props,
           {
@@ -70,7 +98,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
           }
         )
       }
-    </View>
+    </Animated.View>
   )
 })