@mpxjs/webpack-plugin 2.9.69 → 2.9.70-alpha.0

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

@@ -4,13 +4,13 @@
  * ✔ checked
  * ✔ color
  */
-import { useRef, useState, forwardRef, useEffect, useContext } from 'react';
+import { useRef, useState, forwardRef, useEffect, useContext, createElement } from 'react';
 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 { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import Icon from './mpx-icon';
 const styles = StyleSheet.create({
     container: {
@@ -47,21 +47,14 @@ const styles = StyleSheet.create({
 });
 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 { 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 } = props;
     const [isChecked, setIsChecked] = useState(!!checked);
     const groupContext = useContext(RadioGroupContext);
     let groupValue;
     let notifyChange;
     const labelContext = useContext(LabelContext);
-    const defaultStyle = {
-        ...styles.wrapper,
-        ...(isChecked && styles.wrapperChecked),
-        ...(disabled && styles.wrapperDisabled)
-    };
-    const styleObj = {
-        ...styles.container,
-        ...style
-    };
+    const defaultStyle = extendObject({}, styles.wrapper, isChecked ? styles.wrapperChecked : {}, disabled ? styles.wrapperDisabled : {});
+    const styleObj = extendObject({}, styles.container, style);
     const onChange = (evt) => {
         if (disabled || isChecked)
             return;
@@ -77,24 +70,17 @@ const Radio = forwardRef((radioProps, ref) => {
         notifyChange && notifyChange(evt);
     };
     const onTap = (evt) => {
-        if (disabled)
-            return;
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    const catchTap = (evt) => {
-        if (disabled)
-            return;
-        catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props));
-    };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    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,
+        style: extendObject({}, defaultStyle, normalStyle),
         change: onChange
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -105,13 +91,16 @@ const Radio = forwardRef((radioProps, ref) => {
     if (labelContext) {
         labelContext.current.triggerChange = onChange;
     }
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
-        bindtap: onTap,
-        catchtap: catchTap
-    }, [], {
+        style: extendObject({}, innerStyle, layoutStyle)
+    }, layoutProps, {
+        bindtap: !disabled && onTap
+    }), [
+        'value',
+        'disabled',
+        'checked'
+    ], {
         layoutRef
     });
     useEffect(() => {
@@ -135,21 +124,17 @@ const Radio = forwardRef((radioProps, ref) => {
             }
         }
     }, [checked]);
-    return (<View {...innerProps}>
-        <View style={defaultStyle}>
-          <Icon type='success' size={24} color={disabled ? '#E1E1E1' : color} style={{
-            ...styles.icon,
-            ...(isChecked && styles.iconChecked),
-            ...(disabled && styles.iconDisabled)
-        }}/>
-        </View>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-      </View>);
+    return createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
+        type: 'success',
+        size: 24,
+        color: disabled ? '#E1E1E1' : color,
+        style: extendObject({}, styles.icon, isChecked && styles.iconChecked, disabled && styles.iconDisabled)
+    })), wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
 });
 Radio.displayName = 'MpxRadio';
 export default Radio;

package/lib/runtime/components/react/dist/mpx-rich-text/html.js

@@ -0,0 +1,39 @@
+export const generateHTML = (html) => {
+    return `<html><head>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" name="viewport">
+    <style>
+      html {
+        -ms-content-zooming: none;
+        -ms-touch-action: pan-x pan-y;
+      }
+      body {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: hidden;
+      }
+      html,body {
+        margin: 0;
+        padding: 0;
+      }
+      * {
+        user-select: none;
+        -ms-user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+      }
+    </style>
+  </head>
+  <body><div id="rich-text">${html}</div>
+  <script>
+    function sendHeight() {
+      const dom = document.getElementById('rich-text')
+      window.ReactNativeWebView.postMessage(dom.scrollHeight);
+    }
+    window.onload = sendHeight;
+</script>
+</body
+></html>`;
+};

package/lib/runtime/components/react/dist/mpx-rich-text/index.jsx

