@mpxjs/webpack-plugin 2.8.25-alpha.21 → 2.8.25-alpha.22

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

@@ -0,0 +1,30 @@
+import { useContext, useEffect, useRef } from 'react';
+import { PortalContext, RouteContext, VarContext } from '../context';
+import PortalHost, { portal } from './portal-host';
+const Portal = ({ children }) => {
+    const manager = useContext(PortalContext);
+    const keyRef = useRef(null);
+    const { pageId } = useContext(RouteContext) || {};
+    const varContext = useContext(VarContext);
+    if (varContext) {
+        children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>);
+    }
+    useEffect(() => {
+        manager.update(keyRef.current, children);
+    }, [children]);
+    useEffect(() => {
+        if (!manager) {
+            throw new Error('Looks like you forgot to wrap your root component with `PortalHost` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/index`.\n\n');
+        }
+        keyRef.current = manager.mount(children, null, pageId);
+        return () => {
+            manager.unmount(keyRef.current);
+        };
+    }, []);
+    return null;
+};
+Portal.Host = PortalHost;
+Portal.add = portal.add;
+Portal.remove = portal.remove;
+Portal.update = portal.update;
+export default Portal;

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

@@ -0,0 +1,112 @@
+import { useEffect, useRef, useMemo, useContext } from 'react';
+import { View, DeviceEventEmitter, NativeEventEmitter, StyleSheet } from 'react-native';
+import PortalManager from './portal-manager';
+import { PortalContext, RouteContext } from '../context';
+// events
+const addType = 'MPX_RN_ADD_PORTAL';
+const removeType = 'MPX_RN_REMOVE_PORTAL';
+const updateType = 'MPX_RN_UPDATE_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, id) => {
+        const key = this.nextKey++;
+        TopViewEventEmitter.emit(addType, e, key, id);
+        return key;
+    };
+    remove = (key) => {
+        TopViewEventEmitter.emit(removeType, key);
+    };
+    update = (key, e) => {
+        TopViewEventEmitter.emit(updateType, key, e);
+    };
+}
+/**
+ * portal
+ */
+export const portal = new PortalGuard();
+const PortalHost = ({ children }) => {
+    const _nextKey = useRef(0);
+    const manager = useRef(null);
+    const queue = useRef([]);
+    const { pageId } = useContext(RouteContext) || {};
+    const mount = (children, _key, id) => {
+        if (id !== pageId)
+            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) => {
+        if (manager.current) {
+            manager.current.unmount(key);
+        }
+        else {
+            queue.current.push({ type: 'unmount', key, children });
+        }
+    };
+    const update = (key, children) => {
+        if (manager.current) {
+            manager.current.update(key, children);
+        }
+        else {
+            const operation = { type: 'mount', key, children };
+            const index = queue.current.findIndex((q) => q.type === 'mount' && q.key === key);
+            if (index > -1) {
+                queue.current[index] = operation;
+            }
+            else {
+                queue.current.push(operation);
+            }
+        }
+    };
+    const subScriptions = useMemo(() => {
+        return [
+            TopViewEventEmitter.addListener(addType, mount),
+            TopViewEventEmitter.addListener(removeType, unmount),
+            TopViewEventEmitter.addListener(updateType, update)
+        ];
+    }, []);
+    useEffect(() => {
+        while (queue.current.length && manager.current) {
+            const operation = queue.current.shift();
+            if (!operation)
+                return;
+            switch (operation.type) {
+                case 'mount':
+                    manager.current.mount(operation.key, operation.children);
+                    break;
+                case 'unmount':
+                    manager.current.unmount(operation.key);
+                    break;
+            }
+        }
+        return () => {
+            subScriptions.forEach((subScription) => {
+                subScription.remove();
+            });
+        };
+    }, []);
+    return (<PortalContext.Provider value={{
+            mount,
+            update,
+            unmount
+        }}>
+      <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,41 @@
+import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { extendObject } from '../utils';
+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 extendObject({}, 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
+         style={[StyleSheet.absoluteFill, { zIndex: 1000 + i, pointerEvents: 'box-none' }]}>
+          {children}
+        </View>))}
+    </>);
+});
+export default _PortalManager;

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

