@mpxjs/webpack-plugin 2.10.6 → 2.10.7-beta.10

package/lib/runtime/components/react/dist/AsyncContainer.jsx

@@ -0,0 +1,141 @@
+import { Component, Suspense } from 'react';
+import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
+import FastImage from '@d11/react-native-fast-image';
+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 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 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>);
+};
+export default class AsyncContainer extends Component {
+    suspenseFallback;
+    errorFallback;
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            key: 0
+        };
+        this.suspenseFallback = this.getSuspenseFallback();
+        this.errorFallback = this.getErrorFallback();
+    }
+    // render 阶段收集到的错误
+    static getDerivedStateFromError(error) {
+        if (error.name === 'ChunkLoadError') {
+            return {
+                hasError: true,
+                key: 0
+            };
+        }
+        else {
+            // 被外层捕获
+            throw error;
+        }
+    }
+    componentDidCatch(error) {
+        if (error.name === 'ChunkLoadError' && this.props.type === 'component') {
+            const request = error.request || '';
+            const subpackage = request.split('/').filter((i) => !!i)[0];
+            global.onLazyLoadError({
+                type: 'subpackage',
+                subpackage: [subpackage],
+                errMsg: `loadSubpackage: ${error.type}`
+            });
+        }
+    }
+    reloadPage() {
+        this.setState((prevState) => {
+            return {
+                hasError: false,
+                key: prevState.key + 1
+            };
+        });
+    }
+    getSuspenseFallback() {
+        if (this.props.type === 'page') {
+            const Fallback = this.props.loading || DefaultLoading;
+            return <Fallback />;
+        }
+        else {
+            const Fallback = this.props.loading;
+            return <Fallback {...this.props.props}></Fallback>;
+        }
+    }
+    getErrorFallback() {
+        if (this.props.type === 'page') {
+            const Fallback = this.props.fallback || DefaultFallback;
+            return <Fallback onReload={this.reloadPage.bind(this)}></Fallback>;
+        }
+        else {
+            const Fallback = this.props.loading;
+            return <Fallback {...this.props.props}></Fallback>;
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.errorFallback;
+        }
+        else {
+            return (<Suspense fallback={this.suspenseFallback} key={this.state.key}>
+          {this.props.children(this.props.props)}
+        </Suspense>);
+        }
+    }
+}

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

@@ -1,5 +1,7 @@
 import { createContext } from 'react';
-export const MovableAreaContext = createContext({ width: 0, height: 0 });
+import { Animated } from 'react-native';
+import { noop } from '@mpxjs/utils';
+export const MovableAreaContext = createContext({ width: 0, height: 0, scaleArea: false });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
 export const RadioGroupContext = createContext(null);
@@ -10,5 +12,6 @@ export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
-export const ScrollViewContext = createContext({ gestureRef: null });
+export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
+export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });

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

@@ -35,7 +35,7 @@
  * ✔ bindtap
  */
 import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
-import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { View, StyleSheet, Animated, Easing, useAnimatedValue } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { GestureDetector } from 'react-native-gesture-handler';
 import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils';
@@ -104,7 +104,7 @@ const timer = (data, time = 3000) => new Promise((resolve) => {
     }, time);
 });
 const Loading = ({ alone = false }) => {
-    const image = useRef(new Animated.Value(0)).current;
+    const image = useAnimatedValue(0);
     const rotate = image.interpolate({
         inputRange: [0, 1],
         outputRange: ['0deg', '360deg']

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

@@ -91,7 +91,7 @@ const Input = forwardRef((props, ref) => {
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
-        if (inputValue !== value) {
+        if (value !== tmpValue.current) {
             const parsed = parseValue(value);
             tmpValue.current = parsed;
             setInputValue(parsed);

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

@@ -1,33 +1,87 @@
 /**
- * ✘ scale-area
+ * ✔ scale-area
  */
 import { View } from 'react-native';
-import { forwardRef, useRef, useMemo, createElement } from 'react';
+import { forwardRef, useRef, useMemo, useCallback, createElement } from 'react';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import { useSharedValue } from 'react-native-reanimated';
 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 = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    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 { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const movableViewRef = useRef(null);
-    useNodesRef(props, ref, movableViewRef, {
+    const movableAreaRef = useRef(null);
+    const movableViewsValue = useSharedValue({});
+    useNodesRef(props, ref, movableAreaRef, {
         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
-    }), [normalStyle.width, normalStyle.height]);
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
+        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]);
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
-        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
-        ref: movableViewRef
+        style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
+        ref: movableAreaRef
     }), [], { 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);
     }