@@ -0,0 +1,63 @@
+/**
+ * ✔ nodes
+ */
+import { View } from 'react-native';
+import { useRef, forwardRef, useState } from 'react';
+import useInnerProps from '../getInnerListeners';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+import { useTransformStyle, useLayout } from '../utils';
+import { WebView } from 'react-native-webview';
+import { generateHTML } from './html';
+function jsonToHtmlStr(elements) {
+    let htmlStr = '';
+    for (const element of elements) {
+        if (element.type === 'text') {
+            htmlStr += element.text;
+            return htmlStr;
+        }
+        const { name, attrs = {}, children = [] } = element;
+        let attrStr = '';
+        for (const [key, value] of Object.entries(attrs))
+            attrStr += ` ${key}="${value}"`;
+        let childrenStr = '';
+        for (const child of children)
+            childrenStr += jsonToHtmlStr([child]);
+        htmlStr += `<${name}${attrStr}>${childrenStr}</${name}>`;
+    }
+    return htmlStr;
+}
+const _RichText = forwardRef((props, ref) => {
+    const { style = {}, nodes, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const nodeRef = useRef(null);
+    const [webViewHeight, setWebViewHeight] = useState(0);
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(Object.assign({
+        width: '100%',
+        height: webViewHeight
+    }, style), {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    useNodesRef(props, ref, nodeRef, {
+        layoutRef
+    });
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        style: { ...normalStyle, ...layoutStyle },
+        ...layoutProps
+    }, [], {
+        layoutRef
+    });
+    const html = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes);
+    return (<View {...innerProps}>
+      <WebView source={{ html: generateHTML(html) }} onMessage={(event) => {
+            setWebViewHeight(+event.nativeEvent.data);
+        }}>
+      </WebView>
+    </View>);
+});
+_RichText.displayName = 'mpx-rich-text';
+export default _RichText;

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

@@ -1,3 +1,7 @@
+/**
+ * ✔ enable
+ */
+import { createElement, Fragment } from 'react';
 import { Portal } from '@ant-design/react-native';
 import { warn } from '@mpxjs/utils';
 const _RootPortal = (props) => {
@@ -6,10 +10,8 @@ const _RootPortal = (props) => {
         warn('The root-portal component does not support the style prop.');
     }
     return enable
-        ? <Portal>
-      {children}
-    </Portal>
-        : <>{children}</>;
+        ? createElement(Portal, null, children)
+        : createElement(Fragment, null, children);
 };
 _RootPortal.displayName = 'MpxRootPortal';
 export default _RootPortal;

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

@@ -33,12 +33,12 @@
  */
 import { ScrollView } from 'react-native-gesture-handler';
 import { RefreshControl } from 'react-native';
-import { useRef, useState, useEffect, forwardRef, useContext } from 'react';
+import { useRef, useState, useEffect, forwardRef, useContext, createElement } from 'react';
 import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, flatGesture } from './utils';
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
 import { IntersectionObserverContext } from './context';
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
@@ -60,11 +60,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
-    const snapScrollIntoView = useRef('');
+    const firstScrollIntoViewChange = useRef(false);
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
     const scrollViewRef = useAnimatedRef();
     useNodesRef(props, ref, scrollViewRef, {
+        style: normalStyle,
         scrollOffset: scrollOptions,
         node: {
             scrollEnabled: scrollX || scrollY,
@@ -97,19 +98,25 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
     }, [refresherTriggered]);
     useEffect(() => {
-        if (scrollIntoView && __selectRef && snapScrollIntoView.current !== scrollIntoView) {
-            snapScrollIntoView.current = scrollIntoView || '';
-            setTimeout(() => {
-                const refs = __selectRef(`#${scrollIntoView}`, 'node');
-                if (refs) {
-                    const { nodeRef } = refs.getNodeInstance();
-                    nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
-                        scrollToOffset(left, top);
-                    });
-                }
-            });
+        if (scrollIntoView && __selectRef) {
+            if (!firstScrollIntoViewChange.current) {
+                setTimeout(handleScrollIntoView);
+            }
+            else {
+                handleScrollIntoView();
+            }
         }
+        firstScrollIntoViewChange.current = true;
     }, [scrollIntoView]);
