From 698f8057cfad1a4191950b3d4e0117d2d07ce685 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Tue, 24 Dec 2024 22:46:03 +0800
Subject: [PATCH] fix(*): fix hover style.

---
 .../lib/runtime/components/react/mpx-view.tsx | 36 ++++++++-----------
 .../components/react/useAnimationHooks.ts     | 14 ++++++--
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index dfe12e0927..2cc8e276ae 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -643,7 +643,7 @@ function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string,
 
 interface WrapChildrenConfig {
   hasVarDec: boolean
-  enableBackground: boolean
+  enableBackground?: boolean
   textStyle?: TextStyle
   backgroundStyle?: ExtendedViewStyle
   varContext?: Record<string, any>
@@ -653,6 +653,11 @@ interface WrapChildrenConfig {
 }
 
 function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }: WrapChildrenConfig) {
+  enableBackground = enableBackground || !!backgroundStyle
+  const enableBackgroundRef = useRef(enableBackground)
+  if (enableBackgroundRef.current !== enableBackground) {
+    error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
+  }
   const children = wrapChildren(props, {
     hasVarDec,
     varContext,
@@ -715,12 +720,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
-  enableBackground = enableBackground || !!backgroundStyle
-  const enableBackgroundRef = useRef(enableBackground)
-  if (enableBackgroundRef.current !== enableBackground) {
-    error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
-  }
-
   const nodeRef = useRef(null)
   useNodesRef<View, _ViewProps>(props, ref, nodeRef, {
     style: normalStyle
@@ -734,22 +733,17 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const viewStyle = extendObject({}, innerStyle, layoutStyle)
 
-  enableAnimation = enableAnimation || !!animation
-  const enableAnimationRef = useRef(enableAnimation)
-  if (enableAnimationRef.current !== enableAnimation) {
-    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
-  }
-  const finalStyle = enableAnimationRef.current
-    ? [viewStyle, useAnimationHooks({
-        animation,
-        style: viewStyle
-      })]
-    : viewStyle
+  const { enableStyleAnimation, animationStyle } = useAnimationHooks({
+    enableAnimation,
+    animation,
+    style: viewStyle
+  })
+  
   const innerProps = useInnerProps(
     props,
     extendObject({
       ref: nodeRef,
-      style: finalStyle
+      style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
     },
     layoutProps
     ), [
@@ -763,7 +757,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const childNode = wrapWithChildren(props, {
     hasVarDec,
-    enableBackground: enableBackgroundRef.current,
+    enableBackground,
     textStyle,
     backgroundStyle,
     varContext: varContextRef.current,
@@ -773,7 +767,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   })
 
   const BaseComponent = enableAnimation
-    ? createElement(Animated.View, extendObject({}, innerProps, { style: finalStyle }), childNode)
+    ? createElement(Animated.View, innerProps, childNode)
     : createElement(View, innerProps, childNode)
 
   return enableHoverStyle
diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index 77d1ac0503..860bb79a08 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -13,6 +13,7 @@ import {
   WithTimingConfig,
   AnimationCallback
 } from 'react-native-reanimated'
+import { error } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -166,8 +167,17 @@ const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
   })
 }
 
-export default function useAnimationHooks<T, P> (props: _ViewProps) {
-  const { style = {}, animation } = props
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
+  const { style = {}, animation, enableAnimation } = props
+
+  const enableStyleAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableStyleAnimation)
+  if (enableAnimationRef.current !== enableStyleAnimation) {
+    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+
+  if (!enableStyleAnimation) return { enableStyleAnimation }
+  
   const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1