@mpxjs/webpack-plugin 2.9.62 → 2.9.65

package/lib/runtime/components/react/mpx-swiper-item.tsx

@@ -1,28 +1,54 @@
-import { View } from 'react-native'
+import { View, LayoutChangeEvent } from 'react-native'
 import { ReactNode, forwardRef, useRef } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
 
 interface SwiperItemProps {
   'item-id'?: string;
   'enable-offset'?: boolean;
+  'enable-var': boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
   children?: ReactNode;
   style?: Object;
 }
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
-  const { children, 'enable-offset': enableOffset, style } = props
-  const layoutRef = useRef({})
-  const { nodeRef } = useNodesRef(props, ref, {})
+  const {
+    'enable-offset': enableOffset,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    style
+  } = props
 
-  const onLayout = () => {
-    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-    })
-  }
+  const { textProps } = splitProps(props)
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef, {})
+
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext })
+  const { textStyle, innerStyle } = splitStyle(normalStyle)
+
+  const {
+    // 存储layout布局信息
+    layoutRef,
+    layoutProps,
+    layoutStyle
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
 
   const innerProps = useInnerProps(props, {
-    ...(enableOffset ? { onLayout } : {}),
+    style: { ...innerStyle, ...layoutStyle },
+    ref: nodeRef,
+    ...layoutProps
   }, [
     'children',
     'enable-offset'
@@ -30,15 +56,23 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
 
   return (
     <View
-      ref={nodeRef}
       data-itemId={props['item-id']}
-      style={[style]}
       {...innerProps}>
-      {children}
+       {
+        wrapChildren(
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+          }
+        )
+      }
     </View>
   )
 })
 
-_SwiperItem.displayName = 'mpx-swiper-item';
+_SwiperItem.displayName = 'mpx-swiper-item'
 
 export default _SwiperItem

package/lib/runtime/components/react/mpx-switch.tsx

@@ -4,15 +4,15 @@
  * ✔ disabled
  * ✔ color
  */
-import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent } from 'react-native'
-import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react';
+import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
+import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react'
+import { warn } from '@mpxjs/utils'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 
 import CheckBox from './mpx-checkbox'
 import { FormContext, FormFieldValue } from './context'
-
-import { throwReactWarning } from './utils'
+import { useTransformStyle, useLayout } from './utils'
 
 interface _SwitchProps extends SwitchProps {
   style?: ViewStyle
@@ -21,7 +21,11 @@ interface _SwitchProps extends SwitchProps {
   type: 'switch' | 'checkbox'
   disabled: boolean
   color: string
-  'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  'external-var-context'?: Record<string, any>
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   catchchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
@@ -33,15 +37,18 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     type = 'switch',
     disabled = false,
     color = '#04BE02',
-    'enable-offset': enableOffset,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+
     bindchange,
-    catchchange,
+    catchchange
   } = props
 
   const [isChecked, setIsChecked] = useState<boolean>(checked)
 
-  const layoutRef = useRef({})
-
   const changeHandler = bindchange || catchchange
 
   let formValuesMap: Map<string, FormFieldValue> | undefined
@@ -52,11 +59,31 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     formValuesMap = formContext.formValuesMap
   }
 
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+
   useEffect(() => {
     setIsChecked(checked)
   }, [checked])
 
