@mpxjs/webpack-plugin 2.10.3-beta.5 → 2.10.3-beta.7

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

@@ -154,6 +154,9 @@ const Input = forwardRef((props, ref) => {
         // sometimes the focus event occurs later than the keyboardWillShow event
         setKeyboardAvoidContext();
     };
+    const onTouchEnd = (evt) => {
+        evt.nativeEvent.origin = 'input';
+    };
     const onFocus = (evt) => {
         setKeyboardAvoidContext();
         bindfocus && bindfocus(getCustomEvent('focus', evt, {
@@ -267,6 +270,7 @@ const Input = forwardRef((props, ref) => {
         multiline: !!multiline
     }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }, layoutProps, {
         onTouchStart,
+        onTouchEnd,
         onFocus,
         onBlur,
         onChange,

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

@@ -1,7 +1,6 @@
-import React, { useContext, useEffect, useMemo } from 'react';
-import { Keyboard, Platform, View } from 'react-native';
+import React, { useContext, useEffect } from 'react';
+import { Keyboard, View, Platform } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { KeyboardAvoidContext } from './context';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const isIOS = Platform.OS === 'ios';
@@ -10,20 +9,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
-    const dismiss = () => {
-        Keyboard.isVisible() && Keyboard.dismiss();
-    };
-    const gesture = useMemo(() => {
-        return Gesture.Tap()
-            .onEnd(() => {
-            dismiss();
-        }).runOnJS(true);
-    }, []);
-    const animatedStyle = useAnimatedStyle(() => {
-        return Object.assign({
-            transform: [{ translateY: -offset.value }]
-        }, isIOS ? {} : { flexBasis: basic.value });
-    });
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: -offset.value }],
+        flexBasis: basic.value
+    }));
     const resetKeyboard = () => {
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
@@ -31,6 +20,11 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
+    const onTouchEnd = ({ nativeEvent }) => {
+        if (nativeEvent.origin !== 'input') {
+            Keyboard.isVisible() && Keyboard.dismiss();
+        }
+    };
     useEffect(() => {
         let subscriptions = [];
         if (isIOS) {
@@ -46,7 +40,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
-                            offset.value = withTiming(value, { duration, easing });
+                            offset.value = withTiming(value, { duration, easing }, (finished) => {
+                                if (finished) {
+                                    // Set flexBasic after animation to trigger re-layout and reset layout information
+                                    basic.value = '99.99%';
+                                }
+                            });
                         });
                     });
                 }),
@@ -68,11 +67,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
                         offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
-                                /**
-                                 * In the Android environment, the layout information is not synchronized after the animation,
-                                 * which results in the inability to correctly trigger element events.
-                                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                                 */
+                                // Set flexBasic after animation to trigger re-layout and reset layout information
                                 basic.value = '99.99%';
                             }
                         });
@@ -85,16 +80,14 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View style={[
+    return (<View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View style={[
             contentContainerStyle,
             animatedStyle
         ]}>
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>);
+        {children}
+      </Animated.View>
+    </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';
 export default KeyboardAvoidingView;

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

@@ -2,7 +2,7 @@ import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated
 import { forwardRef, useRef, useContext } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, isHarmony } from './utils';
 import { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
     const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
@@ -30,7 +30,7 @@ const _SwiperItem = forwardRef((props, ref) => {
         'style'
     ], { layoutRef });
     const itemAnimatedStyle = useAnimatedStyle(() => {
-        if (!step.value)
+        if (!step.value && !isHarmony)
             return {};
         const inputRange = [step.value, 0];
         const outputRange = [0.7, 1];

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

@@ -51,7 +51,8 @@ import {
   TextInputSelectionChangeEventData,
   TextInputFocusEventData,
   TextInputChangeEventData,
-  TextInputSubmitEditingEventData
+  TextInputSubmitEditingEventData,
+  NativeTouchEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
@@ -292,6 +293,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     setKeyboardAvoidContext()
   }
 
+  const onTouchEnd = (evt: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+    evt.nativeEvent.origin = 'input'
+  }
+
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setKeyboardAvoidContext()
     bindfocus && bindfocus(
@@ -455,6 +460,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       layoutProps,
       {
         onTouchStart,
+        onTouchEnd,
         onFocus,
         onBlur,
         onChange,

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

@@ -1,7 +1,6 @@
-import React, { ReactNode, useContext, useEffect, useMemo } from 'react'
-import { DimensionValue, EmitterSubscription, Keyboard, Platform, View, ViewStyle } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated'
-import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import React, { ReactNode, useContext, useEffect } from 'react'
+import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, Platform, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
 
 type KeyboardAvoidViewProps = {
@@ -19,25 +18,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
-  const dismiss = () => {
-    Keyboard.isVisible() && Keyboard.dismiss()
-  }
-
-  const gesture = useMemo(() => {
-    return Gesture.Tap()
-      .onEnd(() => {
-        dismiss()
-      }).runOnJS(true)
-  }, [])
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return Object.assign(
-      {
-        transform: [{ translateY: -offset.value }]
-      },
-      isIOS ? {} : { flexBasis: basic.value as DimensionValue }
-    )
-  })
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: -offset.value }],
+    flexBasis: basic.value as DimensionValue
+  }))
 
   const resetKeyboard = () => {
     if (keyboardAvoid?.current) {
@@ -47,6 +31,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     basic.value = 'auto'
   }
 
+  const onTouchEnd = ({ nativeEvent }: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+    if (nativeEvent.origin !== 'input') {
+      Keyboard.isVisible() && Keyboard.dismiss()
+    }
+  }
+
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
@@ -62,7 +52,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue
-              offset.value = withTiming(value, { duration, easing })
+              offset.value = withTiming(value, { duration, easing }, (finished) => {
+                if (finished) {
+                  // Set flexBasic after animation to trigger re-layout and reset layout information
+                  basic.value = '99.99%'
+                }
+              })
             })
           })
         }),
@@ -82,11 +77,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
             const value = aboveOffset > 0 ? belowValue : aboveValue
             offset.value = withTiming(value, { duration, easing }, (finished) => {
               if (finished) {
-                /**
-                 * In the Android environment, the layout information is not synchronized after the animation,
-                 * which results in the inability to correctly trigger element events.
-                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                 */
+                // Set flexBasic after animation to trigger re-layout and reset layout information
                 basic.value = '99.99%'
               }
             })
@@ -102,18 +93,16 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View
-          style={[
-            contentContainerStyle,
-            animatedStyle
-          ]}
-        >
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>
+    <View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View
+        style={[
+          contentContainerStyle,
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </View>
   )
 }
 

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

@@ -3,7 +3,7 @@ import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-nati
 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 { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, isHarmony } from './utils'
 import { SwiperContext } from './context'
 
 interface SwiperItemProps {
@@ -73,7 +73,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     'style'
   ], { layoutRef })
   const itemAnimatedStyle = useAnimatedStyle(() => {
-    if (!step.value) return {}
+    if (!step.value && !isHarmony) return {}
     const inputRange = [step.value, 0]
     const outputRange = [0.7, 1]
     // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.3-beta.5",
+  "version": "2.10.3-beta.7",
   "description": "mpx compile core",
   "keywords": [
     "mpx"