@mpxjs/webpack-plugin 2.9.67 → 2.9.69-beta.0

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

@@ -1,9 +1,8 @@
 import { View } from 'react-native';
-import { LinearGradient } from 'react-native-linear-gradient';
-import React, { forwardRef, useState, useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
-import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { parseInlineStyle, useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils';
+import useNodesRef from './useNodesRef';
+import { useLayout, splitProps, splitStyle, wrapChildren, parseInlineStyle, useTransformStyle, extendObject } from './utils';
 const styles = {
     wrapper: {
         display: 'flex',
@@ -12,84 +11,72 @@ const styles = {
         justifyContent: 'space-around',
         overflow: 'hidden',
         alignItems: 'center'
-    },
-    maskTop: {
-        position: 'absolute',
-        width: 1000,
-        zIndex: 100
-    },
-    maskBottom: {
-        position: 'absolute',
-        width: 1000,
-        zIndex: 100
     }
 };
+const DefaultPickerItemH = 36;
 const _PickerView = forwardRef((props, ref) => {
     const { children, value = [], bindchange, style, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    // indicatorStyle 需要转换为rn的style
-    // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
     const indicatorStyle = parseInlineStyle(props['indicator-style']);
-    const { height: indicatorH, width: indicatorW } = indicatorStyle;
+    const pickerMaskStyle = parseInlineStyle(props['mask-style']);
+    const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle;
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
-    //  picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置
+    const cloneRef = useRef(null);
+    const activeValueRef = useRef(value);
+    activeValueRef.current = value.slice();
+    const snapActiveValueRef = useRef(null);
+    console.log('[mpx-picker-view] value=', value, Date.now());
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
-    const { textStyle } = splitStyle(normalStyle);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
     const { textProps } = splitProps(props);
-    const { 
-    // 存储layout布局信息
-    layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
-    const isSetW = indicatorW !== undefined ? 1 : 0;
-    const cloneRef = useRef(null);
-    const maskPos = {};
-    let [pickH, setPickH] = useState(0);
-    const itemH = pickH / 5;
-    if (normalStyle?.height && pickH && pickH !== normalStyle?.height) {
-        maskPos.height = itemH * 2 + Math.ceil((normalStyle.height - pickH) / 2);
-    }
-    else {
-        maskPos.height = itemH * 2;
-    }
-    const onColumnLayoutChange = (layoutConfig) => {
-        pickH = layoutConfig.height;
-        setPickH(layoutConfig.height);
+    const { textStyle } = splitStyle(normalStyle);
+    const onSelectChange = (columnIndex, selectedIndex) => {
+        const activeValue = activeValueRef.current;
+        activeValue[columnIndex] = selectedIndex;
+        console.log('[mpx-picker-view], onSelectChange ---> columnIndex=', columnIndex, 'selectedIndex=', selectedIndex, 'activeValue=', activeValue);
+        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue, source: 'change' }, layoutRef });
+        bindchange?.(eventData);
+        snapActiveValueRef.current = activeValueRef.current;
+    };
+    const hasDiff = (a = [], b) => {
+        return a.some((v, i) => v !== b[i]);
     };
-    const onSelectChange = (columnIndex, selIndex) => {
-        const changeValue = value.slice();
-        changeValue[columnIndex] = selIndex;
-        const eventData = getCustomEvent('change', {}, { detail: { value: changeValue, source: 'change' }, layoutRef });
-        bindchange && bindchange(eventData);
+    const onInitialChange = (isInvalid, value) => {
+        if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
+            console.log('[mpx-picker-view], onInitialChange-1 ===> value=', value);
+            const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
+            bindchange?.(eventData);
+            snapActiveValueRef.current = value.slice();
+        }
     };
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: {
-            ...normalStyle,
-            ...layoutStyle,
+        style: extendObject({}, normalStyle, layoutStyle, {
             position: 'relative',
             overflow: 'hidden'
-        },
-        ...layoutProps
-    }, [
-        'enable-offset'
-    ], { layoutRef });
-    const cloneChild = (child, index) => {
-        // const extraProps = index === 0 ? { getInnerLayout: getInnerLayout, innerProps } : {}
-        const extraProps = {};
-        const childProps = {
-            ...child?.props,
+        }),
+        layoutProps
+    }), ['enable-offset'], { layoutRef });
+    const renderColumn = (child, index, columnData, initialIndex) => {
+        const childProps = child?.props || {};
+        const wrappedProps = extendObject({}, childProps, {
+            columnData,
             ref: cloneRef,
-            prefix: index,
-            key: 'pick-view' + index,
+            columnIndex: index,
+            key: `pick-view-${index}`,
             wrapperStyle: {
-                height: normalStyle?.height || 0,
-                itemHeight: indicatorH || 0
+                height: normalStyle?.height || DefaultPickerItemH,
+                itemHeight: indicatorH || DefaultPickerItemH
             },
-            onColumnLayoutChange,
+            columnStyle: normalStyle,
             onSelectChange: onSelectChange.bind(null, index),
-            selectedIndex: value?.[index] || 0,
-            ...extraProps
-        };
-        const realElement = React.cloneElement(child, childProps);
+            initialIndex,
+            pickerOverlayStyle,
+            pickerMaskStyle
+        });
+        const realElement = React.cloneElement(child, wrappedProps);
         return wrapChildren({
             children: realElement
         }, {
@@ -99,65 +86,37 @@ const _PickerView = forwardRef((props, ref) => {
             textProps
         });
     };
-    const renderTopMask = () => {
-        const linearProps = {
-            colors: ['rgba(255,255,255,0.8)', 'rgba(255,255,255,0.2)'],
-            style: [
-                styles.maskTop,
-                {
-                    height: maskPos.height,
-                    top: 0,
-                    pointerEvents: 'none'
-                }
-            ]
-        };
-        return (<LinearGradient {...linearProps}/>);
-    };
-    const renderBottomMask = () => {
-        const linearProps = {
-            colors: ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.8)'],
-            style: [
-                styles.maskBottom,
-                {
-                    height: maskPos.height,
-                    bottom: 0,
-                    pointerEvents: 'none'
-                }
-            ]
-        };
-        return <LinearGradient {...linearProps}></LinearGradient>;
-    };
-    const renderLine = () => {
-        return <View style={[{
-                    position: 'absolute',
-                    top: '50%',
-                    transform: [{ translateY: -(itemH / 2) }],
-                    height: itemH,
-                    borderTopWidth: 1,
-                    borderBottomWidth: 1,
-                    borderColor: '#f0f0f0',
-                    width: '100%',
-                    zIndex: 101
-                }]}></View>;
+    const validateChildInitialIndex = (index, data) => {
+        return Math.max(0, Math.min(value[index] || 0, data.length - 1));
     };
-    const renderSubChild = () => {
-        if (Array.isArray(children)) {
-            return children.map((item, index) => {
-                return cloneChild(item, index);
-            });
-        }
-        else {
-            return cloneChild(children, 0);
+    const flatColumnChildren = (data) => {
+        const columnData = React.Children.toArray(data?.props?.children);
+        if (columnData.length === 1 && React.isValidElement(columnData[0]) && columnData[0].type === React.Fragment) {
+            // 只有一个 Fragment 嵌套情况
+            return React.Children.toArray(columnData[0].props.children);
         }
+        return columnData;
+    };
+    const renderPickerColumns = () => {
+        const columns = React.Children.toArray(children);
+        const renderColumns = [];
+        const validValue = [];
+        let isInvalid = false;
+        columns.forEach((item, index) => {
+            const columnData = flatColumnChildren(item);
+            const validIndex = validateChildInitialIndex(index, columnData);
+            if (validIndex !== value[index]) {
+                isInvalid = true;
+            }
+            validValue.push(validIndex);
+            renderColumns.push(renderColumn(item, index, columnData, validIndex));
+        });
+        onInitialChange(isInvalid, validValue);
+        return renderColumns;
     };
     return (<View {...innerProps}>
-    {renderTopMask()}
-    <View style={[styles.wrapper]}>
-      {renderSubChild()}
-    </View>
-    {renderBottomMask()}
-    {!isSetW && renderLine()}
-  </View>);
+      <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
+    </View>);
 });
-_PickerView.displayName = 'mpx-picker-view';
+_PickerView.displayName = 'MpxPickerView';
 export default _PickerView;

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

@@ -1,13 +1,13 @@
 /**
  * ✔ bindchange
  */
-import { useRef, forwardRef, useContext, useMemo, useEffect } from 'react';
+import { useRef, forwardRef, useContext, useMemo, useEffect, createElement } 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 { useLayout, useTransformStyle, wrapChildren } from './utils';
+import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 const radioGroup = forwardRef((props, ref) => {
     const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const propsRef = useRef({});
@@ -22,13 +22,10 @@ const radioGroup = forwardRef((props, ref) => {
         flexDirection: 'row',
         flexWrap: 'wrap'
     };
-    const styleObj = {
-        ...defaultStyle,
-        ...style
-    };
+    const styleObj = extendObject({}, 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 });
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const getValue = () => {
         for (const key in groupValue) {
@@ -74,21 +71,16 @@ const radioGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...normalStyle, ...layoutStyle },
-        ...layoutProps
-    }, [], {
+        style: extendObject({}, normalStyle, layoutStyle)
+    }, layoutProps), ['name'], {
         layoutRef
     });
-    return (<View {...innerProps}>
-      <RadioGroupContext.Provider value={contextValue}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-      </RadioGroupContext.Provider>
-    </View>);
+    return createElement(View, innerProps, createElement(RadioGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    })));
 });
 radioGroup.displayName = 'MpxRadioGroup';
 export default radioGroup;

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;