feat: adapt layout and transform

didi · Oct 18, 2024 · e4bf7a3 · e4bf7a3
1 parent d2eee88
commit e4bf7a3
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 416 deletions.
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
@@ -42,15 +42,13 @@ import {
   TextStyle,
   Animated,
   Easing,
-  NativeSyntheticEvent,
-  LayoutChangeEvent
+  NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { splitProps, splitStyle, useTransformStyle } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext } from './context'
-import { wrapChildren } from './common'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -78,6 +76,9 @@ export interface ButtonProps {
   'enable-offset'?: boolean,
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   style?: ViewStyle & TextStyle & Record<string, any>
   children: ReactNode
   bindgetuserinfo?: (userInfo: any) => void
@@ -196,10 +197,12 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     'hover-start-time': hoverStartTime = 20,
     'hover-stay-time': hoverStayTime = 70,
     'open-type': openType,
-    'enable-offset': enableOffset,
     'form-type': formType,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     style = {},
     children,
     bindgetuserinfo,
@@ -226,8 +229,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     hoverStayTimer: undefined
   })
 
-  const layoutRef = useRef({})
-
   const [isHover, setIsHover] = useState(false)
 
   const isMiniSize = size === 'mini'
@@ -288,13 +289,17 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   }
 
   const {
+    hasSelfPercent,
     normalStyle,
-    hasPercent,
     hasVarDec,
     varContextRef,
-    setContainerWidth,
-    setContainerHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext })
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
 
@@ -366,55 +371,32 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     handleFormTypeFn()
   }
 
-  const { nodeRef } = useNodesRef(props, ref, {
-    defaultStyle
-  })
-
-  const onLayout = (res: LayoutChangeEvent) => {
-    if (hasPercent) {
-      const { width, height } = res?.nativeEvent?.layout || {}
-      setContainerWidth(width || 0)
-      setContainerHeight(height || 0)
-    }
-    if (enableOffset) {
-      nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-        layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-      })
-    }
-  }
-
   const innerProps = useInnerProps(
     props,
     {
       ref: nodeRef,
+      style: { ...innerStyle, ...layoutStyle },
+      ...layoutProps,
       bindtouchstart: onTouchStart,
       bindtouchend: onTouchEnd,
-      bindtap: onTap,
-      ...(enableOffset || hasPercent ? { onLayout } : {})
+      bindtap: onTap
     },
-    [
-      'enable-offset'
-    ],
+    [],
     {
       layoutRef,
       disableTap: disabled
     }
   )
 
   return (
-    <View
-      {...innerProps}
-      style={innerStyle}
-    >
+    <View {...innerProps}>
       {loading && <Loading alone={!children} />}
       {
         wrapChildren(
           props,
           {
             hasVarDec,
-            varContext: varContextRef.current
-          },
-          {
+            varContext: varContextRef.current,
             textStyle,
             textProps
           }

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx
@@ -1,32 +1,23 @@
 /**
  * ✔ bindchange
  */
-import {
-  JSX,
-  useRef,
-  forwardRef,
-  ReactNode,
-  useContext
-} from 'react'
-import {
-  View,
-  NativeSyntheticEvent,
-  ViewStyle,
-  LayoutChangeEvent
-} from 'react-native'
+import { JSX, useRef, forwardRef, ReactNode, useContext } from 'react'
+import { View, NativeSyntheticEvent, ViewStyle } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { FormContext, FormFieldValue, CheckboxGroupContext, GroupValue } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { useTransformStyle } from './utils'
-import { wrapChildren } from './common'
+import { useLayout, useTransformStyle, wrapChildren } from './utils'
 
 export interface CheckboxGroupProps {
   name: string
   style?: ViewStyle & Record<string, any>
   'enable-offset'?: boolean
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   children: ReactNode
   bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
@@ -37,13 +28,14 @@ const CheckboxGroup = forwardRef<
 >((props, ref): JSX.Element => {
   const {
     style = {},
-    'enable-offset': enableOffset,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     bindchange
   } = props
 
-  const layoutRef = useRef({})
   const formContext = useContext(FormContext)
 
   let formValuesMap: Map<string, FormFieldValue> | undefined
@@ -65,39 +57,17 @@ const CheckboxGroup = forwardRef<
   }
 
   const {
+    hasSelfPercent,
     normalStyle,
-    hasPercent,
     hasVarDec,
     varContextRef,
-    setContainerWidth,
-    setContainerHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext })
-
-  const { nodeRef } = useNodesRef(props, ref, {
-    defaultStyle
-  })
-
-  const onLayout = (res: LayoutChangeEvent) => {
-    if (hasPercent) {
-      const { width, height } = res?.nativeEvent?.layout || {}
-      setContainerWidth(width || 0)
-      setContainerHeight(height || 0)
-    }
-    if (enableOffset) {
-      nodeRef.current?.measure(
-        (
-          x: number,
-          y: number,
-          width: number,
-          height: number,
-          offsetLeft: number,
-          offsetTop: number
-        ) => {
-          layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-        }
-      )
-    }
-  }
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const getSelectionValue = (): string[] => {
     const arr: string[] = []
@@ -151,10 +121,10 @@ const CheckboxGroup = forwardRef<
     props,
     {
       ref: nodeRef,
-      style: normalStyle,
-      ...(enableOffset || hasPercent ? { onLayout } : {})
+      style: { ...normalStyle, ...layoutStyle },
+      ...layoutProps
     },
-    ['enable-offset'],
+    [],
     {
       layoutRef
     }