@mpxjs/webpack-plugin 2.9.62 → 2.9.64

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,34 @@ 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 } = useNodesRef(props, ref, { 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 +192,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 +245,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,18 @@ 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 } = useNodesRef(props, ref, { 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 +47,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 +64,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, 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,16 @@ const Checkbox = forwardRef((props, ref) => {
         catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
         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, 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 +95,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 +124,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,19 @@ 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 { 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) => {
-        formRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            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 = {};
-        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 +39,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>);
 });

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

@@ -3,10 +3,11 @@
  * ✔ size
  * ✔ color
  */
-import { useRef, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Image } from 'react-native';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef';
+import { useLayout, useTransformStyle } from './utils';
 const IconTypeMap = new Map([
     ['success', 'data:image/png;base64,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'],
     ['success_no_circle', 'data:image/png;base64,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'],
@@ -19,30 +20,26 @@ const IconTypeMap = new Map([
     ['clear', 'data:image/png;base64,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']
 ]);
 const Icon = forwardRef((props, ref) => {
-    const { type, size = 23, color, style = {}, 'enable-offset': enableOffset } = props;
+    const { type, size = 23, color, style = {}, '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 { 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, 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 innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: {
-            ...defaultStyle,
-            tintColor: color,
-            ...style
+            ...normalStyle,
+            ...layoutStyle,
+            tintColor: color
         },
         source: { uri },
-        ...(enableOffset ? { onLayout } : {})
-    }, [
-        'enable-offset'
-    ], {
+        ...layoutProps
+    }, [], {
         layoutRef
     });
     return <Image {...innerProps}/>;