@mpxjs/webpack-plugin 2.10.18 → 2.10.20

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

@@ -0,0 +1,270 @@
+import { createElement, forwardRef, useRef, useCallback, useContext, useState, useEffect, useMemo } from 'react';
+import { getCurrentPage, useTransformStyle, useLayout, extendObject } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { Camera, useCameraDevice, useCodeScanner, useCameraFormat } from 'react-native-vision-camera';
+import { noop, warn, hasOwn } from '@mpxjs/utils';
+import { RouteContext } from './context';
+import { watch } from '@mpxjs/core';
+const qualityValue = {
+    high: 90,
+    normal: 75,
+    low: 50,
+    original: 100
+};
+let RecordRes = null;
+const _camera = forwardRef((props, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const cameraRef = useRef(null);
+    const { mode = 'normal', resolution = 'medium', 'device-position': devicePosition = 'back', flash = 'auto', 'frame-size': frameSize = 'medium', bindinitdone, bindstop, bindscancode, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-var': enableVar, 'external-var-context': externalVarContext, style = {} } = props;
+    const styleObj = extendObject({}, style);
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: cameraRef });
+    const isPhoto = useRef(false);
+    isPhoto.current = mode === 'normal';
+    const device = useCameraDevice(devicePosition || 'back');
+    const { navigation, pageId } = useContext(RouteContext) || {};
+    const [zoomValue, setZoomValue] = useState(1);
+    const [isActive, setIsActive] = useState(true);
+    const [hasPermission, setHasPermission] = useState(null);
+    const page = getCurrentPage(pageId);
+    // 先定义常量，避免在条件判断后使用
+    const maxZoom = device?.maxZoom || 1;
+    const RESOLUTION_MAPPING = {
+        low: { width: 1280, height: 720 },
+        medium: { width: 1920, height: 1080 },
+        high: 'max'
+    };
+    const FRAME_SIZE_MAPPING = {
+        small: { width: 1280, height: 720 },
+        medium: { width: 1920, height: 1080 },
+        large: 'max'
+    };
+    const format = useCameraFormat(device, [
+        {
+            photoResolution: RESOLUTION_MAPPING[resolution],
+            videoResolution: FRAME_SIZE_MAPPING[frameSize] || RESOLUTION_MAPPING[resolution]
+        }
+    ]);
+    const isScancode = useCallback((fail, complete) => {
+        if (!isPhoto.current) {
+            const result = {
+                errMsg: 'Not allow to invoke takePhoto in \'scanCode\' mode.'
+            };
+            fail(result);
+            complete(result);
+            return true;
+        }
+        return false;
+    }, []);
+    const codeScanner = useCodeScanner({
+        codeTypes: ['qr'],
+        onCodeScanned: (codes) => {
+            codes.forEach(code => {
+                const type = code.type === 'qr' ? 'QR_CODE' : code.type?.toUpperCase();
+                const frame = code.frame || {};
+                bindscancode && bindscancode(getCustomEvent('scancode', {}, {
+                    detail: {
+                        result: code.value,
+                        type,
+                        scanArea: [parseInt(frame.x) || 0, parseInt(frame.y) || 0, parseInt(frame.width) || 0, parseInt(frame.height) || 0]
+                    }
+                }));
+            });
+        }
+    });
+    const onInitialized = useCallback(() => {
+        bindinitdone && bindinitdone(getCustomEvent('initdone', {}, {
+            detail: {
+                maxZoom
+            }
+        }));
+    }, [bindinitdone, maxZoom]);
+    const onStopped = useCallback(() => {
+        bindstop && bindstop();
+    }, [bindstop]);
+    const camera = useMemo(() => ({
+        setZoom: (zoom) => {
+            setZoomValue(zoom);
+        },
+        takePhoto: (options = {}) => {
+            const { success = noop, fail = noop, complete = noop } = options;
+            if (isScancode(fail, complete))
+                return;
+            cameraRef.current?.takePhoto?.({
+                quality: qualityValue[options.quality || 'normal']
+            }).then((res) => {
+                const result = {
+                    errMsg: 'takePhoto:ok',
+                    tempImagePath: res.path
+                };
+                success(result);
+                complete(result);
+            }).catch(() => {
+                const result = {
+                    errMsg: 'takePhoto:fail'
+                };
+                fail(result);
+                complete(result);
+            });
+        },
+        startRecord: (options = {}) => {
+            let { timeout = 30, success = noop, fail = noop, complete = noop, timeoutCallback = noop } = options;
+            timeout = timeout > 300 ? 300 : timeout;
+            let recordTimer = null;
+            if (isScancode(fail, complete))
+                return;
+            try {
+                const result = {
+                    errMsg: 'startRecord:ok'
+                };
+                success(result);
+                complete(result);
+                cameraRef.current?.startRecording?.({
+                    onRecordingError: (error) => {
+                        if (recordTimer)
+                            clearTimeout(recordTimer);
+                        const errorResult = {
+                            errMsg: 'startRecord:fail during recording',
+                            error: error
+                        };
+                        timeoutCallback(errorResult);
+                    },
+                    onRecordingFinished: (video) => {
+                        RecordRes = video;
+                        if (recordTimer)
+                            clearTimeout(recordTimer);
+                    }
+                });
+                recordTimer = setTimeout(() => {
+                    cameraRef.current?.stopRecording().catch(() => {
+                        // 忽略停止录制时的错误
+                    });
+                }, timeout * 1000);
+            }
+            catch (error) {
+                if (recordTimer)
+                    clearTimeout(recordTimer);
+                const result = {
+                    errMsg: 'startRecord:fail ' + (error.message || 'unknown error')
+                };
+                fail(result);
+                complete(result);
+            }
+        },
+        stopRecord: (options = {}) => {
+            const { success = noop, fail = noop, complete = noop } = options;
+            if (isScancode(fail, complete))
+                return;
+            try {
+                cameraRef.current?.stopRecording().then(() => {
+                    setTimeout(() => {
+                        if (RecordRes) {
+                            const result = {
+                                errMsg: 'stopRecord:ok',
+                                tempVideoPath: RecordRes?.path,
+                                duration: RecordRes.duration * 1000 // 转成ms
+                            };
+                            RecordRes = null;
+                            success(result);
+                            complete(result);
+                        }
+                    }, 200); // 延时200ms，确保录制结果已准备好
+                }).catch((e) => {
+                    const result = {
+                        errMsg: 'stopRecord:fail ' + (e.message || 'promise rejected')
+                    };
+                    fail(result);
+                    complete(result);
+                });
+            }
+            catch (error) {
+                const result = {
+                    errMsg: 'stopRecord:fail ' + (error.message || 'unknown error')
+                };
+                fail(result);
+                complete(result);
+            }
+        }
+    }), []);
+    useEffect(() => {
+        let unWatch;
+        if (pageId && hasOwn(global.__mpxPageStatusMap, String(pageId))) {
+            unWatch = watch(() => global.__mpxPageStatusMap[pageId], (newVal) => {
+                if (newVal === 'show') {
+                    if (page.id === pageId) {
+                        setIsActive(true);
+                    }
+                }
+                if (newVal === 'hide') {
+                    setIsActive(false);
+                }
+            }, { sync: true });
+        }
+        const checkCameraPermission = async () => {
+            try {
+                const cameraPermission = global?.__mpx?.config?.rnConfig?.cameraPermission;
+                if (typeof cameraPermission === 'function') {
+                    const permissionResult = await cameraPermission();
+                    setHasPermission(permissionResult === true);
+                }
+                else {
+                    setHasPermission(true);
+                }
+            }
+            catch (error) {
+                setHasPermission(false);
+            }
+        };
+        checkCameraPermission();
+        return () => {
+            if (navigation?.camera === camera) {
+                delete navigation.camera;
+            }
+            unWatch && unWatch();
+        };
+    }, []);
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
+        ref: cameraRef,
+        style: extendObject({}, normalStyle, layoutStyle),
+        isActive,
+        photo: true,
+        video: true,
+        onInitialized,
+        onStopped,
+        device,
+        format,
+        codeScanner: !isPhoto.current ? codeScanner : undefined,
+        zoom: zoomValue,
+        torch: flash
+    }), [
+        'mode',
+        'resolution',
+        'frame-size',
+        'bindinitdone',
+        'bindstop',
+        'flash',
+        'bindscancode',
+        'binderror'
+    ], {
+        layoutRef
+    });
+    if (navigation && navigation.camera && navigation.camera !== camera) {
+        warn('<camera>: 一个页面只能插入一个');
+        return null;
+    }
+    else if (navigation) {
+        navigation.camera = camera;
+    }
+    if (!hasPermission || !device) {
+        return null;
+    }
+    return createElement(Camera, innerProps);
+});
+_camera.displayName = 'MpxCamera';
+export default _camera;

