save

didi · Oct 18, 2024 · aa4ba0f · aa4ba0f
1 parent add7e79
commit aa4ba0f
Showing 1 changed file with 46 additions and 5 deletions.
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
@@ -22,6 +22,7 @@ import { StyleSheet, NativeSyntheticEvent, View, LayoutChangeEvent } from 'react
 import { getCustomEvent, injectCatchEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
+import { useTransformStyle, splitProps, splitStyle, DEFAULT_UNLAY_STYLE, wrapChildren } from './utils'
 import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler'
 import Animated, {
   useSharedValue,
@@ -55,6 +56,11 @@ interface MovableViewProps {
   'out-of-bounds'?: boolean;
   externalGesture?: Array<{ getNodeInstance: () => any }>;
   inertia?: boolean;
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
 }
 
 const styles = StyleSheet.create({
@@ -65,9 +71,11 @@ const styles = StyleSheet.create({
   }
 })
 
-const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewProps>((props: MovableViewProps, ref): JSX.Element => {
+const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewProps>((movableViewProps: MovableViewProps, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(movableViewProps)
   const layoutRef = useRef<any>({})
   const changeSource = useRef<any>('')
+  const hasLayoutRef = useRef(false)
 
   const propsRef = useRef<any>({})
   propsRef.current = (props || {}) as MovableViewProps
@@ -80,6 +88,11 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     disabled = false,
     animation = true,
     'out-of-bounds': outOfBounds = false,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     direction = 'none',
     externalGesture = [],
     style = {},
@@ -95,6 +108,17 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     catchtouchend
   } = props
 
+  const {
+    hasSelfPercent,
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { textStyle, innerStyle } = splitStyle(normalStyle)
+
   const offsetX = useSharedValue(x)
   const offsetY = useSharedValue(y)
 
@@ -254,6 +278,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   }, [])
 
   const onLayout = (e: LayoutChangeEvent) => {
+    hasLayoutRef.current = true
+    if (hasSelfPercent) {
+      const { width, height } = e?.nativeEvent?.layout || {}
+      setWidth(width || 0)
+      setHeight(height || 0)
+    }
     nodeRef.current?.measure((x: number, y: number, width: number, height: number) => {
       layoutRef.current = { x, y, width, height, offsetLeft: 0, offsetTop: 0 }
       setBoundary({ width, height })
@@ -269,6 +299,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         }
       })()
     })
+    props.onLayout && props.onLayout(e)
   }
 
   const extendEvent = useCallback((e: any) => {
@@ -338,13 +369,14 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       })
       .onTouchesMove((e: GestureTouchEvent) => {
         'worklet'
-        if (disabled) return
         isMoving.value = true
         const changedTouches = e.changedTouches[0] || { x: 0, y: 0 }
         if (isFirstTouch.value) {
           touchEvent.value = Math.abs(changedTouches.x - startPosition.value.x) > Math.abs(changedTouches.y - startPosition.value.y) ? 'htouchmove' : 'vtouchmove'
           isFirstTouch.value = false
         }
+        handleTriggerMove(e)
+        if (disabled) return
         const changeX = changedTouches.x - startPosition.value.x
         const changeY = changedTouches.y - startPosition.value.y
         if (direction === 'horizontal' || direction === 'all') {
@@ -365,7 +397,6 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             offsetY.value = newY
           }
         }
-        handleTriggerMove(e)
       })
       .onTouchesUp((e: GestureTouchEvent) => {
         'worklet'
@@ -438,10 +469,20 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       <Animated.View
         ref={nodeRef}
         onLayout={onLayout}
-        style={[styles.container, style, animatedStyles]}
+        style={[styles.container, innerStyle, animatedStyles, hasLayoutRef.current ? {} : DEFAULT_UNLAY_STYLE]}
         {...catchEventHandlers}
       >
-        {children}
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )
+      }
       </Animated.View>
     </GestureDetector>
   )