@mpxjs/webpack-plugin 2.9.62 → 2.9.65

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

@@ -3,13 +3,13 @@
  */
 import { useRef, forwardRef, useContext } from 'react';
 import { View } from 'react-native';
+import { warn } from '@mpxjs/utils';
 import { FormContext, RadioGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { throwReactWarning } from './utils';
+import { useLayout, useTransformStyle, wrapChildren } from './utils';
 const radioGroup = 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,19 +18,18 @@ const radioGroup = 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 = () => {
-        for (let key in groupValue) {
+        for (const key in groupValue) {
             if (groupValue[key].checked) {
                 return key;
             }
@@ -47,7 +46,7 @@ const radioGroup = 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 });
@@ -64,14 +63,17 @@ const radioGroup = forwardRef((props, ref) => {
     };
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: defaultStyle,
-        ...(enableOffset ? { onLayout } : {})
-    }, ['enable-offset'], {
+        style: { ...normalStyle, ...layoutStyle },
+        ...layoutProps
+    }, [], {
         layoutRef
     });
     return (<View {...innerProps}>
       <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
-        {children}
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current
+        })}
       </RadioGroupContext.Provider>
     </View>);
 });

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

@@ -5,11 +5,12 @@
  * ✔ color
  */
 import { useRef, useState, forwardRef, useEffect, useContext } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { warn } from '@mpxjs/utils';
 import { LabelContext, RadioGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
 import Icon from './mpx-icon';
 const styles = StyleSheet.create({
     container: {
@@ -44,26 +45,22 @@ const styles = StyleSheet.create({
         opacity: 1
     }
 });
-const Radio = forwardRef((props, ref) => {
-    const { value = '', disabled = false, checked = false, color = '#09BB07', style = [], 'enable-offset': enableOffset, children, bindtap, catchtap, } = props;
-    const layoutRef = useRef({});
+const Radio = forwardRef((radioProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(radioProps);
+    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 groupContext = useContext(RadioGroupContext);
     let groupValue;
     let notifyChange;
     const labelContext = useContext(LabelContext);
-    const { textStyle, imageStyle, innerStyle } = splitStyle(style);
-    if (imageStyle) {
-        throwReactWarning('[Mpx runtime warn]: Radio does not support background image-related styles!');
-    }
     const defaultStyle = {
         ...styles.wrapper,
         ...(isChecked && styles.wrapperChecked),
-        ...(disabled && styles.wrapperDisabled),
+        ...(disabled && styles.wrapperDisabled)
     };
-    const viewStyle = {
-        ...defaultStyle,
-        ...innerStyle
+    const styleObj = {
+        ...styles.container,
+        ...style
     };
     const onChange = (evt) => {
         if (disabled || isChecked)
@@ -90,33 +87,17 @@ const Radio = forwardRef((props, ref) => {
             return;
         catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
     };
-    const { nodeRef } = useNodesRef(props, ref, {
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Radio does not support background image-related styles!');
+    }
+    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='radioTextWrap' style={textStyle || {}} {...(textProps || {})}>
-            {children}
-          </Text>;
-            }
-        }
-        else {
-            if (textStyle) {
-                throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Radio is Text node!');
-            }
-        }
-        return children;
-    };
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     if (groupContext) {
         groupValue = groupContext.groupValue;
         notifyChange = groupContext.notifyChange;
@@ -126,11 +107,11 @@ const Radio = 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(() => {
@@ -155,14 +136,19 @@ const Radio = forwardRef((props, ref) => {
         }
     }, [checked]);
     return (<View {...innerProps}>
-        <View style={viewStyle}>
+        <View style={defaultStyle}>
           <Icon type='success' size={24} color={disabled ? '#E1E1E1' : color} style={{
             ...styles.icon,
             ...(isChecked && styles.iconChecked),
             ...(disabled && styles.iconDisabled)
         }}/>
         </View>
-        {wrapChildren(children, textStyle)}
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
       </View>);
 });
 Radio.displayName = 'mpx-radio';

package/lib/runtime/components/react/dist/mpx-root-portal.jsx

@@ -1,11 +1,15 @@
 import { Portal } from '@ant-design/react-native';
+import { warn } from '@mpxjs/utils';
 const _RootPortal = (props) => {
     const { children, enable = true } = props;
-    return enable ? (
-    // @ts-ignore
-    <Portal>
+    if (props.style) {
+        warn('The root-portal component does not support the style prop.');
+    }
+    return enable
+        ? <Portal>
       {children}
-    </Portal>) : (<>{children}</>);
+    </Portal>
+        : <>{children}</>;
 };
 _RootPortal.displayName = 'mpx-root-portal';
 export default _RootPortal;

package/lib/runtime/components/react/dist/mpx-scroll-view.jsx

@@ -34,27 +34,32 @@
 import { ScrollView } from 'react-native-gesture-handler';
 import { RefreshControl } from 'react-native';
 import { useRef, useState, useEffect, forwardRef } from 'react';
+import { useAnimatedRef } from 'react-native-reanimated';
+import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { throwReactWarning } from './utils';
-const _ScrollView = forwardRef((props = {}, ref) => {
-    const { children, enhanced = false, bounces = true, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'enable-offset': enableOffset, 'show-scrollbar': showScrollbar = true } = props;
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils';
+const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
+    const { enhanced = false, bounces = true, style = {}, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [refreshing, setRefreshing] = useState(true);
     const snapScrollTop = useRef(0);
     const snapScrollLeft = useRef(0);
-    const layoutRef = useRef({});
     const scrollOptions = useRef({
         contentLength: 0,
         offset: 0,
         scrollLeft: 0,
         scrollTop: 0,
-        visibleLength: 0,
+        visibleLength: 0
     });
     const scrollEventThrottle = 50;
     const hasCallScrollToUpper = useRef(true);
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
-    const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const scrollViewRef = useAnimatedRef();
+    useNodesRef(props, ref, scrollViewRef, {
         scrollOffset: scrollOptions,
         node: {
             scrollEnabled: scrollX || scrollY,
@@ -66,8 +71,9 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             scrollTo: scrollToOffset
         }
     });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     if (scrollX && scrollY) {
-        throwReactWarning('[Mpx runtime warn]: scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
+        warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
     }
     useEffect(() => {
         if (snapScrollTop.current !== props['scroll-top'] ||
@@ -100,7 +106,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             if (!hasCallScrollToUpper.current) {
                 bindscrolltoupper(getCustomEvent('scrolltoupper', e, {
                     detail: {
-                        direction: scrollX ? 'left' : 'top',
+                        direction: scrollX ? 'left' : 'top'
                     },
                     layoutRef
                 }, props));
@@ -120,7 +126,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
                 hasCallScrollToLower.current = true;
                 bindscrolltolower(getCustomEvent('scrolltolower', e, {
                     detail: {
-                        direction: scrollX ? 'right' : 'botttom',
+                        direction: scrollX ? 'right' : 'botttom'
                     },
                     layoutRef
                 }, props));
@@ -134,12 +140,8 @@ const _ScrollView = forwardRef((props = {}, ref) => {
         scrollOptions.current.contentLength = selectLength({ height, width });
     }
     function onLayout(e) {
-        scrollOptions.current.visibleLength = selectLength(e.nativeEvent.layout);
-        if (enableOffset) {
-            scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-            });
-        }
+        const layout = e.nativeEvent.layout || {};
+        scrollOptions.current.visibleLength = selectLength(layout);
     }
     function updateScrollOptions(e, position) {
         const visibleLength = selectLength(e.nativeEvent.layoutMeasurement);
@@ -151,7 +153,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
             offset,
             scrollLeft: position.scrollLeft,
             scrollTop: position.scrollTop,
-            visibleLength,
+            visibleLength
         };
     }
     function onScroll(e) {
@@ -166,7 +168,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
                     scrollHeight,
                     scrollWidth,
                     deltaX: scrollLeft - scrollOptions.current.scrollLeft,
-                    deltaY: scrollTop - scrollOptions.current.scrollTop,
+                    deltaY: scrollTop - scrollOptions.current.scrollTop
                 },
                 layoutRef
             }, props));
@@ -210,7 +212,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
                 binddragstart(getCustomEvent('dragstart', e, {
                     detail: {
                         scrollLeft: scrollOptions.current.scrollLeft,
-                        scrollTop: scrollOptions.current.scrollTop,
+                        scrollTop: scrollOptions.current.scrollTop
                     },
                     layoutRef
                 }, props));
@@ -224,7 +226,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
                 binddragging(getCustomEvent('dragging', e, {
                     detail: {
                         scrollLeft: scrollOptions.current.scrollLeft || 0,
-                        scrollTop: scrollOptions.current.scrollTop || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
                     },
                     layoutRef
                 }, props));
@@ -249,6 +251,7 @@ const _ScrollView = forwardRef((props = {}, ref) => {
         }
     }
     let scrollAdditionalProps = {
+        style: { ...innerStyle, ...layoutStyle },
         pinchGestureEnabled: false,
         horizontal: scrollX && !scrollY,
         scrollEventThrottle: scrollEventThrottle,
@@ -261,19 +264,18 @@ const _ScrollView = forwardRef((props = {}, ref) => {
         onContentSizeChange: onContentSizeChange,
         bindtouchstart: onScrollTouchStart,
         bindtouchmove: onScrollTouchMove,
-        onLayout,
         onScrollEndDrag,
-        onMomentumScrollEnd: onScrollEnd
+        onMomentumScrollEnd: onScrollEnd,
+        ...layoutProps
     };
     if (enhanced) {
         scrollAdditionalProps = {
             ...scrollAdditionalProps,
             bounces,
-            pagingEnabled,
+            pagingEnabled
         };
     }
     const innerProps = useInnerProps(props, scrollAdditionalProps, [
-        'enable-offset',
         'scroll-x',
         'scroll-y',
         'enable-back-to-top',
@@ -299,11 +301,18 @@ const _ScrollView = forwardRef((props = {}, ref) => {
         'bindrefresherrefresh'
     ], { layoutRef });
     const refreshColor = {
-        'black': ['#000'],
-        'white': ['#fff']
+        black: ['#000'],
+        white: ['#fff']
     };
-    return (<ScrollView {...innerProps} refreshControl={refresherEnabled ? (<RefreshControl progressBackgroundColor={refresherBackground} refreshing={refreshing} onRefresh={onRefresh} {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}/>) : undefined}>
-      {children}
+    return (<ScrollView {...innerProps} refreshControl={refresherEnabled
+            ? (<RefreshControl progressBackgroundColor={refresherBackground} refreshing={refreshing} onRefresh={onRefresh} {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}/>)
+            : undefined}>
+       {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
     </ScrollView>);
 });
 _ScrollView.displayName = 'mpx-scroll-view';