@mpxjs/webpack-plugin 2.10.7-beta.9 → 2.10.8

package/lib/runtime/components/react/context.ts

@@ -51,24 +51,14 @@ export interface RouteContextValue {
   pageId: number
   navigation: Record<string, any>
 }
-export interface MovableAreaContextValue {
-  width: number
-  height: number
-  scaleArea: boolean
-  onAreaScale?: (scaleInfo: { scale: number }) => void
-  registerMovableView?: (id: string, callbacks: {
-    onScale: (scaleInfo: { scale: number }) => void
-    onScaleEnd?: () => void
-  }) => void
-  unregisterMovableView?: (id: string) => void
-}
 
-export const MovableAreaContext = createContext<MovableAreaContextValue>({ width: 0, height: 0, scaleArea: false })
 export interface StickyContextValue {
   registerStickyHeader: Function,
   unregisterStickyHeader: Function
 }
 
+export const MovableAreaContext = createContext({ width: 0, height: 0 })
+
 export const FormContext = createContext<FormContextValue | null>(null)
 
 export const CheckboxGroupContext = createContext<GroupContextValue | null>(null)

package/lib/runtime/components/react/dist/context.js

@@ -1,7 +1,7 @@
 import { createContext } from 'react';
 import { Animated } from 'react-native';
 import { noop } from '@mpxjs/utils';
