@mpxjs/webpack-plugin 2.10.4-beta.9 → 2.10.5-beta.1

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

@@ -1,6 +1,6 @@
 import { View } from 'react-native'
 import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
-import { ReactNode, forwardRef, useRef, useContext } from 'react'
+import { ReactNode, forwardRef, useRef, useContext, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils'
@@ -95,24 +95,16 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
       transform: transformStyle
     })
   })
-  return (
-    <Animated.View
-      {...innerProps}
-      style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]}
-      data-itemId={props['item-id']}>
-      {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
-      }
-    </Animated.View>
-  )
+  const mergeProps = extendObject({}, innerProps, {
+    style: [innerStyle, layoutStyle, itemAnimatedStyle, customStyle],
+    'data-itemId': props['item-id']
+  })
+  return createElement(Animated.View, mergeProps, wrapChildren(props, {
+    hasVarDec,
+    varContext: varContextRef.current,
+    textStyle,
+    textProps
+  }))
 })
 
 _SwiperItem.displayName = 'MpxSwiperItem'

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

@@ -1,12 +1,13 @@
 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 React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo, createElement } 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'
+import Portal from './mpx-portal'
 /**
  * ✔ indicator-dots
  * ✔ indicator-color
@@ -45,7 +46,7 @@ interface SwiperProps {
   vertical?: boolean
   style: {
     [key: string]: any
-  }
+  };
   'easing-function'?: EaseType
   'previous-margin'?: string
   'next-margin'?: string
@@ -53,8 +54,11 @@ interface SwiperProps {
   'enable-var': boolean
   'parent-font-size'?: number
   'parent-width'?: number
-  'parent-height'?: 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
 }
 
@@ -126,7 +130,7 @@ const easeMap = {
 
 const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((props: SwiperProps, ref): JSX.Element => {
   const {
-    'indicator-dots': showsPagination,
+    'indicator-dots': showPagination,
     'indicator-color': dotColor = 'rgba(0, 0, 0, .3)',
     'indicator-active-color': activeDotColor = '#000000',
     'enable-var': enableVar = false,
@@ -134,21 +138,30 @@ 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)
-  useNodesRef<View, SwiperProps>(props, ref, nodeRef, {})
+  // 手势协同gesture 1.0
+  const swiperGestureRef = useRef<PanGesture>()
+  useNodesRef<View, SwiperProps>(props, ref, nodeRef, {
+    // scrollView内部会过滤是否绑定了gestureRef，withRef(swiperGestureRef)给gesture对象设置一个ref(2.0版本)
+    gestureRef: swiperGestureRef
+  })
   // 计算transfrom之类的
   const {
     normalStyle,
     hasVarDec,
     varContextRef,
     hasSelfPercent,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(style, {
@@ -195,6 +208,27 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTime = useSharedValue(0)
   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,
@@ -248,7 +282,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   })
 
   function renderPagination () {
-    if (children.length <= 1) return null
     const activeColor = activeDotColor || '#007aff'
     const unActionColor = dotColor || 'rgba(0,0,0,.2)'
     // 正常渲染所有dots
@@ -491,7 +524,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       offset.value = getOffset(currentIndex.value, step.value)
     }
   }, [circular, preMargin])
-
   const { gestureHandler } = useMemo(() => {
     function getTargetPosition (eventData: EventDataType) {
       'worklet'
@@ -574,6 +606,15 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         })
       }
     }
+    function handleBackInit () {
+      'worklet'
+      // 微信的效果
+      // 1. 只有一个元素，即使设置了circular，也不会产生循环的效果，2. 可以响应手势，但是会有回弹的效果
+      offset.value = withTiming(0, {
+        duration: easeDuration,
+        easing: easeMap[easeingFunc]
+      })
+    }
     function handleBack (eventData: EventDataType) {
       'worklet'
       const { translation } = eventData
@@ -675,7 +716,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           return
         }
         const { isBoundary, resetOffset } = reachBoundary(eventData)
-        if (isBoundary && circularShared.value) {
+        if (childrenLength.value > 1 && isBoundary && circularShared.value) {
           offset.value = resetOffset
         } else {
           offset.value = moveDistance + offset.value
@@ -691,6 +732,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         const eventData = {
           translation: moveDistance
         }
+        if (childrenLength.value === 1) {
+          return handleBackInit()
+        }
         // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
         if (!circularShared.value && !canMove(eventData)) {
           return
@@ -702,10 +746,25 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           handleEnd(eventData)
         }
       })
+      .withRef(swiperGestureRef)
+    // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
+    if (dir === 'x') {
+      gesturePan.activeOffsetX([-2, 2]).failOffsetY([-5, 5])
+    } else {
+      gesturePan.activeOffsetY([-2, 2]).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') {
@@ -715,34 +774,32 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
   })
 
-  function renderSwiper () {
-    const arrPages: Array<ReactNode> | ReactNode = renderItems()
-    return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
-      <Animated.View style={[{
-        flexDirection: dir === 'x' ? 'row' : 'column',
-        width: '100%',
-        height: '100%'
-      }, animatedStyles]}>
-        {wrapChildren({
-          children: arrPages
-        }, {
-          hasVarDec,
-          varContext: varContextRef.current,
-          textStyle,
-          textProps
-        })}
-      </Animated.View>
-      {showsPagination && renderPagination()}
-    </View>)
+  let finalComponent: JSX.Element
+  const arrPages: Array<ReactNode> | ReactNode = renderItems()
+  const mergeProps = Object.assign({
+    style: [normalStyle, layoutStyle, styles.swiper]
+  }, layoutProps, innerProps)
+  const animateComponent = createElement(Animated.View, {
+    style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
+  }, wrapChildren({
+    children: arrPages
+  }, {
+    hasVarDec,
+    varContext: varContextRef.current,
+    textStyle,
+    textProps
+  }))
+  const renderChildrens = showPagination ? [animateComponent, renderPagination()] : animateComponent
+  finalComponent = createElement(View, mergeProps, renderChildrens)
+  if (!disableGesture) {
+    finalComponent = createElement(GestureDetector, {
+      gesture: gestureHandler
+    }, finalComponent)
   }
-
-  if (children.length === 1) {
-    return renderSwiper()
-  } else {
-    return (<GestureDetector gesture={gestureHandler}>
-      {renderSwiper()}
-    </GestureDetector>)
+  if (hasPositionFixed) {
+    finalComponent = createElement(Portal, null, finalComponent)
   }
+  return finalComponent
 })
 SwiperWrapper.displayName = 'MpxSwiperWrapper'
 

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

@@ -11,6 +11,7 @@ import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 
 import CheckBox from './mpx-checkbox'
+import Portal from './mpx-portal'
 import { FormContext, FormFieldValue } from './context'
 import { useTransformStyle, useLayout, extendObject } from './utils'
 
@@ -62,7 +63,8 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     normalStyle,
     hasSelfPercent,
     setWidth,
-    setHeight
+    setHeight,
+    hasPositionFixed
   } = useTransformStyle(style, {
     enableVar,
     externalVarContext,
@@ -151,7 +153,7 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     )
   }
 
-  return createElement(
+  let finalComponent: JSX.Element = createElement(
     Switch,
     extendObject({}, innerProps, {
       style: normalStyle,
@@ -161,6 +163,12 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
       ios_backgroundColor: '#FFF'
     })
   )
+
+  if (hasPositionFixed) {
+    finalComponent = createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 _Switch.displayName = 'MpxSwitch'

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

@@ -6,6 +6,7 @@
  */
 import { Text, TextStyle, TextProps } from 'react-native'
 import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react'
