@tarojs/components-advanced 4.1.4-beta.8 → 4.1.4-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -97,7 +97,7 @@ class Section extends StatefulEventBus {
|
|
|
97
97
|
get isInRange() {
|
|
98
98
|
const { scrollBoundaryStart, scrollBoundaryEnd } = this.root;
|
|
99
99
|
const { height: sectionHeight, scrollTop: sectionScrollTop } = this.getState();
|
|
100
|
-
return sectionScrollTop
|
|
100
|
+
return sectionScrollTop <= scrollBoundaryEnd && sectionScrollTop + sectionHeight >= scrollBoundaryStart;
|
|
101
101
|
}
|
|
102
102
|
/**
|
|
103
103
|
* 注册节点
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"section.js","sources":["../../../src/components/water-flow/section.ts"],"sourcesContent":["import { debounce } from '../../utils'\nimport { Size } from './interface'\nimport { Node } from './node'\nimport { Root, RootEvents } from './root'\nimport { StatefulEventBus } from './stateful-event-bus'\nimport { createImperativePromise, getMatrixPosition, isSameRenderRange } from './utils'\n\nexport interface SectionProps {\n /** 分组的唯一标识 */\n id: string\n /** 分组的列数 */\n col: number\n /** 分组的顺序 */\n order: number\n /** 节点数量 */\n count: number\n /** 该分组的行间距 */\n rowGap: number\n /** 该分组的列间距 */\n columnGap: number\n}\n\n/**\n * 分组状态\n */\ntype SectionState = {\n /**\n * 分组是否已经布局计算\n */\n layouted: boolean\n /**\n * 分组顶部距离容器顶部的距离\n */\n scrollTop: number\n /**\n * 分组的高度\n */\n height: number\n /**\n * 每个列的渲染范围\n * 每个元素为一个二元组，第一个元素为起始索引，第二个元素为结束索引\n */\n renderRange: [number, number][]\n}\n\nexport const SectionEvents = {\n AllNodesLayouted: Symbol.for('AllNodesLayouted'),\n Resize: Symbol.for('Resize'),\n}\n\nexport class Section extends StatefulEventBus<SectionState> {\n id: string\n order: number\n col: number\n columnMap: Node[][]\n nodes: Map<string, Node> = new Map()\n defaultSize = 200\n count = 0\n rowGap = 0\n columnGap = 0\n layoutedSignal = createImperativePromise()\n\n constructor(public root: Root, props: SectionProps) {\n const { id, col, order, count, rowGap, columnGap } = props\n super({\n layouted: false,\n scrollTop: 0,\n height: 0,\n renderRange: Array.from({ length: col }, () => [0, 0]),\n })\n Object.assign(this, {\n id,\n col,\n count,\n order,\n rowGap,\n columnGap,\n columnMap: Array.from({ length: col }, () => []),\n })\n this.initializeColumnMap()\n root.registerSection(this)\n this.setupSubscriptions()\n }\n\n /**\n * 订阅事件\n */\n private setupSubscriptions() {\n // 分组的所有节点完成初次布局计算，Nodes的实际高度已经拿到，那么这时分组的高度是确定的，距离滚动容器的顶部距离也是确定的，可以开始计算\n this.sub(SectionEvents.AllNodesLayouted, () => {\n this.setStateBatch({\n scrollTop: this.calcScrollTop(),\n height: this.maxColumnHeight,\n })\n this.updateNodes()\n this.setStateIn('renderRange', this.getNodeRenderRange())\n this.setStateIn('layouted', true)\n this.layoutedSignal.resolve()\n if (this.root.sections.every((section) => section.getState().layouted)) {\n this.root.pub(RootEvents.AllSectionsLayouted)\n }\n })\n // 滚动过程中，如果分组自身可见，那么需要计算分组内应该渲染的元素节点索引区间\n this.root.sub('scrollOffset', () => {\n if (this.isInRange) {\n this.setStateIn('renderRange', this.getNodeRenderRange())\n }\n })\n\n /**\n * 对应分组内的节点尺寸发生变化，需要重新进行相关计算\n * 1. 重新计算尺寸发生变化的节点所在列的所有节点位置信息\n * 2. 重新计算分组的高度\n * 3. 重新计算当前分组之后的所有分组的scrollTop以及分组内的节点位置\n * 4. 更新分组内节点的渲染范围\n */\n this.sub<{ node: Node, newSize: Size, originalSize: Size }>(\n SectionEvents.Resize,\n debounce(() => {\n this.setStateIn('height', this.maxColumnHeight)\n this.updateBehindSectionsPosition()\n if (this.isInRange) {\n this.setStateIn('renderRange', this.getNodeRenderRange())\n }\n this.root.pub(RootEvents.Resize)\n })\n )\n }\n\n /**\n * 获取当前分组的最大高度，分组的最大高度由分组最高列决定\n * @returns 当前分组的最大高度\n */\n get maxColumnHeight() {\n return Math.max(\n ...this.columnMap.map(\n (column) => column.reduce((buf, node) => buf + node.getState().height, 0) + (column.length - 1) * this.rowGap\n )\n )\n }\n\n /**\n * 当前分组是否在可视区域\n *\n * 滚动偏移为 scrollOffset，容器的高度为 containerSize.height\n *\n * 当前容器滚动上边界(scrollBoundaryStart)为 scrollOffset，容器滚动的下边界(scrollBoundaryEnd)为 scrollOffset + containerSize.height\n *\n * 如果分组的 scrollTop 小于滚动下边界并且 scrollTop + 分组高度大于滚动上边界，那么分组在可视区域\n */\n get isInRange() {\n const { scrollBoundaryStart, scrollBoundaryEnd } = this.root\n const { height: sectionHeight, scrollTop: sectionScrollTop } = this.getState()\n return sectionScrollTop < scrollBoundaryEnd && sectionScrollTop + sectionHeight > scrollBoundaryStart\n }\n\n /**\n * 注册节点\n */\n private register(node: Node) {\n const { col, order } = node\n this.columnMap[col][order] = node\n this.nodes.set(node.id, node)\n }\n\n /**\n * 初始化分组内的列，即将一维数组转二维数组\n */\n private initializeColumnMap() {\n const { count, col } = this\n for (let i = 0; i < count; i++) {\n this.pushNode(i, col)\n }\n }\n\n /**\n * 更新当前分组之后的分组的位置信息\n */\n private updateBehindSectionsPosition() {\n let start = this.order + 1\n if (start > this.root.sections.length) {\n return\n }\n for (; start < this.root.sections.length; start++) {\n const currentSection = this.root.sections[start - 1]\n const nextSection = this.root.sections[start]\n nextSection.setStateIn(\n 'scrollTop',\n currentSection.getState().scrollTop + currentSection.getState().height + this.rowGap\n )\n nextSection.updateNodes()\n }\n }\n\n /**\n * 更新指定列的节点位置信息\n * @param col 列索引\n */\n private updateColumnNode(col: number) {\n const column = this.columnMap[col]\n const { scrollTop: sectionScrollTop } = this.getState()\n for (let i = 0; i < column.length; i++) {\n const node = column[i]\n if (i === 0) {\n node.setStateBatch({\n scrollTop: sectionScrollTop,\n top: 0,\n })\n } else {\n const prevNode = column[i - 1]\n const { scrollTop: prevNodeScrollTop, height: prevNodeHeight, top: prevNodeTop } = prevNode.getState()\n node.setStateBatch({\n scrollTop: prevNodeScrollTop + prevNodeHeight + this.rowGap,\n top: prevNodeHeight + prevNodeTop + this.rowGap,\n })\n }\n }\n }\n\n /**\n * 更新每列节点的位置\n */\n private updateNodes() {\n for (let col = 0; col < this.columnMap.length; col++) {\n this.updateColumnNode(col)\n }\n }\n\n /**\n * 计算当前分组的 scrollTop，即该分组之前的所有分组的最大列高度之和\n */\n private calcScrollTop() {\n return this.root.sections.slice(0, this.order).reduce((acc, section) => acc + section.maxColumnHeight, 0)\n }\n\n /**\n * 计算当前分组内每列应该渲染的节点索引区间\n */\n public getNodeRenderRange() {\n if (!this.isInRange) {\n return Array.from({ length: this.col }, () => [0, -1] as [number, number])\n }\n\n const result = Array.from({ length: this.col }, () => [Infinity, -Infinity] as unknown as [number, number])\n for (let i = 0; i < this.columnMap.length; i++) {\n const column = this.columnMap[i]\n for (let j = 0; j < column.length; j++) {\n const node = column[j]\n if (node.isInRange) {\n result[i][0] = Math.min(result[i][0], j)\n result[i][1] = Math.max(result[i][1], j)\n }\n }\n const start = result[i][0]\n const end = result[i][1]\n if (start === Infinity) {\n result[i][0] = 0\n }\n if (end === -Infinity) {\n result[i][1] = -1\n }\n\n const cacheCount = this.root.cacheCount\n const scrollDirection = this.root.getState().scrollDirection\n const backwardDistance = scrollDirection === 'backward' ? cacheCount : 0\n const forwardDistance = scrollDirection === 'forward' ? cacheCount : 0\n const overscanBackward = result[i][0] - backwardDistance\n const overscanForward = result[i][1] + forwardDistance\n result[i][0] = overscanBackward < 0 ? 0 : overscanBackward\n result[i][1] = overscanForward > column.length ? column.length - 1 : overscanForward\n }\n\n return isSameRenderRange(result, this.getState().renderRange) ? this.getState().renderRange : result\n }\n\n public pushNode(nodeIndex: number, col: number) {\n const { row: rowIndex, col: columnIndex } = getMatrixPosition(nodeIndex, col)\n const node = new Node(this.root, this, {\n childIndex: nodeIndex,\n order: rowIndex,\n col: columnIndex,\n height: this.defaultSize,\n })\n this.register(node)\n this.root.registerNode(node)\n }\n\n public pushNodes(count: number) {\n const { count: originalCount, col } = this\n for (let i = originalCount; i < originalCount + count; i++) {\n this.pushNode(i, col)\n }\n this.count += count\n this.root.lowerThresholdScrollTop = Infinity\n this.updateNodes()\n this.updateBehindSectionsPosition()\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"section.js","sources":["../../../src/components/water-flow/section.ts"],"sourcesContent":["import { debounce } from '../../utils'\nimport { Size } from './interface'\nimport { Node } from './node'\nimport { Root, RootEvents } from './root'\nimport { StatefulEventBus } from './stateful-event-bus'\nimport { createImperativePromise, getMatrixPosition, isSameRenderRange } from './utils'\n\nexport interface SectionProps {\n /** 分组的唯一标识 */\n id: string\n /** 分组的列数 */\n col: number\n /** 分组的顺序 */\n order: number\n /** 节点数量 */\n count: number\n /** 该分组的行间距 */\n rowGap: number\n /** 该分组的列间距 */\n columnGap: number\n}\n\n/**\n * 分组状态\n */\ntype SectionState = {\n /**\n * 分组是否已经布局计算\n */\n layouted: boolean\n /**\n * 分组顶部距离容器顶部的距离\n */\n scrollTop: number\n /**\n * 分组的高度\n */\n height: number\n /**\n * 每个列的渲染范围\n * 每个元素为一个二元组，第一个元素为起始索引，第二个元素为结束索引\n */\n renderRange: [number, number][]\n}\n\nexport const SectionEvents = {\n AllNodesLayouted: Symbol.for('AllNodesLayouted'),\n Resize: Symbol.for('Resize'),\n}\n\nexport class Section extends StatefulEventBus<SectionState> {\n id: string\n order: number\n col: number\n columnMap: Node[][]\n nodes: Map<string, Node> = new Map()\n defaultSize = 200\n count = 0\n rowGap = 0\n columnGap = 0\n layoutedSignal = createImperativePromise()\n\n constructor(public root: Root, props: SectionProps) {\n const { id, col, order, count, rowGap, columnGap } = props\n super({\n layouted: false,\n scrollTop: 0,\n height: 0,\n renderRange: Array.from({ length: col }, () => [0, 0]),\n })\n Object.assign(this, {\n id,\n col,\n count,\n order,\n rowGap,\n columnGap,\n columnMap: Array.from({ length: col }, () => []),\n })\n this.initializeColumnMap()\n root.registerSection(this)\n this.setupSubscriptions()\n }\n\n /**\n * 订阅事件\n */\n private setupSubscriptions() {\n // 分组的所有节点完成初次布局计算，Nodes的实际高度已经拿到，那么这时分组的高度是确定的，距离滚动容器的顶部距离也是确定的，可以开始计算\n this.sub(SectionEvents.AllNodesLayouted, () => {\n this.setStateBatch({\n scrollTop: this.calcScrollTop(),\n height: this.maxColumnHeight,\n })\n this.updateNodes()\n this.setStateIn('renderRange', this.getNodeRenderRange())\n this.setStateIn('layouted', true)\n this.layoutedSignal.resolve()\n if (this.root.sections.every((section) => section.getState().layouted)) {\n this.root.pub(RootEvents.AllSectionsLayouted)\n }\n })\n // 滚动过程中，如果分组自身可见，那么需要计算分组内应该渲染的元素节点索引区间\n this.root.sub('scrollOffset', () => {\n if (this.isInRange) {\n this.setStateIn('renderRange', this.getNodeRenderRange())\n }\n })\n\n /**\n * 对应分组内的节点尺寸发生变化，需要重新进行相关计算\n * 1. 重新计算尺寸发生变化的节点所在列的所有节点位置信息\n * 2. 重新计算分组的高度\n * 3. 重新计算当前分组之后的所有分组的scrollTop以及分组内的节点位置\n * 4. 更新分组内节点的渲染范围\n */\n this.sub<{ node: Node, newSize: Size, originalSize: Size }>(\n SectionEvents.Resize,\n debounce(() => {\n this.setStateIn('height', this.maxColumnHeight)\n this.updateBehindSectionsPosition()\n if (this.isInRange) {\n this.setStateIn('renderRange', this.getNodeRenderRange())\n }\n this.root.pub(RootEvents.Resize)\n })\n )\n }\n\n /**\n * 获取当前分组的最大高度，分组的最大高度由分组最高列决定\n * @returns 当前分组的最大高度\n */\n get maxColumnHeight() {\n return Math.max(\n ...this.columnMap.map(\n (column) => column.reduce((buf, node) => buf + node.getState().height, 0) + (column.length - 1) * this.rowGap\n )\n )\n }\n\n /**\n * 当前分组是否在可视区域\n *\n * 滚动偏移为 scrollOffset，容器的高度为 containerSize.height\n *\n * 当前容器滚动上边界(scrollBoundaryStart)为 scrollOffset，容器滚动的下边界(scrollBoundaryEnd)为 scrollOffset + containerSize.height\n *\n * 如果分组的 scrollTop 小于滚动下边界并且 scrollTop + 分组高度大于滚动上边界，那么分组在可视区域\n */\n get isInRange() {\n const { scrollBoundaryStart, scrollBoundaryEnd } = this.root\n const { height: sectionHeight, scrollTop: sectionScrollTop } = this.getState()\n return sectionScrollTop <= scrollBoundaryEnd && sectionScrollTop + sectionHeight >= scrollBoundaryStart\n }\n\n /**\n * 注册节点\n */\n private register(node: Node) {\n const { col, order } = node\n this.columnMap[col][order] = node\n this.nodes.set(node.id, node)\n }\n\n /**\n * 初始化分组内的列，即将一维数组转二维数组\n */\n private initializeColumnMap() {\n const { count, col } = this\n for (let i = 0; i < count; i++) {\n this.pushNode(i, col)\n }\n }\n\n /**\n * 更新当前分组之后的分组的位置信息\n */\n private updateBehindSectionsPosition() {\n let start = this.order + 1\n if (start > this.root.sections.length) {\n return\n }\n for (; start < this.root.sections.length; start++) {\n const currentSection = this.root.sections[start - 1]\n const nextSection = this.root.sections[start]\n nextSection.setStateIn(\n 'scrollTop',\n currentSection.getState().scrollTop + currentSection.getState().height + this.rowGap\n )\n nextSection.updateNodes()\n }\n }\n\n /**\n * 更新指定列的节点位置信息\n * @param col 列索引\n */\n private updateColumnNode(col: number) {\n const column = this.columnMap[col]\n const { scrollTop: sectionScrollTop } = this.getState()\n for (let i = 0; i < column.length; i++) {\n const node = column[i]\n if (i === 0) {\n node.setStateBatch({\n scrollTop: sectionScrollTop,\n top: 0,\n })\n } else {\n const prevNode = column[i - 1]\n const { scrollTop: prevNodeScrollTop, height: prevNodeHeight, top: prevNodeTop } = prevNode.getState()\n node.setStateBatch({\n scrollTop: prevNodeScrollTop + prevNodeHeight + this.rowGap,\n top: prevNodeHeight + prevNodeTop + this.rowGap,\n })\n }\n }\n }\n\n /**\n * 更新每列节点的位置\n */\n private updateNodes() {\n for (let col = 0; col < this.columnMap.length; col++) {\n this.updateColumnNode(col)\n }\n }\n\n /**\n * 计算当前分组的 scrollTop，即该分组之前的所有分组的最大列高度之和\n */\n private calcScrollTop() {\n return this.root.sections.slice(0, this.order).reduce((acc, section) => acc + section.maxColumnHeight, 0)\n }\n\n /**\n * 计算当前分组内每列应该渲染的节点索引区间\n */\n public getNodeRenderRange() {\n if (!this.isInRange) {\n return Array.from({ length: this.col }, () => [0, -1] as [number, number])\n }\n\n const result = Array.from({ length: this.col }, () => [Infinity, -Infinity] as unknown as [number, number])\n for (let i = 0; i < this.columnMap.length; i++) {\n const column = this.columnMap[i]\n for (let j = 0; j < column.length; j++) {\n const node = column[j]\n if (node.isInRange) {\n result[i][0] = Math.min(result[i][0], j)\n result[i][1] = Math.max(result[i][1], j)\n }\n }\n const start = result[i][0]\n const end = result[i][1]\n if (start === Infinity) {\n result[i][0] = 0\n }\n if (end === -Infinity) {\n result[i][1] = -1\n }\n\n const cacheCount = this.root.cacheCount\n const scrollDirection = this.root.getState().scrollDirection\n const backwardDistance = scrollDirection === 'backward' ? cacheCount : 0\n const forwardDistance = scrollDirection === 'forward' ? cacheCount : 0\n const overscanBackward = result[i][0] - backwardDistance\n const overscanForward = result[i][1] + forwardDistance\n result[i][0] = overscanBackward < 0 ? 0 : overscanBackward\n result[i][1] = overscanForward > column.length ? column.length - 1 : overscanForward\n }\n\n return isSameRenderRange(result, this.getState().renderRange) ? this.getState().renderRange : result\n }\n\n public pushNode(nodeIndex: number, col: number) {\n const { row: rowIndex, col: columnIndex } = getMatrixPosition(nodeIndex, col)\n const node = new Node(this.root, this, {\n childIndex: nodeIndex,\n order: rowIndex,\n col: columnIndex,\n height: this.defaultSize,\n })\n this.register(node)\n this.root.registerNode(node)\n }\n\n public pushNodes(count: number) {\n const { count: originalCount, col } = this\n for (let i = originalCount; i < originalCount + count; i++) {\n this.pushNode(i, col)\n }\n this.count += count\n this.root.lowerThresholdScrollTop = Infinity\n this.updateNodes()\n this.updateBehindSectionsPosition()\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -52,6 +52,9 @@ function WaterFlow(_a) {
|
|
|
52
52
|
const [start, end] = renderRange$;
|
|
53
53
|
return (_a = Children.map(children, (child, order) => {
|
|
54
54
|
var _a;
|
|
55
|
+
if (Object.is(child, null)) {
|
|
56
|
+
return null;
|
|
57
|
+
}
|
|
55
58
|
const sectionProps = child.props;
|
|
56
59
|
const sectionId = sectionProps.id || `section-${order}`;
|
|
57
60
|
const childCount = Children.count(sectionProps.children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"water-flow.js","sources":["../../../src/components/water-flow/water-flow.ts"],"sourcesContent":["import { BaseEventOrig, ScrollView, ScrollViewProps, View } from '@tarojs/components'\nimport { nextTick } from '@tarojs/taro'\nimport {\n Children,\n cloneElement,\n createElement,\n PropsWithChildren,\n ReactElement,\n useEffect,\n useId,\n useMemo,\n useRef,\n} from 'react'\n\nimport { debounce, getScrollViewContextNode } from '../../utils'\nimport { _FlowSectionProps } from './flow-section'\nimport { Root, RootEvents } from './root'\nimport { Section } from './section'\nimport { useMemoizedFn } from './use-memoized-fn'\nimport { useObservedAttr } from './use-observed-attr'\nimport { getSysInfo } from './utils'\n\nimport type { ScrollDirection, WaterFlowProps } from './interface'\n\ngetSysInfo()\n\nexport function WaterFlow({ children, ...props }: PropsWithChildren<WaterFlowProps>) {\n const {\n id,\n style = {},\n className,\n cacheCount = 1,\n onScrollToUpper,\n onScrollToLower,\n upperThresholdCount,\n lowerThresholdCount,\n scrollIntoView,\n ...rest\n } = props\n const defaultId = useId().replace(/:/g, '')\n /**\n * 初始化数据模型\n */\n const root = useMemo(() => {\n return new Root({\n id: id ?? defaultId,\n cacheCount,\n upperThresholdCount,\n lowerThresholdCount,\n })\n }, [id, cacheCount, upperThresholdCount, lowerThresholdCount])\n const isScrolling$ = useObservedAttr(root, 'isScrolling')\n const scrollHeight$ = useObservedAttr(root, 'scrollHeight')\n const renderRange$ = useObservedAttr(root, 'renderRange')\n const refEventOrig = useRef<BaseEventOrig>()\n\n /**\n * 滚动事件\n */\n const handleScroll = useMemoizedFn((ev: BaseEventOrig<ScrollViewProps.onScrollDetail>) => {\n refEventOrig.current = ev\n root.sections.forEach((section) => section.getNodeRenderRange())\n const { scrollTop } = ev.detail\n // 确定滚动方向\n const scrollDirection: ScrollDirection = root.getState().scrollOffset < scrollTop ? 'forward' : 'backward'\n // 设置滚动信息，包括方向和偏移量\n root.setStateBatch({\n scrollDirection: scrollDirection,\n scrollOffset: scrollTop,\n isScrolling: true,\n })\n })\n\n const sections = useMemo(() => {\n const [start, end] = renderRange$\n return Children.map(children, (child: ReactElement<PropsWithChildren<_FlowSectionProps>>, order) => {\n const sectionProps = child.props\n const sectionId = sectionProps.id || `section-${order}`\n const childCount = Children.count(sectionProps.children)\n let section = root.findSection(sectionId)\n if (section) {\n const originalCount = section.count\n if (childCount > originalCount) {\n section.pushNodes(childCount - originalCount)\n }\n } else {\n section = new Section(root, {\n id: sectionId,\n order,\n col: sectionProps.column ?? 1,\n rowGap: sectionProps.rowGap || 0,\n columnGap: sectionProps.columnGap || 0,\n count: Children.count(sectionProps.children),\n })\n }\n\n return cloneElement(child, { section, key: `${props.id}-${order}` })\n })?.slice(start, end + 1)\n }, [renderRange$[0], renderRange$[1], children, root, props.id])\n\n const scrollTo = useMemoizedFn((scrollOffset = 0) => {\n scrollOffset = Math.max(0, scrollOffset)\n if (root.getState().scrollOffset === scrollOffset) return\n getScrollViewContextNode(`#${root.id}`).then((node: any) => {\n node.scrollTo({\n animated: true,\n duration: 300,\n top: scrollOffset,\n })\n })\n })\n\n const resetScrolling = useMemoizedFn(() => {\n root.setStateIn('isScrolling', false)\n })\n\n const debouncedResetScrolling = debounce(resetScrolling)\n\n useEffect(() => {\n debouncedResetScrolling()\n }, [isScrolling$])\n\n /**\n * 处理滚动阈值\n */\n useEffect(() => {\n const disposers = [\n root.sub(\n RootEvents.ReachUpperThreshold,\n debounce(() => {\n onScrollToUpper?.(refEventOrig.current!)\n })\n ),\n root.sub(\n RootEvents.ReachLowerThreshold,\n debounce(() => {\n onScrollToLower?.(refEventOrig.current!)\n })\n ),\n ]\n return () => {\n disposers.forEach((disposer) => {\n disposer()\n })\n }\n }, [onScrollToUpper, onScrollToLower])\n\n /**\n * 处理 scrollIntoView\n */\n useEffect(() => {\n handleScrollIntoView()\n async function handleScrollIntoView() {\n if (scrollIntoView) {\n if (root.getState().scrollOffset > 0) {\n // 说明在自动滚动前手动滚动过了，不应该自动滚动了，避免造成困扰\n return\n }\n const targetNode = root.findNode(scrollIntoView)\n if (targetNode) {\n const targetSection = targetNode.section\n if (!targetSection.getState().layouted) {\n const order = targetSection.order\n root.setStateIn('renderRange', [renderRange$[0], order])\n nextTick(async () => {\n await targetNode.section.layoutedSignal.promise\n scrollTo(targetNode.getState().scrollTop)\n })\n return\n }\n await targetNode.section.layoutedSignal.promise\n scrollTo(targetNode.getState().scrollTop)\n }\n }\n }\n }, [scrollIntoView, renderRange$[0]])\n\n return createElement(\n ScrollView,\n {\n id: root.id,\n style: {\n WebkitOverflowScrolling: 'touch',\n overflow: 'auto',\n ...style,\n },\n className,\n scrollY: true,\n onScroll: handleScroll,\n ...rest,\n },\n createElement(\n View,\n {\n id: 'waterflow-root',\n style: {\n width: '100%',\n position: 'relative',\n height: scrollHeight$,\n pointerEvents: isScrolling$ ? 'none' : 'auto',\n },\n },\n sections\n )\n )\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"water-flow.js","sources":["../../../src/components/water-flow/water-flow.ts"],"sourcesContent":["import { BaseEventOrig, ScrollView, ScrollViewProps, View } from '@tarojs/components'\nimport { nextTick } from '@tarojs/taro'\nimport {\n Children,\n cloneElement,\n createElement,\n PropsWithChildren,\n ReactElement,\n useEffect,\n useId,\n useMemo,\n useRef,\n} from 'react'\n\nimport { debounce, getScrollViewContextNode } from '../../utils'\nimport { _FlowSectionProps } from './flow-section'\nimport { Root, RootEvents } from './root'\nimport { Section } from './section'\nimport { useMemoizedFn } from './use-memoized-fn'\nimport { useObservedAttr } from './use-observed-attr'\nimport { getSysInfo } from './utils'\n\nimport type { ScrollDirection, WaterFlowProps } from './interface'\n\ngetSysInfo()\n\nexport function WaterFlow({ children, ...props }: PropsWithChildren<WaterFlowProps>) {\n const {\n id,\n style = {},\n className,\n cacheCount = 1,\n onScrollToUpper,\n onScrollToLower,\n upperThresholdCount,\n lowerThresholdCount,\n scrollIntoView,\n ...rest\n } = props\n const defaultId = useId().replace(/:/g, '')\n /**\n * 初始化数据模型\n */\n const root = useMemo(() => {\n return new Root({\n id: id ?? defaultId,\n cacheCount,\n upperThresholdCount,\n lowerThresholdCount,\n })\n }, [id, cacheCount, upperThresholdCount, lowerThresholdCount])\n const isScrolling$ = useObservedAttr(root, 'isScrolling')\n const scrollHeight$ = useObservedAttr(root, 'scrollHeight')\n const renderRange$ = useObservedAttr(root, 'renderRange')\n const refEventOrig = useRef<BaseEventOrig>()\n\n /**\n * 滚动事件\n */\n const handleScroll = useMemoizedFn((ev: BaseEventOrig<ScrollViewProps.onScrollDetail>) => {\n refEventOrig.current = ev\n root.sections.forEach((section) => section.getNodeRenderRange())\n const { scrollTop } = ev.detail\n // 确定滚动方向\n const scrollDirection: ScrollDirection = root.getState().scrollOffset < scrollTop ? 'forward' : 'backward'\n // 设置滚动信息，包括方向和偏移量\n root.setStateBatch({\n scrollDirection: scrollDirection,\n scrollOffset: scrollTop,\n isScrolling: true,\n })\n })\n\n const sections = useMemo(() => {\n const [start, end] = renderRange$\n return Children.map(children, (child: ReactElement<PropsWithChildren<_FlowSectionProps>>, order) => {\n if (Object.is(child, null)) {\n return null\n }\n const sectionProps = child.props\n const sectionId = sectionProps.id || `section-${order}`\n const childCount = Children.count(sectionProps.children)\n let section = root.findSection(sectionId)\n if (section) {\n const originalCount = section.count\n if (childCount > originalCount) {\n section.pushNodes(childCount - originalCount)\n }\n } else {\n section = new Section(root, {\n id: sectionId,\n order,\n col: sectionProps.column ?? 1,\n rowGap: sectionProps.rowGap || 0,\n columnGap: sectionProps.columnGap || 0,\n count: Children.count(sectionProps.children),\n })\n }\n\n return cloneElement(child, { section, key: `${props.id}-${order}` })\n })?.slice(start, end + 1)\n }, [renderRange$[0], renderRange$[1], children, root, props.id])\n\n const scrollTo = useMemoizedFn((scrollOffset = 0) => {\n scrollOffset = Math.max(0, scrollOffset)\n if (root.getState().scrollOffset === scrollOffset) return\n getScrollViewContextNode(`#${root.id}`).then((node: any) => {\n node.scrollTo({\n animated: true,\n duration: 300,\n top: scrollOffset,\n })\n })\n })\n\n const resetScrolling = useMemoizedFn(() => {\n root.setStateIn('isScrolling', false)\n })\n\n const debouncedResetScrolling = debounce(resetScrolling)\n\n useEffect(() => {\n debouncedResetScrolling()\n }, [isScrolling$])\n\n /**\n * 处理滚动阈值\n */\n useEffect(() => {\n const disposers = [\n root.sub(\n RootEvents.ReachUpperThreshold,\n debounce(() => {\n onScrollToUpper?.(refEventOrig.current!)\n })\n ),\n root.sub(\n RootEvents.ReachLowerThreshold,\n debounce(() => {\n onScrollToLower?.(refEventOrig.current!)\n })\n ),\n ]\n return () => {\n disposers.forEach((disposer) => {\n disposer()\n })\n }\n }, [onScrollToUpper, onScrollToLower])\n\n /**\n * 处理 scrollIntoView\n */\n useEffect(() => {\n handleScrollIntoView()\n async function handleScrollIntoView() {\n if (scrollIntoView) {\n if (root.getState().scrollOffset > 0) {\n // 说明在自动滚动前手动滚动过了，不应该自动滚动了，避免造成困扰\n return\n }\n const targetNode = root.findNode(scrollIntoView)\n if (targetNode) {\n const targetSection = targetNode.section\n if (!targetSection.getState().layouted) {\n const order = targetSection.order\n root.setStateIn('renderRange', [renderRange$[0], order])\n nextTick(async () => {\n await targetNode.section.layoutedSignal.promise\n scrollTo(targetNode.getState().scrollTop)\n })\n return\n }\n await targetNode.section.layoutedSignal.promise\n scrollTo(targetNode.getState().scrollTop)\n }\n }\n }\n }, [scrollIntoView, renderRange$[0]])\n\n return createElement(\n ScrollView,\n {\n id: root.id,\n style: {\n WebkitOverflowScrolling: 'touch',\n overflow: 'auto',\n ...style,\n },\n className,\n scrollY: true,\n onScroll: handleScroll,\n ...rest,\n },\n createElement(\n View,\n {\n id: 'waterflow-root',\n style: {\n width: '100%',\n position: 'relative',\n height: scrollHeight$,\n pointerEvents: isScrolling$ ? 'none' : 'auto',\n },\n },\n sections\n )\n )\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tarojs/components-advanced",
|
|
3
|
-
"version": "4.1.4-beta.
|
|
3
|
+
"version": "4.1.4-beta.9",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "O2Team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -20,19 +20,19 @@
|
|
|
20
20
|
"csstype": "^3.1.1",
|
|
21
21
|
"memoize-one": "^6.0.0",
|
|
22
22
|
"tslib": "^2.6.2",
|
|
23
|
-
"@tarojs/components": "4.1.4-beta.
|
|
23
|
+
"@tarojs/components": "4.1.4-beta.9"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"vue": "3.2.47",
|
|
27
|
-
"@tarojs/
|
|
28
|
-
"@tarojs/
|
|
29
|
-
"@tarojs/
|
|
27
|
+
"@tarojs/shared": "4.1.4-beta.9",
|
|
28
|
+
"@tarojs/taro": "4.1.4-beta.9",
|
|
29
|
+
"@tarojs/runtime": "4.1.4-beta.9"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=18",
|
|
33
|
-
"@tarojs/
|
|
34
|
-
"@tarojs/
|
|
35
|
-
"@tarojs/
|
|
33
|
+
"@tarojs/taro": "~4.1.4-beta.9",
|
|
34
|
+
"@tarojs/shared": "~4.1.4-beta.9",
|
|
35
|
+
"@tarojs/runtime": "~4.1.4-beta.9"
|
|
36
36
|
},
|
|
37
37
|
"peerDependenciesMeta": {
|
|
38
38
|
"react": {
|