@tarojs/components-advanced 4.0.0-canary.9 → 4.0.0
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.
- package/LICENSE +8 -8
- package/dist/components/index.d.ts +2 -2
- package/dist/components/virtual-list/constants.d.ts +1 -2
- package/dist/components/virtual-list/dom-helpers.d.ts +1 -2
- package/dist/components/virtual-list/dom-helpers.js.map +1 -1
- package/dist/components/virtual-list/index.d.ts +9 -17
- package/dist/components/virtual-list/index.js.map +1 -1
- package/dist/components/virtual-list/list-set.d.ts +3 -3
- package/dist/components/virtual-list/list-set.js.map +1 -1
- package/dist/components/virtual-list/preset.d.ts +10 -10
- package/dist/components/virtual-list/preset.js.map +1 -1
- package/dist/components/virtual-list/react/index.d.ts +2 -2
- package/dist/components/virtual-list/react/index.js +2 -1
- package/dist/components/virtual-list/react/index.js.map +1 -1
- package/dist/components/virtual-list/react/list.d.ts +5 -10
- package/dist/components/virtual-list/react/list.js +2 -2
- package/dist/components/virtual-list/react/list.js.map +1 -1
- package/dist/components/virtual-list/react/validate.d.ts +3 -4
- package/dist/components/virtual-list/react/validate.js.map +1 -1
- package/dist/components/virtual-list/react/wrapper.d.ts +1 -1
- package/dist/components/virtual-list/react/wrapper.js.map +1 -1
- package/dist/components/virtual-list/utils.d.ts +3 -3
- package/dist/components/virtual-list/vue/index.d.ts +6 -6
- package/dist/components/virtual-list/vue/list.d.ts +24 -3
- package/dist/components/virtual-list/vue/list.js +8 -4
- package/dist/components/virtual-list/vue/list.js.map +1 -1
- package/dist/components/virtual-waterfall/constants.d.ts +1 -2
- package/dist/components/virtual-waterfall/index.d.ts +9 -17
- package/dist/components/virtual-waterfall/index.js +1 -1
- package/dist/components/virtual-waterfall/index.js.map +1 -1
- package/dist/components/virtual-waterfall/list-map.d.ts +3 -4
- package/dist/components/virtual-waterfall/list-map.js.map +1 -1
- package/dist/components/virtual-waterfall/preset.d.ts +10 -10
- package/dist/components/virtual-waterfall/preset.js.map +1 -1
- package/dist/components/virtual-waterfall/react/index.d.ts +2 -2
- package/dist/components/virtual-waterfall/react/index.js +3 -2
- package/dist/components/virtual-waterfall/react/index.js.map +1 -1
- package/dist/components/virtual-waterfall/react/waterfall.d.ts +4 -9
- package/dist/components/virtual-waterfall/react/waterfall.js +2 -2
- package/dist/components/virtual-waterfall/react/waterfall.js.map +1 -1
- package/dist/components/virtual-waterfall/react/wrapper.d.ts +1 -1
- package/dist/components/virtual-waterfall/react/wrapper.js.map +1 -1
- package/dist/components/virtual-waterfall/vue/index.d.ts +6 -6
- package/dist/components/virtual-waterfall/vue/waterfall.d.ts +24 -3
- package/dist/components/virtual-waterfall/vue/waterfall.js +8 -4
- package/dist/components/virtual-waterfall/vue/waterfall.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/utils/convert.d.ts +2 -3
- package/dist/utils/convert.js.map +1 -1
- package/dist/utils/dom.d.ts +3 -4
- package/dist/utils/dom.js.map +1 -1
- package/dist/utils/helper.d.ts +2 -3
- package/dist/utils/helper.js.map +1 -1
- package/dist/utils/index.d.ts +6 -6
- package/dist/utils/lodash.d.ts +3 -4
- package/dist/utils/lodash.js.map +1 -1
- package/dist/utils/math.d.ts +2 -3
- package/dist/utils/math.js.map +1 -1
- package/dist/utils/timer.d.ts +3 -3
- package/dist/utils/timer.js.map +1 -1
- package/dist/utils/vue-render.d.ts +1 -2
- package/dist/utils/vue-render.js +9 -10
- package/dist/utils/vue-render.js.map +1 -1
- package/package.json +11 -24
package/LICENSE
CHANGED
|
@@ -154,15 +154,8 @@ See `/LICENSE` for details of the license.
|
|
|
154
154
|
|
|
155
155
|
==================
|
|
156
156
|
|
|
157
|
-
MIT (stencil-vue2-output-target):
|
|
158
|
-
The following files embed [stencil-vue2-output-target](https://github.com/diondree/stencil-vue2-output-target) MIT:
|
|
159
|
-
`/packages/taro-components-library-vue2/src/vue-component-lib/utils.ts`
|
|
160
|
-
See `/LICENSE` for details of the license.
|
|
161
|
-
|
|
162
|
-
==================
|
|
163
|
-
|
|
164
157
|
MIT (weui):
|
|
165
|
-
The following files embed [
|
|
158
|
+
The following files embed [weui](https://github.com/Tencent/weui) MIT:
|
|
166
159
|
`/packages/taro-components/src/components/*.scss`
|
|
167
160
|
See `/LICENSE.txt` for details of the license.
|
|
168
161
|
|
|
@@ -172,3 +165,10 @@ Apache-2.0 (intersection-observer):
|
|
|
172
165
|
The following files embed [intersection-observer](https://github.com/GoogleChromeLabs/intersection-observer) Apache-2.0:
|
|
173
166
|
`/packages/taro-api/src/polyfill/intersection-observer.ts`
|
|
174
167
|
See `/LICENSE.txt` for details of the license.
|
|
168
|
+
|
|
169
|
+
==================
|
|
170
|
+
|
|
171
|
+
MIT (babel-plugin-jsx-dom-expressions):
|
|
172
|
+
The following files embed [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions) MIT:
|
|
173
|
+
`/packages/babel-plugin-transform-solid-jsx/src/*`
|
|
174
|
+
See `/LICENSE` for details of the license.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
1
|
+
export * from './virtual-list';
|
|
2
|
+
export * from './virtual-waterfall';
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
declare const IS_SCROLLING_DEBOUNCE_INTERVAL = 200;
|
|
2
|
-
export { IS_SCROLLING_DEBOUNCE_INTERVAL };
|
|
1
|
+
export declare const IS_SCROLLING_DEBOUNCE_INTERVAL = 200;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
declare function getRTLOffsetType(recalculate?: boolean): any;
|
|
2
|
-
export { getRTLOffsetType };
|
|
1
|
+
export declare function getRTLOffsetType(recalculate?: boolean): any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom-helpers.js","sources":["../../../src/components/virtual-list/dom-helpers.ts"],"sourcesContent":["// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).\n// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.\n// The safest way to check this is to intentionally set a negative offset,\n// and then verify that the subsequent \"scroll\" event matches the negative offset.\n// If it does not match, then we can assume a non-standard RTL scroll implementation.\n\nlet cachedRTLResult = null\n\nexport function getRTLOffsetType (recalculate = false) {\n if (cachedRTLResult === null || recalculate) {\n const outerDiv = document.createElement('div')\n const outerStyle = outerDiv.style\n outerStyle.width = '50px'\n outerStyle.height = '50px'\n outerStyle.overflow = 'scroll'\n outerStyle.direction = 'rtl'\n const innerDiv = document.createElement('div')\n const innerStyle = innerDiv.style\n innerStyle.width = '100px'\n innerStyle.height = '100px'\n outerDiv.appendChild(innerDiv)\n document.body.appendChild(outerDiv)\n\n if (outerDiv.scrollLeft > 0) {\n cachedRTLResult = 'positive-descending'\n } else {\n outerDiv.scrollLeft = 1\n\n if (outerDiv.scrollLeft === 0) {\n cachedRTLResult = 'negative'\n } else {\n cachedRTLResult = 'positive-ascending'\n }\n }\n\n document.body.removeChild(outerDiv)\n return cachedRTLResult\n }\n\n return cachedRTLResult\n}\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAI,eAAe,GAAG,IAAI,CAAA;AAEV,SAAA,gBAAgB,CAAE,WAAW,GAAG,KAAK,EAAA;AACnD,IAAA,IAAI,eAAe,KAAK,IAAI,IAAI,WAAW,EAAE;QAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AAC9C,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAA;AACjC,QAAA,UAAU,CAAC,KAAK,GAAG,MAAM,CAAA;AACzB,QAAA,UAAU,CAAC,MAAM,GAAG,MAAM,CAAA;AAC1B,QAAA,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAA;AAC9B,QAAA,UAAU,CAAC,SAAS,GAAG,KAAK,CAAA;QAC5B,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AAC9C,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAA;AACjC,QAAA,UAAU,CAAC,KAAK,GAAG,OAAO,CAAA;AAC1B,QAAA,UAAU,CAAC,MAAM,GAAG,OAAO,CAAA;AAC3B,QAAA,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;AAC9B,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;AAEnC,QAAA,IAAI,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;YAC3B,eAAe,GAAG,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"dom-helpers.js","sources":["../../../src/components/virtual-list/dom-helpers.ts"],"sourcesContent":["// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).\n// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.\n// The safest way to check this is to intentionally set a negative offset,\n// and then verify that the subsequent \"scroll\" event matches the negative offset.\n// If it does not match, then we can assume a non-standard RTL scroll implementation.\n\nlet cachedRTLResult = null\n\nexport function getRTLOffsetType (recalculate = false) {\n if (cachedRTLResult === null || recalculate) {\n const outerDiv = document.createElement('div')\n const outerStyle = outerDiv.style\n outerStyle.width = '50px'\n outerStyle.height = '50px'\n outerStyle.overflow = 'scroll'\n outerStyle.direction = 'rtl'\n const innerDiv = document.createElement('div')\n const innerStyle = innerDiv.style\n innerStyle.width = '100px'\n innerStyle.height = '100px'\n outerDiv.appendChild(innerDiv)\n document.body.appendChild(outerDiv)\n\n if (outerDiv.scrollLeft > 0) {\n cachedRTLResult = 'positive-descending'\n } else {\n outerDiv.scrollLeft = 1\n\n if (outerDiv.scrollLeft === 0) {\n cachedRTLResult = 'negative'\n } else {\n cachedRTLResult = 'positive-ascending'\n }\n }\n\n document.body.removeChild(outerDiv)\n return cachedRTLResult\n }\n\n return cachedRTLResult\n}\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAI,eAAe,GAAG,IAAI,CAAA;AAEV,SAAA,gBAAgB,CAAE,WAAW,GAAG,KAAK,EAAA;AACnD,IAAA,IAAI,eAAe,KAAK,IAAI,IAAI,WAAW,EAAE;QAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AAC9C,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAA;AACjC,QAAA,UAAU,CAAC,KAAK,GAAG,MAAM,CAAA;AACzB,QAAA,UAAU,CAAC,MAAM,GAAG,MAAM,CAAA;AAC1B,QAAA,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAA;AAC9B,QAAA,UAAU,CAAC,SAAS,GAAG,KAAK,CAAA;QAC5B,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AAC9C,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAA;AACjC,QAAA,UAAU,CAAC,KAAK,GAAG,OAAO,CAAA;AAC1B,QAAA,UAAU,CAAC,MAAM,GAAG,OAAO,CAAA;AAC3B,QAAA,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;AAC9B,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;AAEnC,QAAA,IAAI,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE;YAC3B,eAAe,GAAG,qBAAqB,CAAA;SACxC;aAAM;AACL,YAAA,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAA;AAEvB,YAAA,IAAI,QAAQ,CAAC,UAAU,KAAK,CAAC,EAAE;gBAC7B,eAAe,GAAG,UAAU,CAAA;aAC7B;iBAAM;gBACL,eAAe,GAAG,oBAAoB,CAAA;aACvC;SACF;AAED,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;AACnC,QAAA,OAAO,eAAe,CAAA;KACvB;AAED,IAAA,OAAO,eAAe,CAAA;AACxB;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { BaseEventOrig, BaseEventOrigFunction, ScrollViewProps, StandardProps } from '@tarojs/components';
|
|
2
|
-
import { Component, ComponentType, CSSProperties, ReactNode } from 'react';
|
|
1
|
+
import type { BaseEventOrig, BaseEventOrigFunction, ScrollViewProps, StandardProps } from '@tarojs/components';
|
|
2
|
+
import type { Component, ComponentType, CSSProperties, ReactNode } from 'react';
|
|
3
3
|
interface VirtualListProps<T = any> extends Omit<StandardProps, 'children'> {
|
|
4
4
|
/** 列表的高度。 */
|
|
5
5
|
height: string | number;
|
|
@@ -87,6 +87,10 @@ interface VirtualListProps<T = any> extends Omit<StandardProps, 'children'> {
|
|
|
87
87
|
/** 触底事件 */
|
|
88
88
|
onScrollToLower?: () => void;
|
|
89
89
|
style?: CSSProperties;
|
|
90
|
+
/** 这是一个 fix 类型的参数,针对于各端小程序,在层级太深的情况下会生成 Taro 的自定义组件,导致一般的选择器字符会查询不到对应的元素,需要加上类似 #container >>> 的查询前缀
|
|
91
|
+
* @default ''
|
|
92
|
+
*/
|
|
93
|
+
queryPrefix?: string;
|
|
90
94
|
}
|
|
91
95
|
declare namespace VirtualListProps {
|
|
92
96
|
interface IVirtualListEventDetail extends ScrollViewProps.onScrollDetail {
|
|
@@ -207,23 +211,10 @@ declare namespace VirtualListProps {
|
|
|
207
211
|
* @see https://taro-docs.jd.com/docs/virtual-list
|
|
208
212
|
*/
|
|
209
213
|
declare class VirtualListComponent extends Component<VirtualListProps> {
|
|
210
|
-
/**
|
|
211
|
-
* 滚动到指定的地点。
|
|
212
|
-
*/
|
|
213
214
|
/**
|
|
214
215
|
* 滚动到指定的地点。
|
|
215
216
|
*/
|
|
216
217
|
scrollTo(scrollOffset: number, enhanced?: boolean): void;
|
|
217
|
-
/** 滚动到指定的条目。
|
|
218
|
-
* @param index 指定条目的索引。
|
|
219
|
-
* @param align 滚动到指定条目时,指定条目的位置。默认值为 auto。
|
|
220
|
-
*
|
|
221
|
-
* - start:指定条目在可视区域的顶部。
|
|
222
|
-
* - end:指定条目在可视区域的底部。
|
|
223
|
-
* - center:指定条目在可视区域的中间。
|
|
224
|
-
* - auto:尽可能滚动距离最小保证条目在可视区域中,如果已经在可视区域,就不滚动。
|
|
225
|
-
* - smart:条目如果已经在可视区域,就不滚动;如果有部分在可视区域,尽可能滚动距离最小保证条目在可视区域中;如果条目完全不在可视区域,那就滚动到条目在可视区域居中显示。
|
|
226
|
-
*/
|
|
227
218
|
/** 滚动到指定的条目。
|
|
228
219
|
* @param index 指定条目的索引。
|
|
229
220
|
* @param align 滚动到指定条目时,指定条目的位置。默认值为 auto。
|
|
@@ -236,6 +227,7 @@ declare class VirtualListComponent extends Component<VirtualListProps> {
|
|
|
236
227
|
*/
|
|
237
228
|
scrollToItem(index: number, align: 'start' | 'end' | 'center' | 'auto' | 'smart', enhanced?: boolean): void;
|
|
238
229
|
}
|
|
239
|
-
type VirtualList = VirtualListComponent;
|
|
230
|
+
declare type VirtualList = VirtualListComponent;
|
|
240
231
|
declare const VirtualList: typeof VirtualListComponent;
|
|
241
|
-
export { VirtualList
|
|
232
|
+
export { VirtualList, VirtualListProps };
|
|
233
|
+
export default VirtualList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/virtual-list/index.ts"],"sourcesContent":["import type { BaseEventOrig, BaseEventOrigFunction, ScrollViewProps, StandardProps } from '@tarojs/components'\nimport type { Component, ComponentType, CSSProperties, ReactNode } from 'react'\n\ninterface VirtualListProps<T = any> extends Omit<StandardProps, 'children'> {\n /** 列表的高度。 */\n height: string | number\n /** 列表的宽度。 */\n width: string | number\n /** 子组件 */\n item: ComponentType<{\n /** 组件 ID */\n id: string\n /** 组件渲染的数据 */\n data: T[]\n /** 组件渲染数据的索引 */\n index: number\n /** 组件是否正在滚动,当 useIsScrolling 值为 true 时返回布尔值,否则返回 undefined */\n isScrolling?: boolean\n }>\n /** 列表的长度 */\n itemCount: number\n /** 渲染数据 */\n itemData: T[]\n /** 列表单项的大小,垂直滚动时为高度,水平滚动时为宽度。\n *\n * > Note:\n * > - unlimitedSize 模式下如果传入函数,只会调用一次用于设置初始值\n * > - 非 unlimitedSize 模式下如果传入函数,为避免性能问题,每个节点只会调用一次用于设置初始值\n */\n itemSize: number | ((index?: number, itemData?: T[]) => number)\n /** 解开高度列表单项大小限制,默认值使用: itemSize。\n *\n * > Note: 通过 itemSize 设置的初始高度与子节点实际高度差异过大会导致隐患,建议将单页大小设置接近于现实高度,在该模式下可以提升用户体验。\n * @default false\n */\n unlimitedSize?: boolean\n /** 布局方式\n * @default \"absolute\"\n */\n position?: 'absolute' | 'relative' | 'brick'\n /** 滚动方向。vertical 为垂直滚动,horizontal 为平行滚动。\n * @default \"vertical\"\n */\n layout?: 'vertical' | 'horizontal'\n /** 初始滚动偏移值,水平滚动影响 scrollLeft,垂直滚动影响 scrollTop。 */\n initialScrollOffset?: number\n /** 在可视区域之外渲染的列表单项数量,值设置得越高,快速滚动时出现白屏的概率就越小,相应地,每次滚动的性能会变得越差。 */\n overscanCount?: number\n /** 上下滚动预占位节点 */\n placeholderCount?: number\n /** 触顶事件触发时距页面顶部距离\n * @default 50\n */\n upperThreshold?: number\n /** 触底事件触发时距页面底部距离\n * @default 50\n */\n lowerThreshold?: number\n /** 是否注入 isScrolling 属性到 item 组件。这个参数一般用于实现滚动骨架屏(或其它 placeholder) 时比较有用。 */\n useIsScrolling?: boolean\n /** 通过 ScrollViewContext 优化组件滚动性能\n * @default false\n * @note 部分平台不支持,使用时请注意甄别\n */\n enhanced?: boolean\n /** 列表外部容器组件类型。\n * @default ScrollView\n */\n outerElementType?: ComponentType | string\n /** 列表内部容器组件类型。\n * @default View\n */\n innerElementType?: ComponentType | string\n /** 列表子节点容器组件类型。\n * @default View\n */\n itemElementType?: ComponentType | string\n /** 顶部区域 */\n renderTop?: ReactNode\n /** 底部区域 */\n renderBottom?: ReactNode\n /** 列表滚动时调用函数 */\n onScroll?: (event: VirtualListProps.IVirtualListEvent<VirtualListProps.IVirtualListEventDetail>) => void\n /** 调用平台原生的滚动监听函数。 */\n onScrollNative?: BaseEventOrigFunction<ScrollViewProps.onScrollDetail>\n /** 触顶事件 */\n onScrollToUpper?: () => void\n /** 触底事件 */\n onScrollToLower?: () => void\n style?: CSSProperties\n}\n\ndeclare namespace VirtualListProps {\n interface IVirtualListEventDetail extends ScrollViewProps.onScrollDetail {\n scrollLeft: number\n scrollTop: number\n scrollHeight: number\n scrollWidth: number\n clientHeight: number\n clientWidth: number\n diffOffset: number\n }\n\n interface IVirtualListEvent<T extends ScrollViewProps.onScrollDetail = ScrollViewProps.onScrollDetail> extends BaseEventOrig {\n /** 滚动方向,可能值为 forward 往前, backward 往后。 */\n scrollDirection: 'forward' | 'backward'\n /** 滚动距离 */\n scrollOffset: number\n /** 当滚动是由 scrollTo() 或 scrollToItem() 调用时返回 true,否则返回 false */\n scrollUpdateWasRequested: boolean\n /** 滚动信息 */\n detail: T\n }\n}\n\n/** 虚拟列表\n * @classification viewContainer\n * @supported weapp, swan, alipay, tt, qq, jd, h5\n * @example_react\n * ```tsx\n * import VirtualList from `@tarojs/components/virtual-list`\n *\n * function buildData (offset = 0) {\n * return Array(100).fill(0).map((_, i) => i + offset);\n * }\n *\n * const Row = React.memo(({ id, index, data }) => {\n * return (\n * <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}>\n * Row {index}\n * </View>\n * );\n * })\n *\n * export default class Index extends Component {\n * state = {\n * data: buildData(0),\n * }\n *\n * render() {\n * const { data } = this.state\n * const dataLen = data.length\n * return (\n * <VirtualList\n * height={500} // 列表的高度\n * width='100%' // 列表的宽度\n * item={Row} // 列表单项组件,这里只能传入一个组件\n * itemData={data} // 渲染列表的数据\n * itemCount={dataLen} // 渲染列表的长度\n * itemSize={100} // 列表单项的高度\n * />\n * );\n * }\n * }\n * ```\n * @example_vue\n * ```js\n * // app.js 入口文件\n * import Vue from 'vue'\n * import VirtualList from '@tarojs/components/virtual-list'\n *\n * Vue.use(VirtualList)\n * ```\n * ```js\n * <! –– row.vue 单项组件 ––>\n * <template>\n * <view\n * :class=\"index % 2 ? 'ListItemOdd' : 'ListItemEven'\"\n * >\n * Row {{ index }} : {{ data[index] }}\n * </view>\n * </template>\n *\n * <script>\n * export default {\n * props: ['index', 'data']\n * }\n * </script>\n * ```\n * ```js\n * <! –– page.vue 页面组件 ––>\n * <template>\n * <virtual-list\n * :height=\"500\"\n * :item-data=\"list\"\n * :item-count=\"list.length\"\n * :item-size=\"100\"\n * :item=\"Row\"\n * width=\"100%\"\n * />\n * </template>\n *\n * <script>\n * import Row from './row.vue'\n * import { markRaw } from 'vue'\n *\n * function buildData (offset = 0) {\n * return Array(100).fill(0).map((_, i) => i + offset)\n * }\n *\n * export default {\n * data() {\n * return {\n * Row: markRaw(Row),\n * list: buildData(0)\n * }\n * },\n * }\n * </script>\n * ```\n * @see https://taro-docs.jd.com/docs/virtual-list\n */\ndeclare class VirtualListComponent extends Component<VirtualListProps> {\n /**\n * 滚动到指定的地点。\n */\n public scrollTo(scrollOffset: number, enhanced?: boolean): void\n\n /** 滚动到指定的条目。\n * @param index 指定条目的索引。\n * @param align 滚动到指定条目时,指定条目的位置。默认值为 auto。\n *\n * - start:指定条目在可视区域的顶部。\n * - end:指定条目在可视区域的底部。\n * - center:指定条目在可视区域的中间。\n * - auto:尽可能滚动距离最小保证条目在可视区域中,如果已经在可视区域,就不滚动。\n * - smart:条目如果已经在可视区域,就不滚动;如果有部分在可视区域,尽可能滚动距离最小保证条目在可视区域中;如果条目完全不在可视区域,那就滚动到条目在可视区域居中显示。\n */\n public scrollToItem(index: number, align: 'start' | 'end' | 'center' | 'auto' | 'smart', enhanced?: boolean): void\n}\n\ndeclare type VirtualList = VirtualListComponent\nconst VirtualList: typeof VirtualListComponent = (process.env.FRAMEWORK === 'vue' || process.env.FRAMEWORK === 'vue3')\n ? require('./vue').default\n : require('./react').default\n\nexport { VirtualList, VirtualListProps }\nexport default VirtualList\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/virtual-list/index.ts"],"sourcesContent":["import type { BaseEventOrig, BaseEventOrigFunction, ScrollViewProps, StandardProps } from '@tarojs/components'\nimport type { Component, ComponentType, CSSProperties, ReactNode } from 'react'\n\ninterface VirtualListProps<T = any> extends Omit<StandardProps, 'children'> {\n /** 列表的高度。 */\n height: string | number\n /** 列表的宽度。 */\n width: string | number\n /** 子组件 */\n item: ComponentType<{\n /** 组件 ID */\n id: string\n /** 组件渲染的数据 */\n data: T[]\n /** 组件渲染数据的索引 */\n index: number\n /** 组件是否正在滚动,当 useIsScrolling 值为 true 时返回布尔值,否则返回 undefined */\n isScrolling?: boolean\n }>\n /** 列表的长度 */\n itemCount: number\n /** 渲染数据 */\n itemData: T[]\n /** 列表单项的大小,垂直滚动时为高度,水平滚动时为宽度。\n *\n * > Note:\n * > - unlimitedSize 模式下如果传入函数,只会调用一次用于设置初始值\n * > - 非 unlimitedSize 模式下如果传入函数,为避免性能问题,每个节点只会调用一次用于设置初始值\n */\n itemSize: number | ((index?: number, itemData?: T[]) => number)\n /** 解开高度列表单项大小限制,默认值使用: itemSize。\n *\n * > Note: 通过 itemSize 设置的初始高度与子节点实际高度差异过大会导致隐患,建议将单页大小设置接近于现实高度,在该模式下可以提升用户体验。\n * @default false\n */\n unlimitedSize?: boolean\n /** 布局方式\n * @default \"absolute\"\n */\n position?: 'absolute' | 'relative' | 'brick'\n /** 滚动方向。vertical 为垂直滚动,horizontal 为平行滚动。\n * @default \"vertical\"\n */\n layout?: 'vertical' | 'horizontal'\n /** 初始滚动偏移值,水平滚动影响 scrollLeft,垂直滚动影响 scrollTop。 */\n initialScrollOffset?: number\n /** 在可视区域之外渲染的列表单项数量,值设置得越高,快速滚动时出现白屏的概率就越小,相应地,每次滚动的性能会变得越差。 */\n overscanCount?: number\n /** 上下滚动预占位节点 */\n placeholderCount?: number\n /** 触顶事件触发时距页面顶部距离\n * @default 50\n */\n upperThreshold?: number\n /** 触底事件触发时距页面底部距离\n * @default 50\n */\n lowerThreshold?: number\n /** 是否注入 isScrolling 属性到 item 组件。这个参数一般用于实现滚动骨架屏(或其它 placeholder) 时比较有用。 */\n useIsScrolling?: boolean\n /** 通过 ScrollViewContext 优化组件滚动性能\n * @default false\n * @note 部分平台不支持,使用时请注意甄别\n */\n enhanced?: boolean\n /** 列表外部容器组件类型。\n * @default ScrollView\n */\n outerElementType?: ComponentType | string\n /** 列表内部容器组件类型。\n * @default View\n */\n innerElementType?: ComponentType | string\n /** 列表子节点容器组件类型。\n * @default View\n */\n itemElementType?: ComponentType | string\n /** 顶部区域 */\n renderTop?: ReactNode\n /** 底部区域 */\n renderBottom?: ReactNode\n /** 列表滚动时调用函数 */\n onScroll?: (event: VirtualListProps.IVirtualListEvent<VirtualListProps.IVirtualListEventDetail>) => void\n /** 调用平台原生的滚动监听函数。 */\n onScrollNative?: BaseEventOrigFunction<ScrollViewProps.onScrollDetail>\n /** 触顶事件 */\n onScrollToUpper?: () => void\n /** 触底事件 */\n onScrollToLower?: () => void\n style?: CSSProperties\n /** 这是一个 fix 类型的参数,针对于各端小程序,在层级太深的情况下会生成 Taro 的自定义组件,导致一般的选择器字符会查询不到对应的元素,需要加上类似 #container >>> 的查询前缀\n * @default ''\n */\n queryPrefix?: string\n}\n\ndeclare namespace VirtualListProps {\n interface IVirtualListEventDetail extends ScrollViewProps.onScrollDetail {\n scrollLeft: number\n scrollTop: number\n scrollHeight: number\n scrollWidth: number\n clientHeight: number\n clientWidth: number\n diffOffset: number\n }\n\n interface IVirtualListEvent<T extends ScrollViewProps.onScrollDetail = ScrollViewProps.onScrollDetail> extends BaseEventOrig {\n /** 滚动方向,可能值为 forward 往前, backward 往后。 */\n scrollDirection: 'forward' | 'backward'\n /** 滚动距离 */\n scrollOffset: number\n /** 当滚动是由 scrollTo() 或 scrollToItem() 调用时返回 true,否则返回 false */\n scrollUpdateWasRequested: boolean\n /** 滚动信息 */\n detail: T\n }\n}\n\n/** 虚拟列表\n * @classification viewContainer\n * @supported weapp, swan, alipay, tt, qq, jd, h5\n * @example_react\n * ```tsx\n * import VirtualList from `@tarojs/components/virtual-list`\n *\n * function buildData (offset = 0) {\n * return Array(100).fill(0).map((_, i) => i + offset);\n * }\n *\n * const Row = React.memo(({ id, index, data }) => {\n * return (\n * <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}>\n * Row {index}\n * </View>\n * );\n * })\n *\n * export default class Index extends Component {\n * state = {\n * data: buildData(0),\n * }\n *\n * render() {\n * const { data } = this.state\n * const dataLen = data.length\n * return (\n * <VirtualList\n * height={500} // 列表的高度\n * width='100%' // 列表的宽度\n * item={Row} // 列表单项组件,这里只能传入一个组件\n * itemData={data} // 渲染列表的数据\n * itemCount={dataLen} // 渲染列表的长度\n * itemSize={100} // 列表单项的高度\n * />\n * );\n * }\n * }\n * ```\n * @example_vue\n * ```js\n * // app.js 入口文件\n * import Vue from 'vue'\n * import VirtualList from '@tarojs/components/virtual-list'\n *\n * Vue.use(VirtualList)\n * ```\n * ```js\n * <! –– row.vue 单项组件 ––>\n * <template>\n * <view\n * :class=\"index % 2 ? 'ListItemOdd' : 'ListItemEven'\"\n * >\n * Row {{ index }} : {{ data[index] }}\n * </view>\n * </template>\n *\n * <script>\n * export default {\n * props: ['index', 'data']\n * }\n * </script>\n * ```\n * ```js\n * <! –– page.vue 页面组件 ––>\n * <template>\n * <virtual-list\n * :height=\"500\"\n * :item-data=\"list\"\n * :item-count=\"list.length\"\n * :item-size=\"100\"\n * :item=\"Row\"\n * width=\"100%\"\n * />\n * </template>\n *\n * <script>\n * import Row from './row.vue'\n * import { markRaw } from 'vue'\n *\n * function buildData (offset = 0) {\n * return Array(100).fill(0).map((_, i) => i + offset)\n * }\n *\n * export default {\n * data() {\n * return {\n * Row: markRaw(Row),\n * list: buildData(0)\n * }\n * },\n * }\n * </script>\n * ```\n * @see https://taro-docs.jd.com/docs/virtual-list\n */\ndeclare class VirtualListComponent extends Component<VirtualListProps> {\n /**\n * 滚动到指定的地点。\n */\n public scrollTo(scrollOffset: number, enhanced?: boolean): void\n\n /** 滚动到指定的条目。\n * @param index 指定条目的索引。\n * @param align 滚动到指定条目时,指定条目的位置。默认值为 auto。\n *\n * - start:指定条目在可视区域的顶部。\n * - end:指定条目在可视区域的底部。\n * - center:指定条目在可视区域的中间。\n * - auto:尽可能滚动距离最小保证条目在可视区域中,如果已经在可视区域,就不滚动。\n * - smart:条目如果已经在可视区域,就不滚动;如果有部分在可视区域,尽可能滚动距离最小保证条目在可视区域中;如果条目完全不在可视区域,那就滚动到条目在可视区域居中显示。\n */\n public scrollToItem(index: number, align: 'start' | 'end' | 'center' | 'auto' | 'smart', enhanced?: boolean): void\n}\n\ndeclare type VirtualList = VirtualListComponent\nconst VirtualList: typeof VirtualListComponent = (process.env.FRAMEWORK === 'vue' || process.env.FRAMEWORK === 'vue3')\n ? require('./vue').default\n : require('./react').default\n\nexport { VirtualList, VirtualListProps }\nexport default VirtualList\n"],"names":[],"mappings":"AA4OA,MAAM,WAAW,GAAgC,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,KAAK,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,KAAK,MAAM;AACnH,MAAE,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO;AAC1B,MAAE,OAAO,CAAC,SAAS,CAAC,CAAC;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { IProps } from
|
|
1
|
+
import type { IProps } from './preset';
|
|
2
2
|
type TProps = Pick<IProps, 'width' | 'height' | 'unlimitedSize' | 'itemCount' | 'itemData' | 'itemSize' | 'overscanCount' | 'direction' | 'layout'>;
|
|
3
|
-
|
|
3
|
+
export default class ListSet {
|
|
4
4
|
protected props: TProps;
|
|
5
5
|
protected refresh?: TFunc;
|
|
6
6
|
list: number[];
|
|
@@ -28,4 +28,4 @@ declare class ListSet {
|
|
|
28
28
|
getOffsetForIndexAndAlignment(index: number, align: string, scrollOffset: number): number;
|
|
29
29
|
compareSize(i?: number, size?: number): boolean;
|
|
30
30
|
}
|
|
31
|
-
export {
|
|
31
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-set.js","sources":["../../../src/components/virtual-list/list-set.ts"],"sourcesContent":["import { isFunction } from '@tarojs/shared'\nimport memoizeOne from 'memoize-one'\n\nimport { getOffsetForIndexAndAlignment } from '../../utils'\nimport { isHorizontalFunc } from './utils'\n\nimport type { IProps } from './preset'\n\ntype TProps = Pick<IProps, 'width' | 'height' | 'unlimitedSize' | 'itemCount' | 'itemData' | 'itemSize' | 'overscanCount' | 'direction' | 'layout'>\n\nexport default class ListSet {\n list: number[] = []\n mode?: 'normal' | 'function' | 'unlimited'\n defaultSize = 1\n\n wrapperHeight = 0\n wrapperWidth = 0\n\n refreshCounter = 0\n\n constructor (protected props: TProps, protected refresh?: TFunc) {\n this.update(props)\n\n // Note: 不考虑列表模式切换情况,可能会导致列表抖动体验过差\n if (this.props.unlimitedSize) {\n this.mode = 'unlimited'\n } else if (isFunction(this.props.itemSize)) {\n this.mode = 'function'\n } else {\n this.mode = 'normal'\n }\n\n this.defaultSize = (isFunction(this.props.itemSize) ? this.props.itemSize() : this.props.itemSize) || 1\n\n if (!this.isNormalMode) {\n this.list = new Array(this.length).fill(-1)\n }\n }\n\n get isNormalMode () {\n return this.mode === 'normal'\n }\n\n get isFunctionMode () {\n return this.mode === 'function'\n }\n\n get isUnlimitedMode () {\n return this.mode === 'unlimited'\n }\n\n get length () {\n return this.props.itemCount || 100\n }\n\n get overscan () {\n return this.props.overscanCount || 0\n }\n\n get wrapperSize () {\n return isHorizontalFunc(this.props) ? this.wrapperWidth : this.wrapperHeight\n }\n\n update (props: TProps) {\n this.props = props\n\n if (this.length > this.list.length) {\n const arr = new Array(this.length - this.list.length).fill(-1)\n this.list.push(...arr)\n } else if (this.length < this.list.length) {\n this.list.length = this.length\n }\n }\n\n setSize (i = 0, size = this.defaultSize) {\n this.list[i] = size\n this.refresh?.()\n this.refreshCounter++\n }\n\n getSize (i = 0) {\n const size = this.props.itemSize\n const item = this.list[i]\n if (item >= 0) return item\n\n if (this.isFunctionMode && isFunction(size)) {\n const itemSize = size(i, this.props.itemData)\n this.setSize(i, itemSize)\n return itemSize\n }\n return this.defaultSize\n }\n\n getOffsetSize (i = this.list.length) {\n if (this.isNormalMode) return i * this.defaultSize\n return this.list.slice(0, i).reduce((sum, _, idx) => sum + this.getSize(idx), 0)\n }\n\n getOffsetSizeCache = memoizeOne((i = this.list.length, _flag = this.refreshCounter) => {\n return this.getOffsetSize(i)\n })\n\n getSizeCount (offset = 0) {\n if (offset === 0) return 0\n // if (this.isNormalMode) {\n // return Math.min(this.length - 1, Math.floor(offset / this.length))\n // }\n let offsetSize = 0\n const count = this.list.reduce((sum, _, idx) => {\n if (offsetSize < offset) {\n offsetSize += this.getSize(idx)\n return ++sum\n }\n return sum\n }, 0)\n return count - 1\n }\n\n getStartIndex (scrollOffset = 0) {\n return Math.max(0, this.getSizeCount(scrollOffset) - 1)\n }\n\n getStopIndex (wrapperSize = 0, scrollOffset = 0, startIndex = 0) {\n // const visibleOffset = this.getOffsetSizeCache(startIndex)\n // if (this.isNormalMode) {\n // const numVisibleItems = Math.ceil((wrapperSize + scrollOffset - visibleOffset) / this.length)\n // /** -1 is because stop index is inclusive */\n // return Math.max(startIndex, Math.min(this.length - 1, startIndex + numVisibleItems - 1))\n // }\n return Math.max(startIndex, Math.min(this.length - 1, this.getSizeCount(wrapperSize + scrollOffset)))\n }\n\n getRangeToRender (direction: 'forward' | 'backward', scrollOffset = 0, block = false) {\n if (this.length === 0) {\n return [0, 0, 0, 0]\n }\n\n const startIndex = this.getStartIndex(scrollOffset)\n const stopIndex = this.getStopIndex(this.wrapperSize, scrollOffset, startIndex)\n\n // Overscan by one item in each direction so that tab/focus works. If there isn't at least one extra item, tab loops back around.\n const overscanBackward = !block || direction === 'backward' ? Math.max(1, this.overscan) : 1\n const overscanForward = !block || direction === 'forward' ? Math.max(1, this.overscan) : 1\n return [\n Math.max(0, startIndex - overscanBackward),\n Math.max(0, Math.min(this.length - 1, stopIndex + overscanForward)),\n startIndex,\n stopIndex\n ]\n }\n\n getOffsetForIndexAndAlignment (index: number, align: string, scrollOffset: number) {\n return getOffsetForIndexAndAlignment({\n align,\n containerSize: this.wrapperSize,\n currentOffset: scrollOffset,\n scrollSize: this.getOffsetSizeCache(this.length),\n slideSize: this.getSize(index),\n targetOffset: this.getOffsetSizeCache(index),\n })\n }\n\n compareSize (i = 0, size = this.defaultSize) {\n if (this.isNormalMode) return true\n return this.getSize(i) === size\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"list-set.js","sources":["../../../src/components/virtual-list/list-set.ts"],"sourcesContent":["import { isFunction } from '@tarojs/shared'\nimport memoizeOne from 'memoize-one'\n\nimport { getOffsetForIndexAndAlignment } from '../../utils'\nimport { isHorizontalFunc } from './utils'\n\nimport type { IProps } from './preset'\n\ntype TProps = Pick<IProps, 'width' | 'height' | 'unlimitedSize' | 'itemCount' | 'itemData' | 'itemSize' | 'overscanCount' | 'direction' | 'layout'>\n\nexport default class ListSet {\n list: number[] = []\n mode?: 'normal' | 'function' | 'unlimited'\n defaultSize = 1\n\n wrapperHeight = 0\n wrapperWidth = 0\n\n refreshCounter = 0\n\n constructor (protected props: TProps, protected refresh?: TFunc) {\n this.update(props)\n\n // Note: 不考虑列表模式切换情况,可能会导致列表抖动体验过差\n if (this.props.unlimitedSize) {\n this.mode = 'unlimited'\n } else if (isFunction(this.props.itemSize)) {\n this.mode = 'function'\n } else {\n this.mode = 'normal'\n }\n\n this.defaultSize = (isFunction(this.props.itemSize) ? this.props.itemSize() : this.props.itemSize) || 1\n\n if (!this.isNormalMode) {\n this.list = new Array(this.length).fill(-1)\n }\n }\n\n get isNormalMode () {\n return this.mode === 'normal'\n }\n\n get isFunctionMode () {\n return this.mode === 'function'\n }\n\n get isUnlimitedMode () {\n return this.mode === 'unlimited'\n }\n\n get length () {\n return this.props.itemCount || 100\n }\n\n get overscan () {\n return this.props.overscanCount || 0\n }\n\n get wrapperSize () {\n return isHorizontalFunc(this.props) ? this.wrapperWidth : this.wrapperHeight\n }\n\n update (props: TProps) {\n this.props = props\n\n if (this.length > this.list.length) {\n const arr = new Array(this.length - this.list.length).fill(-1)\n this.list.push(...arr)\n } else if (this.length < this.list.length) {\n this.list.length = this.length\n }\n }\n\n setSize (i = 0, size = this.defaultSize) {\n this.list[i] = size\n this.refresh?.()\n this.refreshCounter++\n }\n\n getSize (i = 0) {\n const size = this.props.itemSize\n const item = this.list[i]\n if (item >= 0) return item\n\n if (this.isFunctionMode && isFunction(size)) {\n const itemSize = size(i, this.props.itemData)\n this.setSize(i, itemSize)\n return itemSize\n }\n return this.defaultSize\n }\n\n getOffsetSize (i = this.list.length) {\n if (this.isNormalMode) return i * this.defaultSize\n return this.list.slice(0, i).reduce((sum, _, idx) => sum + this.getSize(idx), 0)\n }\n\n getOffsetSizeCache = memoizeOne((i = this.list.length, _flag = this.refreshCounter) => {\n return this.getOffsetSize(i)\n })\n\n getSizeCount (offset = 0) {\n if (offset === 0) return 0\n // if (this.isNormalMode) {\n // return Math.min(this.length - 1, Math.floor(offset / this.length))\n // }\n let offsetSize = 0\n const count = this.list.reduce((sum, _, idx) => {\n if (offsetSize < offset) {\n offsetSize += this.getSize(idx)\n return ++sum\n }\n return sum\n }, 0)\n return count - 1\n }\n\n getStartIndex (scrollOffset = 0) {\n return Math.max(0, this.getSizeCount(scrollOffset) - 1)\n }\n\n getStopIndex (wrapperSize = 0, scrollOffset = 0, startIndex = 0) {\n // const visibleOffset = this.getOffsetSizeCache(startIndex)\n // if (this.isNormalMode) {\n // const numVisibleItems = Math.ceil((wrapperSize + scrollOffset - visibleOffset) / this.length)\n // /** -1 is because stop index is inclusive */\n // return Math.max(startIndex, Math.min(this.length - 1, startIndex + numVisibleItems - 1))\n // }\n return Math.max(startIndex, Math.min(this.length - 1, this.getSizeCount(wrapperSize + scrollOffset)))\n }\n\n getRangeToRender (direction: 'forward' | 'backward', scrollOffset = 0, block = false) {\n if (this.length === 0) {\n return [0, 0, 0, 0]\n }\n\n const startIndex = this.getStartIndex(scrollOffset)\n const stopIndex = this.getStopIndex(this.wrapperSize, scrollOffset, startIndex)\n\n // Overscan by one item in each direction so that tab/focus works. If there isn't at least one extra item, tab loops back around.\n const overscanBackward = !block || direction === 'backward' ? Math.max(1, this.overscan) : 1\n const overscanForward = !block || direction === 'forward' ? Math.max(1, this.overscan) : 1\n return [\n Math.max(0, startIndex - overscanBackward),\n Math.max(0, Math.min(this.length - 1, stopIndex + overscanForward)),\n startIndex,\n stopIndex\n ]\n }\n\n getOffsetForIndexAndAlignment (index: number, align: string, scrollOffset: number) {\n return getOffsetForIndexAndAlignment({\n align,\n containerSize: this.wrapperSize,\n currentOffset: scrollOffset,\n scrollSize: this.getOffsetSizeCache(this.length),\n slideSize: this.getSize(index),\n targetOffset: this.getOffsetSizeCache(index),\n })\n }\n\n compareSize (i = 0, size = this.defaultSize) {\n if (this.isNormalMode) return true\n return this.getSize(i) === size\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type IntersectionObserver } from '@tarojs/taro';
|
|
2
3
|
import * as CSS from 'csstype';
|
|
3
|
-
import { defaultItemKey } from
|
|
4
|
-
import ListSet from
|
|
5
|
-
import { VirtualListProps } from
|
|
6
|
-
interface IProps extends Partial<VirtualListProps> {
|
|
4
|
+
import { defaultItemKey } from '../../utils';
|
|
5
|
+
import ListSet from './list-set';
|
|
6
|
+
import type { VirtualListProps } from './';
|
|
7
|
+
export interface IProps extends Partial<VirtualListProps> {
|
|
7
8
|
children?: VirtualListProps['item'];
|
|
8
9
|
direction?: 'ltr' | 'rtl' | 'horizontal' | 'vertical';
|
|
9
10
|
itemKey?: typeof defaultItemKey;
|
|
@@ -16,7 +17,7 @@ interface IProps extends Partial<VirtualListProps> {
|
|
|
16
17
|
shouldResetStyleCacheOnItemSizeChange?: boolean;
|
|
17
18
|
outerWrapper?: React.FC;
|
|
18
19
|
}
|
|
19
|
-
|
|
20
|
+
export default class Preset {
|
|
20
21
|
protected props: IProps;
|
|
21
22
|
protected refresh?: TFunc;
|
|
22
23
|
itemList: ListSet;
|
|
@@ -43,9 +44,9 @@ declare class Preset {
|
|
|
43
44
|
get isRelative(): boolean;
|
|
44
45
|
get isBrick(): boolean;
|
|
45
46
|
get placeholderCount(): number;
|
|
46
|
-
get outerElement(): string | import("react").ComponentType
|
|
47
|
-
get innerElement(): string | import("react").ComponentType
|
|
48
|
-
get itemElement(): string | import("react").ComponentType
|
|
47
|
+
get outerElement(): string | import("react").ComponentType;
|
|
48
|
+
get innerElement(): string | import("react").ComponentType;
|
|
49
|
+
get itemElement(): string | import("react").ComponentType;
|
|
49
50
|
get field(): Record<string, number>;
|
|
50
51
|
set field(o: Record<string, number>);
|
|
51
52
|
get enhanced(): true;
|
|
@@ -61,4 +62,3 @@ declare class Preset {
|
|
|
61
62
|
}): IntersectionObserver;
|
|
62
63
|
dispose(): void;
|
|
63
64
|
}
|
|
64
|
-
export { IProps, Preset as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preset.js","sources":["../../../src/components/virtual-list/preset.ts"],"sourcesContent":["import { type IntersectionObserver, createIntersectionObserver, createSelectorQuery, getCurrentInstance } from '@tarojs/taro'\nimport * as CSS from 'csstype'\nimport memoizeOne from 'memoize-one'\n\nimport { convertNumber2PX, defaultItemKey, getRectSizeSync, isCosDistributing, throttle } from '../../utils'\nimport ListSet from './list-set'\nimport { isHorizontalFunc, isRtlFunc } from './utils'\n\nimport type { VirtualListProps } from './'\n\nlet INSTANCE_ID = 0\n\nexport interface IProps extends Partial<VirtualListProps> {\n children?: VirtualListProps['item']\n direction?: 'ltr' | 'rtl' | 'horizontal' | 'vertical'\n itemKey?: typeof defaultItemKey\n itemTagName?: string\n innerTagName?: string\n outerTagName?: string\n innerRef?: React.Ref<HTMLElement> | string\n outerRef?: React.Ref<HTMLElement> | string\n onItemsRendered?: TFunc\n shouldResetStyleCacheOnItemSizeChange?: boolean\n outerWrapper?: React.FC\n}\n\nexport default class Preset {\n itemList: ListSet\n _id: string\n _observer: Record<string, IntersectionObserver> = {}\n\n constructor (protected props: IProps, protected refresh?: TFunc) {\n this.init(this.props)\n this.itemList = new ListSet(props, refresh)\n }\n\n wrapperField = {\n scrollLeft: 0,\n scrollTop: 0,\n scrollHeight: 0,\n scrollWidth: 0,\n clientHeight: 0,\n clientWidth: 0,\n diffOffset: 0\n }\n\n diffList: number[] = [0, 0, 0]\n\n init (props: IProps) {\n this.props = props\n }\n\n update (props: IProps) {\n this.props = props\n this.itemList.update(props)\n }\n\n async updateWrapper (id: string) {\n this.id = id\n const { width = 0, height = 0 } = this.props\n const validWidth = typeof width === 'number' && width > 0\n const validHeight = typeof height === 'number' && height > 0\n if (validWidth) {\n this.itemList.wrapperWidth = width\n }\n if (validHeight) {\n this.itemList.wrapperHeight = height\n }\n\n if (!validHeight || !validWidth) {\n const res = await getRectSizeSync(`#${id}`, 100)\n this.itemList.wrapperWidth ||= res.width\n this.itemList.wrapperHeight ||= res.height\n this.refresh?.()\n }\n\n this.itemList.update(this.props)\n }\n\n set id (id: string) {\n this._id = id\n }\n\n get id () {\n this._id ||= `virtual-waterfall-${INSTANCE_ID++}`\n return this._id\n }\n\n get isHorizontal () {\n return isHorizontalFunc(this.props)\n }\n\n get isRtl () {\n return isRtlFunc(this.props)\n }\n\n get isRelative () {\n return this.props.position && this.props.position !== 'absolute'\n }\n\n get isBrick () {\n return this.props.position === 'brick'\n }\n\n get placeholderCount () {\n return this.props.placeholderCount >= 0 ? this.props.placeholderCount : this.props.overscanCount\n }\n\n get outerElement () {\n return this.props.outerElementType || this.props.outerTagName || 'div'\n }\n\n get innerElement () {\n return this.props.innerElementType || this.props.innerTagName || 'div'\n }\n\n get itemElement () {\n return this.props.itemElementType || this.props.itemTagName || 'div'\n }\n\n get field () {\n return this.wrapperField\n }\n\n set field (o: Record<string, number>) {\n Object.assign(this.wrapperField, o)\n // Object.keys(o).forEach(key => {\n // if (typeof o[key] === 'number' && typeof this.wrapperField[key] === 'number') {\n // this.wrapperField[key] = o[key]\n // }\n // })\n }\n\n get enhanced () {\n return this.props.enhanced || true\n }\n\n isShaking (diff?: number) {\n if (process.env.TARO_PLATFORM === 'web' || this.props.enhanced) return false\n const list = this.diffList.slice(-3)\n this.diffList.push(diff)\n return list.findIndex(e => Math.abs(e) === Math.abs(diff)) !== -1 || isCosDistributing(this.diffList.slice(-4))\n }\n\n resetCache () {\n this.itemList.refreshCounter++\n }\n\n getItemStyleCache = memoizeOne((\n itemIndex?: number,\n itemSize?: IProps['itemSize'] | false,\n _flag = this.itemList.refreshCounter\n ) => {\n itemSize = itemSize || this.itemList.getSize(itemIndex)\n const style: CSS.Properties<string | number> = this.isRelative ? {} : {\n position: 'absolute',\n }\n const offset = convertNumber2PX(this.itemList.getOffsetSizeCache(itemIndex))\n const size = convertNumber2PX(this.itemList.getSize(itemIndex))\n const isHorizontal = this.isHorizontal\n const isRtl = this.isRtl\n style.height = !isHorizontal ? size : '100%'\n style.width = isHorizontal ? size : '100%'\n if (!this.isRelative) {\n const offsetHorizontal = isHorizontal ? offset : 0\n style.top = !isHorizontal ? offset : 0\n if (isRtl) {\n style.right = offsetHorizontal\n } else {\n style.left = offsetHorizontal\n }\n }\n\n return style\n })\n\n getItemStyle (index: number) {\n const {\n shouldResetStyleCacheOnItemSizeChange\n } = this.props\n\n return this.getItemStyleCache(\n index,\n shouldResetStyleCacheOnItemSizeChange ? this.itemList.getSize(index) : false,\n )\n }\n\n boundaryDetection () {\n if ([typeof this.props.onScrollToUpper, typeof this.props.onScrollToLower].every(e => e !== 'function')) return\n\n createSelectorQuery().select(`#${this.id}`).node().exec(() => {\n const upperObserver = this.boundaryDetectionHelper({\n event: typeof this.props.onScrollToUpper === 'function' ? () => {\n if (this.field.diffOffset >= 0) this.props.onScrollToUpper()\n } : undefined,\n id: `${this.id}-${this.isHorizontal ? this.isRtl ? 'right' : 'left' : 'top'}`,\n })\n if (upperObserver) {\n this._observer.top = upperObserver\n }\n\n const lowerObserver = this.boundaryDetectionHelper({\n event: typeof this.props.onScrollToLower === 'function' ? () => {\n if (this.field.diffOffset <= 0) this.props.onScrollToLower()\n } : undefined,\n id: `${this.id}-${this.isHorizontal ? this.isRtl ? 'left' : 'right' : 'bottom'}`,\n })\n if (lowerObserver) {\n this._observer.bottom = lowerObserver\n }\n })\n }\n\n boundaryDetectionHelper ({\n component,\n event,\n id,\n }: {\n component?: TaroGeneral.IAnyObject\n event?: () => void\n id: string\n }) {\n if (typeof event !== 'function') return\n const eventFunc = throttle(event)\n\n component ||= getCurrentInstance().page\n const observer = createIntersectionObserver(component, {\n thresholds: [0.4],\n })\n\n observer\n .relativeTo(`#${this.id}`, {\n top: typeof this.props.lowerThreshold === 'number' ? this.props.lowerThreshold : 50,\n bottom: typeof this.props.upperThreshold === 'number' ? this.props.upperThreshold : 50,\n })\n .observe(`#${id}`, eventFunc)\n\n return observer\n }\n\n dispose () {\n Object.values(this._observer).forEach(e => e.disconnect?.())\n this._observer = {}\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"preset.js","sources":["../../../src/components/virtual-list/preset.ts"],"sourcesContent":["import { type IntersectionObserver, createIntersectionObserver, createSelectorQuery, getCurrentInstance } from '@tarojs/taro'\nimport * as CSS from 'csstype'\nimport memoizeOne from 'memoize-one'\n\nimport { convertNumber2PX, defaultItemKey, getRectSizeSync, isCosDistributing, throttle } from '../../utils'\nimport ListSet from './list-set'\nimport { isHorizontalFunc, isRtlFunc } from './utils'\n\nimport type { VirtualListProps } from './'\n\nlet INSTANCE_ID = 0\n\nexport interface IProps extends Partial<VirtualListProps> {\n children?: VirtualListProps['item']\n direction?: 'ltr' | 'rtl' | 'horizontal' | 'vertical'\n itemKey?: typeof defaultItemKey\n itemTagName?: string\n innerTagName?: string\n outerTagName?: string\n innerRef?: React.Ref<HTMLElement> | string\n outerRef?: React.Ref<HTMLElement> | string\n onItemsRendered?: TFunc\n shouldResetStyleCacheOnItemSizeChange?: boolean\n outerWrapper?: React.FC\n}\n\nexport default class Preset {\n itemList: ListSet\n _id: string\n _observer: Record<string, IntersectionObserver> = {}\n\n constructor (protected props: IProps, protected refresh?: TFunc) {\n this.init(this.props)\n this.itemList = new ListSet(props, refresh)\n }\n\n wrapperField = {\n scrollLeft: 0,\n scrollTop: 0,\n scrollHeight: 0,\n scrollWidth: 0,\n clientHeight: 0,\n clientWidth: 0,\n diffOffset: 0\n }\n\n diffList: number[] = [0, 0, 0]\n\n init (props: IProps) {\n this.props = props\n }\n\n update (props: IProps) {\n this.props = props\n this.itemList.update(props)\n }\n\n async updateWrapper (id: string) {\n this.id = id\n const { width = 0, height = 0 } = this.props\n const validWidth = typeof width === 'number' && width > 0\n const validHeight = typeof height === 'number' && height > 0\n if (validWidth) {\n this.itemList.wrapperWidth = width\n }\n if (validHeight) {\n this.itemList.wrapperHeight = height\n }\n\n if (!validHeight || !validWidth) {\n const res = await getRectSizeSync(`#${id}`, 100)\n this.itemList.wrapperWidth ||= res.width\n this.itemList.wrapperHeight ||= res.height\n this.refresh?.()\n }\n\n this.itemList.update(this.props)\n }\n\n set id (id: string) {\n this._id = id\n }\n\n get id () {\n this._id ||= `virtual-waterfall-${INSTANCE_ID++}`\n return this._id\n }\n\n get isHorizontal () {\n return isHorizontalFunc(this.props)\n }\n\n get isRtl () {\n return isRtlFunc(this.props)\n }\n\n get isRelative () {\n return this.props.position && this.props.position !== 'absolute'\n }\n\n get isBrick () {\n return this.props.position === 'brick'\n }\n\n get placeholderCount () {\n return this.props.placeholderCount >= 0 ? this.props.placeholderCount : this.props.overscanCount\n }\n\n get outerElement () {\n return this.props.outerElementType || this.props.outerTagName || 'div'\n }\n\n get innerElement () {\n return this.props.innerElementType || this.props.innerTagName || 'div'\n }\n\n get itemElement () {\n return this.props.itemElementType || this.props.itemTagName || 'div'\n }\n\n get field () {\n return this.wrapperField\n }\n\n set field (o: Record<string, number>) {\n Object.assign(this.wrapperField, o)\n // Object.keys(o).forEach(key => {\n // if (typeof o[key] === 'number' && typeof this.wrapperField[key] === 'number') {\n // this.wrapperField[key] = o[key]\n // }\n // })\n }\n\n get enhanced () {\n return this.props.enhanced || true\n }\n\n isShaking (diff?: number) {\n if (process.env.TARO_PLATFORM === 'web' || this.props.enhanced) return false\n const list = this.diffList.slice(-3)\n this.diffList.push(diff)\n return list.findIndex(e => Math.abs(e) === Math.abs(diff)) !== -1 || isCosDistributing(this.diffList.slice(-4))\n }\n\n resetCache () {\n this.itemList.refreshCounter++\n }\n\n getItemStyleCache = memoizeOne((\n itemIndex?: number,\n itemSize?: IProps['itemSize'] | false,\n _flag = this.itemList.refreshCounter\n ) => {\n itemSize = itemSize || this.itemList.getSize(itemIndex)\n const style: CSS.Properties<string | number> = this.isRelative ? {} : {\n position: 'absolute',\n }\n const offset = convertNumber2PX(this.itemList.getOffsetSizeCache(itemIndex))\n const size = convertNumber2PX(this.itemList.getSize(itemIndex))\n const isHorizontal = this.isHorizontal\n const isRtl = this.isRtl\n style.height = !isHorizontal ? size : '100%'\n style.width = isHorizontal ? size : '100%'\n if (!this.isRelative) {\n const offsetHorizontal = isHorizontal ? offset : 0\n style.top = !isHorizontal ? offset : 0\n if (isRtl) {\n style.right = offsetHorizontal\n } else {\n style.left = offsetHorizontal\n }\n }\n\n return style\n })\n\n getItemStyle (index: number) {\n const {\n shouldResetStyleCacheOnItemSizeChange\n } = this.props\n\n return this.getItemStyleCache(\n index,\n shouldResetStyleCacheOnItemSizeChange ? this.itemList.getSize(index) : false,\n )\n }\n\n boundaryDetection () {\n if ([typeof this.props.onScrollToUpper, typeof this.props.onScrollToLower].every(e => e !== 'function')) return\n\n createSelectorQuery().select(`#${this.id}`).node().exec(() => {\n const upperObserver = this.boundaryDetectionHelper({\n event: typeof this.props.onScrollToUpper === 'function' ? () => {\n if (this.field.diffOffset >= 0) this.props.onScrollToUpper()\n } : undefined,\n id: `${this.id}-${this.isHorizontal ? this.isRtl ? 'right' : 'left' : 'top'}`,\n })\n if (upperObserver) {\n this._observer.top = upperObserver\n }\n\n const lowerObserver = this.boundaryDetectionHelper({\n event: typeof this.props.onScrollToLower === 'function' ? () => {\n if (this.field.diffOffset <= 0) this.props.onScrollToLower()\n } : undefined,\n id: `${this.id}-${this.isHorizontal ? this.isRtl ? 'left' : 'right' : 'bottom'}`,\n })\n if (lowerObserver) {\n this._observer.bottom = lowerObserver\n }\n })\n }\n\n boundaryDetectionHelper ({\n component,\n event,\n id,\n }: {\n component?: TaroGeneral.IAnyObject\n event?: () => void\n id: string\n }) {\n if (typeof event !== 'function') return\n const eventFunc = throttle(event)\n\n component ||= getCurrentInstance().page\n const observer = createIntersectionObserver(component, {\n thresholds: [0.4],\n })\n\n observer\n .relativeTo(`#${this.id}`, {\n top: typeof this.props.lowerThreshold === 'number' ? this.props.lowerThreshold : 50,\n bottom: typeof this.props.upperThreshold === 'number' ? this.props.upperThreshold : 50,\n })\n .observe(`#${id}`, eventFunc)\n\n return observer\n }\n\n dispose () {\n Object.values(this._observer).forEach(e => e.disconnect?.())\n this._observer = {}\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { VirtualListProps } from
|
|
2
|
+
import type { VirtualListProps } from '../';
|
|
3
3
|
declare const VirtualList: React.ForwardRefExoticComponent<Omit<VirtualListProps<any>, "ref"> & React.RefAttributes<unknown>>;
|
|
4
|
-
export
|
|
4
|
+
export default VirtualList;
|
|
@@ -5,7 +5,7 @@ import List from './list.js';
|
|
|
5
5
|
import outerWrapper from './wrapper.js';
|
|
6
6
|
|
|
7
7
|
const VirtualList = React.forwardRef(function VirtualList(props, ref) {
|
|
8
|
-
const _a = props, { direction = 'ltr', outerElementType = ScrollView, innerElementType = View, itemElementType = View, initialScrollOffset = 0, overscanCount = 1 } = _a, rest = __rest(_a, ["direction", "outerElementType", "innerElementType", "itemElementType", "initialScrollOffset", "overscanCount"]);
|
|
8
|
+
const _a = props, { direction = 'ltr', outerElementType = ScrollView, innerElementType = View, itemElementType = View, initialScrollOffset = 0, overscanCount = 1, queryPrefix = '' } = _a, rest = __rest(_a, ["direction", "outerElementType", "innerElementType", "itemElementType", "initialScrollOffset", "overscanCount", "queryPrefix"]);
|
|
9
9
|
if ('children' in rest) {
|
|
10
10
|
console.warn('Taro(VirtualList): children props have been deprecated. ' + 'Please use the item props instead.');
|
|
11
11
|
rest.item = rest.children;
|
|
@@ -20,6 +20,7 @@ const VirtualList = React.forwardRef(function VirtualList(props, ref) {
|
|
|
20
20
|
direction,
|
|
21
21
|
initialScrollOffset,
|
|
22
22
|
overscanCount,
|
|
23
|
+
queryPrefix,
|
|
23
24
|
outerWrapper }));
|
|
24
25
|
});
|
|
25
26
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/virtual-list/react/index.ts"],"sourcesContent":["import { ScrollView, View } from '@tarojs/components'\nimport React from 'react'\n\nimport List from './list'\nimport outerWrapper from './wrapper'\n\nimport type { VirtualListProps } from '../'\nimport type { IProps } from '../preset'\n\nconst VirtualList = React.forwardRef(function VirtualList (props: VirtualListProps, ref) {\n const {\n direction = 'ltr',\n outerElementType = ScrollView,\n innerElementType = View,\n itemElementType = View,\n initialScrollOffset = 0,\n overscanCount = 1,\n ...rest\n } = props as IProps\n\n if ('children' in rest) {\n console.warn('Taro(VirtualList): children props have been deprecated. ' + 'Please use the item props instead.')\n rest.item = rest.children as IProps['item']\n }\n if (rest.item instanceof Array) {\n console.warn('Taro(VirtualList): item should not be an array')\n rest.item = rest.item[0]\n }\n return React.createElement(List, {\n ref,\n ...rest,\n outerElementType,\n itemElementType,\n innerElementType,\n direction,\n initialScrollOffset,\n overscanCount,\n outerWrapper,\n })\n})\n\nexport default VirtualList\n"],"names":[],"mappings":";;;;;;AASM,MAAA,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,WAAW,CAAE,KAAuB,EAAE,GAAG,EAAA;AACrF,IAAA,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/virtual-list/react/index.ts"],"sourcesContent":["import { ScrollView, View } from '@tarojs/components'\nimport React from 'react'\n\nimport List from './list'\nimport outerWrapper from './wrapper'\n\nimport type { VirtualListProps } from '../'\nimport type { IProps } from '../preset'\n\nconst VirtualList = React.forwardRef(function VirtualList (props: VirtualListProps, ref) {\n const {\n direction = 'ltr',\n outerElementType = ScrollView,\n innerElementType = View,\n itemElementType = View,\n initialScrollOffset = 0,\n overscanCount = 1,\n queryPrefix = '',\n ...rest\n } = props as IProps\n\n if ('children' in rest) {\n console.warn('Taro(VirtualList): children props have been deprecated. ' + 'Please use the item props instead.')\n rest.item = rest.children as IProps['item']\n }\n if (rest.item instanceof Array) {\n console.warn('Taro(VirtualList): item should not be an array')\n rest.item = rest.item[0]\n }\n return React.createElement(List, {\n ref,\n ...rest,\n outerElementType,\n itemElementType,\n innerElementType,\n direction,\n initialScrollOffset,\n overscanCount,\n queryPrefix,\n outerWrapper,\n })\n})\n\nexport default VirtualList\n"],"names":[],"mappings":";;;;;;AASM,MAAA,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,WAAW,CAAE,KAAuB,EAAE,GAAG,EAAA;AACrF,IAAA,MAAM,KASF,KAAe,EATb,EACJ,SAAS,GAAG,KAAK,EACjB,gBAAgB,GAAG,UAAU,EAC7B,gBAAgB,GAAG,IAAI,EACvB,eAAe,GAAG,IAAI,EACtB,mBAAmB,GAAG,CAAC,EACvB,aAAa,GAAG,CAAC,EACjB,WAAW,GAAG,EAAE,EAEC,GAAA,EAAA,EADd,IAAI,GARH,MAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,eAAA,EAAA,aAAA,CASL,CAAkB,CAAA;AAEnB,IAAA,IAAI,UAAU,IAAI,IAAI,EAAE;AACtB,QAAA,OAAO,CAAC,IAAI,CAAC,0DAA0D,GAAG,oCAAoC,CAAC,CAAA;AAC/G,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAA0B,CAAA;KAC5C;AACD,IAAA,IAAI,IAAI,CAAC,IAAI,YAAY,KAAK,EAAE;AAC9B,QAAA,OAAO,CAAC,IAAI,CAAC,gDAAgD,CAAC,CAAA;QAC9D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACzB;IACD,OAAO,KAAK,CAAC,aAAa,CAAC,IAAI,gCAC7B,GAAG,EAAA,EACA,IAAI,CAAA,EAAA,EACP,gBAAgB;QAChB,eAAe;QACf,gBAAgB;QAChB,SAAS;QACT,mBAAmB;QACnB,aAAa;QACb,WAAW;AACX,QAAA,YAAY,IACZ,CAAA;AACJ,CAAC;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import ListSet from
|
|
3
|
-
import Preset from
|
|
4
|
-
import { IProps } from
|
|
5
|
-
interface IState {
|
|
2
|
+
import ListSet from '../list-set';
|
|
3
|
+
import Preset from '../preset';
|
|
4
|
+
import type { IProps } from '../preset';
|
|
5
|
+
export interface IState {
|
|
6
6
|
instance: List;
|
|
7
7
|
isScrolling: boolean;
|
|
8
8
|
scrollDirection: 'forward' | 'backward';
|
|
@@ -10,7 +10,7 @@ interface IState {
|
|
|
10
10
|
scrollUpdateWasRequested: boolean;
|
|
11
11
|
refreshCount: number;
|
|
12
12
|
}
|
|
13
|
-
|
|
13
|
+
export default class List extends React.PureComponent<IProps, IState> {
|
|
14
14
|
static defaultProps: IProps;
|
|
15
15
|
static getDerivedStateFromProps(nextProps: IProps, prevState: IState): any;
|
|
16
16
|
itemList: ListSet;
|
|
@@ -23,10 +23,6 @@ declare class List extends React.PureComponent<IProps, IState> {
|
|
|
23
23
|
_callOnScroll: import("memoize-one").MemoizedFn<(this: any, scrollDirection: any, scrollOffset: any, scrollUpdateWasRequested: any, detail: any) => void>;
|
|
24
24
|
_callPropsCallbacks(prevProps?: any, prevState?: any): void;
|
|
25
25
|
_getSizeUploadSync: (index: number, isHorizontal: boolean) => Promise<unknown>;
|
|
26
|
-
// Lazily create and cache item styles while scrolling,
|
|
27
|
-
// So that pure component sCU will prevent re-renders.
|
|
28
|
-
// We maintain this cache, and pass a style prop rather than index,
|
|
29
|
-
// So that List can clear cached styles and force item re-render if necessary.
|
|
30
26
|
_getRangeToRender(): number[];
|
|
31
27
|
_onScrollHorizontal: (event: any) => void;
|
|
32
28
|
_onScrollVertical: (event: any) => void;
|
|
@@ -42,4 +38,3 @@ declare class List extends React.PureComponent<IProps, IState> {
|
|
|
42
38
|
getRenderColumnNode(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
43
39
|
render(): React.ReactElement<{}, string | React.JSXElementConstructor<any>>;
|
|
44
40
|
}
|
|
45
|
-
export { IState, List as default };
|
|
@@ -47,7 +47,7 @@ class List extends React.PureComponent {
|
|
|
47
47
|
return new Promise((resolve) => {
|
|
48
48
|
if (index >= 0 && index < this.props.itemCount) {
|
|
49
49
|
const times = this.itemList.compareSize(index) ? 3 : 0;
|
|
50
|
-
getRectSizeSync(
|
|
50
|
+
getRectSizeSync(`${this.props.queryPrefix}#${this.preset.id}-${index}`, 100, times).then(({ width, height }) => {
|
|
51
51
|
const size = isHorizontal ? width : height;
|
|
52
52
|
if (typeof size === 'number' && size > 0 && !this.itemList.compareSize(index, size)) {
|
|
53
53
|
this.itemList.setSize(index, size);
|
|
@@ -229,7 +229,7 @@ class List extends React.PureComponent {
|
|
|
229
229
|
else {
|
|
230
230
|
option.top = scrollOffset;
|
|
231
231
|
}
|
|
232
|
-
return getScrollViewContextNode(
|
|
232
|
+
return getScrollViewContextNode(`${this.props.queryPrefix}#${this.preset.id}`).then((node) => node.scrollTo(option));
|
|
233
233
|
}
|
|
234
234
|
this.setState((prevState) => {
|
|
235
235
|
if (prevState.scrollOffset === scrollOffset) {
|