@mpxjs/webpack-plugin 2.10.17-beta.6 → 2.10.17-beta.8

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

@@ -0,0 +1,272 @@
+import React, { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle } from 'react';
+import { SectionList, RefreshControl } from 'react-native';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { extendObject, useLayout, useTransformStyle } from './utils';
+const getGeneric = (generichash, generickey) => {
+    if (!generichash || !generickey)
+        return null;
+    const GenericComponent = global.__mpxGenericsMap?.[generichash]?.[generickey]?.();
+    if (!GenericComponent)
+        return null;
+    return forwardRef((props, ref) => {
+        return createElement(GenericComponent, extendObject({}, {
+            ref: ref
+        }, props));
+    });
+};
+const getListHeaderComponent = (generichash, generickey, data) => {
+    if (!generichash || !generickey)
+        return undefined;
+    const ListHeaderComponent = getGeneric(generichash, generickey);
+    return ListHeaderComponent ? createElement(ListHeaderComponent, { listHeaderData: data }) : null;
+};
+const getSectionHeaderRenderer = (generichash, generickey) => {
+    if (!generichash || !generickey)
+        return undefined;
+    return (sectionData) => {
+        if (!sectionData.section.hasSectionHeader)
+            return null;
+        const SectionHeaderComponent = getGeneric(generichash, generickey);
+        return SectionHeaderComponent ? createElement(SectionHeaderComponent, { itemData: sectionData.section.headerData }) : null;
+    };
+};
+const getItemRenderer = (generichash, generickey) => {
+    if (!generichash || !generickey)
+        return undefined;
+    return ({ item }) => {
+        const ItemComponent = getGeneric(generichash, generickey);
+        return ItemComponent ? createElement(ItemComponent, { itemData: item }) : null;
+    };
+};
+const RecycleView = forwardRef((props = {}, ref) => {
+    const { enhanced = false, bounces = true, scrollEventThrottle = 0, height, width, listData, generichash, style = {}, itemHeight = {}, sectionHeaderHeight = {}, listHeaderHeight = {}, listHeaderData = null, useListHeader = false, 'genericrecycle-item': genericrecycleItem, 'genericsection-header': genericsectionHeader, 'genericlist-header': genericListHeader, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-sticky': enableSticky = false, 'enable-back-to-top': enableBackToTop = false, 'end-reached-threshold': onEndReachedThreshold = 0.1, 'refresher-enabled': refresherEnabled, 'show-scrollbar': showScrollbar = true, 'refresher-triggered': refresherTriggered } = props;
+    const [refreshing, setRefreshing] = useState(!!refresherTriggered);
+    const scrollViewRef = useRef(null);
+    const indexMap = useRef({});
+    const reverseIndexMap = useRef({});
+    const { hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef });
+    useEffect(() => {
+        if (refreshing !== refresherTriggered) {
+            setRefreshing(!!refresherTriggered);
+        }
+    }, [refresherTriggered]);
+    const onRefresh = () => {
+        const { bindrefresherrefresh } = props;
+        bindrefresherrefresh &&
+            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
+    };
+    const onEndReached = () => {
+        const { bindscrolltolower } = props;
+        bindscrolltolower &&
+            bindscrolltolower(getCustomEvent('scrolltolower', {}, { layoutRef }, props));
+    };
+    const onScroll = (event) => {
+        const { bindscroll } = props;
+        bindscroll &&
+            bindscroll(getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props));
+    };
+    // 通过sectionIndex和rowIndex获取原始索引
+    const getOriginalIndex = (sectionIndex, rowIndex) => {
+        const key = `${sectionIndex}_${rowIndex}`;
+        return reverseIndexMap.current[key] ?? -1; // 如果找不到，返回-1
+    };
+    const scrollToIndex = ({ index, animated, viewOffset = 0, viewPosition = 0 }) => {
+        if (scrollViewRef.current) {
+            // 通过索引映射表快速定位位置
+            const position = indexMap.current[index];
+            const [sectionIndex, itemIndex] = position.split('_');
+            scrollViewRef.current.scrollToLocation?.({
+                itemIndex: itemIndex === 'header' ? 0 : Number(itemIndex) + 1,
+                sectionIndex: Number(sectionIndex) || 0,
+                animated,
+                viewOffset,
+                viewPosition
+            });
+        }
+    };
+    const getItemHeight = ({ sectionIndex, rowIndex }) => {
+        if (!itemHeight) {
+            return 0;
+        }
+        if (itemHeight.getter) {
+            const item = convertedListData[sectionIndex].data[rowIndex];
+            // 使用getOriginalIndex获取原始索引
+            const originalIndex = getOriginalIndex(sectionIndex, rowIndex);
+            return itemHeight.getter?.(item, originalIndex) || 0;
+        }
+        else {
+            return itemHeight.value || 0;
+        }
+    };
+    const getSectionHeaderHeight = ({ sectionIndex }) => {
+        const item = convertedListData[sectionIndex];
+        const { hasSectionHeader } = item;
+        // 使用getOriginalIndex获取原始索引
+        const originalIndex = getOriginalIndex(sectionIndex, 'header');
+        if (!hasSectionHeader)
+            return 0;
+        if (sectionHeaderHeight.getter) {
+            return sectionHeaderHeight.getter?.(item, originalIndex) || 0;
+        }
+        else {
+            return sectionHeaderHeight.value || 0;
+        }
+    };
+    const convertedListData = useMemo(() => {
+        const sections = [];
+        let currentSection = null;
+        // 清空之前的索引映射
+        indexMap.current = {};
+        // 清空反向索引映射
+        reverseIndexMap.current = {};
+        listData.forEach((item, index) => {
+            if (item.isSectionHeader) {
+                // 如果已经存在一个 section，先把它添加到 sections 中
+                if (currentSection) {
+                    sections.push(currentSection);
+                }
+                // 创建新的 section
+                currentSection = {
+                    headerData: item,
+                    data: [],
+                    hasSectionHeader: true,
+                    _originalItemIndex: index
+                };
+                // 为 section header 添加索引映射
+                const sectionIndex = sections.length;
+                indexMap.current[index] = `${sectionIndex}_header`;
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_header`] = index;
+            }
+            else {
+                // 如果没有当前 section，创建一个默认的
+                if (!currentSection) {
+                    // 创建默认section (无header的section)
+                    currentSection = {
+                        headerData: null,
+                        data: [],
+                        hasSectionHeader: false,
+                        _originalItemIndex: -1
+                    };
+                }
+                // 将 item 添加到当前 section 的 data 中
+                const itemIndex = currentSection.data.length;
+                currentSection.data.push(extendObject({}, item, {
+                    _originalItemIndex: index
+                }));
+                let sectionIndex;
+                // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
+                if (!currentSection.hasSectionHeader && sections.length === 0) {
+                    // 在默认section中(第一个且无header)
+                    sectionIndex = 0;
+                    indexMap.current[index] = `${sectionIndex}_${itemIndex}`;
+                }
+                else {
+                    // 在普通section中
+                    sectionIndex = sections.length;
+                    indexMap.current[index] = `${sectionIndex}_${itemIndex}`;
+                }
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index;
+            }
+        });
+        // 添加最后一个 section
+        if (currentSection) {
+            sections.push(currentSection);
+        }
+        return sections;
+    }, [listData]);
+    const { getItemLayout } = useMemo(() => {
+        const layouts = [];
+        let offset = 0;
+        if (useListHeader) {
+            // 计算列表头部的高度
+            offset += listHeaderHeight.getter?.() || listHeaderHeight.value || 0;
+        }
+        // 遍历所有 sections
+        convertedListData.forEach((section, sectionIndex) => {
+            // 添加 section header 的位置信息
+            const headerHeight = getSectionHeaderHeight({ sectionIndex });
+            layouts.push({
+                length: headerHeight,
+                offset,
+                index: layouts.length
+            });
+            offset += headerHeight;
+            // 添加该 section 中所有 items 的位置信息
+            section.data.forEach((item, itemIndex) => {
+                const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex });
+                layouts.push({
+                    length: contenteight,
+                    offset,
+                    index: layouts.length
+                });
+                offset += contenteight;
+            });
+            // 添加该 section 尾部位置信息
+            // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
+            layouts.push({
+                length: 0,
+                offset,
+                index: layouts.length
+            });
+        });
+        return {
+            itemLayouts: layouts,
+            getItemLayout: (data, index) => layouts[index]
+        };
+    }, [convertedListData, useListHeader]);
+    const scrollAdditionalProps = extendObject({
+        alwaysBounceVertical: false,
+        alwaysBounceHorizontal: false,
+        scrollEventThrottle: scrollEventThrottle,
+        scrollsToTop: enableBackToTop,
+        showsHorizontalScrollIndicator: showScrollbar,
+        onEndReachedThreshold,
+        ref: scrollViewRef,
+        bounces: false,
+        stickySectionHeadersEnabled: enableSticky,
+        onScroll: onScroll,
+        onEndReached: onEndReached
+    }, layoutProps);
+    if (enhanced) {
+        Object.assign(scrollAdditionalProps, {
+            bounces
+        });
+    }
+    if (refresherEnabled) {
+        Object.assign(scrollAdditionalProps, {
+            refreshing: refreshing
+        });
+    }
+    useImperativeHandle(ref, () => {
+        return {
+            ...props,
+            scrollToIndex
+        };
+    });
+    const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
+        'id',
+        'show-scrollbar',
+        'lower-threshold',
+        'refresher-triggered',
+        'refresher-enabled',
+        'bindrefresherrefresh'
+    ], { layoutRef });
+    return createElement(SectionList, extendObject({
+        style: [{ height, width }, style, layoutStyle],
+        sections: convertedListData,
+        renderItem: getItemRenderer(generichash, genericrecycleItem),
+        getItemLayout: getItemLayout,
+        ListHeaderComponent: useListHeader ? getListHeaderComponent(generichash, genericListHeader, listHeaderData) : null,
+        renderSectionHeader: getSectionHeaderRenderer(generichash, genericsectionHeader),
+        refreshControl: refresherEnabled
+            ? React.createElement(RefreshControl, {
+                onRefresh: onRefresh,
+                refreshing: refreshing
+            })
+            : undefined
+    }, innerProps));
+});
+export default RecycleView;

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

@@ -128,6 +128,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTranstion = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
+    // 记录是否首次
+    const isFirstRef = useRef(true);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     // 判断gesture手势是否需要协同处理、等待手势失败响应
@@ -355,10 +357,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
         };
     }, []);
     function handleSwiperChange(current, pCurrent) {
-        if (pCurrent !== currentIndex.value) {
-            const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
-            bindchange && bindchange(eventData);
-        }
+        const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
+        bindchange && bindchange(eventData);
     }
     const runOnJSCallbackRef = useRef({
         loop,
@@ -408,9 +408,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && bindchange) {
+        if (newIndex !== preIndex && bindchange && !isFirstRef.current) {
             runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent);
         }
+        isFirstRef.current = false;
     });
     useEffect(() => {
         let patchStep = 0;

package/lib/runtime/components/react/dist/utils.d.ts

@@ -39,8 +39,9 @@ interface TransformStyleConfig {
     parentFontSize?: number;
     parentWidth?: number;
     parentHeight?: number;
+    isTransformBorderRadiusPercent?: boolean;
 }
-export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
+export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, isTransformBorderRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
     hasVarDec: boolean;
     varContextRef: MutableRefObject<{}>;
     setWidth: Dispatch<SetStateAction<number>>;

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

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } from 'react';
 import { Image } from 'react-native';
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, isEmptyObject } from '@mpxjs/utils';
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
 import { VarContext, ScrollViewContext, RouteContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
@@ -110,15 +110,17 @@ export function splitStyle(styleObj) {
         }
     });
 }
-const selfPercentRule = {
-    translateX: 'width',
-    translateY: 'height',
+const radiusPercentRule = {
     borderTopLeftRadius: 'width',
     borderBottomLeftRadius: 'width',
     borderBottomRightRadius: 'width',
     borderTopRightRadius: 'width',
     borderRadius: 'width'
 };
+const selfPercentRule = Object.assign({
+    translateX: 'width',
+    translateY: 'height'
+}, radiusPercentRule);
 const parentHeightPercentRule = {
     height: true,
     minHeight: true,
@@ -193,7 +195,7 @@ function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
             const resolved = resolveVar(value, varContext);
             if (resolved === undefined) {
                 delete target[key];
-                // error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
+                error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`);
                 return;
             }
             target[key] = resolved;
@@ -343,15 +345,7 @@ function transformBoxShadow(styleObj) {
         return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`;
     }, '');
 }
-function transformZIndex(styleObj) {
-    if (!styleObj.zIndex || typeof styleObj.zIndex === 'number')
-        return;
-    if (styleObj.zIndex === 'auto') {
-        error('Property [z-index] does not supported [auto], please check again!');
-        styleObj.zIndex = 0;
-    }
-}
-export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
+export function useTransformStyle(styleObj = {}, { enableVar, isTransformBorderRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
     const normalStyle = {};
@@ -403,7 +397,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     function calcVisitor({ key, value, keyPath }) {
         if (calcUseRegExp.test(value)) {
             // calc translate & border-radius 的百分比计算
-            if (hasOwn(selfPercentRule, key) && /%/.test(value)) {
+            if (hasOwn(selfPercentRule, key) && /calc\(\d+%/.test(value)) {
                 hasSelfPercent = true;
                 percentKeyPaths.push(keyPath.slice());
             }
@@ -412,7 +406,12 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     }
     function percentVisitor({ key, value, keyPath }) {
         // fixme 去掉 translate & border-radius 的百分比计算
-        if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+        // fixme Image 组件 borderRadius 仅支持 number
+        if (isTransformBorderRadiusPercent && hasOwn(radiusPercentRule, key) && PERCENT_REGEX.test(value)) {
+            hasSelfPercent = true;
+            percentKeyPaths.push(keyPath.slice());
+        }
+        else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
             percentKeyPaths.push(keyPath.slice());
         }
     }
@@ -485,11 +484,6 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     transformStringify(normalStyle);
     // transform rpx to px
     transformBoxShadow(normalStyle);
-    // transform z-index auto to 0
-    transformZIndex(normalStyle);
-    if (Array.isArray(normalStyle.transform)) {
-        normalStyle.transform = normalStyle.transform.filter(item => !isEmptyObject(item));
-    }
     return {
         hasVarDec,
         varContextRef,

package/lib/runtime/components/react/mpx-image.tsx

@@ -26,7 +26,7 @@ import { noop } from '@mpxjs/utils'
 import { SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils'
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils'
 import Portal from './mpx-portal'
 
 export type Mode =
@@ -190,7 +190,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     normalStyle,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(styleObj, { enableVar, isTransformBorderRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({
     props,