@@ -0,0 +1,86 @@
+/**
+ * ✔ bindchange
+ */
+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, 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({});
+    propsRef.current = props;
+    const formContext = useContext(FormContext);
+    let formValuesMap;
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const groupValue = useRef({}).current;
+    const defaultStyle = {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+    };
+    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, { style: normalStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const getValue = () => {
+        for (const key in groupValue) {
+            if (groupValue[key].checked) {
+                return key;
+            }
+        }
+    };
+    const resetValue = () => {
+        Object.keys(groupValue).forEach((key) => {
+            groupValue[key].checked = false;
+            groupValue[key].setValue(false);
+        });
+    };
+    if (formValuesMap) {
+        if (!props.name) {
+            warn('If a form component is used, the name attribute is required.');
+        }
+        else {
+            formValuesMap.set(props.name, { getValue, resetValue });
+        }
+    }
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
+    const contextValue = useMemo(() => {
+        const notifyChange = (evt) => {
+            const { bindchange } = propsRef.current;
+            bindchange &&
+                bindchange(getCustomEvent('tap', evt, {
+                    layoutRef,
+                    detail: {
+                        value: getValue()
+                    }
+                }, propsRef.current));
+        };
+        return {
+            groupValue,
+            notifyChange
+        };
+    }, []);
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle)
+    }, layoutProps), ['name'], {
+        layoutRef
+    });
+    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

@@ -0,0 +1,140 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+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, extendObject } from './utils';
+import Icon from './mpx-icon';
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    wrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 24,
+        height: 24,
+        borderColor: '#D1D1D1',
+        borderWidth: 1,
+        borderRadius: 12,
+        backgroundColor: '#ffffff',
+        marginRight: 5,
+        overflow: 'hidden'
+    },
+    wrapperChecked: {
+        borderWidth: 0
+    },
+    wrapperDisabled: {
+        backgroundColor: '#E1E1E1'
+    },
+    icon: {
+        opacity: 0
+    },
+    iconDisabled: {
+        backgroundColor: '#ADADAD'
+    },
+    iconChecked: {
+        opacity: 1
+    }
+});
+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 } = props;
+    const [isChecked, setIsChecked] = useState(!!checked);
+    const groupContext = useContext(RadioGroupContext);
+    let groupValue;
+    let notifyChange;
+    const labelContext = useContext(LabelContext);
+    const defaultStyle = extendObject({}, styles.wrapper, isChecked ? styles.wrapperChecked : {}, disabled ? styles.wrapperDisabled : {});
+    const styleObj = extendObject({}, styles.container, style);
+    const onChange = (evt) => {
+        if (disabled || isChecked)
+            return;
+        setIsChecked(!isChecked);
+        if (groupValue) {
+            for (const [key, radio] of Object.entries(groupValue)) {
+                if (!radio)
+                    continue;
+                radio.setValue(key === value);
+                radio.checked = key === value;
+            }
+        }
+        notifyChange && notifyChange(evt);
+    };
+    const onTap = (evt) => {
+        bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
+        onChange(evt);
+    };
+    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, {
+        style: extendObject({}, defaultStyle, normalStyle),
+        change: onChange
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    if (groupContext) {
+        groupValue = groupContext.groupValue;
+        notifyChange = groupContext.notifyChange;
+    }
+    if (labelContext) {
+        labelContext.current.triggerChange = onChange;
+    }
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle)
+    }, layoutProps, {
+        bindtap: !disabled && onTap
+    }), [
+        'value',
+        'disabled',
+        'checked'
+    ], {
+        layoutRef
+    });
+    useEffect(() => {
+        if (groupValue) {
+            groupValue[value] = {
+                checked: checked,
+                setValue: setIsChecked
+            };
+        }
+        return () => {
+            if (groupValue) {
+                delete groupValue[value];
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (checked !== isChecked) {
+            setIsChecked(checked);
+            if (groupValue) {
+                groupValue[value].checked = checked;
+            }
+        }
+    }, [checked]);
+    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

@@ -0,0 +1,17 @@
+/**
+ * ✔ enable
+ */
+import { createElement, Fragment } from 'react';
+import Portal from './mpx-portal/index';
+import { warn } from '@mpxjs/utils';
+const _RootPortal = (props) => {
+    const { children, enable = true } = props;
+    if (props.style) {
+        warn('The root-portal component does not support the style prop.');
+    }
+    return enable
+        ? createElement(Portal, null, children)
+        : createElement(Fragment, null, children);
+};
+_RootPortal.displayName = 'MpxRootPortal';
+export default _RootPortal;