+import Portal from './mpx-portal'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, wrapChildren, extendObject } from './utils'
@@ -38,7 +39,8 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
   const {
     normalStyle,
     hasVarDec,
-    varContextRef
+    varContextRef,
+    hasPositionFixed
   } = useTransformStyle(style, {
     enableVar,
     externalVarContext,
@@ -68,13 +70,19 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     ]
   )
 
-  return createElement(Text, innerProps, wrapChildren(
+  let finalComponent:JSX.Element = createElement(Text, innerProps, wrapChildren(
     props,
     {
       hasVarDec,
       varContext: varContextRef.current
     }
   ))
+
+  if (hasPositionFixed) {
+    finalComponent = createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 _Text.displayName = 'MpxText'

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

@@ -74,6 +74,7 @@ import {
 } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
+import Portal from './mpx-portal'
 
 interface VideoProps {
   src: string
@@ -170,7 +171,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
 
   propsRef.current = props
 
-  const { normalStyle, hasSelfPercent, setWidth, setHeight } =
+  const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } =
     useTransformStyle(extendObject({}, styles.container, style), {
       enableVar,
       externalVarContext,
@@ -381,9 +382,13 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
     ],
     { layoutRef }
   )
-  return createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef },
+  let videoComponent: JSX.Element = createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef },
     createElement(Video, innerProps)
   )