-  const { nodeRef } = useNodesRef<Switch, _SwitchProps>(props, ref)
+  const nodeRef = useRef(null)
+  useNodesRef<Switch, _SwitchProps>(props, ref, nodeRef)
+
+  const {
+    layoutRef,
+    layoutStyle,
+    layoutProps
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const onChange = (evt: NativeSyntheticEvent<TouchEvent> | boolean, { checked }: { checked?: boolean } = {}) => {
     if (type === 'switch') {
@@ -78,23 +105,18 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
 
   if (formValuesMap) {
     if (!props.name) {
-      throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.')
+      warn('If a form component is used, the name attribute is required.')
     } else {
       formValuesMap.set(props.name, { getValue, resetValue })
     }
   }
 
-  const onLayout = () => {
-    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,
-    ...enableOffset ? { onLayout } : {},
+    style: { ...normalStyle, ...layoutStyle },
+    ...layoutProps,
     ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}
   }, [
-    'style',
     'checked',
     'disabled',
     'type',
@@ -107,19 +129,19 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     return <CheckBox
       {...innerProps}
       color={color}
-      style={style}
+      style={normalStyle}
       checked={isChecked}
     />
   }
 
-  return (<Switch
+  return <Switch
     {...innerProps}
-    style={style}
+    style={normalStyle}
     value={isChecked}
-    trackColor={{ false: "#FFF", true: color }}
-    thumbColor={isChecked ? "#FFF" : "#f4f3f4"}
+    trackColor={{ false: '#FFF', true: color }}
+    thumbColor={isChecked ? '#FFF' : '#f4f3f4'}
     ios_backgroundColor="#FFF"
-  />)
+  />
 })
 
 _Switch.displayName = 'mpx-switch'

package/lib/runtime/components/react/mpx-text.tsx

@@ -5,82 +5,75 @@
  * ✘ decode
  */
 import { Text, TextStyle, TextProps } from 'react-native'
-import { useRef, useEffect, forwardRef, ReactNode, JSX } from 'react'
+import { useRef, forwardRef, ReactNode, JSX } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { transformTextStyle, DEFAULT_STYLE } from './utils'
+import { useTransformStyle, wrapChildren } from './utils'
 
 interface _TextProps extends TextProps {
   style?: TextStyle
   children?: ReactNode
   selectable?: boolean
-  'enable-offset'?: boolean
   'user-select'?: boolean
-  userSelect?: boolean
-  ['disable-default-style']?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
 }
 
 const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref): JSX.Element => {
   const {
     style = {},
-    children,
     selectable,
-    'enable-offset': enableOffset,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
     'user-select': userSelect,
-    'disable-default-style': disableDefaultStyle = false,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
   } = props
 
   const layoutRef = useRef({})
 
-  let defaultStyle = {}
-
-  if (!disableDefaultStyle) {
-    defaultStyle = DEFAULT_STYLE
-    transformTextStyle(style)
-  }
-
-  const { nodeRef } = useNodesRef<Text, _TextProps>(props, ref, {
-    defaultStyle
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
   })
 
+  const nodeRef = useRef(null)
+  useNodesRef<Text, _TextProps>(props, ref, nodeRef)
+
   const innerProps = useInnerProps(props, {
-    ref: nodeRef
+    ref: nodeRef,
+    style: normalStyle,
+    selectable: !!selectable || !!userSelect
   }, [
-    'style',
-    'children',
-    'selectable',
-    'user-select',
-    'useInherit',
-    'enable-offset'
+    'user-select'
   ], {
     layoutRef
   })
 
-  useEffect(() => {
-    let measureTimeout: ReturnType<typeof setTimeout> | null = null
-    if (enableOffset) {
-      measureTimeout = setTimeout(() => {
-        nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-          layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-        })
-      })
-      return () => {
-        if (measureTimeout) {
-          clearTimeout(measureTimeout)
-          measureTimeout = null
-        }
-      }
-    }
-  }, [])
-
-
   return (
     <Text
-      style={{ ...defaultStyle, ...style }}
-      selectable={!!selectable || !!userSelect}
       {...innerProps}
     >
-      {children}
+      {
+        wrapChildren(
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current
+          }
+        )
+      }
     </Text>
   )
 })

package/lib/runtime/components/react/mpx-textarea.tsx

@@ -27,7 +27,7 @@ const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
       'type',
       'password',
       'multiline',
-      'confirm-hold',
+      'confirm-hold'
     ])
     return (
       <Input