package/lib/runtime/components/react/dist/mpx-image.d.ts

@@ -5,7 +5,6 @@ export type Mode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'he
 export interface ImageProps {
     src?: string;
     mode?: Mode;
-    svg?: boolean;
     style?: ImageStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;

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

@@ -310,8 +310,7 @@ const Image = forwardRef((props, ref) => {
         style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: viewWidth } : {}, isWidthFixMode ? { height: viewHeight } : {})
     }), [
         'src',
-        'mode',
-        'svg'
+        'mode'
     ], {
         layoutRef
     });

package/lib/runtime/components/react/dist/mpx-picker/type.d.ts

@@ -71,7 +71,7 @@ export interface RegionProps extends BasePickerProps {
     /** 表示选中的省市区，默认选中每一列的第一个值, 默认值 [] */
     value?: string[];
     /** 默认值 region */
-    level?: 'province' | 'city' | 'region' | 'sub-district';
+    level?: 'province' | 'city' | 'region';
     /** 可为每一列的顶部添加一个自定义的项 */
     'custom-item'?: string;
     /** value 改变时触发 change 事件, event.detail = {value, code, postcode},

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

@@ -160,19 +160,96 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             }
         }
     }, [refresherTriggered]);
-    function scrollTo({ top = 0, left = 0, animated = false }) {
-        scrollToOffset(left, top, animated);
+    function scrollTo({ top = 0, left = 0, animated = false, duration }) {
+        // 如果指定了 duration 且需要动画，使用自定义动画
+        if (animated && duration && duration > 0) {
+            // 获取当前滚动位置
+            const currentY = scrollOptions.current.scrollTop || 0;
+            const currentX = scrollOptions.current.scrollLeft || 0;
+            const startTime = Date.now();
+            const deltaY = top - currentY;
+            const deltaX = left - currentX;
+            // 缓动函数：easeInOutCubic
+            const easing = (t) => {
+                return t < 0.5
+                    ? 4 * t * t * t
+                    : 1 - Math.pow(-2 * t + 2, 3) / 2;
+            };
+            // 使用 requestAnimationFrame 实现平滑动画
+            const animate = () => {
+                const elapsed = Date.now() - startTime;
+                const progress = Math.min(elapsed / duration, 1); // 0 到 1
+                const easeProgress = easing(progress);
+                const nextY = currentY + deltaY * easeProgress;
+                const nextX = currentX + deltaX * easeProgress;
+                if (scrollViewRef.current) {
+                    scrollViewRef.current.scrollTo({ y: nextY, x: nextX, animated: false });
+                }
+                if (progress < 1) {
+                    requestAnimationFrame(animate);
+                }
+                else {
+                    // 确保最终位置准确
+                    if (scrollViewRef.current) {
+                        scrollViewRef.current.scrollTo({ y: top, x: left, animated: false });
+                    }
+                }
+            };
+            requestAnimationFrame(animate);
+        }
+        else {
+            // 使用原生的 scrollTo
+            scrollToOffset(left, top, animated);
+        }
     }
-    function handleScrollIntoView(selector = '', { offset = 0, animated = true } = {}) {
-        const refs = __selectRef(`#${selector}`, 'node');
-        if (!refs)
-            return;
-        const { nodeRef } = refs.getNodeInstance();
-        nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
-            const adjustedLeft = scrollX ? left + offset : left;
-            const adjustedTop = scrollY ? top + offset : top;
-            scrollToOffset(adjustedLeft, adjustedTop, animated);
-        });
+    function handleScrollIntoView(selector = '', { offset = 0, animated = true, duration = undefined } = {}) {
+        try {
+            const currentSelectRef = propsRef.current.__selectRef;
+            if (!currentSelectRef) {
+                const errMsg = '__selectRef is not available. Please ensure the scroll-view component is properly initialized.';
+                warn(errMsg);
+                return;
+            }
+            const targetScrollView = scrollViewRef.current;
+            if (!targetScrollView) {
+                const errMsg = 'scrollViewRef is not ready';
+                warn(errMsg);
+                return;
+            }
+            // scroll-into-view prop 按微信规范直传裸 id（如 "section-1"），而 __refs 注册时 key 带 # 或 . 前缀，需补齐才能命中；
+            // pageScrollTo 调用方已自带前缀（如 "#section-1"）
+            const normalizedSelector = selector.startsWith('#') || selector.startsWith('.') ? selector : `#${selector}`;
+            // 调用 __selectRef 查找元素
+            const refs = currentSelectRef(normalizedSelector, 'node');
+            if (!refs) {
+                const errMsg = `Element not found for selector: ${normalizedSelector}`;
+                warn(errMsg);
+                return;
+            }
+            const { nodeRef } = refs.getNodeInstance();
+            if (!nodeRef?.current) {
+                const errMsg = `Node ref not available for selector: ${normalizedSelector}`;
+                warn(errMsg);
+                return;
+            }
+            nodeRef.current.measureLayout(targetScrollView, (left, top) => {
+                const adjustedLeft = scrollX ? left + offset : left;
+                const adjustedTop = scrollY ? top + offset : top;
+                // 使用 scrollTo 方法，支持 duration 参数
+                if (duration !== undefined) {
+                    scrollTo({ left: adjustedLeft, top: adjustedTop, animated, duration });
+                }
+                else {
+                    scrollToOffset(adjustedLeft, adjustedTop, animated);
+                }
+            }, (error) => {
+                warn(`Failed to measure layout for selector ${normalizedSelector}: ${error}`);
+            });
+        }
+        catch (error) {
+            const errMsg = `handleScrollIntoView error for selector ${selector}: ${error?.message || error}`;
+            warn(errMsg);
+        }
     }
     function selectLength(size) {
         return !scrollX ? size.height : size.width;
@@ -457,9 +534,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }
     // 处理下拉刷新的手势 - 使用 useMemo 避免每次渲染都创建
     const panGesture = useMemo(() => {
-        if (!hasRefresher)
-            return Gesture.Pan(); // 返回空手势
         return Gesture.Pan()
+            .activeOffsetY([-5, 5])
+            .failOffsetX([-5, 5])
             .onUpdate((event) => {
             'worklet';
             if (enhanced && !!bounces) {
@@ -519,7 +596,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             }
         })
             .simultaneousWithExternalGesture(scrollViewRef);
-    }, [hasRefresher, enhanced, bounces, refreshing, refresherThreshold]);
+    }, [enhanced, bounces, refreshing, refresherThreshold]);
     const scrollAdditionalProps = extendObject({
         style: extendObject(hasOwn(innerStyle, 'flex') || hasOwn(innerStyle, 'flexGrow')
             ? {}

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

@@ -184,7 +184,7 @@ const _WebView = forwardRef((props, ref) => {
                 }
                 break;
             case 'postMessage':
-                bindmessage && bindmessage(getCustomEvent('messsage', {}, {
+                bindmessage && bindmessage(getCustomEvent('message', {}, {
                     detail: {
                         data: params[0]?.data
                     }

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

@@ -284,8 +284,9 @@ export function parseValues(str, char = ' ') {
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 function parseTransform(transformStr) {
     const values = parseValues(transformStr);
-    // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
-    values.sort();
+    // Todo 2 RN下顺序不一致转换结果不一致，故这里不处理，动画前后transform 排序不一致的问题，由业务调整写法
+    // Todo 1 transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
+    // values.sort()
     const transform = [];
     values.forEach(item => {
         const match = item.match(/([/\w]+)\((.+)\)/);

package/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
 
 interface DefaultFallbackProps {
   onReload: () => void
+  bindreload: () => void
 }
 
 const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
@@ -171,7 +172,7 @@ const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
   } else if (status === 'error') {
     if (type === 'page') {
       const fallback = getFallback ? getFallback() : DefaultFallback
-      return createElement(fallback as ComponentType<DefaultFallbackProps>, { onReload: reloadPage })
+      return createElement(fallback as ComponentType<DefaultFallbackProps>, { onReload: reloadPage, bindreload: reloadPage })
     } else {
       return getFallback ? createElement(getFallback(), innerProps) : null
     }