From e2b05116959828f8dc039ecc344d0b31843084f6 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 5 Nov 2024 14:19:06 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9injectCatchEvent?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/getInnerListeners.ts     | 19 --------------
 .../components/react/mpx-movable-view.tsx     | 25 ++++++++++++++++---
 .../lib/runtime/components/react/utils.tsx    |  4 +--
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts
index 355703a8b..ed7218458 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts
@@ -105,25 +105,6 @@ export const getCustomEvent = (
   }
 }
 
-export const injectCatchEvent = (props: Record<string, any>) => {
-  const eventHandlers: Record<string, any> = {}
-  const catchEventList = [
-    { name: 'onTouchStart', value: ['catchtouchstart'] },
-    { name: 'onTouchMove', value: ['catchtouchmove', 'catchvtouchmove', 'catchvhouchmove'] },
-    { name: 'onTouchEnd', value: ['catchtouchend'] }
-  ]
-  catchEventList.forEach(event => {
-    event.value.forEach(name => {
-      if (props[name] && !eventHandlers[event.name]) {
-        eventHandlers[event.name] = (e: NativeSyntheticEvent<TouchEvent>) => {
-          e.stopPropagation()
-        }
-      }
-    })
-  })
-  return eventHandlers
-}
-
 const useInnerProps = (
   props: Props = {},
   additionalProps: AdditionalProps = {},
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
index 7095afcf0..d132eaee0 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
@@ -19,10 +19,10 @@
  */
 import { useEffect, forwardRef, ReactNode, useContext, useCallback, useRef, useMemo, Ref } from 'react'
 import { StyleSheet, NativeSyntheticEvent, View, LayoutChangeEvent } from 'react-native'
-import { getCustomEvent, injectCatchEvent } from './getInnerListeners'
+import { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, DEFAULT_UNLAY_STYLE, wrapChildren, GestureHandler, flatGesture } from './utils'
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture } from './utils'
 import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload, PanGesture } from 'react-native-gesture-handler'
 import Animated, {
   useSharedValue,
@@ -482,8 +482,27 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     }
   })
 
+  const injectCatchEvent = (props: Record<string, any>) => {
+    const eventHandlers: Record<string, any> = {}
+    const catchEventList = [
+      { name: 'onTouchStart', value: ['catchtouchstart'] },
+      { name: 'onTouchMove', value: ['catchtouchmove', 'catchvtouchmove', 'catchhtouchmove'] },
+      { name: 'onTouchEnd', value: ['catchtouchend'] }
+    ]
+    catchEventList.forEach(event => {
+      event.value.forEach(name => {
+        if (props[name] && !eventHandlers[event.name]) {
+          eventHandlers[event.name] = (e: NativeSyntheticEvent<TouchEvent>) => {
+            e.stopPropagation()
+          }
+        }
+      })
+    })
+    return eventHandlers
+  }
+
   const catchEventHandlers = injectCatchEvent(props)
-  const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? DEFAULT_UNLAY_STYLE : {}
+  const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}
   return (
     <GestureDetector gesture={gesture}>
       <Animated.View
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index 5a10a23f4..e573c2125 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -11,7 +11,7 @@ export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/
 export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/
 export const DEFAULT_FONT_SIZE = 16
-export const DEFAULT_UNLAY_STYLE = {
+export const HIDDEN_STYLE = {
   opacity: 0
 }
 
@@ -472,7 +472,7 @@ interface LayoutConfig {
 export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }: LayoutConfig) => {
   const layoutRef = useRef({})
   const hasLayoutRef = useRef(false)
-  const layoutStyle: Record<string, any> = !hasLayoutRef.current && hasSelfPercent ? DEFAULT_UNLAY_STYLE : {}
+  const layoutStyle: Record<string, any> = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}
   const layoutProps: Record<string, any> = {}
   const enableOffset = props['enable-offset']
   if (hasSelfPercent || onLayout || enableOffset) {