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

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

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { getFocusedNavigation } from '@mpxjs/utils';
+const PortalConsumer = ({ manager, children }) => {
+    const keyRef = useRef(null);
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        manager.update(keyRef.current, children, curPageId);
+    }, [children]);
+    useEffect(() => {
+        if (!manager) {
+            throw new Error('Looks like you forgot to wrap your root component with `Provider` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal`.\n\n');
+        }
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        keyRef.current = manager.mount(children, undefined, curPageId);
+        return () => {
+            manager.unmount(keyRef.current, curPageId);
+        };
+    }, []);
+    return null;
+};
+export default PortalConsumer;

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

@@ -0,0 +1,124 @@
+import { useEffect, useRef } from 'react';
+import { View, DeviceEventEmitter, NativeEventEmitter, StyleSheet } from 'react-native';
+import PortalManager from './portal-manager';
+import { getFocusedNavigation } from '@mpxjs/utils';
+import { PortalContext } from '../context';
+// events
+const addType = 'MPX_RN_ADD_PORTAL';
+const removeType = 'MPX_RN_REMOVE_PORTAL';
+// fix react native web does not support DeviceEventEmitter
+const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter();
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});
+class PortalGuard {
+    nextKey = 10000;
+    add = (e) => {
+        const key = this.nextKey++;
+        TopViewEventEmitter.emit(addType, e, key);
+        return key;
+    };
+    remove = (key) => {
+        TopViewEventEmitter.emit(removeType, key);
+    };
+}
+/**
+ * portal
+ */
+export const portal = new PortalGuard();
+const PortalHost = ({ children }) => {
+    const _nextKey = useRef(0);
+    const _queue = useRef([]);
+    const _addType = useRef(null);
+    const _removeType = useRef(null);
+    const manager = useRef(null);
+    let currentPageId;
+    const _mount = (children, _key, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        const key = _key || _nextKey.current++;
+        if (manager.current) {
+            manager.current.mount(key, children);
+        }
+        else {
+            _queue.current.push({ type: 'mount', key, children });
+        }
+        return key;
+    };
+    const _unmount = (key, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        if (manager.current) {
+            manager.current.unmount(key);
+        }
+        else {
+            _queue.current.push({ type: 'unmount', key });
+        }
+    };
+    const _update = (key, children, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        if (manager.current) {
+            manager.current.update(key, children);
+        }
+        else {
+            const op = { type: 'mount', key, children };
+            const index = _queue.current.findIndex((o) => o.type === 'mount' || (o.type === 'update' && o.key === key));
+            if (index > -1) {
+                _queue.current[index] = op;
+            }
+            else {
+                _queue.current.push(op);
+            }
+        }
+    };
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        currentPageId = navigation?.pageId;
+        _addType.current = TopViewEventEmitter.addListener(addType, _mount);
+        _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount);
+        return () => {
+            while (_queue.current.length && manager.current) {
+                const action = _queue.current.pop();
+                if (!action) {
+                    continue;
+                }
+                // tslint:disable-next-line:switch-default
+                switch (action.type) {
+                    case 'mount':
+                        manager.current?.mount(action.key, action.children);
+                        break;
+                    case 'update':
+                        manager.current?.update(action.key, action.children);
+                        break;
+                    case 'unmount':
+                        manager.current?.unmount(action.key);
+                        break;
+                }
+            }
+        };
+    }, []);
+    return (<PortalContext.Provider value={{
+            mount: _mount,
+            update: _update,
+            unmount: _unmount
+        }}>
+      {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
+      <View style={styles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={manager}/>
+    </PortalContext.Provider>);
+};
+export default PortalHost;

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

@@ -0,0 +1,40 @@
+import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
+const _PortalManager = forwardRef((props, ref) => {
+    const [state, setState] = useState({
+        portals: []
+    });
+    const mount = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: [...prevState.portals, { key, children }]
+        }));
+    }, [state]);
+    const update = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: prevState.portals.map((item) => {
+                if (item.key === key) {
+                    return { ...item, children };
+                }
+                return item;
+            })
+        }));
+    }, [state]);
+    const unmount = useCallback((key) => {
+        setState((prevState) => ({
+            portals: prevState.portals.filter((item) => item.key !== key)
+        }));
+    }, []);
+    useImperativeHandle(ref, () => ({
+        mount,
+        update,
+        unmount,
+        portals: state.portals
+    }));
+    return (<>
+      {state.portals.map(({ key, children }, i) => (<View key={key} collapsable={false} // Need collapsable=false here to clip the elevations
+         pointerEvents="box-none" style={[StyleSheet.absoluteFill, { zIndex: 1000 + i }]}>
+          {children}
+        </View>))}
+    </>);
+});
+export default _PortalManager;

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

@@ -0,0 +1,12 @@
+import { PortalContext } from './context';
+import PortalConsumer from './mpx-portal/portal-consumer';
+import PortalHost, { portal } from './mpx-portal/portal-host';
+const Portal = ({ children }) => {
+    return (<PortalContext.Consumer>
+      {(manager) => (<PortalConsumer manager={manager}>{children}</PortalConsumer>)}
+    </PortalContext.Consumer>);
+};
+Portal.Host = PortalHost;
+Portal.add = portal.add;
+Portal.remove = portal.remove;
+export default Portal;

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

@@ -0,0 +1,31 @@
+import { createContext, useMemo } from 'react';
+import LocaleProvider from './locale-provider';
+import Portal from './mpx-portal';
+import { extendObject } from './utils';
+const defaultTheme = {
+    color_text_base: '#000000',
+    color_text_base_inverse: '#ffffff',
+    color_text_secondary: '#a4a9b0',
+    color_text_placeholder: '#bbbbbb',
+    color_text_disabled: '#bbbbbb',
+    color_text_caption: '#888888',
+    color_text_paragraph: '#333333',
+    color_error: '#ff4d4f',
+    color_warning: '#faad14',
+    color_success: '#52c41a',
+    color_primary: '#1677ff'
+};
+export const ThemeContext = createContext(defaultTheme);
+const ThemeProvider = (props) => {
+    const { value, children } = props;
+    const theme = useMemo(() => (extendObject({}, defaultTheme, value)), [value]);
+    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+};
+const Provider = ({ locale, theme, children }) => {
+    return (<LocaleProvider locale={locale}>
+      <ThemeProvider value={theme}>
+        <Portal.Host>{children}</Portal.Host>
+      </ThemeProvider>
+    </LocaleProvider>);
+};
+export default Provider;

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,62 @@
+/**
+ * ✔ nodes
+ */
+import { View } from 'react-native';
+import { useRef, forwardRef, useState, createElement } from 'react';
+import useInnerProps from '../getInnerListeners';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+import { useTransformStyle, useLayout, extendObject } 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, extendObject({
+        ref: nodeRef,
+        style: extendObject(normalStyle, layoutStyle)
+    }, layoutProps), [], {
+        layoutRef
+    });
+    const html = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes);
+    return createElement(View, innerProps, createElement(WebView, {
+        source: { html: generateHTML(html) },
+        onMessage: (event) => {
+            setWebViewHeight(+event.nativeEvent.data);
+        }
+    }));
+});
+_RichText.displayName = 'mpx-rich-text';
+export default _RichText;

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

@@ -1,4 +1,8 @@
-import { Portal } from '@ant-design/react-native';
+/**
+ * ✔ enable
+ */
+import { createElement, Fragment } from 'react';
+import Portal from './mpx-portal';
 import { warn } from '@mpxjs/utils';
 const _RootPortal = (props) => {
     const { children, enable = true } = 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;