npm - @mpxjs/webpack-plugin - Versions diffs - 2.10.14-beta.3 → 2.10.14-beta.4-1 - Mend

@mpxjs/webpack-plugin 2.10.14-beta.3 → 2.10.14-beta.4-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

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

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { Keyboard, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
 import { KeyboardAvoidContext } from './context';
 import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
@@ -9,14 +9,25 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
+    // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+    // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+    // 因此增加状态标记 + clearTimeout + cancelAnimation 来优化
+    const isShow = useRef(false);
+    const timerRef = useRef(null);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: -offset.value }],
         flexBasis: basic.value
     }));
     const resetKeyboard = () => {
+        if (!isShow.current) {
+            return;
+        }
+        isShow.current = false;
+        timerRef.current && clearTimeout(timerRef.current);
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
         }
+        cancelAnimation(offset);
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
@@ -30,16 +41,20 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         if (isIOS) {
             subscriptions = [
                 Keyboard.addListener('keyboardWillShow', (evt) => {
-                    if (!keyboardAvoid?.current)
+                    if (!keyboardAvoid?.current || isShow.current) {
                         return;
+                    }
+                    isShow.current = true;
+                    timerRef.current && clearTimeout(timerRef.current);
                     const { endCoordinates } = evt;
                     const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
-                    setTimeout(() => {
+                    timerRef.current = setTimeout(() => {
                         ref?.current?.measure((x, y, width, height, pageX, pageY) => {
                             const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
+                            cancelAnimation(offset);
                             offset.value = withTiming(value, { duration, easing }, (finished) => {
                                 if (finished) {
                                     // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -55,8 +70,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         else {
             subscriptions = [
                 Keyboard.addListener('keyboardDidShow', (evt) => {
-                    if (!keyboardAvoid?.current)
+                    if (!keyboardAvoid?.current || isShow.current) {
                         return;
+                    }
+                    isShow.current = true;
                     const { endCoordinates } = evt;
                     const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
                     ref?.current?.measure((x, y, width, height, pageX, pageY) => {
@@ -65,6 +82,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                         const belowValue = Math.min(belowOffset, cursorSpacing);
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
+                        cancelAnimation(offset);
                         offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
                                 // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -78,6 +96,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         }
         return () => {
             subscriptions.forEach(subscription => subscription.remove());
+            timerRef.current && clearTimeout(timerRef.current);
         };
     }, [keyboardAvoid]);
     return (<View style={style} onTouchEnd={onTouchEnd}>

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

@@ -1,6 +1,6 @@
-import React, { ReactNode, useContext, useEffect } from 'react'
+import React, { ReactNode, useContext, useEffect, useRef } from 'react'
 import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
 import { isIOS } from './utils'
@@ -18,15 +18,30 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
+  // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+  // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+  // 因此增加状态标记 + clearTimeout + cancelAnimation 来优化
+  const isShow = useRef<boolean>(false)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: -offset.value }],
     flexBasis: basic.value as DimensionValue
   }))
   const resetKeyboard = () => {
+    if (!isShow.current) {
+      return
+    }
+    isShow.current = false
+    timerRef.current && clearTimeout(timerRef.current)
     if (keyboardAvoid?.current) {
       keyboardAvoid.current = null
     }
+    cancelAnimation(offset)
     offset.value = withTiming(0, { duration, easing })
     basic.value = 'auto'
   }
@@ -43,15 +58,23 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     if (isIOS) {
       subscriptions = [
         Keyboard.addListener('keyboardWillShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
+          if (!keyboardAvoid?.current || isShow.current) {
+            return
+          }
+          isShow.current = true
+          timerRef.current && clearTimeout(timerRef.current)
           const { endCoordinates } = evt
           const { ref, cursorSpacing = 0 } = keyboardAvoid.current
-          setTimeout(() => {
+          timerRef.current = setTimeout(() => {
             ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
               const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue
+              cancelAnimation(offset)
               offset.value = withTiming(value, { duration, easing }, (finished) => {
                 if (finished) {
                   // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -66,15 +89,22 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     } else {
       subscriptions = [
         Keyboard.addListener('keyboardDidShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
+          if (!keyboardAvoid?.current || isShow.current) {
+            return
+          }
+          isShow.current = true
           const { endCoordinates } = evt
           const { ref, cursorSpacing = 0 } = keyboardAvoid.current
           ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
             const aboveOffset = pageY + height - endCoordinates.screenY
             const belowOffset = endCoordinates.height - aboveOffset
             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
             const belowValue = Math.min(belowOffset, cursorSpacing)
             const value = aboveOffset > 0 ? belowValue : aboveValue
+            cancelAnimation(offset)
             offset.value = withTiming(value, { duration, easing }, (finished) => {
               if (finished) {
                 // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -89,6 +119,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     return () => {
       subscriptions.forEach(subscription => subscription.remove())
+      timerRef.current && clearTimeout(timerRef.current)
     }
   }, [keyboardAvoid])

package/package.json CHANGED Viewed

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