@mpxjs/webpack-plugin 2.9.62 → 2.9.65

package/lib/react/style-helper.js

@@ -2,8 +2,10 @@ const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
 const getRulesRunner = require('../platform/index')
 const dash2hump = require('../utils/hump-dash').dash2hump
-const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
-const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
+const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const hairlineRegExp = /^\s*hairlineWidth\s*$/
+const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
 function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
   const classMap = {}
@@ -15,11 +17,11 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
   function formatValue (value) {
     let matched
     let needStringify = true
-    if ((matched = pxRegExp.exec(value))) {
+    if ((matched = numberRegExp.exec(value))) {
       value = matched[1]
       needStringify = false
-    } else if ((matched = rpxRegExp.exec(value))) {
-      value = `this.__rpx(${matched[1]})`
+    } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) {
+      value = `global.__formatValue(${JSON.stringify(value)})`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value
@@ -38,13 +40,13 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
     const classMapValue = {}
     rule.walkDecls(({ prop, value }) => {
       if (cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
-      let newData = rulesRunner({ prop, value })
+      let newData = rulesRunner({ prop, value, selector: rule.selector })
       if (!newData) return
       if (!Array.isArray(newData)) {
         newData = [newData]
       }
       newData.forEach(item => {
-        prop = dash2hump(item.prop)
+        prop = varRegExp.test(item.prop) ? item.prop : dash2hump(item.prop)
         value = item.value
         if (Array.isArray(value)) {
           value = value.map(val => {

package/lib/runtime/components/react/context.ts

@@ -1,4 +1,4 @@
-import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
 import { NativeSyntheticEvent } from 'react-native'
 
 export type LabelContextValue = MutableRefObject<{
@@ -15,14 +15,14 @@ export interface GroupContextValue {
 }
 
 export interface FormFieldValue {
-  getValue: () => any;
-  resetValue: ({ newVal, type }: { newVal?: any; type?: string }) => void;
+  getValue: () => any
+  resetValue: ({ newVal, type }: { newVal?: any; type?: string }) => void
 }
 
 export interface FormContextValue {
-  formValuesMap: Map<string, FormFieldValue>;
-  submit: () => void;
-  reset: () => void;
+  formValuesMap: Map<string, FormFieldValue>
+  submit: () => void
+  reset: () => void
 }
 
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
@@ -35,4 +35,6 @@ export const RadioGroupContext = createContext<GroupContextValue | null>(null)
 
 export const LabelContext = createContext<LabelContextValue | null>(null)
 
-export const PickerContext = createContext(null)
+export const PickerContext = createContext(null)
+
+export const VarContext = createContext({})

package/lib/runtime/components/react/dist/context.js

@@ -5,3 +5,4 @@ export const CheckboxGroupContext = createContext(null);
 export const RadioGroupContext = createContext(null);
 export const LabelContext = createContext(null);
 export const PickerContext = createContext(null);
+export const VarContext = createContext({});

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -71,7 +71,7 @@ export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, p
         preventDefault: oe.preventDefault
     };
 };
-const useInnerProps = (props = {}, additionalProps = {}, removeProps = [], rawConfig) => {
+const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], rawConfig) => {
     const ref = useRef({
         startTimer: {
             bubble: null,
@@ -91,6 +91,17 @@ const useInnerProps = (props = {}, additionalProps = {}, removeProps = [], rawCo
     const propsRef = useRef({});
     const eventConfig = {};
     const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false };
+    const removeProps = [
+        'children',
+        'enable-background',
+        'enable-offset',
+        'enable-var',
+        'external-var-context',
+        'parent-font-size',
+        'parent-width',
+        'parent-height',
+        ...userRemoveProps
+    ];
     propsRef.current = { ...props, ...additionalProps };
     for (const key in eventConfigMap) {
         if (propsRef.current[key]) {

package/lib/runtime/components/react/dist/mpx-button.jsx

@@ -35,21 +35,21 @@
  * ✔ bindtap
  */
 import { useEffect, useRef, useState, forwardRef, useContext } from 'react';
-import { View, Text, StyleSheet, Animated, Easing, } from 'react-native';
-import { splitStyle, isText, every, splitProps, throwReactWarning, transformTextStyle } from './utils';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext } from './context';
-import { isEmptyObject } from '@mpxjs/utils';
 const LOADING_IMAGE_URI = 'data:image/png;base64,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';
 const TypeColorMap = {
     default: ['#F8F8F8', '#DEDEDE', '35,35,35', '#F7F7F7'],
     primary: ['#1AAD19', '#179B16', '26,173,25', '#9ED99D'],
-    warn: ['#E64340', '#CE3C39', '230,67,64', '#EC8B89'],
+    warn: ['#E64340', '#CE3C39', '230,67,64', '#EC8B89']
 };
 const OpenTypeEventsMap = new Map([
     ['share', 'onShareAppMessage'],
-    ['getUserInfo', 'onUserInfo'],
+    ['getUserInfo', 'onUserInfo']
 ]);
 const styles = StyleSheet.create({
     button: {
@@ -63,35 +63,33 @@ const styles = StyleSheet.create({
         marginHorizontal: 'auto' // 按钮默认居中
     },
     buttonMini: {
-        height: 30,
+        height: 30
     },
     text: {
         fontSize: 18,
-        color: '#000000',
+        color: '#000000'
     },
     textMini: {
-        fontSize: 13,
+        fontSize: 13
     },
     loading: {
         width: 20,
-        height: 20,
-    },
+        height: 20
+    }
 });
 const getOpenTypeEvent = (openType) => {
-    // @ts-ignore
-    if (!global?.__mpx?.config?.rnConfig) {
-        throwReactWarning('[Mpx runtime warn]: Environment not supported');
+    if (!global.__mpx?.config?.rnConfig) {
+        warn('Environment not supported');
         return;
     }
     const eventName = OpenTypeEventsMap.get(openType);
     if (!eventName) {
-        throwReactWarning(`[Mpx runtime warn]: open-type not support ${openType}`);
+        warn(`open-type not support ${openType}`);
         return;
     }
-    // @ts-ignore
-    const event = global.__mpx.config.rnConfig?.openTypeHandler?.[eventName];
+    const event = global.__mpx.config.rnConfig.openTypeHandler?.[eventName];
     if (!event) {
-        throwReactWarning(`[Mpx runtime warn]: Unregistered ${eventName} event`);
+        warn(`Unregistered ${eventName} event`);
         return;
     }
     return event;
@@ -100,7 +98,7 @@ const Loading = ({ alone = false }) => {
     const image = useRef(new Animated.Value(0)).current;
     const rotate = image.interpolate({
         inputRange: [0, 1],
-        outputRange: ['0deg', '360deg'],
+        outputRange: ['0deg', '360deg']
     });
     useEffect(() => {
         const animation = Animated.loop(Animated.timing(image, {
@@ -108,23 +106,23 @@ const Loading = ({ alone = false }) => {
             duration: 1000,
             easing: Easing.linear,
             useNativeDriver: true,
-            isInteraction: false,
+            isInteraction: false
         }));
         animation.start();
         return () => {
             animation.stop();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const loadingStyle = {
         ...styles.loading,
         transform: [{ rotate }],
-        marginRight: alone ? 0 : 5,
+        marginRight: alone ? 0 : 5
     };
     return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }}/>;
 };
-const Button = forwardRef((props, ref) => {
-    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'enable-offset': enableOffset, 'form-type': formType, style = {}, children, bindgetuserinfo, bindtap, bindtouchstart, bindtouchend, } = props;
+const Button = forwardRef((buttonProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(buttonProps);
+    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap, bindtouchstart, bindtouchend } = props;
     const formContext = useContext(FormContext);
     let submitFn;
     let resetFn;
@@ -134,17 +132,11 @@ const Button = forwardRef((props, ref) => {
     }
     const refs = useRef({
         hoverStartTimer: undefined,
-        hoverStayTimer: undefined,
+        hoverStayTimer: undefined
     });
-    const layoutRef = useRef({});
     const [isHover, setIsHover] = useState(false);
     const isMiniSize = size === 'mini';
     const applyHoverEffect = isHover && hoverClass !== 'none';
-    const { textStyle, imageStyle, innerStyle } = splitStyle(style);
-    const { textStyle: hoverTextStyle, imageStyle: hoverImageStyle, innerStyle: hoverInnerStyle } = splitStyle(hoverStyle);
-    if (imageStyle || hoverImageStyle) {
-        throwReactWarning('[Mpx runtime warn]: Button does not support background image-related styles!');
-    }
     const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
     const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color;
     const plainBorderColor = disabled
@@ -165,18 +157,35 @@ const Button = forwardRef((props, ref) => {
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: plain ? plainBorderColor : normalBorderColor,
-        backgroundColor: plain ? 'transparent' : normalBackgroundColor,
+        backgroundColor: plain ? 'transparent' : normalBackgroundColor
     };
     const defaultViewStyle = {
         ...styles.button,
         ...(isMiniSize && styles.buttonMini),
-        ...viewStyle,
+        ...viewStyle
     };
     const defaultTextStyle = {
         ...styles.text,
         ...(isMiniSize && styles.textMini),
-        color: plain ? plainTextColor : normalTextColor,
+        color: plain ? plainTextColor : normalTextColor
     };
+    const defaultStyle = {
+        ...defaultViewStyle,
+        ...defaultTextStyle
+    };
+    const styleObj = {
+        ...defaultStyle,
+        ...style,
+        ...(applyHoverEffect && hoverStyle)
+    };
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Button does not support background image-related styles!');
+    }
     const handleOpenTypeEvent = (evt) => {
         if (!openType)
             return;
@@ -184,7 +193,7 @@ const Button = forwardRef((props, ref) => {
         if (openType === 'share') {
             handleEvent && handleEvent({
                 from: 'button',
-                target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+                target: getCustomEvent('tap', evt, { layoutRef }, props).target
             });
         }
         if (openType === 'getUserInfo' && handleEvent && bindgetuserinfo) {
@@ -237,54 +246,24 @@ const Button = forwardRef((props, ref) => {
         handleOpenTypeEvent(evt);
         handleFormTypeFn();
     };
-    function wrapChildren(children, defaultTextStyle, textStyle) {
-        if (!children)
-            return children;
-        const hasTextStyle = !isEmptyObject(textStyle);
-        const { textProps } = splitProps(props);
-        if (every(children, (child) => isText(child))) {
-            transformTextStyle(textStyle);
-            children = <Text key='buttonTextWrap' style={{ ...defaultTextStyle, ...textStyle }} {...(textProps || {})}>{children}</Text>;
-        }
-        else {
-            if (hasTextStyle)
-                throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Button is Text node!');
-        }
-        return children;
-    }
-    const { nodeRef } = useNodesRef(props, ref, {
-        defaultStyle: {
-            ...defaultViewStyle,
-            ...defaultTextStyle,
-            ...textStyle
-        }
-    });
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            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 ? { onLayout } : {}),
-    }, [
-        'enable-offset'
-    ], {
+        bindtap: onTap
+    }, [], {
         layoutRef,
         disableTap: disabled
     });
-    return (<View {...innerProps} style={{
-            ...defaultViewStyle,
-            ...innerStyle,
-            ...(applyHoverEffect && hoverInnerStyle),
-        }}>
+    return (<View {...innerProps}>
       {loading && <Loading alone={!children}/>}
-      {wrapChildren(children, defaultTextStyle, {
-            ...textStyle,
-            ...(applyHoverEffect && hoverTextStyle),
+      {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
         })}
     </View>);
 });

package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx

@@ -3,13 +3,13 @@
  */
 import { useRef, forwardRef, useContext } from 'react';
 import { View } from 'react-native';
+import { warn } from '@mpxjs/utils';
 import { FormContext, CheckboxGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { throwReactWarning } from './utils';
+import { useLayout, useTransformStyle, wrapChildren } from './utils';
 const CheckboxGroup = forwardRef((props, ref) => {
-    const { style = {}, 'enable-offset': enableOffset, children, bindchange } = props;
-    const layoutRef = useRef({});
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindchange } = props;
     const formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
@@ -18,20 +18,19 @@ const CheckboxGroup = forwardRef((props, ref) => {
     const groupValue = useRef({}).current;
     const defaultStyle = {
         flexDirection: 'row',
-        flexWrap: 'wrap',
-        ...style
+        flexWrap: 'wrap'
     };
-    const { nodeRef } = useNodesRef(props, ref, {
-        defaultStyle
-    });
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
+    const styleObj = {
+        ...defaultStyle,
+        ...style
     };
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const getSelectionValue = () => {
         const arr = [];
-        for (let key in groupValue) {
+        for (const key in groupValue) {
             if (groupValue[key].checked) {
                 arr.push(key);
             }
@@ -49,7 +48,7 @@ const CheckboxGroup = forwardRef((props, ref) => {
     };
     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 });
@@ -66,14 +65,17 @@ const CheckboxGroup = forwardRef((props, ref) => {
     };
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: defaultStyle,
-        ...(enableOffset ? { onLayout } : {})
-    }, ['enable-offset'], {
+        style: { ...normalStyle, ...layoutStyle },
+        ...layoutProps
+    }, [], {
         layoutRef
     });
     return (<View {...innerProps}>
       <CheckboxGroupContext.Provider value={{ groupValue, notifyChange }}>
-        {children}
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current
+        })}
       </CheckboxGroupContext.Provider>
     </View>);
 });

package/lib/runtime/components/react/dist/mpx-checkbox.jsx

@@ -4,12 +4,13 @@
  * ✔ checked
  * ✔ color
  */
-import { useRef, useState, forwardRef, useEffect, useContext } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { useState, useRef, forwardRef, useEffect, useContext } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef 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';
 const styles = StyleSheet.create({
     container: {
@@ -37,24 +38,20 @@ const styles = StyleSheet.create({
         opacity: 1
     }
 });
-const Checkbox = forwardRef((props, ref) => {
-    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-offset': enableOffset, children, bindtap, catchtap, } = props;
-    const layoutRef = useRef({});
+const Checkbox = forwardRef((checkboxProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(checkboxProps);
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, catchtap } = props;
     const [isChecked, setIsChecked] = useState(!!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;
     let notifyChange;
     const defaultStyle = {
         ...styles.wrapper,
-        ...(disabled && styles.wrapperDisabled),
+        ...(disabled && styles.wrapperDisabled)
     };
-    const viewStyle = {
-        ...defaultStyle,
-        ...innerStyle
+    const styleObj = {
+        ...styles.container,
+        ...style
     };
     const onChange = (evt) => {
         if (disabled)
@@ -78,31 +75,17 @@ const Checkbox = forwardRef((props, ref) => {
         catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    const { nodeRef } = useNodesRef(props, ref, {
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle,
         change: onChange
     });
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
-    const wrapChildren = (children, textStyle) => {
-        if (!children)
-            return children;
-        const { textProps } = splitProps(props);
-        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!');
-            }
-        }
-        return children;
-    };
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Checkbox does not support background image-related styles!');
+    }
     const labelContext = useContext(LabelContext);
     if (groupContext) {
         groupValue = groupContext.groupValue;
@@ -113,11 +96,11 @@ const Checkbox = forwardRef((props, ref) => {
     }
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: styles.container,
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
         bindtap: onTap,
-        catchtap: catchTap,
-        ...(enableOffset ? { onLayout } : {})
-    }, ['enable-offset'], {
+        catchtap: catchTap
+    }, [], {
         layoutRef
     });
     useEffect(() => {
@@ -142,10 +125,15 @@ const Checkbox = forwardRef((props, ref) => {
         }
     }, [checked]);
     return (<View {...innerProps}>
-        <View style={viewStyle}>
+        <View style={defaultStyle}>
           <Icon type='success_no_circle' size={18} color={disabled ? '#ADADAD' : color} style={isChecked ? styles.iconChecked : styles.icon}/>
         </View>
-        {wrapChildren(children, textStyle)}
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
       </View>);
 });
 Checkbox.displayName = 'mpx-checkbox';

package/lib/runtime/components/react/dist/mpx-form.jsx

@@ -9,20 +9,20 @@ import { useRef, forwardRef } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import { FormContext } from './context';
-const _Form = forwardRef((props, ref) => {
-    const { children, style } = props;
-    const layoutRef = useRef({});
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils';
+const _Form = forwardRef((fromProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(fromProps);
     const formValuesMap = useRef(new Map()).current;
-    const { nodeRef: formRef } = useNodesRef(props, ref);
-    const onLayout = (e) => {
-        formRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
+    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 formRef = useRef(null);
+    useNodesRef(props, ref, formRef);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
     const submit = () => {
         const { bindsubmit } = props;
         const formValue = {};
-        for (let name of formValuesMap.keys()) {
+        for (const name of formValuesMap.keys()) {
             if (formValuesMap.get(name).getValue) {
                 formValue[name] = formValuesMap.get(name).getValue();
             }
@@ -40,18 +40,21 @@ const _Form = forwardRef((props, ref) => {
         formValuesMap.forEach(item => item.resetValue());
     };
     const innerProps = useInnerProps(props, {
+        style: { ...innerStyle, ...layoutStyle },
         ref: formRef,
-        style,
-        onLayout
+        ...layoutProps
     }, [
-        'children',
-        'style',
         'bindsubmit',
         'bindreset'
     ], { layoutRef });
     return (<View {...innerProps}>
       <FormContext.Provider value={{ formValuesMap, submit, reset }}>
-        {children}
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
       </FormContext.Provider>
     </View>);
 });