+  if (hasPositionFixed) {
+    videoComponent = createElement(Portal, null, videoComponent)
+  }
+  return videoComponent
 })
 
 export default MpxVideo

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

@@ -13,7 +13,7 @@ import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils'
-import { error } from '@mpxjs/utils'
+import { error, isFunction } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
 import Portal from './mpx-portal'
@@ -36,6 +36,8 @@ export interface _ViewProps extends ViewProps {
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindtransitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  catchtransitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 type Handler = (...args: any[]) => void
@@ -636,10 +638,14 @@ function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<strin
     }
   }
 
-  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
-    {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
-    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size), enableFastImage))}
-  </View>
+  const backgroundProps: ViewProps = extendObject({ key: 'backgroundImage' }, needLayout ? { onLayout } : {},
+    { style: extendObject({}, inheritStyle(innerStyle), StyleSheet.absoluteFillObject, { overflow: 'hidden' as const }) }
+  )
+
+  return createElement(View, backgroundProps,
+    show && type === 'linear' && createElement(LinearGradient, extendObject({ useAngle: true }, imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size))),
+    show && type === 'image' && renderImage(imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size), enableFastImage)
+  )
 }
 
 interface WrapChildrenConfig {
@@ -683,7 +689,9 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
-    animation
+    animation,
+    catchtransitionend,
+    bindtransitionend
   } = props
 
   // 默认样式
@@ -737,11 +745,17 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const viewStyle = extendObject({}, innerStyle, layoutStyle)
-
+  const transitionend = isFunction(catchtransitionend)
+    ? catchtransitionend
+    : isFunction(bindtransitionend)
+      ? bindtransitionend
+      : undefined
   const { enableStyleAnimation, animationStyle } = useAnimationHooks({
-    enableAnimation,
+    layoutRef,
     animation,
-    style: viewStyle
+    enableAnimation,
+    style: viewStyle,
+    transitionend
   })
 
   const innerProps = useInnerProps(

package/lib/runtime/components/react/useAnimationHooks.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react'
-import { TransformsStyle } from 'react-native'
+import type { MutableRefObject } from 'react'
+import type { NativeSyntheticEvent, TransformsStyle } from 'react-native'
 import {
   Easing,
   useSharedValue,
@@ -9,11 +10,10 @@ import {
   withDelay,
   makeMutable,
   cancelAnimation,
-  SharedValue,
-  WithTimingConfig,
-  AnimationCallback
+  runOnJS
 } from 'react-native-reanimated'
-import { error, hasOwn } from '@mpxjs/utils'
+import type { AnimationCallback, WithTimingConfig, SharedValue, AnimatableValue } from 'react-native-reanimated'
+import { error, hasOwn, collectDataset } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -175,9 +175,8 @@ function getTransformObj (transforms: { [propName: string]: string | number }[])
   }, {} as { [propName: string]: string | number })
 }
 
-export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
-  const { style = {}, animation, enableAnimation } = props
-
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
+  const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props
   const enableStyleAnimation = enableAnimation || !!animation
   const enableAnimationRef = useRef(enableStyleAnimation)
   if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -285,10 +284,32 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       })
     })
   }
+  function withTimingCallback (finished?: boolean, current?: AnimatableValue, duration?: number) {
+    if (!transitionend) return
+    const target = {
+      id: animation?.id || -1,
+      dataset: collectDataset(props),
+      offsetLeft: layoutRef?.current?.offsetLeft || 0,
+      offsetTop: layoutRef?.current?.offsetTop || 0
+    }
+    transitionend({
+      type: 'transitionend',
+      // elapsedTime 对齐wx 单位s
+      detail: { elapsedTime: duration ? duration / 1000 : 0, finished, current },
+      target,
+      currentTarget: target,
+      timeStamp: Date.now()
+    })
+  }
   // 创建单个animation
   function getAnimation ({ key, value }: { key: string, value: string|number }, { delay, duration, easing }: ExtendWithTimingConfig, callback?: AnimationCallback) {
     const animation = typeof callback === 'function'
-      ? withTiming(value, { duration, easing }, callback)
+      ? withTiming(value, { duration, easing }, (finished, current) => {
+        callback(finished, current)
+        if (transitionend && finished) {
+          runOnJS(withTimingCallback)(finished, current, duration)
+        }
+      })
       : withTiming(value, { duration, easing })
     return delay ? withDelay(delay, animation) : animation
   }