@mpxjs/webpack-plugin 2.10.24 → 2.11.0

package/lib/runtime/components/react/dist/mpx-radio-group.jsx

@@ -10,7 +10,7 @@ import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import Portal from './mpx-portal';
 const radioGroup = 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 = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const propsRef = useRef({});
     propsRef.current = props;
     const formContext = useContext(FormContext);
@@ -23,8 +23,7 @@ const radioGroup = forwardRef((props, ref) => {
         flexDirection: 'row',
         flexWrap: 'wrap'
     };
-    const styleObj = extendObject({}, defaultStyle, style);
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -83,7 +82,7 @@ const radioGroup = forwardRef((props, ref) => {
     });
     const finalComponent = createElement(View, innerProps, createElement(RadioGroupContext.Provider, {
         value: contextValue
-    }, wrapChildren(props, {
+    }, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current
     })));

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

@@ -15,8 +15,7 @@ export interface RadioProps {
     style?: ViewStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
+    'enable-text-pass-through'?: boolean;
     'parent-width'?: number;
     'parent-height'?: number;
     children: ReactNode;

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

@@ -10,7 +10,7 @@ import { warn } from '@mpxjs/utils';
 import { LabelContext, RadioGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils';
 import Icon from './mpx-icon';
 import Portal from './mpx-portal';
 const styles = StyleSheet.create({
@@ -48,14 +48,13 @@ const styles = StyleSheet.create({
 });
 const Radio = forwardRef((radioProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(radioProps);
-    const { value = '', disabled = false, checked = false, color = '#09BB07', style = [], 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap } = props;
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = [], 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap } = props;
     const [isChecked, setIsChecked] = useState(!!checked);
     const groupContext = useContext(RadioGroupContext);
     let groupValue;
     let notifyChange;
     const labelContext = useContext(LabelContext);
-    const defaultStyle = extendObject({}, styles.wrapper, isChecked ? styles.wrapperChecked : {}, disabled ? styles.wrapperDisabled : {});
-    const styleObj = extendObject({}, styles.container, style);
+    const wrapperStyle = extendObject({}, styles.wrapper, isChecked ? styles.wrapperChecked : {}, disabled ? styles.wrapperDisabled : {});
     const onChange = (evt) => {
         if (disabled || isChecked)
             return;
@@ -74,15 +73,15 @@ const Radio = forwardRef((radioProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle: styles.container });
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     if (backgroundStyle) {
         warn('Radio does not support background image-related styles!');
     }
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        style: extendObject({}, defaultStyle, normalStyle),
+        style: normalStyle,
         change: onChange
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -126,12 +125,12 @@ const Radio = forwardRef((radioProps, ref) => {
             }
         }
     }, [checked]);
-    const finalComponent = createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
+    const finalComponent = createElement(View, innerProps, createElement(View, { style: wrapperStyle }, createElement(Icon, {
         type: 'success',
         size: 24,
         color: disabled ? '#E1E1E1' : color,
         style: extendObject({}, styles.icon, isChecked && styles.iconChecked, disabled && styles.iconDisabled)
-    })), wrapChildren(props, {
+    })), wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough

package/lib/runtime/components/react/dist/mpx-rich-text/index.d.ts

@@ -15,8 +15,6 @@ interface _RichTextProps extends ViewProps {
     style?: ViewStyle;
     nodes: string | Array<Node>;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
 }

package/lib/runtime/components/react/dist/mpx-rich-text/index.jsx

@@ -28,7 +28,7 @@ function jsonToHtmlStr(elements) {
     return htmlStr;
 }
 const _RichText = forwardRef((props, ref) => {
-    const { style = {}, nodes, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, nodes, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const nodeRef = useRef(null);
     const [webViewHeight, setWebViewHeight] = useState(0);
     const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(Object.assign({
@@ -36,8 +36,6 @@ const _RichText = forwardRef((props, ref) => {
         height: webViewHeight
     }, style), {
         enableVar,
-        externalVarContext,
-        parentFontSize,
         parentWidth,
         parentHeight
     });

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

@@ -26,8 +26,7 @@ interface ScrollViewProps {
     'scroll-into-view'?: string;
     'enable-trigger-intersection-observer'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
+    'enable-text-pass-through'?: boolean;
     'parent-width'?: number;
     'parent-height'?: number;
     'enable-sticky'?: boolean;

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

@@ -38,7 +38,7 @@ import Animated, { useSharedValue, withTiming, useAnimatedStyle, runOnJS } from
 import { warn, hasOwn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE, useRunOnJSCallback, useTextPassThroughValue } from './utils';
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, hiddenStyle, useRunOnJSCallback, useTextPassThrough } from './utils';
 import { IntersectionObserverContext, ScrollViewContext } from './context';
 import Portal from './mpx-portal';
 const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView);
@@ -48,7 +48,7 @@ const REFRESH_COLOR = {
 };
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchmove, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, 'scroll-into-view-offset': scrollIntoViewOffset = 0, __selectRef } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchmove, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, 'scroll-into-view-offset': scrollIntoViewOffset = 0, __selectRef } = props;
     const scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
@@ -75,9 +75,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const intersectionObservers = useContext(IntersectionObserverContext);
     const firstScrollIntoViewChange = useRef(true);
     const isContentSizeChange = useRef(false);
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     const scrollViewRef = useRef(null);
     const propsRef = useRef(props);
     const refresherStateRef = useRef({
@@ -120,7 +120,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }, []);
     const hasRefresherLayoutRef = useRef(false);
     // layout 完成前先隐藏，避免安卓闪烁问题
-    const refresherLayoutStyle = useMemo(() => { return !hasRefresherLayoutRef.current ? HIDDEN_STYLE : {}; }, [hasRefresherLayoutRef.current]);
+    const refresherLayoutStyle = useMemo(() => { return !hasRefresherLayoutRef.current ? hiddenStyle : {}; }, [hasRefresherLayoutRef.current]);
     const lastOffset = useRef(0);
     if (scrollX && scrollY) {
         warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
@@ -667,7 +667,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     ], { layoutRef });
     const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView;
     const createScrollViewContent = () => {
-        const wrappedChildren = wrapChildren(hasRefresher ? extendObject({}, props, { children: otherContent }) : props, {
+        const wrappedChildren = wrapChildren(hasRefresher ? otherContent : props.children, {
             hasVarDec,
             varContext: varContextRef.current,
             textPassThrough

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

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { GestureHandler } from './utils';
+interface ListItem {
+    isSectionHeader?: boolean;
+    isSectionFooter?: boolean;
+    [key: string]: any;
+}
+interface ItemHeightType {
+    value?: number;
+    getter?: (item: any, index: number) => number;
+}
+interface MpxSectionListProps {
+    enhanced?: boolean;
+    bounces?: boolean;
+    height?: number | string;
+    width?: number | string;
+    generichash?: string;
+    style?: Record<string, any>;
+    'scroll-event-throttle'?: number;
+    'list-data'?: ListItem[];
+    'item-height'?: ItemHeightType;
+    'section-header-height'?: ItemHeightType;
+    'section-footer-height'?: ItemHeightType;
+    'list-header-data'?: any;
+    'list-header-height'?: number;
+    'use-list-header'?: boolean;
+    'list-footer-data'?: any;
+    'use-list-footer'?: boolean;
+    'genericrecycle-item'?: string;
+    'genericsection-header'?: string;
+    'genericsection-footer'?: string;
+    'genericlist-header'?: string;
+    'genericlist-footer'?: string;
+    'enable-var'?: boolean;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'enable-sticky'?: boolean;
+    'enable-back-to-top'?: boolean;
+    'end-reached-threshold'?: number;
+    'refresher-enabled'?: boolean;
+    'show-scrollbar'?: boolean;
+    'refresher-triggered'?: boolean;
+    'wait-for'?: Array<GestureHandler>;
+    'simultaneous-handlers'?: Array<GestureHandler>;
+    bindrefresherrefresh?: (event: any) => void;
+    bindscrolltolower?: (event: any) => void;
+    bindscroll?: (event: any) => void;
+    [key: string]: any;
+}
+declare const _SectionList: import("react").ForwardRefExoticComponent<Omit<MpxSectionListProps, "ref"> & import("react").RefAttributes<any>>;
+export default _SectionList;

package/lib/runtime/components/react/dist/mpx-section-list.jsx

@@ -0,0 +1,376 @@
+import { forwardRef, useRef, useMemo, createElement, useImperativeHandle } from 'react';
+import { SectionList, RefreshControl } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { hasOwn } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { extendObject, useLayout, useTransformStyle, flatGesture, wrapChildren, splitStyle, useTextPassThrough, splitProps } from './utils';
+import Portal from './mpx-portal';
+const TypedSectionList = SectionList;
+const getGeneric = (generichash, generickey) => {
+    if (!generichash || !generickey)
+        return null;
+    return global.__mpxGenericsMap?.[generichash]?.[generickey]?.() || null;
+};
+const _SectionList = forwardRef((sectionListProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(sectionListProps);
+    const { enhanced = false, bounces = true, height, width, generichash, style = {}, 'list-data': listData, 'scroll-event-throttle': scrollEventThrottle = 0, 'item-height': itemHeight = {}, 'section-header-height': sectionHeaderHeight = {}, 'section-footer-height': sectionFooterHeight = {}, 'list-header-height': listHeaderHeight = 0, 'list-header-data': listHeaderData = null, 'use-list-header': useListHeader = false, 'list-footer-data': listFooterData = null, 'use-list-footer': useListFooter = false, 'genericrecycle-item': genericrecycleItem, 'genericsection-header': genericsectionHeader, 'genericsection-footer': genericsectionFooter, 'genericlist-header': genericListHeader, 'genericlist-footer': genericListFooter, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, '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, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor } = props;
+    const refreshing = !!refresherTriggered;
+    const scrollViewRef = useRef(null);
+    const sectionListGestureRef = useRef();
+    const indexMap = useRef({});
+    const reverseIndexMap = useRef({});
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef });
+    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;
+        if (bindscroll) {
+            const { nativeEvent } = event;
+            bindscroll(getCustomEvent('scroll', event, {
+                detail: {
+                    scrollTop: nativeEvent.contentOffset.y
+                },
+                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)
+            return;
+        // 通过索引映射表快速定位位置
+        const position = indexMap.current[index];
+        if (!position)
+            return;
+        const [sectionIndex, itemIndex] = position.split('_');
+        const targetSectionIndex = Number(sectionIndex) || 0;
+        const targetItemIndex = itemIndex === 'header'
+            ? 0
+            : itemIndex === 'footer'
+                ? convertedListData[targetSectionIndex].data.length + 1
+                : Number(itemIndex) + 1;
+        scrollViewRef.current.scrollToLocation?.({
+            itemIndex: targetItemIndex,
+            sectionIndex: targetSectionIndex,
+            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 getSectionExtraHeight = ({ sectionIndex, type }) => {
+        const item = convertedListData[sectionIndex];
+        const isHeader = type === 'header';
+        if (!(isHeader ? item.hasSectionHeader : item.hasSectionFooter))
+            return 0;
+        const sectionExtraHeight = (isHeader ? sectionHeaderHeight : sectionFooterHeight);
+        if (sectionExtraHeight.getter) {
+            const sectionExtraData = isHeader ? item.headerData : item.footerData;
+            return sectionExtraHeight.getter?.(sectionExtraData, getOriginalIndex(sectionIndex, type)) || 0;
+        }
+        return sectionExtraHeight.value || 0;
+    };
+    const convertedListData = useMemo(() => {
+        const sections = [];
+        let currentSection = null;
+        // 清空之前的索引映射
+        indexMap.current = {};
+        // 清空反向索引映射
+        reverseIndexMap.current = {};
+        // 处理 listData 为空的情况
+        if (!listData || !listData.length) {
+            return sections;
+        }
+        listData.forEach((item, index) => {
+            if (item.isSectionHeader) {
+                // 如果已经存在一个 section，先把它添加到 sections 中
+                if (currentSection) {
+                    sections.push(currentSection);
+                }
+                // 创建新的 section
+                currentSection = {
+                    headerData: item,
+                    footerData: null,
+                    data: [],
+                    hasSectionHeader: true,
+                    hasSectionFooter: false
+                };
+                // 为 section header 添加索引映射
+                const sectionIndex = sections.length;
+                indexMap.current[index] = `${sectionIndex}_header`;
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_header`] = index;
+            }
+            else if (item.isSectionFooter) {
+                // 如果没有当前 section，创建一个默认的
+                if (!currentSection) {
+                    // 创建默认section (无header的section)
+                    currentSection = {
+                        headerData: null,
+                        footerData: null,
+                        data: [],
+                        hasSectionHeader: false,
+                        hasSectionFooter: false
+                    };
+                }
+                const sectionIndex = sections.length;
+                currentSection.footerData = item;
+                currentSection.hasSectionFooter = true;
+                indexMap.current[index] = `${sectionIndex}_footer`;
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_footer`] = index;
+                sections.push(currentSection);
+                currentSection = null;
+            }
+            else {
+                // 如果没有当前 section，创建一个默认的
+                if (!currentSection) {
+                    // 创建默认section (无header的section)
+                    currentSection = {
+                        headerData: null,
+                        footerData: null,
+                        data: [],
+                        hasSectionHeader: false,
+                        hasSectionFooter: false
+                    };
+                }
+                // 将 item 添加到当前 section 的 data 中
+                const itemIndex = currentSection.data.length;
+                currentSection.data.push(item);
+                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, listData?.length]);
+    const { getItemLayout } = useMemo(() => {
+        const layouts = [];
+        let offset = 0;
+        if (useListHeader) {
+            // 计算列表头部的高度
+            offset += listHeaderHeight;
+        }
+        // 遍历所有 sections
+        convertedListData.forEach((section, sectionIndex) => {
+            // 添加 section header 的位置信息
+            const headerHeight = getSectionExtraHeight({ sectionIndex, type: 'header' });
+            layouts.push({
+                length: headerHeight,
+                offset,
+                index: layouts.length
+            });
+            offset += headerHeight;
+            // 添加该 section 中所有 items 的位置信息
+            section.data.forEach((item, itemIndex) => {
+                const contentHeight = getItemHeight({ sectionIndex, rowIndex: itemIndex });
+                layouts.push({
+                    length: contentHeight,
+                    offset,
+                    index: layouts.length
+                });
+                offset += contentHeight;
+            });
+            // 添加该 section 尾部位置信息
+            // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
+            const footerHeight = getSectionExtraHeight({ sectionIndex, type: 'footer' });
+            layouts.push({
+                length: footerHeight,
+                offset,
+                index: layouts.length
+            });
+            offset += footerHeight;
+        });
+        return {
+            itemLayouts: layouts,
+            getItemLayout: (data, index) => layouts[index]
+        };
+    }, [convertedListData, useListHeader, itemHeight.value, itemHeight.getter, sectionHeaderHeight.value, sectionHeaderHeight.getter, sectionFooterHeight.value, sectionFooterHeight.getter, listHeaderHeight]);
+    const scrollAdditionalProps = extendObject({
+        style: [
+            hasOwn(innerStyle, 'flex') || hasOwn(innerStyle, 'flexGrow') ? null : { flexGrow: 0 },
+            { height, width },
+            innerStyle,
+            layoutStyle
+        ],
+        alwaysBounceVertical: false,
+        alwaysBounceHorizontal: false,
+        scrollEventThrottle: scrollEventThrottle,
+        scrollsToTop: enableBackToTop,
+        showsVerticalScrollIndicator: showScrollbar,
+        onEndReachedThreshold,
+        ref: scrollViewRef,
+        bounces: enhanced ? bounces : false,
+        stickySectionHeadersEnabled: enableSticky,
+        onScroll: onScroll,
+        onEndReached: onEndReached
+    }, refresherEnabled ? { refreshing } : null, layoutProps);
+    const nativeGesture = useMemo(() => {
+        const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+        const waitForHandlers = flatGesture(waitFor);
+        const gesture = Gesture.Native().withRef(sectionListGestureRef);
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesture.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesture.requireExternalGestureToFail(...waitForHandlers);
+        }
+        return gesture;
+    }, [originSimultaneousHandlers, waitFor]);
+    useImperativeHandle(ref, () => {
+        return {
+            gestureRef: sectionListGestureRef,
+            scrollToIndex
+        };
+    });
+    const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
+        'id',
+        'enhanced',
+        'height',
+        'width',
+        'list-data',
+        'item-height',
+        'section-header-height',
+        'section-footer-height',
+        'list-header-height',
+        'list-header-data',
+        'use-list-header',
+        'list-footer-data',
+        'use-list-footer',
+        'genericrecycle-item',
+        'genericsection-header',
+        'genericsection-footer',
+        'genericlist-header',
+        'genericlist-footer',
+        'enable-text-pass-through',
+        'show-scrollbar',
+        'lower-threshold',
+        'scroll-event-throttle',
+        'enable-sticky',
+        'enable-back-to-top',
+        'end-reached-threshold',
+        'refresher-triggered',
+        'refresher-enabled',
+        'bindrefresherrefresh',
+        'bindscrolltolower',
+        'bindscroll',
+        'simultaneous-handlers',
+        'wait-for'
+    ], { layoutRef });
+    // 使用 useMemo 获取 GenericComponent 并创建渲染函数，避免每次组件更新都重新创建函数引用导致不必要的重新渲染
+    const renderItem = useMemo(() => {
+        const ItemComponent = getGeneric(generichash, genericrecycleItem);
+        if (!ItemComponent)
+            return undefined;
+        return ({ item }) => createElement(ItemComponent, { itemData: item });
+    }, [generichash, genericrecycleItem]);
+    const renderSectionHeader = useMemo(() => {
+        const SectionHeaderComponent = getGeneric(generichash, genericsectionHeader);
+        if (!SectionHeaderComponent)
+            return undefined;
+        return (sectionData) => {
+            if (!sectionData.section.hasSectionHeader)
+                return null;
+            return createElement(SectionHeaderComponent, { itemData: sectionData.section.headerData });
+        };
+    }, [generichash, genericsectionHeader]);
+    const renderSectionFooter = useMemo(() => {
+        const SectionFooterComponent = getGeneric(generichash, genericsectionFooter);
+        if (!SectionFooterComponent)
+            return undefined;
+        return (sectionData) => {
+            if (!sectionData.section.hasSectionFooter)
+                return null;
+            return createElement(SectionFooterComponent, { itemData: sectionData.section.footerData });
+        };
+    }, [generichash, genericsectionFooter]);
+    const ListHeaderGenericComponent = useMemo(() => {
+        if (!useListHeader)
+            return null;
+        return getGeneric(generichash, genericListHeader);
+    }, [useListHeader, generichash, genericListHeader]);
+    const ListFooterGenericComponent = useMemo(() => {
+        if (!useListFooter)
+            return null;
+        return getGeneric(generichash, genericListFooter);
+    }, [useListFooter, generichash, genericListFooter]);
+    const ListHeaderComponent = useMemo(() => {
+        if (!ListHeaderGenericComponent)
+            return null;
+        return createElement(ListHeaderGenericComponent, { listHeaderData });
+    }, [ListHeaderGenericComponent, listHeaderData]);
+    const ListFooterComponent = useMemo(() => {
+        if (!ListFooterGenericComponent)
+            return null;
+        return createElement(ListFooterGenericComponent, { listFooterData });
+    }, [ListFooterGenericComponent, listFooterData]);
+    const rnSectionListProps = extendObject({
+        sections: convertedListData,
+        renderItem: renderItem,
+        getItemLayout: getItemLayout,
+        ListHeaderComponent: useListHeader ? ListHeaderComponent : null,
+        ListFooterComponent: useListFooter ? ListFooterComponent : null,
+        renderSectionHeader: renderSectionHeader,
+        renderSectionFooter: renderSectionFooter,
+        refreshControl: refresherEnabled
+            ? createElement(RefreshControl, {
+                onRefresh: onRefresh,
+                refreshing: refreshing
+            })
+            : undefined
+    }, innerProps);
+    let sectionListComponent = wrapChildren(createElement(GestureDetector, { gesture: nativeGesture }, createElement(TypedSectionList, rnSectionListProps)), {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textPassThrough
+    });
+    if (hasPositionFixed) {
+        sectionListComponent = createElement(Portal, null, sectionListComponent);
+    }
+    return sectionListComponent;
+});
+_SectionList.displayName = 'MpxSectionList';
+export default _SectionList;