@mpxjs/webpack-plugin 2.10.18-beta.1 → 2.10.19

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

@@ -1,8 +1,10 @@
-import { createElement, forwardRef, useRef, useCallback, useContext, useState, useEffect } from 'react';
-import { useTransformStyle, useLayout, extendObject } from './utils';
+import { createElement, forwardRef, useRef, useCallback, useContext, useState, useEffect, useMemo } from 'react';
+import { getCurrentPage, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
-import { noop } from '@mpxjs/utils';
+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,
@@ -12,9 +14,8 @@ const qualityValue = {
 let RecordRes = null;
 const _camera = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { Camera, useCameraDevice, useCodeScanner, useCameraFormat } = require('react-native-vision-camera');
     const cameraRef = useRef(null);
-    const { mode = 'normal', resolution = 'medium', devicePosition = 'back', flash = 'auto', 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 { 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,
@@ -24,23 +25,25 @@ const _camera = forwardRef((props, ref) => {
         parentHeight
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: cameraRef });
-    const isPhoto = mode === 'normal';
+    const isPhoto = useRef(false);
+    isPhoto.current = mode === 'normal';
     const device = useCameraDevice(devicePosition || 'back');
-    const { navigation } = useContext(RouteContext) || {};
+    const { navigation, pageId } = useContext(RouteContext) || {};
     const [zoomValue, setZoomValue] = useState(1);
+    const [isActive, setIsActive] = useState(true);
     const [hasPermission, setHasPermission] = useState(null);
-    const hasCamera = useRef(false);
+    const page = getCurrentPage(pageId);
     // 先定义常量，避免在条件判断后使用
     const maxZoom = device?.maxZoom || 1;
     const RESOLUTION_MAPPING = {
-        low: { width: 640, height: 480 },
-        medium: { width: 1280, height: 720 },
-        high: { width: 1920, height: 1080 }
+        low: { width: 1280, height: 720 },
+        medium: { width: 1920, height: 1080 },
+        high: 'max'
     };
     const FRAME_SIZE_MAPPING = {
-        small: { width: 480, height: 360 },
-        medium: { width: 720, height: 540 },
-        large: { width: 1080, height: 810 }
+        small: { width: 1280, height: 720 },
+        medium: { width: 1920, height: 1080 },
+        large: 'max'
     };
     const format = useCameraFormat(device, [
         {
@@ -48,15 +51,31 @@ const _camera = forwardRef((props, ref) => {
             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', 'ean-13'],
+        codeTypes: ['qr'],
         onCodeScanned: (codes) => {
-            const result = codes.map(code => code.value).join(',');
-            bindscancode && bindscancode(getCustomEvent('scancode', {}, {
-                detail: {
-                    result: codes.map(code => code.value).join(',')
-                }
-            }));
+            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(() => {
@@ -69,14 +88,15 @@ const _camera = forwardRef((props, ref) => {
     const onStopped = useCallback(() => {
         bindstop && bindstop();
     }, [bindstop]);
-    const camera = {
+    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?.({
-                flash,
                 quality: qualityValue[options.quality || 'normal']
             }).then((res) => {
                 const result = {
@@ -97,7 +117,8 @@ const _camera = forwardRef((props, ref) => {
             let { timeout = 30, success = noop, fail = noop, complete = noop, timeoutCallback = noop } = options;
             timeout = timeout > 300 ? 300 : timeout;
             let recordTimer = null;
-            let isTimeout = false;
+            if (isScancode(fail, complete))
+                return;
             try {
                 const result = {
                     errMsg: 'startRecord:ok'
@@ -105,7 +126,6 @@ const _camera = forwardRef((props, ref) => {
                 success(result);
                 complete(result);
                 cameraRef.current?.startRecording?.({
-                    flash,
                     onRecordingError: (error) => {
                         if (recordTimer)
                             clearTimeout(recordTimer);
@@ -122,7 +142,6 @@ const _camera = forwardRef((props, ref) => {
                     }
                 });
                 recordTimer = setTimeout(() => {
-                    isTimeout = true;
                     cameraRef.current?.stopRecording().catch(() => {
                         // 忽略停止录制时的错误
                     });
@@ -140,6 +159,8 @@ const _camera = forwardRef((props, ref) => {
         },
         stopRecord: (options = {}) => {
             const { success = noop, fail = noop, complete = noop } = options;
+            if (isScancode(fail, complete))
+                return;
             try {
                 cameraRef.current?.stopRecording().then(() => {
                     setTimeout(() => {
@@ -170,16 +191,20 @@ const _camera = forwardRef((props, ref) => {
                 complete(result);
             }
         }
-    };
+    }), []);
     useEffect(() => {
-        if (navigation) {
-            if (navigation && !navigation.camera) {
-                navigation.camera = camera;
-            }
-            else {
-                hasCamera.current = true;
-                navigation.camera.multi = true;
-            }
+        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 {
@@ -198,23 +223,25 @@ const _camera = forwardRef((props, ref) => {
         };
         checkCameraPermission();
         return () => {
-            if (navigation && navigation.camera) {
-                navigation.camera = null;
+            if (navigation?.camera === camera) {
+                delete navigation.camera;
             }
+            unWatch && unWatch();
         };
     }, []);
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: cameraRef,
         style: extendObject({}, normalStyle, layoutStyle),
-        isActive: true,
+        isActive,
         photo: true,
         video: true,
         onInitialized,
         onStopped,
         device,
         format,
-        codeScanner: !isPhoto ? codeScanner : undefined,
-        zoom: zoomValue
+        codeScanner: !isPhoto.current ? codeScanner : undefined,
+        zoom: zoomValue,
+        torch: flash
     }), [
         'mode',
         'resolution',
@@ -227,7 +254,14 @@ const _camera = forwardRef((props, ref) => {
     ], {
         layoutRef
     });
-    if (!hasPermission || hasCamera.current || !device) {
+    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);

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-swiper.d.ts

@@ -56,7 +56,6 @@ interface SwiperProps {
     'wait-for'?: Array<GestureHandler>;
     'simultaneous-handlers'?: Array<GestureHandler>;
     disableGesture?: boolean;
-    'display-multiple-items'?: number;
     bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }
 declare const SwiperWrapper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<HandlerRef<View, SwiperProps>>>;

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

@@ -72,7 +72,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
         marginBottom: dotSpacing,
         zIndex: 98
     };
-    const displayMultipleItems = props['display-multiple-items'] || 1;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -98,19 +97,19 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const preMarginShared = useSharedValue(preMargin);
     const nextMarginShared = useSharedValue(nextMargin);
     const autoplayShared = useSharedValue(autoplay);
-    const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
     // 默认前后补位的元素个数
-    const patchElmNum = (circular && children.length > 1) ? displayMultipleItems + 1 : 0;
+    const patchElmNum = circular ? (preMargin ? 2 : 1) : 0;
     const patchElmNumShared = useSharedValue(patchElmNum);
-    const displayMultipleItemsShared = useSharedValue(displayMultipleItems);
     const circularShared = useSharedValue(circular);
+    // 支持swiper-item 同时存在<swiper-item wx:for/>和<swiper-item>并列的情况
+    const children = React.Children.toArray(props.children);
     // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
     const childrenLength = useSharedValue(children.length);
     const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - preMargin - nextMargin : normalStyle.width;
     const initHeight = typeof normalStyle?.height === 'number' ? normalStyle.height - preMargin - nextMargin : normalStyle.height;
     const dir = horizontal === false ? 'y' : 'x';
     const pstep = dir === 'x' ? initWidth : initHeight;
-    const initStep = isNaN(pstep) ? 0 : pstep / displayMultipleItems;
+    const initStep = isNaN(pstep) ? 0 : pstep;
     // 每个元素的宽度 or 高度，有固定值直接初始化无则0
     const step = useSharedValue(initStep);
     // 记录选中元素的索引值
@@ -174,7 +173,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const { width, height } = e.nativeEvent.layout;
         const realWidth = dir === 'x' ? width - preMargin - nextMargin : width;
         const realHeight = dir === 'y' ? height - preMargin - nextMargin : height;
-        const iStep = (dir === 'x' ? realWidth : realHeight) / displayMultipleItems;
+        const iStep = dir === 'x' ? realWidth : realHeight;
         if (iStep !== step.value) {
             step.value = iStep;
             updateCurrent(propCurrent, iStep);
@@ -230,35 +229,19 @@ const SwiperWrapper = forwardRef((props, ref) => {
     function renderItems() {
         const intLen = children.length;
         let renderChild = children.slice();
-        // if (circular && intLen > 1) {
-        //   // 最前面加最后一个元素
-        //   const lastChild = React.cloneElement(children[intLen - 1] as ReactElement, { key: 'clone0' })
-        //   // 最后面加第一个元素
-        //   const firstChild = React.cloneElement(children[0] as ReactElement, { key: 'clone1' })
-        //   if (preMargin) {
-        //     const lastChild1 = React.cloneElement(children[intLen - 2] as ReactElement, { key: 'clone2' })
-        //     const firstChild1 = React.cloneElement(children[1] as ReactElement, { key: 'clone3' })
-        //     renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1])
-        //   } else {
-        //     renderChild = [lastChild].concat(renderChild).concat([firstChild])
-        //   }
-        // }
         if (circular && intLen > 1) {
-            // 动态生成前置补位元素
-            const frontClones = [];
-            // 计算补位序列的起始索引。例如 len=3, patch=2 -> start=1 (即从B开始)
-            const startIndex = intLen - (patchElmNum % intLen);
-            for (let i = 0; i < patchElmNum; i++) {
-                const sourceIndex = (startIndex + i) % intLen;
-                frontClones.push(React.cloneElement(children[sourceIndex], { key: `clone_front_${i}` }));
-            }
-            // 动态生成后置补位元素
-            const backClones = [];
-            for (let i = 0; i < patchElmNum; i++) {
-                const sourceIndex = i % intLen;
-                backClones.push(React.cloneElement(children[sourceIndex], { key: `clone_back_${i}` }));
-            }
-            renderChild = [...frontClones, ...renderChild, ...backClones];
+            // 最前面加最后一个元素
+            const lastChild = React.cloneElement(children[intLen - 1], { key: 'clone0' });
+            // 最后面加第一个元素
+            const firstChild = React.cloneElement(children[0], { key: 'clone1' });
+            if (preMargin) {
+                const lastChild1 = React.cloneElement(children[intLen - 2], { key: 'clone2' });
+                const firstChild1 = React.cloneElement(children[1], { key: 'clone3' });
+                renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1]);
+            }
+            else {
+                renderChild = [lastChild].concat(renderChild).concat([firstChild]);
+            }
         }
         const arrChildren = renderChild.map((child, index) => {
             const extraStyle = {};
@@ -293,7 +276,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             let nextIndex = currentIndex.value;
             if (!circularShared.value) {
                 // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器
-                if (currentIndex.value === childrenLength.value - displayMultipleItemsShared.value) {
+                if (currentIndex.value === childrenLength.value - 1) {
                     pauseLoop();
                     return;
                 }
@@ -459,13 +442,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
         };
     }, [autoplay]);
     useEffect(() => {
-        if (circular !== circularShared.value || patchElmNum !== patchElmNumShared.value || displayMultipleItems !== displayMultipleItemsShared.value) {
+        if (circular !== circularShared.value) {
             circularShared.value = circular;
-            patchElmNumShared.value = patchElmNum;
-            displayMultipleItemsShared.value = displayMultipleItems;
+            patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0;
             offset.value = getOffset(currentIndex.value, step.value);
         }
-    }, [circular, patchElmNum, displayMultipleItems]);
+    }, [circular, preMargin]);
     const { gestureHandler } = useMemo(() => {
         // 基于transdir + 当前offset计算索引
         function getTargetPosition(eventData) {
@@ -484,8 +466,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const moveToIndex = transdir < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
             // 实际应该定位的索引值
             if (!circularShared.value) {
-                const maxIndex = Math.max(0, childrenLength.value - displayMultipleItemsShared.value);
-                selectedIndex = Math.min(Math.max(moveToIndex, 0), maxIndex);
+                selectedIndex = moveToIndex;
                 moveToTargetPos = selectedIndex * step.value;
             }
             else {
@@ -521,7 +502,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const gestureMovePos = offset.value + translation;
             if (!circularShared.value) {
                 // 如果只判断区间，中间非滑动状态(handleResistanceMove)向左滑动，突然改为向右滑动，但是还在非滑动态，本应该可滑动判断为了不可滑动
-                const posEnd = -step.value * (childrenLength.value - displayMultipleItemsShared.value);
+                const posEnd = -step.value * (childrenLength.value - 1);
                 if (transdir < 0) {
                     return gestureMovePos > posEnd;
                 }
@@ -628,7 +609,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const { translation, transdir } = eventData;
             const moveToOffset = offset.value + translation;
             const maxOverDrag = Math.floor(step.value / 2);
-            const maxOffset = translation < 0 ? -(childrenLength.value - displayMultipleItemsShared.value) * step.value : 0;
+            const maxOffset = translation < 0 ? -(childrenLength.value - 1) * step.value : 0;
             let resistance = 0.1;
             let overDrag = 0;
             let finalOffset = 0;