@tarojs/components-advanced 3.6.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+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.

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

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

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

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

@@ -0,0 +1 @@
+export var IS_SCROLLING_DEBOUNCE_INTERVAL = 200;

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

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

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

@@ -0,0 +1,38 @@
+// 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.
+
+var cachedRTLResult = null;
+export function getRTLOffsetType() {
+  var recalculate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement('div');
+    var outerStyle = outerDiv.style;
+    outerStyle.width = '50px';
+    outerStyle.height = '50px';
+    outerStyle.overflow = 'scroll';
+    outerStyle.direction = 'rtl';
+    var innerDiv = document.createElement('div');
+    var 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;
+}

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

@@ -0,0 +1,189 @@
+import type { BaseEventOrig, BaseEventOrigFunction, ScrollViewProps, StandardProps } from '@tarojs/components';
+import type { 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;
+    /** 顶部区域 */
+    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, VirtualListProps };
+export default VirtualList;

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

@@ -0,0 +1,103 @@
+/** 虚拟列表
+ * @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
+ */
+
+var VirtualList = process.env.FRAMEWORK === 'vue' || process.env.FRAMEWORK === 'vue3' ? require('./vue').default : require('./react').default;
+export { VirtualList };
+export default VirtualList;

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

@@ -0,0 +1,27 @@
+import type { IProps } from './preset';
+declare type TProps = Pick<IProps, 'width' | 'height' | 'unlimitedSize' | 'itemCount' | 'itemData' | 'itemSize' | 'overscanCount' | 'direction' | 'layout'>;
+export default 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 {};

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

@@ -0,0 +1,227 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { isFunction } from '@tarojs/shared';
+import { isHorizontalFunc } from './utils';
+var ListSet = /*#__PURE__*/function () {
+  function ListSet(props, refresh) {
+    _classCallCheck(this, ListSet);
+    this.props = props;
+    this.refresh = refresh;
+    _defineProperty(this, "list", []);
+    _defineProperty(this, "mode", void 0);
+    _defineProperty(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);
+    }
+  }
+  _createClass(ListSet, [{
+    key: "isNormalMode",
+    get: function get() {
+      return this.mode === 'normal';
+    }
+  }, {
+    key: "isFunctionMode",
+    get: function get() {
+      return this.mode === 'function';
+    }
+  }, {
+    key: "isUnlimitedMode",
+    get: function get() {
+      return this.mode === 'unlimited';
+    }
+  }, {
+    key: "length",
+    get: function get() {
+      return this.props.itemCount || 100;
+    }
+  }, {
+    key: "overscan",
+    get: function get() {
+      return this.props.overscanCount || 0;
+    }
+  }, {
+    key: "wrapperSize",
+    get: function get() {
+      var _this$props = this.props,
+        height = _this$props.height,
+        width = _this$props.width;
+      var isHorizontal = isHorizontalFunc(this.props);
+      var size = isHorizontal ? width : height;
+      if (process.env.NODE_ENV !== 'production' && typeof size !== 'number') {
+        console.warn("In mode ".concat(isHorizontal ? 'horizontal, width' : 'vertical, height', " parameter should be a number, but got ").concat(_typeof(size), "."));
+      }
+      return size;
+    }
+  }, {
+    key: "update",
+    value: function update(props) {
+      this.props = props;
+      if (this.length > this.list.length) {
+        var _this$list;
+        var arr = new Array(this.length - this.list.length).fill(-1);
+        (_this$list = this.list).push.apply(_this$list, _toConsumableArray(arr));
+      } else if (this.length < this.list.length) {
+        this.list.length = this.length;
+      }
+    }
+  }, {
+    key: "setSize",
+    value: function setSize() {
+      var _this$refresh;
+      var i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.defaultSize;
+      this.list[i] = size;
+      (_this$refresh = this.refresh) === null || _this$refresh === void 0 ? void 0 : _this$refresh.call(this);
+    }
+  }, {
+    key: "getSize",
+    value: function getSize() {
+      var i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var size = this.props.itemSize;
+      var item = this.list[i];
+      if (item >= 0) return item;
+      if (this.isFunctionMode && isFunction(size)) {
+        var itemSize = size(i, this.props.itemData);
+        this.setSize(i, itemSize);
+        return itemSize;
+      }
+      return this.defaultSize;
+    }
+  }, {
+    key: "getOffsetSize",
+    value: function getOffsetSize() {
+      var _this = this;
+      var i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.list.length;
+      if (this.isNormalMode) return i * this.defaultSize;
+      return this.list.slice(0, i).reduce(function (sum, _, idx) {
+        return sum + _this.getSize(idx);
+      }, 0);
+    }
+  }, {
+    key: "getSizeCount",
+    value: function getSizeCount() {
+      var _this2 = this;
+      var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      if (offset === 0) {
+        return 0;
+      }
+      // if (this.isNormalMode) {
+      //   return Math.min(this.length - 1, Math.floor(offset / this.length))
+      // }
+      var offsetSize = 0;
+      var count = this.list.reduce(function (sum, _, idx) {
+        if (offsetSize < offset) {
+          offsetSize += _this2.getSize(idx);
+          return ++sum;
+        }
+        return sum;
+      }, 0);
+      return count - 1;
+    }
+  }, {
+    key: "getStartIndex",
+    value: function getStartIndex() {
+      var scrollOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      return Math.max(0, this.getSizeCount(scrollOffset) - 1);
+    }
+  }, {
+    key: "getStopIndex",
+    value: function getStopIndex() {
+      var wrapperSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var scrollOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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)));
+    }
+  }, {
+    key: "getRangeToRender",
+    value: function getRangeToRender(direction) {
+      var scrollOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var block = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      if (this.length === 0) {
+        return [0, 0, 0, 0];
+      }
+      var wrapperSize = this.wrapperSize;
+      var startIndex = this.getStartIndex(scrollOffset);
+      var 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.
+      var overscanBackward = !block || direction === 'backward' ? Math.max(1, this.overscan) : 1;
+      var 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];
+    }
+  }, {
+    key: "getOffsetForIndexAndAlignment",
+    value: function getOffsetForIndexAndAlignment(index, align, scrollOffset) {
+      var wrapperSize = this.wrapperSize;
+      var itemSize = this.getSize(index);
+      var lastItemOffset = Math.max(0, this.getOffsetSize(this.props.itemCount) - wrapperSize);
+      var maxOffset = Math.min(lastItemOffset, this.getOffsetSize(index));
+      var 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.
+            var 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;
+          }
+      }
+    }
+  }, {
+    key: "compareSize",
+    value: function compareSize() {
+      var i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      if (this.isNormalMode) return true;
+      return this.getSize(i) === size;
+    }
+  }]);
+  return ListSet;
+}();
+export { ListSet as default };

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

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import ListSet from './list-set';
+import { defaultItemKey } from './utils';
+import type { VirtualListProps } from './';
+export interface IProps extends Partial<VirtualListProps> {
+    children?: VirtualListProps['item'];
+    direction?: 'ltr' | 'rtl' | 'horizontal' | 'vertical';
+    itemKey?: typeof defaultItemKey;
+    itemTagName?: string;
+    innerTagName?: string;
+    outerTagName?: string;
+    itemElementType?: React.ComponentType | string;
+    outerElementType?: React.ComponentType | string;
+    innerRef?: React.Ref<HTMLElement> | string;
+    outerRef?: React.Ref<HTMLElement> | string;
+    onItemsRendered?: TFunc;
+    shouldResetStyleCacheOnItemSizeChange?: boolean;
+}
+export default class Preset {
+    protected props: IProps;
+    protected refresh?: TFunc;
+    itemList: ListSet;
+    constructor(props: IProps, refresh?: TFunc);
+    wrapperField: {
+        scrollLeft: number;
+        scrollTop: number;
+        scrollHeight: number;
+        scrollWidth: number;
+        clientHeight: number;
+        clientWidth: number;
+        diffOffset: number;
+    };
+    diffList: number[];
+    init(props: IProps): void;
+    update(props: IProps): void;
+    get id(): string;
+    get isHorizontal(): boolean;
+    get isRtl(): boolean;
+    get isRelative(): boolean;
+    get placeholderCount(): number;
+    get outerTagName(): string | import("react").ComponentType<{}>;
+    get innerTagName(): string | import("react").ComponentType<{}>;
+    get itemTagName(): string | import("react").ComponentType<{}>;
+    get field(): Record<string, number>;
+    set field(o: Record<string, number>);
+    isShaking(diff?: number): boolean;
+    getItemStyleCache: import("memoize-one").MemoizedFn<(_itemSize?: IProps['itemSize'] | false, _layout?: IProps['layout'] | false, _direction?: IProps['direction'] | false) => {}>;
+    getItemStyle(index: number): any;
+}