From 7928037185226b81b45501d6738056c9605db640 Mon Sep 17 00:00:00 2001
From: "huajingwen@didiglobal.com" <huajingwen@didiglobal.com>
Date: Wed, 4 Dec 2024 21:57:53 +0800
Subject: [PATCH] =?UTF-8?q?fix=20style=E6=9B=B4=E6=96=B0=20=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BBhooks=E6=B2=A1=E5=90=8C=E6=AD=A5=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/mpx-view.tsx | 11 ++++---
 .../components/react/useAnimationHooks.ts     | 30 ++++++++++++++++---
 2 files changed, 33 insertions(+), 8 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 49124d76b9..e7e2dd7c50 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -789,10 +789,13 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
   }
   const finalStyle = enableAnimation
-    ? useAnimationHooks({
-      animation,
-      style: viewStyle
-    })
+    ? [
+      viewStyle,
+      useAnimationHooks({
+        animation,
+        style: viewStyle
+      })
+    ]
     : viewStyle
 
   const innerProps = useInnerProps(props, {
diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index e59c846b60..55ee776db5 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -83,9 +83,31 @@ const InitialValue: ExtendedViewStyle = Object.assign({
 const TransformOrigin = 'transformOrigin'
 // transform
 const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
+// 多value解析
+const parseValues = (str: string, char = ' ') => {
+  let stack = 0
+  let temp = ''
+  const result = []
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '(') {
+      stack++
+    } else if (str[i] === ')') {
+      stack--
+    }
+    // 非括号内 或者 非分隔字符且非空
+    if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+      temp += str[i]
+    }
+    if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+      result.push(temp)
+      temp = ''
+    }
+  }
+  return result
+}
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 const parseTransform = (transformStr: string) => {
-  const values = transformStr.trim().split(/\s+/)
+  const values = parseValues(transformStr)
   const transform: {[propName: string]: string|number|number[]}[] = []
   values.forEach(item => {
     const match = item.match(/([/\w]+)\(([^)]+)\)/)
@@ -109,7 +131,7 @@ const parseTransform = (transformStr: string) => {
           break
         case 'matrix':
         case 'matrix3d':
-          transform.push({ [key]: val.split(',').map(val => +val) })
+          transform.push({ [key]: parseValues(val, ',').map(val => +val) })
           break
         case 'translate':
         case 'scale':
@@ -120,8 +142,8 @@ const parseTransform = (transformStr: string) => {
         {
           // 2 个以上的值处理
           key = key.replace('3d', '')
-          const vals = val.split(',', key === 'rotate' ? 4 : 3)
-          // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+          const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
+          // scale(.5) === scaleX(.5) scaleY(.5)
           if (vals.length === 1 && key === 'scale') {
             vals.push(vals[0])
           }