+    function handleScrollIntoView() {
+        const refs = __selectRef(`#${scrollIntoView}`, 'node');
+        if (!refs)
+            return;
+        const { nodeRef } = refs.getNodeInstance();
+        nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
+            scrollToOffset(left, top);
+        });
+    }
     function selectLength(size) {
         return !scrollX ? size.height : size.width;
     }
@@ -164,14 +171,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         const visibleLength = selectLength(e.nativeEvent.layoutMeasurement);
         const contentLength = selectLength(e.nativeEvent.contentSize);
         const offset = selectOffset(e.nativeEvent.contentOffset);
-        scrollOptions.current = {
-            ...scrollOptions.current,
+        extendObject(scrollOptions.current, {
             contentLength,
             offset,
             scrollLeft: position.scrollLeft,
             scrollTop: position.scrollTop,
             visibleLength
-        };
+        });
     }
     function onScroll(e) {
         const { bindscroll } = props;
@@ -272,8 +278,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         updateScrollOptions(e, { scrollLeft, scrollTop });
     }
-    let scrollAdditionalProps = {
-        style: { ...innerStyle, ...layoutStyle },
+    const scrollAdditionalProps = extendObject({
+        style: extendObject({}, innerStyle, layoutStyle),
         pinchGestureEnabled: false,
         horizontal: scrollX && !scrollY,
         scrollEventThrottle: scrollEventThrottle,
@@ -284,22 +290,18 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         ref: scrollViewRef,
         onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
-        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) ? onScrollTouchStart : undefined,
-        bindtouchmove: ((enhanced && binddragging) || bindtouchend) ? onScrollTouchMove : undefined,
-        bindtouchend: ((enhanced && binddragend) || bindtouchend) ? onScrollTouchEnd : undefined,
+        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
+        bindtouchmove: ((enhanced && binddragging) || bindtouchend) && onScrollTouchMove,
+        bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
         onScrollBeginDrag: onScrollDrag,
         onScrollEndDrag: onScrollDrag,
-        onMomentumScrollEnd: onScrollEnd,
-        ...layoutProps,
-        ...(simultaneousHandlers ? { simultaneousHandlers } : {}),
-        ...(waitForHandlers ? { waitFor: waitForHandlers } : {})
-    };
+        onMomentumScrollEnd: onScrollEnd
+    }, (simultaneousHandlers ? { simultaneousHandlers } : {}), (waitForHandlers ? { waitFor: waitForHandlers } : {}), layoutProps);
     if (enhanced) {
-        scrollAdditionalProps = {
-            ...scrollAdditionalProps,
+        Object.assign(scrollAdditionalProps, {
             bounces,
             pagingEnabled
-        };
+        });
     }
     const innerProps = useInnerProps(props, scrollAdditionalProps, [
         'id',
@@ -332,16 +334,20 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         black: ['#000'],
         white: ['#fff']
     };
-    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>);
+    return createElement(ScrollView, extendObject({}, innerProps, {
+        refreshControl: refresherEnabled
+            ? createElement(RefreshControl, extendObject({
+                progressBackgroundColor: refresherBackground,
+                refreshing: refreshing,
+                onRefresh: onRefresh
+            }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
+            : undefined
+    }), wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
 });
 _ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

package/lib/runtime/components/react/dist/mpx-simple-text.jsx

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+import { createElement } from 'react';
+import { extendObject } from './utils';
+const _Text2 = (props) => {
+    const { allowFontScaling = false } = props;
+    return createElement(Text, extendObject({}, props, {
+        allowFontScaling
+    }));
+};
+_Text2.displayName = 'MpxSimpleText';
+export default _Text2;

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -4,12 +4,14 @@ import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
 const _SwiperItem = forwardRef((props, ref) => {
-    const { 'enable-offset': enableOffset, 'enable-var': enableVar, 'external-var-context': externalVarContext, style } = props;
+    const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style } = props;
     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);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });