@tarojs/components-advanced 3.6.0-canary.9 → 3.6.1-alpha.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 
+Copyright (c) 2018 O2Team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,121 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+========================================================================
+
+MIT (react-devtools):
+The following files embed [react-devtools](https://github.com/facebook/react) MIT:
+`/packages/taro-plugin-react-devtools/src/backend/index.js`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (vue-devtools):
+The following files embed [vue-devtools](https://github.com/vuejs/devtools) MIT:
+`/packages/taro-plugin-vue-devtools/src/backend/*`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (vite):
+The following files embed [vite](https://github.com/vitejs/vite) MIT:
+`/packages/taro-webpack5-prebundle/src/prebundle/scanImport.ts`,
+`/packages/taro-webpack5-prebundle/src/prebundle/bundle.ts`,
+`/packages/taro-webpack5-prebundle/src/h5.ts`,
+`/packages/taro-webpack5-prebundle/src/min.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (webpack):
+The following files embed [webpack](https://github.com/webpack/webpack) MIT:
+`/packages/taro-webpack5-prebundle/src/webpack/TaroContainerEntryModule.ts`,
+`/packages/taro-webpack5-prebundle/src/webpack/TaroContainerPlugin.ts`,
+`/packages/taro-webpack5-prebundle/src/webpack/TaroContainerReferencePlugin.ts`,
+`/packages/taro-webpack5-prebundle/src/webpack/TaroModuleFederationPlugin.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (sizzle):
+The following files embed [sizzle](https://github.com/jquery/sizzle) MIT:
+`/packages/taro-extends/src/jquery/sizzle.js`
+See `/LICENSE.txt` for details of the license.
+
+==================
+
+MIT (zepto):
+The following files embed [zepto](https://github.com/madrobby/zepto) MIT:
+`/packages/taro-extends/src/jquery/zepto.js`,
+`/packages/taro-extends/src/jquery/event.js`
+See `/MIT-LICENSE` for details of the license.
+
+==================
+
+MIT (css-to-react-native):
+The following files embed [css-to-react-native](https://github.com/styled-components/css-to-react-native) MIT:
+`/packages/css-to-react-native/src/css-to-react-native/*`
+See `/LICENSE.md` for details of the license.
+
+==================
+
+MIT (reactify-wc):
+The following files embed [reactify-wc](https://github.com/BBKolton/reactify-wc) MIT:
+`/packages/taro-components-library-react/src/component-lib/reactify-wc.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (ant-design-mobile-rn):
+The following files embed [ant-design-mobile-rn](https://github.com/ant-design/ant-design-mobile-rn) MIT:
+`/packages/taro-components-rn/src/components/Swiper/carousel.tsx`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (react-wx-images-viewer):
+The following files embed [react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer) MIT:
+`/packages/taro-h5/src/api/media/image/previewImage.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (webpack-contrib/css-loader):
+The following files embed [webpack-contrib/css-loader](https://github.com/webpack-contrib/css-loader) MIT:
+`/packages/taro-rn-style-transformer/src/utils/index.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (react-native):
+The following files embed [react-native](https://github.com/facebook/react-native) MIT:
+`/packages/taro-rn-style-transformer/src/transforms/StyleSheet/*`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (myrne/performance-now):
+The following files embed [myrne/performance-now](https://github.com/myrne/performance-now) MIT:
+`/packages/taro-runtime/src/bom/raf.ts`
+See `/LICENSE` for details of the license.
+
+==================
+
+Apache (chameleon-api):
+The following files embed [chameleon-api](https://github.com/chameleon-team/chameleon-api) Apache:
+`/packages/taro-h5/src/api/device/clipboard.ts`
+
+==================
+
+MIT (uni-app):
+The following files embed [uni-app](https://github.com/dcloudio/uni-app) MIT:
+`/packages/taro-components-rn/src/components/Video/index.tsx`
+See `/LICENSE` for details of the license.
+
+==================
+
+MIT (miniprogram-render):
+The following files embed [miniprogram-render](https://github.com/Tencent/kbone) MIT:
+`/packages/taro-plugin-http/src/runtime/Cookie.ts`
+See `/LICENSE` for details of the license.

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./virtual-list/index";

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export { VirtualList } from './virtual-list/index.js';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/virtual-list/constants.d.ts

@@ -0,0 +1,2 @@
+declare const IS_SCROLLING_DEBOUNCE_INTERVAL = 200;
+export { IS_SCROLLING_DEBOUNCE_INTERVAL };

package/dist/components/virtual-list/constants.js

@@ -0,0 +1,4 @@
+const IS_SCROLLING_DEBOUNCE_INTERVAL = 200;
+
+export { IS_SCROLLING_DEBOUNCE_INTERVAL };
+//# sourceMappingURL=constants.js.map

package/dist/components/virtual-list/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/components/virtual-list/constants.ts"],"sourcesContent":["export const IS_SCROLLING_DEBOUNCE_INTERVAL = 200\n"],"names":[],"mappings":"AAAO,MAAM,8BAA8B,GAAG;;;;"}

package/dist/components/virtual-list/dom-helpers.d.ts

@@ -0,0 +1,2 @@
+declare function getRTLOffsetType(recalculate?: boolean): any;
+export { getRTLOffsetType };

package/dist/components/virtual-list/dom-helpers.js

@@ -0,0 +1,41 @@
+// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+let cachedRTLResult = null;
+function getRTLOffsetType(recalculate = false) {
+    if (cachedRTLResult === null || recalculate) {
+        const outerDiv = document.createElement('div');
+        const outerStyle = outerDiv.style;
+        outerStyle.width = '50px';
+        outerStyle.height = '50px';
+        outerStyle.overflow = 'scroll';
+        outerStyle.direction = 'rtl';
+        const innerDiv = document.createElement('div');
+        const innerStyle = innerDiv.style;
+        innerStyle.width = '100px';
+        innerStyle.height = '100px';
+        outerDiv.appendChild(innerDiv);
+        document.body.appendChild(outerDiv);
+        if (outerDiv.scrollLeft > 0) {
+            cachedRTLResult = 'positive-descending';
+        }
+        else {
+            outerDiv.scrollLeft = 1;
+            if (outerDiv.scrollLeft === 0) {
+                cachedRTLResult = 'negative';
+            }
+            else {
+                cachedRTLResult = 'positive-ascending';
+            }
+        }
+        document.body.removeChild(outerDiv);
+        return cachedRTLResult;
+    }
+    return cachedRTLResult;
+}
+
+export { getRTLOffsetType };
+//# sourceMappingURL=dom-helpers.js.map

package/dist/components/virtual-list/dom-helpers.js.map

@@ -0,0 +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;AACxC,SAAA;AAAM,aAAA;AACL,YAAA,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAA;AAEvB,YAAA,IAAI,QAAQ,CAAC,UAAU,KAAK,CAAC,EAAE;gBAC7B,eAAe,GAAG,UAAU,CAAA;AAC7B,aAAA;AAAM,iBAAA;gBACL,eAAe,GAAG,oBAAoB,CAAA;AACvC,aAAA;AACF,SAAA;AAED,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;AACnC,QAAA,OAAO,eAAe,CAAA;AACvB,KAAA;AAED,IAAA,OAAO,eAAe,CAAA;AACxB;;;;"}

package/dist/components/virtual-list/index.d.ts

@@ -0,0 +1,193 @@
+import { BaseEventOrig, BaseEventOrigFunction, ScrollViewProps, StandardProps } from '@tarojs/components';
+import { Component, ComponentType, CSSProperties, ReactNode } from 'react';
+interface VirtualListProps extends Omit<StandardProps, 'children'> {
+    /** 列表的高度。 */
+    height: string | number;
+    /** 列表的宽度。 */
+    width: string | number;
+    /** 子组件 */
+    item: ComponentType<{
+        /** 组件 ID */
+        id: string;
+        /** 单项的样式，样式必须传入组件的 style 中 */
+        style?: CSSProperties;
+        /** 组件渲染的数据 */
+        data: any;
+        /** 组件渲染数据的索引 */
+        index: number;
+        /** 组件是否正在滚动，当 useIsScrolling 值为 true 时返回布尔值，否则返回 undefined */
+        isScrolling?: boolean;
+    }>;
+    /** 列表的长度 */
+    itemCount: number;
+    /** 渲染数据 */
+    itemData: any[];
+    /** 列表单项的大小，垂直滚动时为高度，水平滚动时为宽度。
+     *
+     * > Note:
+     * >  - unlimitedSize 模式下如果传入函数，只会调用一次用于设置初始值
+     * >  - 非 unlimitedSize 模式下如果传入函数，为避免性能问题，每个节点只会调用一次用于设置初始值
+     */
+    itemSize: number | ((index?: number, itemData?: any[]) => number);
+    /** 解开高度列表单项大小限制，默认值使用: itemSize (请注意，初始高度与实际高度差异过大会导致隐患)。
+     *
+     * > Note: 通过 itemSize 设置的初始高度与子节点实际高度差异过大会导致隐患
+     * @default false
+     */
+    unlimitedSize?: boolean;
+    /** 布局方式
+     * @default "absolute"
+     */
+    position?: 'absolute' | 'relative';
+    /** 初始滚动偏移值，水平滚动影响 scrollLeft，垂直滚动影响 scrollTop。 */
+    initialScrollOffset?: number;
+    /** 列表内部容器组件类型。
+     * @default View
+     */
+    innerElementType?: ComponentType;
+    /** 通过 ScrollViewContext 优化组件滚动性能
+     * @default false
+     * @note 部分平台不支持，使用时请注意甄别
+     */
+    enhanced?: boolean;
+    /** 顶部区域 */
+    renderTop?: ReactNode;
+    /** 底部区域 */
+    renderBottom?: ReactNode;
+    /** 滚动方向。vertical 为垂直滚动，horizontal 为平行滚动。
+     * @default "vertical"
+     */
+    layout?: 'vertical' | 'horizontal';
+    /** 列表滚动时调用函数 */
+    onScroll?: (event: VirtualListProps.IVirtualListEvent<VirtualListProps.IVirtualListEventDetail>) => void;
+    /** 调用平台原生的滚动监听函数。 */
+    onScrollNative?: BaseEventOrigFunction<ScrollViewProps.onScrollDetail>;
+    /** 在可视区域之外渲染的列表单项数量，值设置得越高，快速滚动时出现白屏的概率就越小，相应地，每次滚动的性能会变得越差。 */
+    overscanCount?: number;
+    /** 上下滚动预占位节点 */
+    placeholderCount?: number;
+    /** 是否注入 isScrolling 属性到 item 组件。这个参数一般用于实现滚动骨架屏（或其它 placeholder） 时比较有用。 */
+    useIsScrolling?: boolean;
+    style?: CSSProperties;
+}
+declare namespace VirtualListProps {
+    interface IVirtualListEventDetail extends ScrollViewProps.onScrollDetail {
+        scrollLeft: number;
+        scrollTop: number;
+        scrollHeight: number;
+        scrollWidth: number;
+    }
+    interface IVirtualListEvent<T extends ScrollViewProps.onScrollDetail = ScrollViewProps.onScrollDetail> extends BaseEventOrig {
+        /** 滚动方向，可能值为 forward 往前， backward 往后。 */
+        scrollDirection: 'forward' | 'backward';
+        /** 滚动距离 */
+        scrollOffset: number;
+        /** 当滚动是由 scrollTo() 或 scrollToItem() 调用时返回 true，否则返回 false */
+        scrollUpdateWasRequested: boolean;
+        /** 当前只有 React 支持 */
+        detail: T;
+    }
+}
+/** 虚拟列表
+ * @classification viewContainer
+ * @supported weapp, swan, alipay, tt, qq, jd, h5
+ * @example_react
+ * ```tsx
+ * import VirtualList from `@tarojs/components/virtual-list`
+ *
+ * function buildData (offset = 0) {
+ *   return Array(100).fill(0).map((_, i) => i + offset);
+ * }
+ *
+ * const Row = React.memo(({ id, index, style, data }) => {
+ *   return (
+ *     <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
+ *       Row {index}
+ *     </View>
+ *   );
+ * })
+ *
+ * export default class Index extends Component {
+ *   state = {
+ *     data: buildData(0),
+ *   }
+ *
+ *   render() {
+ *     const { data } = this.state
+ *     const dataLen = data.length
+ *     return (
+ *       <VirtualList
+ *         height={500} // 列表的高度
+ *         width='100%' // 列表的宽度
+ *         item={Row} // 列表单项组件，这里只能传入一个组件
+ *         itemData={data} // 渲染列表的数据
+ *         itemCount={dataLen} // 渲染列表的长度
+ *         itemSize={100} // 列表单项的高度
+ *       />
+ *     );
+ *   }
+ * }
+ * ```
+ * @example_vue
+ * ```js
+ * // app.js 入口文件
+ * import Vue from 'vue'
+ * import VirtualList from '@tarojs/components/virtual-list'
+ *
+ * Vue.use(VirtualList)
+ * ```
+ * ```js
+ * <! –– row.vue 单项组件 ––>
+ * <template>
+ *   <view
+ *     :class="index % 2 ? 'ListItemOdd' : 'ListItemEven'"
+ *     :style="css"
+ *   >
+ *     Row {{ index }} : {{ data[index] }}
+ *   </view>
+ * </template>
+ *
+ * <script>
+ * export default {
+ *   props: ['index', 'data', 'css']
+ * }
+ * </script>
+ * ```
+ * ```js
+ * <! –– page.vue 页面组件 ––>
+ * <template>
+ *   <virtual-list
+ *     wclass="List"
+ *     :height="500"
+ *     :item-data="list"
+ *     :item-count="list.length"
+ *     :item-size="100"
+ *     :item="Row"
+ *     width="100%"
+ *   />
+ * </template>
+ *
+ * <script>
+ * import Row from './row.vue'
+ * import { markRaw } from 'vue'
+ *
+ * function buildData (offset = 0) {
+ *   return Array(100).fill(0).map((_, i) => i + offset)
+ * }
+ *
+ * export default {
+ *   data() {
+ *     return {
+ *       Row: markRaw(Row),
+ *       list: buildData(0)
+ *     }
+ *   },
+ * }
+ * </script>
+ * ```
+ * @see https://taro-docs.jd.com/docs/virtual-list
+ */
+declare class VirtualListComponent extends Component<VirtualListProps> {
+}
+declare const VirtualList: typeof VirtualListComponent;
+export { VirtualList as default, VirtualList, VirtualListProps };

package/dist/components/virtual-list/index.js

@@ -0,0 +1,6 @@
+const VirtualList = (process.env.FRAMEWORK === 'vue' || process.env.FRAMEWORK === 'vue3')
+    ? require('./vue').default
+    : require('./react').default;
+
+export { VirtualList, VirtualList as default };
+//# sourceMappingURL=index.js.map

package/dist/components/virtual-list/index.js.map

@@ -0,0 +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 extends Omit<StandardProps, 'children'> {\n  /** 列表的高度。 */\n  height: string | number\n  /** 列表的宽度。 */\n  width: string | number\n  /** 子组件 */\n  item: ComponentType<{\n    /** 组件 ID */\n    id: string\n    /** 单项的样式，样式必须传入组件的 style 中 */\n    style?: CSSProperties\n    /** 组件渲染的数据 */\n    data: any\n    /** 组件渲染数据的索引 */\n    index: number\n    /** 组件是否正在滚动，当 useIsScrolling 值为 true 时返回布尔值，否则返回 undefined */\n    isScrolling?: boolean\n  }>\n  /** 列表的长度 */\n  itemCount: number\n  /** 渲染数据 */\n  itemData: any[]\n  /** 列表单项的大小，垂直滚动时为高度，水平滚动时为宽度。\n   *\n   * > Note:\n   * >  - unlimitedSize 模式下如果传入函数，只会调用一次用于设置初始值\n   * >  - 非 unlimitedSize 模式下如果传入函数，为避免性能问题，每个节点只会调用一次用于设置初始值\n   */\n  itemSize: number | ((index?: number, itemData?: any[]) => number)\n  /** 解开高度列表单项大小限制，默认值使用: itemSize (请注意，初始高度与实际高度差异过大会导致隐患)。\n   *\n   * > Note: 通过 itemSize 设置的初始高度与子节点实际高度差异过大会导致隐患\n   * @default false\n   */\n  unlimitedSize?: boolean\n  /** 布局方式\n   * @default \"absolute\"\n   */\n  position?: 'absolute' | 'relative'\n  /** 初始滚动偏移值，水平滚动影响 scrollLeft，垂直滚动影响 scrollTop。 */\n  initialScrollOffset?: number\n  /** 列表内部容器组件类型。\n   * @default View\n   */\n  innerElementType?: ComponentType\n  /** 通过 ScrollViewContext 优化组件滚动性能\n   * @default false\n   * @note 部分平台不支持，使用时请注意甄别\n   */\n  enhanced?: boolean\n  /** 顶部区域 */\n  renderTop?: ReactNode\n  /** 底部区域 */\n  renderBottom?: ReactNode\n  /** 滚动方向。vertical 为垂直滚动，horizontal 为平行滚动。\n   * @default \"vertical\"\n   */\n  layout?: 'vertical' | 'horizontal'\n  /** 列表滚动时调用函数 */\n  onScroll?: (event: VirtualListProps.IVirtualListEvent<VirtualListProps.IVirtualListEventDetail>) => void\n  /** 调用平台原生的滚动监听函数。 */\n  onScrollNative?: BaseEventOrigFunction<ScrollViewProps.onScrollDetail>\n  /** 在可视区域之外渲染的列表单项数量，值设置得越高，快速滚动时出现白屏的概率就越小，相应地，每次滚动的性能会变得越差。 */\n  overscanCount?: number\n  /** 上下滚动预占位节点 */\n  placeholderCount?: number\n  /** 是否注入 isScrolling 属性到 item 组件。这个参数一般用于实现滚动骨架屏（或其它 placeholder） 时比较有用。 */\n  useIsScrolling?: boolean\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  }\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    /** 当前只有 React 支持 */\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, style, data }) => {\n *   return (\n *     <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>\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 *     :style=\"css\"\n *   >\n *     Row {{ index }} : {{ data[index] }}\n *   </view>\n * </template>\n *\n * <script>\n * export default {\n *   props: ['index', 'data', 'css']\n * }\n * </script>\n * ```\n * ```js\n * <! –– page.vue 页面组件 ––>\n * <template>\n *   <virtual-list\n *     wclass=\"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\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":"AAmMA,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;;;;"}

package/dist/components/virtual-list/list-set.d.ts

@@ -0,0 +1,27 @@
+import { IProps } from "./preset";
+type TProps = Pick<IProps, 'width' | 'height' | 'unlimitedSize' | 'itemCount' | 'itemData' | 'itemSize' | 'overscanCount' | 'direction' | 'layout'>;
+declare class ListSet {
+    protected props: TProps;
+    protected refresh?: TFunc;
+    list: number[];
+    mode?: 'normal' | 'function' | 'unlimited';
+    defaultSize: number;
+    constructor(props: TProps, refresh?: TFunc);
+    get isNormalMode(): boolean;
+    get isFunctionMode(): boolean;
+    get isUnlimitedMode(): boolean;
+    get length(): number;
+    get overscan(): number;
+    get wrapperSize(): number;
+    update(props: TProps): void;
+    setSize(i?: number, size?: number): void;
+    getSize(i?: number): number;
+    getOffsetSize(i?: number): number;
+    getSizeCount(offset?: number): number;
+    getStartIndex(scrollOffset?: number): number;
+    getStopIndex(wrapperSize?: number, scrollOffset?: number, startIndex?: number): number;
+    getRangeToRender(direction: 'forward' | 'backward', scrollOffset?: number, block?: boolean): number[];
+    getOffsetForIndexAndAlignment(index: number, align: string, scrollOffset: number): number;
+    compareSize(i?: number, size?: number): boolean;
+}
+export { ListSet as default };

package/dist/components/virtual-list/list-set.js

@@ -0,0 +1,183 @@
+import { isFunction } from '@tarojs/shared';
+import { isHorizontalFunc } from './utils.js';
+
+class ListSet {
+    constructor(props, refresh) {
+        this.props = props;
+        this.refresh = refresh;
+        this.list = [];
+        this.defaultSize = 1;
+        this.update(props);
+        // Note: 不考虑列表模式切换情况，可能会导致列表抖动体验过差
+        if (this.props.unlimitedSize) {
+            this.mode = 'unlimited';
+        }
+        else if (isFunction(this.props.itemSize)) {
+            this.mode = 'function';
+        }
+        else {
+            this.mode = 'normal';
+        }
+        this.defaultSize = (isFunction(this.props.itemSize) ? this.props.itemSize() : this.props.itemSize) || 1;
+        if (!this.isNormalMode) {
+            this.list = new Array(this.length).fill(-1);
+        }
+    }
+    get isNormalMode() {
+        return this.mode === 'normal';
+    }
+    get isFunctionMode() {
+        return this.mode === 'function';
+    }
+    get isUnlimitedMode() {
+        return this.mode === 'unlimited';
+    }
+    get length() {
+        return this.props.itemCount || 100;
+    }
+    get overscan() {
+        return this.props.overscanCount || 0;
+    }
+    get wrapperSize() {
+        const { height, width } = this.props;
+        const isHorizontal = isHorizontalFunc(this.props);
+        const size = (isHorizontal ? width : height);
+        if (process.env.NODE_ENV !== 'production' && typeof size !== 'number') {
+            console.warn(`In mode ${isHorizontal ? 'horizontal, width' : 'vertical, height'} parameter should be a number, but got ${typeof size}.`);
+        }
+        return size;
+    }
+    update(props) {
+        this.props = props;
+        if (this.length > this.list.length) {
+            const arr = new Array(this.length - this.list.length).fill(-1);
+            this.list.push(...arr);
+        }
+        else if (this.length < this.list.length) {
+            this.list.length = this.length;
+        }
+    }
+    setSize(i = 0, size = this.defaultSize) {
+        var _a;
+        this.list[i] = size;
+        (_a = this.refresh) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    getSize(i = 0) {
+        const size = this.props.itemSize;
+        const item = this.list[i];
+        if (item >= 0)
+            return item;
+        if (this.isFunctionMode && isFunction(size)) {
+            const itemSize = size(i, this.props.itemData);
+            this.setSize(i, itemSize);
+            return itemSize;
+        }
+        return this.defaultSize;
+    }
+    getOffsetSize(i = this.list.length) {
+        if (this.isNormalMode)
+            return i * this.defaultSize;
+        return this.list.slice(0, i).reduce((sum, _, idx) => sum + this.getSize(idx), 0);
+    }
+    getSizeCount(offset = 0) {
+        if (offset === 0) {
+            return 0;
+        }
+        // if (this.isNormalMode) {
+        //   return Math.min(this.length - 1, Math.floor(offset / this.length))
+        // }
+        let offsetSize = 0;
+        const count = this.list.reduce((sum, _, idx) => {
+            if (offsetSize < offset) {
+                offsetSize += this.getSize(idx);
+                return ++sum;
+            }
+            return sum;
+        }, 0);
+        return count - 1;
+    }
+    getStartIndex(scrollOffset = 0) {
+        return Math.max(0, this.getSizeCount(scrollOffset) - 1);
+    }
+    getStopIndex(wrapperSize = 0, scrollOffset = 0, startIndex = 0) {
+        // const visibleOffset = this.getOffsetSize(startIndex)
+        // if (this.isNormalMode) {
+        //   const numVisibleItems = Math.ceil((wrapperSize + scrollOffset - visibleOffset) / this.length)
+        //   /** -1 is because stop index is inclusive */
+        //   return Math.max(startIndex, Math.min(this.length - 1, startIndex + numVisibleItems - 1))
+        // }
+        return Math.max(startIndex, Math.min(this.length - 1, this.getSizeCount(wrapperSize + scrollOffset)));
+    }
+    getRangeToRender(direction, scrollOffset = 0, block = false) {
+        if (this.length === 0) {
+            return [0, 0, 0, 0];
+        }
+        const wrapperSize = this.wrapperSize;
+        const startIndex = this.getStartIndex(scrollOffset);
+        const stopIndex = this.getStopIndex(wrapperSize, scrollOffset, startIndex);
+        // 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.
+        const overscanBackward = !block || direction === 'backward' ? Math.max(1, this.overscan) : 1;
+        const overscanForward = !block || direction === 'forward' ? Math.max(1, this.overscan) : 1;
+        return [
+            Math.max(0, startIndex - overscanBackward),
+            Math.max(0, Math.min(this.length - 1, stopIndex + overscanForward)),
+            startIndex,
+            stopIndex
+        ];
+    }
+    getOffsetForIndexAndAlignment(index, align, scrollOffset) {
+        const wrapperSize = this.wrapperSize;
+        const itemSize = this.getSize(index);
+        const lastItemOffset = Math.max(0, this.getOffsetSize(this.props.itemCount) - wrapperSize);
+        const maxOffset = Math.min(lastItemOffset, this.getOffsetSize(index));
+        const minOffset = Math.max(0, this.getOffsetSize(index) - wrapperSize + itemSize);
+        if (align === 'smart') {
+            if (scrollOffset >= minOffset - wrapperSize && scrollOffset <= maxOffset + wrapperSize) {
+                align = 'auto';
+            }
+            else {
+                align = 'center';
+            }
+        }
+        switch (align) {
+            case 'start':
+                return maxOffset;
+            case 'end':
+                return minOffset;
+            case 'center':
+                {
+                    // "Centered" offset is usually the average of the min and max.
+                    // But near the edges of the list, this doesn't hold true.
+                    const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+                    if (middleOffset < Math.ceil(wrapperSize / 2)) {
+                        return 0; // near the beginning
+                    }
+                    else if (middleOffset > lastItemOffset + Math.floor(wrapperSize / 2)) {
+                        return lastItemOffset; // near the end
+                    }
+                    else {
+                        return middleOffset;
+                    }
+                }
+            case 'auto':
+            default:
+                if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+                    return scrollOffset;
+                }
+                else if (scrollOffset < minOffset) {
+                    return minOffset;
+                }
+                else {
+                    return maxOffset;
+                }
+        }
+    }
+    compareSize(i = 0, size = 0) {
+        if (this.isNormalMode)
+            return true;
+        return this.getSize(i) === size;
+    }
+}
+
+export { ListSet as default };
+//# sourceMappingURL=list-set.js.map