@mpxjs/webpack-plugin 2.9.62 → 2.9.64

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

@@ -6,7 +6,6 @@
  */
 import {
   JSX,
-  useRef,
   useState,
   forwardRef,
   useEffect,
@@ -15,19 +14,17 @@ import {
   Dispatch,
   SetStateAction
 } from 'react'
-
 import {
   View,
-  Text,
   StyleSheet,
   ViewStyle,
-  NativeSyntheticEvent,
-  TextStyle
+  NativeSyntheticEvent
 } from 'react-native'
+import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import Icon from './mpx-icon'
-import { every, splitStyle, isText, splitProps, throwReactWarning } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
 import { CheckboxGroupContext, LabelContext } from './context'
 
 interface Selection {
@@ -41,6 +38,11 @@ export interface CheckboxProps extends Selection {
   style?: ViewStyle & Record<string, any>
   groupValue?: Array<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
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
   catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
@@ -74,41 +76,38 @@ const styles = StyleSheet.create({
 })
 
 const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
-  (props, ref): JSX.Element => {
+  (checkboxProps, ref): JSX.Element => {
+    const { textProps, innerProps: props = {} } = splitProps(checkboxProps)
+
     const {
       value = '',
       disabled = false,
       checked = false,
       color = '#09BB07',
       style = {},
-      'enable-offset': enableOffset,
-      children,
+      'enable-var': enableVar,
+      'external-var-context': externalVarContext,
+      'parent-font-size': parentFontSize,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight,
       bindtap,
-      catchtap,
+      catchtap
     } = props
 
-    const layoutRef = useRef({})
-
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
 
-    const { textStyle, imageStyle, innerStyle } = splitStyle(style)
-
-    if (imageStyle) {
-      throwReactWarning('[Mpx runtime warn]: Checkbox does not support background image-related styles!')
-    }
-
     const groupContext = useContext(CheckboxGroupContext)
-    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined;
-    let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined;
+    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined
+    let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
     const defaultStyle = {
       ...styles.wrapper,
-      ...(disabled && styles.wrapperDisabled),
+      ...(disabled && styles.wrapperDisabled)
     }
 
-    const viewStyle = {
-      ...defaultStyle,
-      ...innerStyle
+    const styleObj = {
+      ...styles.container,
+      ...style
     }
 
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
@@ -133,46 +132,26 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       onChange(evt)
     }
 
+    const {
+      hasSelfPercent,
+      normalStyle,
+      hasVarDec,
+      varContextRef,
+      setWidth,
+      setHeight
+    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
     const { nodeRef } = useNodesRef(props, ref, {
       defaultStyle,
       change: onChange
     })
 
-    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 wrapChildren = (
-      children: ReactNode,
-      textStyle?: TextStyle
-    ) => {
-      if (!children) return children
-      const { textProps } = splitProps(props)
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-      if (every(children, (child) => isText(child))) {
-        if (textStyle || textProps) {
-          children = <Text key='checkboxTextWrap' style={textStyle || {}} {...(textProps || {})}>{children}</Text>
-        }
-      } else {
-        if (textStyle) {
-          throwReactWarning(
-            '[Mpx runtime warn]: Text style will be ignored unless every child of the Checkbox is Text node!'
-          )
-        }
-      }
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
 
-      return children
+    if (backgroundStyle) {
+      warn('Checkbox does not support background image-related styles!')
     }
 
     const labelContext = useContext(LabelContext)
@@ -190,12 +169,12 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       props,
       {
         ref: nodeRef,
-        style: styles.container,
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
         bindtap: onTap,
-        catchtap: catchTap,
-        ...(enableOffset ? { onLayout } : {})
+        catchtap: catchTap
       },
-      ['enable-offset'],
+      [],
       {
         layoutRef
       }
@@ -226,7 +205,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
 
     return (
       <View {...innerProps}>
-        <View style={viewStyle}>
+        <View style={defaultStyle}>
           <Icon
             type='success_no_circle'
             size={18}
@@ -234,7 +213,17 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
             style={isChecked ? styles.iconChecked : styles.icon}
           />
         </View>
-        {wrapChildren(children, textStyle)}
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )
+        }
       </View>
     )
   }

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

@@ -5,15 +5,21 @@
  * ✔ bindreset
  */
 
-import { View, LayoutChangeEvent } from 'react-native';
-import { JSX, useRef, forwardRef, ReactNode } from 'react';
+import { View } from 'react-native'
+import { JSX, useRef, forwardRef, ReactNode } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
-
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils'
 interface FormProps {
   style?: Record<string, any>;
   children: ReactNode;
+  'enable-offset'?: boolean;
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
   bindsubmit?: (evt: {
     detail: {
       value: any;
@@ -22,23 +28,37 @@ interface FormProps {
   bindreset?: () => void;
 }
 
-const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((props: FormProps, ref): JSX.Element => {
-  const { children, style } = props;
-  const layoutRef = useRef({})
+const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: FormProps, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(fromProps)
   const formValuesMap = useRef(new Map()).current
+  const {
+    style,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+
+  const {
+    hasSelfPercent,
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { textStyle, innerStyle } = splitStyle(normalStyle)
 
   const { nodeRef: formRef } = useNodesRef(props, ref)
 
-  const onLayout = (e: LayoutChangeEvent) => {
-    formRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-    })
-  }
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 
   const submit = () => {
     const { bindsubmit } = props
     const formValue: Record<string, any> = {}
-    for (let name of formValuesMap.keys()) {
+    for (const name of formValuesMap.keys()) {
       if (formValuesMap.get(name).getValue) {
         formValue[name] = formValuesMap.get(name).getValue()
       }
@@ -63,27 +83,35 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((props: FormPro
   }
 
   const innerProps = useInnerProps(props, {
+    style: { ...innerStyle, ...layoutStyle },
     ref: formRef,
-    style,
-    onLayout
+    ...layoutProps
   }, [
-    'children',
-    'style',
     'bindsubmit',
     'bindreset'
-  ], { layoutRef });
+  ], { layoutRef })
 
   return (
     <View
       {...innerProps}
     >
       <FormContext.Provider value={{ formValuesMap, submit, reset }}>
-        {children}
+        {
+          wrapChildren(
+            props,
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )
+      }
       </FormContext.Provider>
     </View>
-  );
+  )
 })
 
-_Form.displayName = 'mpx-form';
+_Form.displayName = 'mpx-form'
 
-export default _Form
+export default _Form

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

@@ -3,10 +3,11 @@
  * ✔ size
  * ✔ color
  */
-import { JSX, useRef, forwardRef } from 'react'
+import { JSX, forwardRef } from 'react'
 import { Text, TextStyle, Image } from 'react-native'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
+import { useLayout, useTransformStyle } from './utils'
 
 export type IconType =
   | 'success'
@@ -25,6 +26,11 @@ export interface IconProps {
   color?: string
   style?: TextStyle & 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
 }
 
 const IconTypeMap = new Map<IconType, string>([
@@ -46,49 +52,46 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
       size = 23,
       color,
       style = {},
-      'enable-offset': enableOffset
+      'enable-var': enableVar,
+      'external-var-context': externalVarContext,
+      'parent-font-size': parentFontSize,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight
     } = props
 
     const uri = IconTypeMap.get(type)
 
     const defaultStyle = { width: ~~size, height: ~~size }
 
-    const layoutRef = useRef({})
+    const styleObj = {
+      ...defaultStyle,
+      ...style
+    }
+
+    const {
+      hasSelfPercent,
+      normalStyle,
+      setWidth,
+      setHeight
+    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-    const { nodeRef } = useNodesRef(props, ref, {
-      defaultStyle
-    })
+    const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
 
-    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 { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
     const innerProps = useInnerProps(
       props,
       {
         ref: nodeRef,
         style: {
-          ...defaultStyle,
-          tintColor: color,
-          ...style
+          ...normalStyle,
+          ...layoutStyle,
+          tintColor: color
         },
         source: { uri },
-        ...(enableOffset ? { onLayout } : {})
+        ...layoutProps
       },
-      [
-        'enable-offset'
-      ],
+      [],
       {
         layoutRef
       }

package/lib/runtime/components/react/mpx-image/index.tsx

@@ -23,10 +23,11 @@ import {
   ImageErrorEventData,
   LayoutChangeEvent,
   DimensionValue,
-  ImageLoadEventData,
+  ImageLoadEventData
 } from 'react-native'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
+import { useLayout, useTransformStyle } from '../utils'
 
 export type Mode =
   | 'scaleToFill'
@@ -52,6 +53,11 @@ export interface ImageProps {
   svg?: boolean
   style?: ImageStyle & 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
   bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void
   binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void
 }
@@ -79,7 +85,7 @@ const cropMode: Mode[] = [
   'top left',
   'top right',
   'bottom left',
-  'bottom right',
+  'bottom right'
 ]
 
 const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
@@ -88,7 +94,7 @@ const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
   ['aspectFill', 'cover'],
   ['widthFix', 'stretch'],
   ['heightFix', 'stretch'],
-  ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch']),
+  ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch'])
 ])
 
 const isNumber = (value: DimensionValue) => typeof value === 'number'
@@ -109,21 +115,41 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     mode = 'scaleToFill',
     // svg = false,
     style = {},
-    'enable-offset': enableOffset,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     bindload,
     binderror
   } = props
 
-  const { width = DEFAULT_IMAGE_WIDTH, height = DEFAULT_IMAGE_HEIGHT } = style as ImageStyle
+  const defaultStyle = {
+    width: DEFAULT_IMAGE_WIDTH,
+    height: DEFAULT_IMAGE_HEIGHT
+  }
+
+  const styleObj = {
+    ...defaultStyle,
+    ...style,
+    overflow: 'hidden'
+  }
 
   const { nodeRef } = useNodesRef(props, ref, {
-    defaultStyle: {
-      width: DEFAULT_IMAGE_WIDTH,
-      height: DEFAULT_IMAGE_HEIGHT
-    }
+    defaultStyle
   })
 
-  const layoutRef = useRef({})
+  const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
+    setViewWidth(width)
+    setViewHeight(height)
+  }
+
+  const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout })
+
+  const { width, height } = normalStyle
+
   const preSrc = useRef<string | undefined>()
 
   const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch'
@@ -133,8 +159,8 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   const source: ImageSourcePropType = typeof src === 'string' ? { uri: src } : src
 
-  const [viewWidth, setViewWidth] = useState(isNumber(width) ? (width as number) : 0)
-  const [viewHeight, setViewHeight] = useState(isNumber(height) ? (height as number) : 0)
+  const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0)
+  const [viewHeight, setViewHeight] = useState(isNumber(height) ? height : 0)
   const [imageWidth, setImageWidth] = useState(0)
   const [imageHeight, setImageHeight] = useState(0)
   const [ratio, setRatio] = useState(0)
@@ -224,21 +250,6 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       )
   }
 
-  const onViewLayout = ({
-    nativeEvent: {
-      layout: { width, height },
-    },
-  }: LayoutChangeEvent) => {
-    setViewWidth(width)
-    setViewHeight(height)
-  }
-
-  const onImageLayout = () => {
-    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-    })
-  }
-
   useEffect(() => {
     if (!isWidthFixMode && !isHeightFixMode && !isCropMode) {
       setLoaded(true)
@@ -275,14 +286,18 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    ...(enableOffset ? { onLayout: onImageLayout } : {})
+    style: {
+      ...normalStyle,
+      ...layoutStyle,
+      ...(isHeightFixMode && { width: fixedWidth }),
+      ...(isWidthFixMode && { height: fixedHeight })
+    },
+    ...layoutProps
   },
-    [
-      'enable-offset'
-    ],
-    {
-      layoutRef
-    }
+  [],
+  {
+    layoutRef
+  }
   )
 
   // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) {
@@ -306,26 +321,17 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   // }
 
   return (
-    <View
-      style={{
-        width, height,
-        ...style,
-        ...(isHeightFixMode && { width: fixedWidth }),
-        ...(isWidthFixMode && { height: fixedHeight }),
-        overflow: 'hidden',
-      }}
-      onLayout={onViewLayout}>
+    <View {...innerProps}>
       {
         loaded && <RNImage
-          {...innerProps}
           source={source}
           resizeMode={resizeMode}
           onLoad={onImageLoad}
           onError={onImageError}
           style={{
             ...StyleSheet.absoluteFillObject,
-            width: !isCropMode ? '100%' : imageWidth,
-            height: !isCropMode ? '100%' : imageHeight,
+            width: isCropMode ? imageWidth : '100%',
+            height: isCropMode ? imageHeight : '100%',
             ...(isCropMode && cropModeStyle)
           }}
         />

package/lib/runtime/components/react/mpx-image/svg.tsx

@@ -10,11 +10,13 @@ interface SvgProps {
 }
 
 const Svg = ({ local = false, src, style, width, height }: SvgProps): JSX.Element => {
-  return local ? (
+  return local
+    ? (
     <WithLocalSvg style={style} asset={src as ImageSourcePropType} width={width} height={height} />
-  ) : (
+      )
+    : (
     <SvgCssUri style={style} uri={src as string} width={width} height={height} />
-  )
+      )
 }
 
 export default Svg