-export const MovableAreaContext = createContext({ width: 0, height: 0, scaleArea: false });
+export const MovableAreaContext = createContext({ width: 0, height: 0 });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
 export const RadioGroupContext = createContext(null);

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -8,7 +8,7 @@ const globalEventState = {
 const getTouchEvent = (type, event, config) => {
     const { navigation, propsRef, layoutRef } = config;
     const props = propsRef.current;
-    const { y: navigationY = 0 } = navigation?.layout || {};
+    const { top: navigationY = 0 } = navigation?.layout || {};
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;

package/lib/runtime/components/react/dist/mpx-async-suspense.jsx

@@ -0,0 +1,135 @@
+import { useState, useEffect, useCallback, useRef, createElement } from 'react';
+import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import FastImage from '@d11/react-native-fast-image';
+const asyncChunkMap = new Map();
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        backgroundColor: '#fff'
+    },
+    loadingImage: {
+        width: 100,
+        height: 100,
+        marginTop: 220,
+        alignSelf: 'center'
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '500',
+        textAlign: 'center'
+    },
+    errorImage: {
+        marginTop: 80,
+        width: 220,
+        aspectRatio: 1,
+        alignSelf: 'center'
+    },
+    errorText: {
+        fontSize: 16,
+        textAlign: 'center',
+        color: '#333',
+        marginBottom: 20
+    },
+    retryButton: {
+        position: 'absolute',
+        bottom: 54,
+        left: 20,
+        right: 20,
+        backgroundColor: '#fff',
+        paddingVertical: 15,
+        borderRadius: 30,
+        marginTop: 40,
+        borderWidth: 1,
+        borderColor: '#FF5F00'
+    },
+    retryButtonText: {
+        color: '#FF5F00',
+        fontSize: 16,
+        fontWeight: '500',
+        textAlign: 'center'
+    }
+});
+const DefaultFallback = ({ onReload }) => {
+    return (<View style={styles.container}>
+      <Image source={{
+            uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png'
+        }} style={styles.errorImage} resizeMode="contain"/>
+      <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
+      <TouchableOpacity style={styles.retryButton} onPress={onReload} activeOpacity={0.7}>
+        <Text style={styles.retryButtonText}>点击重试</Text>
+      </TouchableOpacity>
+    </View>);
+};
+const DefaultLoading = () => {
+    return (<View style={styles.container}>
+      <FastImage style={styles.loadingImage} source={{
+            uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif'
+        }} resizeMode={FastImage.resizeMode.contain}></FastImage>
+    </View>);
+};
+const AsyncSuspense = ({ type, innerProps, chunkName, moduleId, loading, fallback, getChildren }) => {
+    const [status, setStatus] = useState('pending');
+    const chunkLoaded = asyncChunkMap.has(moduleId);
+    const loadChunkPromise = useRef(null);
+    const reloadPage = useCallback(() => {
+        setStatus('pending');
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        if (!chunkLoaded && status === 'pending') {
+            if (loadChunkPromise.current) {
+                loadChunkPromise
+                    .current.then((res) => {
+                    if (cancelled)
+                        return;
+                    asyncChunkMap.set(moduleId, res);
+                    setStatus('loaded');
+                })
+                    .catch((e) => {
+                    if (cancelled)
+                        return;
+                    if (type === 'component') {
+                        global.onLazyLoadError({
+                            type: 'subpackage',
+                            subpackage: [chunkName],
+                            errMsg: `loadSubpackage: ${e.type}`
+                        });
+                    }
+                    loadChunkPromise.current = null;
+                    setStatus('error');
+                });
+            }
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [status]);
+    if (chunkLoaded) {
+        const Comp = asyncChunkMap.get(moduleId);
+        return createElement(Comp, innerProps);
+    }
+    else if (status === 'error') {
+        if (type === 'page') {
+            fallback = fallback || DefaultFallback;
+            return createElement(fallback, { onReload: reloadPage });
+        }
+        else {
+            return fallback ? createElement(fallback, innerProps) : null;
+        }
+    }
+    else {
+        if (!loadChunkPromise.current) {
+            loadChunkPromise.current = getChildren();
+        }
+        if (type === 'page') {
+            return createElement(loading || DefaultLoading);
+        }
+        else {
+            return fallback ? createElement(fallback, innerProps) : null;
+        }
+    }
+};
+AsyncSuspense.displayName = 'MpxAsyncSuspense';
+export default AsyncSuspense;

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -1,87 +1,33 @@
 /**
- * ✔ scale-area
+ * ✘ scale-area
  */
 import { View } from 'react-native';
-import { forwardRef, useRef, useMemo, useCallback, createElement } from 'react';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-import { useSharedValue } from 'react-native-reanimated';
+import { forwardRef, useRef, useMemo, createElement } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
 import Portal from './mpx-portal';
 const _MovableArea = forwardRef((props, ref) => {
-    const { style = {}, 'scale-area': scaleArea = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const movableAreaRef = useRef(null);
-    const movableViewsValue = useSharedValue({});
-    useNodesRef(props, ref, movableAreaRef, {
+    const movableViewRef = useRef(null);
+    useNodesRef(props, ref, movableViewRef, {
         style: normalStyle
     });
-    // 注册/注销 MovableView 的回调
-    const registerMovableView = useCallback((id, callbacks) => {
-        movableViewsValue.value = extendObject(movableViewsValue.value, { [id]: callbacks });
-    }, []);
-    const unregisterMovableView = useCallback((id) => {
-        delete movableViewsValue.value[id];
-    }, []);
-    // 处理区域缩放手势
-    const handleAreaScale = useCallback((scaleInfo) => {
-        'worklet';
-        if (scaleArea) {
-            // 将缩放信息广播给所有注册的 MovableView
-            Object.values(movableViewsValue.value).forEach((callbacks) => {
-                callbacks.onScale && callbacks.onScale(scaleInfo);
-            });
-        }
-    }, [scaleArea]);
-    // 处理区域缩放结束
-    const handleAreaScaleEnd = useCallback(() => {
-        'worklet';
-        if (scaleArea) {
-            // 通知所有注册的 MovableView 缩放结束
-            Object.values(movableViewsValue.value).forEach((callbacks) => {
-                callbacks.onScaleEnd && callbacks.onScaleEnd();
-            });
-        }
-    }, [scaleArea]);
     const contextValue = useMemo(() => ({
         height: normalStyle.height || 10,
-        width: normalStyle.width || 10,
-        scaleArea,
-        registerMovableView,
-        unregisterMovableView
-    }), [normalStyle.width, normalStyle.height, scaleArea]);
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableAreaRef });
-    // 创建缩放手势
-    const scaleGesture = useMemo(() => {
-        if (!scaleArea)
-            return null;
-        return Gesture.Pinch()
-            .onUpdate((e) => {
-            'worklet';
-            handleAreaScale(e);
-        })
-            .onEnd(() => {
-            'worklet';
-            handleAreaScaleEnd();
-        });
-    }, [scaleArea]);
+        width: normalStyle.width || 10
+    }), [normalStyle.width, normalStyle.height]);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
-        ref: movableAreaRef
+        ref: movableViewRef
     }), [], { layoutRef });
     let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     })));
-    // 如果启用了 scale-area，包装一个 GestureDetector
-    if (scaleArea && scaleGesture) {
-        movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(GestureDetector, { gesture: scaleGesture }, createElement(View, innerProps, wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        }))));
-    }
     if (hasPositionFixed) {
         movableComponent = createElement(Portal, null, movableComponent);
     }