@tarojs/components-advanced 4.1.12-beta.7 → 4.1.12-beta.9

package/dist/components/list/index.js

@@ -1,9 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { View, ScrollView } from '@tarojs/components';
+import { ScrollElementContext } from '@tarojs/components-react';
+export { ScrollElementContext as ListScrollElementContext } from '@tarojs/components-react';
 import Taro from '@tarojs/taro';
-import React, { useContext } from 'react';
+import React from 'react';
 import { useItemSizeCache } from './hooks/useItemSizeCache.js';
-import { useMeasureStartOffset } from './hooks/useMeasureStartOffset.js';
+import { useListNestedScroll } from './hooks/useListNestedScroll.js';
+import { useListScrollElementAttach } from './hooks/useListScrollElementAttach.js';
 import { useRefresher, DEFAULT_REFRESHER_HEIGHT } from './hooks/useRefresher.js';
 import { useResizeObserver } from './hooks/useResizeObserver.js';
 import { useScrollCorrection } from './hooks/useScrollCorrection.js';
@@ -11,7 +14,7 @@ import { ListItem } from './ListItem.js';
 import { NoMore } from './NoMore.js';
 import { StickyHeader } from './StickyHeader.js';
 import { StickySection } from './StickySection.js';
-import { isH5, isWeapp, supportsNativeRefresher } from './utils.js';
+import { isWeapp, isH5, supportsNativeRefresher } from './utils.js';
 
 // 工具：累加数组
 function accumulate(arr) {
@@ -43,35 +46,33 @@ function shouldMeasureWeappItem(index, measuredSet) {
 }
 // 小程序端暂不外抛 onItemSizeChange，避免父层重渲染导致 List remount 引发回顶或空白
 function weappDeferItemSizeChange(_index, _size, _onItemSizeChange) { }
-const EMPTY_SCROLL_REF = { current: null };
-/** 任务 4.1/4.2：List 内嵌 WaterFlow/List 时，向子组件提供 scrollRef、containerHeight、startOffset、reportNestedHeightChange */
-const ListScrollElementContext = React.createContext(null);
-/** 抽离 scrollElement 模式逻辑，降低 InnerList 圈复杂度 */
-function useListScrollElement(listType, scrollElement, 
-/** 无 Context 时自动测量的 startOffset（上方内容高度），与下方 DOM stacking 对称 */
-measuredStartOffset) {
-    var _a, _b;
-    const listScrollCtx = useContext(ListScrollElementContext);
-    const effectiveScrollElement = scrollElement !== null && scrollElement !== void 0 ? scrollElement : listScrollCtx === null || listScrollCtx === void 0 ? void 0 : listScrollCtx.scrollRef;
-    const effectiveStartOffset = (_b = (_a = listScrollCtx === null || listScrollCtx === void 0 ? void 0 : listScrollCtx.startOffset) !== null && _a !== void 0 ? _a : measuredStartOffset) !== null && _b !== void 0 ? _b : 0;
-    const useScrollElementMode = listType === 'nested' && !!(effectiveScrollElement && isH5);
-    if (listType === 'nested' && !effectiveScrollElement && isH5) {
-        // eslint-disable-next-line no-console
-        console.warn('[List] type=nested 但无 scrollElement（props 或 Context），回退为 default');
+/** 从 scroll 选项解析目标偏移量 */
+function resolveScrollTargetOffset(options, isHorizontal) {
+    const opts = options !== null && options !== void 0 ? options : {};
+    const top = typeof opts.top === 'number' ? opts.top : undefined;
+    const left = typeof opts.left === 'number' ? opts.left : undefined;
+    let result = 0;
+    if (isHorizontal) {
+        if (typeof left === 'number')
+            result = left;
+        else if (typeof top === 'number')
+            result = top;
     }
-    return { effectiveScrollElement, effectiveStartOffset, useScrollElementMode, hasListScrollCtx: !!listScrollCtx };
+    else {
+        if (typeof top === 'number')
+            result = top;
+        else if (typeof left === 'number')
+            result = left;
+    }
+    return Number.isFinite(result) ? result : 0;
 }
+// eslint-disable-next-line complexity -- List 多端/多模式逻辑集中，已抽离 useListNestedScroll、useListScrollElementAttach、resolveScrollTargetOffset 等
 const InnerList = (props, ref) => {
-    var _a, _b, _c, _d;
-    const { stickyHeader = false, space = 0, height = 400, width = '100%', showScrollbar = true, scrollTop: controlledScrollTop, scrollX = false, scrollY = true, onScroll, onScrollToUpper, onScrollToLower, onScrollStart, onScrollEnd, upperThreshold = 50, lowerThreshold = 50, cacheCount = 2, cacheExtent, enableBackToTop, className, style, children, type: listType = 'default', scrollElement, scrollRef: scrollRefProp, } = props;
+    var _a, _b, _c;
+    const { stickyHeader = false, space = 0, height = 400, width = '100%', showScrollbar = true, scrollTop: controlledScrollTop, scrollX = false, scrollY = true, onScroll, onScrollToUpper, onScrollToLower, onScrollStart, onScrollEnd, upperThreshold = 50, lowerThreshold = 50, cacheCount = 2, cacheExtent, enableBackToTop, className, style, children, nestedScroll, scrollElement, scrollRef: scrollRefProp, } = props;
     const isHorizontal = scrollX === true;
-    const contentWrapperRef = React.useRef(null);
-    const result1 = useListScrollElement(listType, scrollElement, 0);
-    const measuredStartOffset = useMeasureStartOffset((_a = result1.effectiveScrollElement) !== null && _a !== void 0 ? _a : EMPTY_SCROLL_REF, contentWrapperRef, {
-        enabled: result1.useScrollElementMode && !result1.hasListScrollCtx && !!result1.effectiveScrollElement && isH5,
-        isHorizontal,
-    });
-    const { effectiveScrollElement, effectiveStartOffset, useScrollElementMode } = useListScrollElement(listType, scrollElement, measuredStartOffset);
+    const listType = nestedScroll === true ? 'nested' : 'default';
+    const { effectiveScrollElement, effectiveStartOffset, useScrollElementMode, needAutoFind, autoFindStatus, contentWrapperRef, } = useListNestedScroll(listType, scrollElement, undefined, isHorizontal);
     const DEFAULT_ITEM_WIDTH = 120;
     const DEFAULT_ITEM_HEIGHT = 40;
     // 滚动状态管理
@@ -172,31 +173,7 @@ const InnerList = (props, ref) => {
     // 暴露给外部的实例方法：通过 ref.scroll({ top / left }) 进行程序性滚动
     React.useImperativeHandle(ref, () => ({
         scroll(options) {
-            const opts = options !== null && options !== void 0 ? options : {};
-            const isHorizontal = scrollX === true;
-            const top = typeof opts.top === 'number' ? opts.top : undefined;
-            const left = typeof opts.left === 'number' ? opts.left : undefined;
-            let targetOffset = 0;
-            if (isHorizontal) {
-                if (typeof left === 'number') {
-                    targetOffset = left;
-                }
-                else if (typeof top === 'number') {
-                    targetOffset = top;
-                }
-            }
-            else {
-                if (typeof top === 'number') {
-                    targetOffset = top;
-                }
-                else if (typeof left === 'number') {
-                    targetOffset = left;
-                }
-            }
-            if (!Number.isFinite(targetOffset)) {
-                targetOffset = 0;
-            }
-            // 任务 2.2：scrollElement 模式下直接操作外部容器（内嵌时需加上 startOffset）
+            const targetOffset = resolveScrollTargetOffset(options, isHorizontal);
             const el = effectiveScrollElement === null || effectiveScrollElement === void 0 ? void 0 : effectiveScrollElement.current;
             if (el && isH5) {
                 const scrollTarget = targetOffset + effectiveStartOffset;
@@ -338,7 +315,7 @@ const InnerList = (props, ref) => {
     }, [children]);
     // 动态尺寸管理
     const defaultEstimatedSize = isHorizontal ? DEFAULT_ITEM_WIDTH : DEFAULT_ITEM_HEIGHT;
-    const estimatedSize = (_b = props.estimatedItemSize) !== null && _b !== void 0 ? _b : defaultEstimatedSize;
+    const estimatedSize = (_a = props.estimatedItemSize) !== null && _a !== void 0 ? _a : defaultEstimatedSize;
     // 计算总 item 数量（跨所有 section）
     const totalItemCount = React.useMemo(() => {
         return sections.reduce((sum, section) => sum + section.items.length, 0);
@@ -616,73 +593,15 @@ const InnerList = (props, ref) => {
         }
         onScrollEnd === null || onScrollEnd === void 0 ? void 0 : onScrollEnd();
     }, [isWeapp, onScrollEnd]);
-    // scrollElement 模式：containerLength 从 scrollElement 获取（任务 1.6）
-    React.useEffect(() => {
-        if (!effectiveScrollElement || !isH5)
-            return;
-        const el = effectiveScrollElement.current;
-        if (!el || typeof ResizeObserver === 'undefined')
-            return;
-        const update = () => {
-            const measured = isHorizontal ? el.clientWidth : el.clientHeight;
-            if (measured > 0) {
-                setContainerLength(measured);
-            }
-            // scrollElement 模式下 useLayoutEffect 可能早于 ref 挂载，ResizeObserver 作为兜底确保 scrollRef 正确
-            if (scrollRefProp)
-                scrollRefProp.current = el;
-        };
-        update();
-        const ro = new ResizeObserver(update);
-        ro.observe(el);
-        return () => ro.disconnect();
-    }, [effectiveScrollElement, isH5, isHorizontal]);
-    // scrollElement 模式：监听外部滚动，驱动 renderOffset
-    // 使用 ref 保存 scrollCorrection/onScroll，避免每次渲染 deps 变化导致 effect 反复执行形成循环
-    const effectiveStartOffsetRef = React.useRef(effectiveStartOffset);
-    effectiveStartOffsetRef.current = effectiveStartOffset;
-    React.useEffect(() => {
-        if (!effectiveScrollElement || !isH5)
-            return;
-        const el = effectiveScrollElement.current;
-        if (!el)
-            return;
-        const handler = () => {
-            var _a, _b, _c;
-            const scrollPos = isHorizontal ? el.scrollLeft : el.scrollTop;
-            const adjustedPos = scrollPos - effectiveStartOffsetRef.current;
-            const clientSize = isHorizontal ? el.clientWidth : el.clientHeight;
-            const scrollSize = isHorizontal ? el.scrollWidth : el.scrollHeight;
-            scrollCorrectionRef.current.markUserScrolling();
-            updateRenderOffset(adjustedPos, false, 'scrollElement');
-            (_a = onScrollRef.current) === null || _a === void 0 ? void 0 : _a.call(onScrollRef, {
-                scrollTop: isHorizontal ? 0 : scrollPos,
-                scrollLeft: isHorizontal ? scrollPos : 0
-            });
-            // 任务 2.1：onScrollToUpper / onScrollToLower（scrollElement 模式用 adjustedPos，使有上方混排时以 List 顶为基准）
-            const { upper, lower } = thresholdRef.current;
-            const effectiveAdjusted = Math.max(0, adjustedPos);
-            if (effectiveAdjusted <= upper) {
-                (_b = onScrollToUpperRef.current) === null || _b === void 0 ? void 0 : _b.call(onScrollToUpperRef);
-            }
-            if (scrollPos + clientSize >= scrollSize - lower) {
-                (_c = onScrollToLowerRef.current) === null || _c === void 0 ? void 0 : _c.call(onScrollToLowerRef);
-            }
-        };
-        // 同步初始 scroll 位置（内嵌时需减去 startOffset）
-        const initialScroll = isHorizontal ? el.scrollLeft : el.scrollTop;
-        updateRenderOffset(initialScroll - effectiveStartOffsetRef.current, false, 'scrollElement');
-        el.addEventListener('scroll', handler, { passive: true });
-        return () => el.removeEventListener('scroll', handler);
-    }, [effectiveScrollElement, isH5, isHorizontal, updateRenderOffset]);
     // 任务 2.3：暴露 scrollRef 给父组件（供内层 List/WaterFlow 传入 scrollElement）
     // 收敛到此处统一赋值，不再在 ResizeObserver 中重复
     React.useLayoutEffect(() => {
         if (!scrollRefProp)
             return;
         const el = useScrollElementMode ? effectiveScrollElement === null || effectiveScrollElement === void 0 ? void 0 : effectiveScrollElement.current : containerRef.current;
-        if (el)
+        if (el) {
             scrollRefProp.current = el;
+        }
     }, [scrollRefProp, useScrollElementMode, effectiveScrollElement]);
     // controlledScrollTop 变化时同步到 ScrollView
     React.useEffect(() => {
@@ -872,6 +791,19 @@ const InnerList = (props, ref) => {
     const noMoreHeight = (noMoreConfig === null || noMoreConfig === void 0 ? void 0 : noMoreConfig.visible) ? (noMoreConfig.height || 60) : 0;
     const listContentLength = sectionOffsets[sectionOffsets.length - 1] + noMoreHeight;
     const totalLength = listContentLength;
+    // scrollElement 模式下 onScrollToLower 需用内层内容高度判断，供 scroll handler 读取
+    const listContentLengthRef = React.useRef(0);
+    listContentLengthRef.current = listContentLength;
+    const scrollAttachRefsRef = React.useRef(null);
+    scrollAttachRefsRef.current = {
+        scrollCorrection: scrollCorrectionRef.current,
+        onScroll: onScrollRef.current,
+        onScrollToUpper: onScrollToUpperRef.current,
+        onScrollToLower: onScrollToLowerRef.current,
+        threshold: thresholdRef.current,
+        listContentLength: listContentLengthRef.current,
+    };
+    useListScrollElementAttach(useScrollElementMode && isH5, effectiveScrollElement, effectiveStartOffset, isHorizontal, setContainerLength, updateRenderOffset, scrollRefProp, scrollAttachRefsRef);
     // 吸顶/吸左 header
     const stickyHeaderNode = React.useMemo(() => {
         if (!stickyHeader)
@@ -1152,7 +1084,7 @@ const InnerList = (props, ref) => {
                     const itemNode = React.createElement(View, outerItemProps, React.createElement(View, innerProps, section.items[i]));
                     // 任务 4.1：当 List 暴露 scrollRef 时，为每个 item 提供 Context，供内层 WaterFlow 使用
                     const itemWithContext = scrollRefProp && !useScrollElementMode
-                        ? React.createElement(ListScrollElementContext.Provider, {
+                        ? React.createElement(ScrollElementContext.Provider, {
                             key: outerItemProps.key,
                             value: {
                                 scrollRef: scrollRefProp,
@@ -1189,7 +1121,7 @@ const InnerList = (props, ref) => {
                 else {
                     const itemNode = React.createElement(View, outerItemProps, section.items[i]);
                     const itemWithContext = scrollRefProp && !useScrollElementMode
-                        ? React.createElement(ListScrollElementContext.Provider, {
+                        ? React.createElement(ScrollElementContext.Provider, {
                             key: outerItemProps.key,
                             value: {
                                 scrollRef: scrollRefProp,
@@ -1269,7 +1201,9 @@ const InnerList = (props, ref) => {
                             transform: `translateY(${h5RefresherTranslateY}px)`,
                         }, children: renderRefresherContent() }), jsxs(View, { style: Object.assign(Object.assign(Object.assign({}, listWrapperStyle), pullTranslate), { zIndex: 1, background: (_b = (_a = style === null || style === void 0 ? void 0 : style.background) !== null && _a !== void 0 ? _a : style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _b !== void 0 ? _b : '#fff' }), children: [stickyHeaderNode, renderSections(), renderNoMoreContent()] })] })) : (jsxs(Fragment, { children: [!supportsNativeRefresher && renderRefresherContent(), stickyHeaderNode, renderSections(), renderNoMoreContent()] })) }));
     };
-    if (useScrollElementMode) {
+    // useScrollElementMode 或 needAutoFind&&pending：渲染 View 以便监听外部滚动或 probe 阶段查找滚动父节点
+    const renderView = useScrollElementMode || (!!needAutoFind && autoFindStatus === 'pending');
+    if (renderView) {
         // 任务 2.4：恢复 refresher DOM 结构（refresher 层 + listWrapperStyle）
         return (jsx(View, { ref: contentWrapperRef, style: contentWrapperStyle, children: refresherHeightForH5 > 0 ? (jsxs(Fragment, { children: [jsx(View, { style: {
                             position: 'absolute',
@@ -1279,11 +1213,11 @@ const InnerList = (props, ref) => {
                             height: refresherHeightForH5,
                             zIndex: 0,
                             transform: `translateY(${h5RefresherTranslateY}px)`,
-                        }, children: renderRefresherContent() }), jsxs(View, { style: Object.assign(Object.assign(Object.assign({}, listWrapperStyle), pullTranslate), { zIndex: 1, background: (_d = (_c = style === null || style === void 0 ? void 0 : style.background) !== null && _c !== void 0 ? _c : style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _d !== void 0 ? _d : '#fff' }), children: [stickyHeaderNode, renderSections(), renderNoMoreContent()] })] })) : (jsxs(Fragment, { children: [stickyHeaderNode, renderSections(), renderNoMoreContent()] })) }));
+                        }, children: renderRefresherContent() }), jsxs(View, { style: Object.assign(Object.assign(Object.assign({}, listWrapperStyle), pullTranslate), { zIndex: 1, background: (_c = (_b = style === null || style === void 0 ? void 0 : style.background) !== null && _b !== void 0 ? _b : style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _c !== void 0 ? _c : '#fff' }), children: [stickyHeaderNode, renderSections(), renderNoMoreContent()] })] })) : (jsxs(Fragment, { children: [stickyHeaderNode, renderSections(), renderNoMoreContent()] })) }));
     }
     return (jsxs(ScrollView, Object.assign({ ref: containerRef }, scrollViewProps, { id: listId, children: [supportsNativeRefresher && renderRefresherContent(), renderContentArea()] })));
 };
 const List = React.forwardRef(InnerList);
 
-export { List, ListItem, ListScrollElementContext, NoMore, StickyHeader, StickySection, accumulate, List as default, isShaking };
+export { List, ListItem, NoMore, StickyHeader, StickySection, accumulate, List as default, isShaking };
 //# sourceMappingURL=index.js.map