@tarojs/components-advanced 3.6.0-beta.0

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

@@ -0,0 +1,489 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["className", "direction", "height", "innerRef", "item", "itemCount", "itemData", "itemKey", "layout", "style", "useIsScrolling", "width", "renderTop", "renderBottom"];
+import memoizeOne from 'memoize-one';
+import React from 'react';
+import { IS_PREACT } from '../../../utils/constants';
+import { convertNumber2PX } from '../../../utils/convert';
+import { omit } from '../../../utils/lodash';
+import { cancelTimeout, requestTimeout } from '../../../utils/timer';
+import { IS_SCROLLING_DEBOUNCE_INTERVAL } from '../constants';
+import { getRTLOffsetType } from '../dom-helpers';
+import Preset from '../preset';
+import { defaultItemKey, getRectSize } from '../utils';
+import { validateListProps } from './validate';
+var List = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(List, _React$PureComponent);
+  var _super = _createSuper(List);
+  function List(props) {
+    var _this;
+    _classCallCheck(this, List);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "shouldComponentUpdate", IS_PREACT ? function (_nextProps, nextState) {
+      if (_this.state.refreshCount !== nextState.refreshCount) {
+        return true;
+      }
+    } : undefined);
+    _defineProperty(_assertThisInitialized(_this), "itemList", void 0);
+    _defineProperty(_assertThisInitialized(_this), "preset", void 0);
+    _defineProperty(_assertThisInitialized(_this), "refresh", function () {
+      return _this.setState(function (_ref) {
+        var refreshCount = _ref.refreshCount;
+        return {
+          refreshCount: ++refreshCount
+        };
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_outerRef", undefined);
+    _defineProperty(_assertThisInitialized(_this), "_resetIsScrollingTimeoutId", null);
+    _defineProperty(_assertThisInitialized(_this), "field", {
+      scrollLeft: 0,
+      scrollTop: 0,
+      scrollHeight: 0,
+      scrollWidth: 0,
+      clientHeight: 0,
+      clientWidth: 0,
+      diffOffset: 0
+    });
+    _defineProperty(_assertThisInitialized(_this), "_callOnItemsRendered", memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+      return _this.props.onItemsRendered({
+        overscanStartIndex: overscanStartIndex,
+        overscanStopIndex: overscanStopIndex,
+        visibleStartIndex: visibleStartIndex,
+        visibleStopIndex: visibleStopIndex
+      });
+    }));
+    _defineProperty(_assertThisInitialized(_this), "_callOnScroll", memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested, detail) {
+      return _this.props.onScroll({
+        scrollDirection: scrollDirection,
+        scrollOffset: scrollOffset,
+        scrollUpdateWasRequested: scrollUpdateWasRequested,
+        detail: detail
+      });
+    }));
+    _defineProperty(_assertThisInitialized(_this), "_getSizeUploadSync", function (index, isHorizontal) {
+      var ID = "#".concat(_this.state.id, "-").concat(index);
+      return new Promise(function (resolve) {
+        var success = function success(_ref2) {
+          var width = _ref2.width,
+            height = _ref2.height;
+          var size = isHorizontal ? width : height;
+          if (!_this.itemList.compareSize(index, size)) {
+            _this.itemList.setSize(index, size);
+            resolve(_this.itemList.getSize(index));
+          }
+        };
+        var fail = function fail() {
+          var _this$_getRangeToRend = _this._getRangeToRender(),
+            _this$_getRangeToRend2 = _slicedToArray(_this$_getRangeToRend, 2),
+            startIndex = _this$_getRangeToRend2[0],
+            stopIndex = _this$_getRangeToRend2[1];
+          if (index >= startIndex && index <= stopIndex) {
+            setTimeout(function () {
+              getRectSize(ID, success, fail);
+            }, 100);
+          }
+        };
+        getRectSize(ID, success, fail);
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onScrollHorizontal", function (event) {
+      var _event$currentTarget = event.currentTarget,
+        clientWidth = _event$currentTarget.clientWidth,
+        scrollTop = _event$currentTarget.scrollTop,
+        scrollLeft = _event$currentTarget.scrollLeft,
+        scrollHeight = _event$currentTarget.scrollHeight,
+        scrollWidth = _event$currentTarget.scrollWidth;
+      _this.field.scrollHeight = scrollHeight;
+      _this.field.scrollWidth = _this.itemList.getOffsetSize();
+      _this.field.scrollTop = scrollTop;
+      _this.field.scrollLeft = scrollLeft;
+      _this.field.clientHeight = scrollHeight;
+      _this.field.clientWidth = clientWidth;
+      _this.setState(function (prevState) {
+        var diffOffset = _this.field.scrollLeft - scrollLeft;
+        if (prevState.scrollOffset === scrollLeft || _this.field.diffOffset === -diffOffset) {
+          // Scroll position may have been updated by cDM/cDU,
+          // In which case we don't need to trigger another render,
+          // And we don't want to update state.isScrolling.
+          return null;
+        }
+        var scrollOffset = scrollLeft;
+        if (_this.preset.isRtl) {
+          // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              scrollOffset = -scrollLeft;
+              break;
+            case 'positive-descending':
+              scrollOffset = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
+        scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
+        _this.field.scrollWidth = scrollOffset;
+        return {
+          isScrolling: true,
+          scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: false
+        };
+      }, _this._resetIsScrollingDebounced);
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onScrollVertical", function (event) {
+      var _event$currentTarget2 = event.currentTarget,
+        clientHeight = _event$currentTarget2.clientHeight,
+        scrollHeight = _event$currentTarget2.scrollHeight,
+        scrollWidth = _event$currentTarget2.scrollWidth,
+        scrollTop = _event$currentTarget2.scrollTop,
+        scrollLeft = _event$currentTarget2.scrollLeft;
+      _this.setState(function (prevState) {
+        var diffOffset = _this.field.scrollTop - scrollTop;
+        if (prevState.scrollOffset === scrollTop || _this.field.diffOffset === -diffOffset) {
+          // Scroll position may have been updated by cDM/cDU,
+          // In which case we don't need to trigger another render,
+          // And we don't want to update state.isScrolling.
+          return null;
+        }
+        // FIXME preact 中使用时，该组件会出现触底滚动事件重复触发导致的抖动问题，后续修复
+        // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+        var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+        _this.field.scrollHeight = _this.itemList.getOffsetSize();
+        _this.field.scrollWidth = scrollWidth;
+        _this.field.scrollTop = scrollOffset;
+        _this.field.scrollLeft = scrollLeft;
+        _this.field.clientHeight = clientHeight;
+        _this.field.clientWidth = scrollWidth;
+        _this.field.diffOffset = diffOffset;
+        return {
+          isScrolling: true,
+          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: false
+        };
+      }, _this._resetIsScrollingDebounced);
+    });
+    _defineProperty(_assertThisInitialized(_this), "_outerRefSetter", function (ref) {
+      var outerRef = _this.props.outerRef;
+      _this._outerRef = ref;
+      if (typeof outerRef === 'function') {
+        outerRef(ref);
+      } else if (outerRef != null && _typeof(outerRef) === 'object' && outerRef.hasOwnProperty('current')) {
+        // @ts-ignore
+        outerRef.current = ref;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_resetIsScrollingDebounced", function () {
+      if (_this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(_this._resetIsScrollingTimeoutId);
+      }
+      _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+    });
+    _defineProperty(_assertThisInitialized(_this), "_resetIsScrolling", function () {
+      _this._resetIsScrollingTimeoutId = null;
+      _this.setState({
+        isScrolling: false
+      }, function () {
+        // Clear style cache after state update has been committed.
+        // This way we don't break pure sCU for items that don't use isScrolling param.
+        _this.preset.getItemStyleCache(-1, null);
+      });
+    });
+    _this.preset = new Preset(props, _this.refresh);
+    _this.itemList = _this.preset.itemList;
+    _this.state = {
+      id: _this.props.id || _this.preset.id,
+      instance: _assertThisInitialized(_this),
+      isScrolling: false,
+      scrollDirection: 'forward',
+      scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
+      scrollUpdateWasRequested: false,
+      refreshCount: 0
+    };
+    return _this;
+  }
+
+  // FIXME Warning: Cannot update during an existing state transition (such as within `render`).
+  _createClass(List, [{
+    key: "_callPropsCallbacks",
+    value: function _callPropsCallbacks() {
+      var _this2 = this;
+      var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var prevState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (typeof this.props.onItemsRendered === 'function') {
+        if (this.props.itemCount > 0) {
+          if (prevProps && prevProps.itemCount !== this.props.itemCount) {
+            var _this$_getRangeToRend3 = this._getRangeToRender(),
+              _this$_getRangeToRend4 = _slicedToArray(_this$_getRangeToRend3, 4),
+              overscanStartIndex = _this$_getRangeToRend4[0],
+              overscanStopIndex = _this$_getRangeToRend4[1],
+              visibleStartIndex = _this$_getRangeToRend4[2],
+              visibleStopIndex = _this$_getRangeToRend4[3];
+            this._callOnItemsRendered(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex);
+          }
+        }
+      }
+      if (typeof this.props.onScroll === 'function') {
+        if (!prevState || prevState.scrollDirection !== this.state.scrollDirection || prevState.scrollOffset !== this.state.scrollOffset || prevState.scrollUpdateWasRequested !== this.state.scrollUpdateWasRequested) {
+          this._callOnScroll(this.state.scrollDirection, this.state.scrollOffset, this.state.scrollUpdateWasRequested, this.field);
+        }
+      }
+      setTimeout(function () {
+        var _this2$_getRangeToRen = _this2._getRangeToRender(),
+          _this2$_getRangeToRen2 = _slicedToArray(_this2$_getRangeToRen, 2),
+          startIndex = _this2$_getRangeToRen2[0],
+          stopIndex = _this2$_getRangeToRen2[1];
+        var isHorizontal = _this2.preset.isHorizontal;
+        for (var index = startIndex; index <= stopIndex; index++) {
+          _this2._getSizeUploadSync(index, isHorizontal);
+        }
+      }, 0);
+    }
+  }, {
+    key: "_getRangeToRender",
+    value:
+    // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+    function _getRangeToRender() {
+      return this.itemList.getRangeToRender(this.state.scrollDirection, this.state.scrollOffset, this.state.isScrolling);
+    }
+  }, {
+    key: "scrollTo",
+    value: function scrollTo(scrollOffset) {
+      scrollOffset = Math.max(0, scrollOffset);
+      this.setState(function (prevState) {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+        return {
+          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+          scrollOffset: scrollOffset,
+          scrollUpdateWasRequested: true
+        };
+      }, this._resetIsScrollingDebounced);
+    }
+  }, {
+    key: "scrollToItem",
+    value: function scrollToItem(index) {
+      var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
+      var itemCount = this.props.itemCount;
+      var scrollOffset = this.state.scrollOffset;
+      index = Math.max(0, Math.min(index, itemCount - 1));
+      this.scrollTo(this.itemList.getOffsetForIndexAndAlignment(index, align, scrollOffset));
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var initialScrollOffset = this.props.initialScrollOffset;
+      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
+        var outerRef = this._outerRef;
+        if (this.preset.isHorizontal) {
+          outerRef.scrollLeft = initialScrollOffset;
+        } else {
+          outerRef.scrollTop = initialScrollOffset;
+        }
+      }
+      this._callPropsCallbacks();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$state = this.state,
+        scrollOffset = _this$state.scrollOffset,
+        scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
+      this.preset.update(this.props);
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        var outerRef = this._outerRef;
+        if (this.preset.isHorizontal) {
+          if (this.preset.isRtl) {
+            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+            // So we need to determine which browser behavior we're dealing with, and mimic it.
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+              case 'positive-ascending':
+                outerRef.scrollLeft = scrollOffset;
+                break;
+              default:
+                outerRef.scrollLeft = outerRef.scrollWidth - outerRef.clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
+        } else {
+          outerRef.scrollTop = scrollOffset;
+        }
+      }
+      this._callPropsCallbacks(prevProps, prevState);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _omit = omit(this.props, ['innerElementType', 'innerTagName', 'itemElementType', 'itemTagName', 'outerElementType', 'outerTagName', 'position']),
+        className = _omit.className,
+        direction = _omit.direction,
+        height = _omit.height,
+        innerRef = _omit.innerRef,
+        item = _omit.item,
+        itemCount = _omit.itemCount,
+        itemData = _omit.itemData,
+        _omit$itemKey = _omit.itemKey,
+        itemKey = _omit$itemKey === void 0 ? defaultItemKey : _omit$itemKey,
+        layout = _omit.layout,
+        style = _omit.style,
+        useIsScrolling = _omit.useIsScrolling,
+        width = _omit.width,
+        renderTop = _omit.renderTop,
+        renderBottom = _omit.renderBottom,
+        rest = _objectWithoutProperties(_omit, _excluded);
+      var _this$state2 = this.state,
+        id = _this$state2.id,
+        isScrolling = _this$state2.isScrolling,
+        scrollOffset = _this$state2.scrollOffset,
+        scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+      var isHorizontal = this.preset.isHorizontal;
+      var placeholderCount = this.preset.placeholderCount;
+      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
+      var _this$_getRangeToRend5 = this._getRangeToRender(),
+        _this$_getRangeToRend6 = _slicedToArray(_this$_getRangeToRend5, 2),
+        startIndex = _this$_getRangeToRend6[0],
+        stopIndex = _this$_getRangeToRend6[1];
+      var items = [];
+      if (itemCount > 0) {
+        var prevPlaceholder = startIndex < placeholderCount ? startIndex : placeholderCount;
+        items.push(new Array(prevPlaceholder).fill(-1).map(function (_, index) {
+          return React.createElement(_this3.preset.itemTagName, {
+            key: itemKey(index + startIndex - prevPlaceholder, itemData),
+            style: {
+              display: 'none'
+            }
+          });
+        }));
+        for (var index = startIndex; index <= stopIndex; index++) {
+          var _style = this.preset.getItemStyle(index);
+          items.push(React.createElement(this.preset.itemTagName, {
+            key: itemKey(index, itemData),
+            style: _style
+          }, React.createElement(item, {
+            id: "".concat(id, "-").concat(index),
+            data: itemData,
+            index: index,
+            isScrolling: useIsScrolling ? isScrolling : undefined
+          })));
+        }
+        var restCount = itemCount - stopIndex;
+        var postPlaceholder = restCount < placeholderCount ? restCount : placeholderCount;
+        items.push(new Array(postPlaceholder).fill(-1).map(function (_, index) {
+          return React.createElement(_this3.preset.itemTagName, {
+            key: itemKey(1 + index + stopIndex, itemData),
+            style: {
+              display: 'none'
+            }
+          });
+        }));
+      }
+
+      // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+      var estimatedTotalSize = convertNumber2PX(this.itemList.getOffsetSize());
+      var outerElementProps = _objectSpread(_objectSpread({}, rest), {}, {
+        id: id,
+        className: className,
+        onScroll: onScroll,
+        ref: this._outerRefSetter,
+        layout: layout,
+        style: _objectSpread({
+          position: 'relative',
+          height: convertNumber2PX(height),
+          width: convertNumber2PX(width),
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      });
+      if (isHorizontal) {
+        outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.field.scrollLeft;
+      } else {
+        outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.field.scrollTop;
+      }
+      if (this.preset.isRelative) {
+        var pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
+        return React.createElement(this.preset.outerTagName, outerElementProps, renderTop, React.createElement(this.preset.itemTagName, {
+          key: "".concat(id, "-pre"),
+          id: "".concat(id, "-pre"),
+          style: {
+            height: isHorizontal ? '100%' : pre,
+            width: !isHorizontal ? '100%' : pre
+          }
+        }), React.createElement(this.preset.innerTagName, {
+          ref: innerRef,
+          key: "".concat(id, "-inner"),
+          id: "".concat(id, "-inner"),
+          style: {
+            pointerEvents: isScrolling ? 'none' : 'auto',
+            position: 'relative'
+          }
+        }, items), renderBottom);
+      } else {
+        return React.createElement(this.preset.outerTagName, outerElementProps, renderTop, React.createElement(this.preset.innerTagName, {
+          ref: innerRef,
+          key: "".concat(id, "-inner"),
+          id: "".concat(id, "-inner"),
+          style: {
+            height: isHorizontal ? '100%' : estimatedTotalSize,
+            pointerEvents: isScrolling ? 'none' : 'auto',
+            position: 'relative',
+            width: !isHorizontal ? '100%' : estimatedTotalSize
+          }
+        }, items), renderBottom);
+      }
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      return validateListProps(nextProps, prevState);
+    }
+
+    // Note: preact 不会在未使用的 state 更新后主动更新，需新增判断
+  }]);
+  return List;
+}(React.PureComponent); // NOTE: I considered further wrapping individual items with a pure ListItem component.
+// This would avoid ever calling the render function for the same index more than once,
+// But it would also add the overhead of a lot of components/fibers.
+// I assume people already do this (render function returning a class component),
+// So my doing it would just unnecessarily double the wrappers.
+_defineProperty(List, "defaultProps", {
+  direction: 'ltr',
+  itemData: undefined,
+  layout: 'vertical',
+  overscanCount: 2,
+  useIsScrolling: false,
+  shouldResetStyleCacheOnItemSizeChange: true
+});
+export { List as default };

package/dist/components/virtual-list/react/validate.d.ts

@@ -0,0 +1,3 @@
+import type { IProps } from '../preset';
+import type { IState } from './list';
+export declare const validateListProps: ({ item, direction, height, layout, itemTagName, innerTagName, outerTagName, width, itemSize }: IProps, { instance, }: IState) => any;

package/dist/components/virtual-list/react/validate.js

@@ -0,0 +1,70 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import { IS_PROD } from '../../../utils/constants';
+var devWarningsDirection = null;
+var devWarningsTagName = null;
+if (!IS_PROD) {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsDirection = /* #__PURE__ */
+    new WeakSet();
+    devWarningsTagName = /* #__PURE__ */
+    new WeakSet();
+  }
+}
+export var validateListProps = function validateListProps(_ref, _ref2) {
+  var item = _ref.item,
+    direction = _ref.direction,
+    height = _ref.height,
+    layout = _ref.layout,
+    itemTagName = _ref.itemTagName,
+    innerTagName = _ref.innerTagName,
+    outerTagName = _ref.outerTagName,
+    width = _ref.width,
+    itemSize = _ref.itemSize;
+  var instance = _ref2.instance;
+  if (!IS_PROD) {
+    if (!['number', 'function'].includes(_typeof(itemSize))) {
+      throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number or function. ' + "\"".concat(itemSize === null ? 'null' : _typeof(itemSize), "\" was specified."));
+    }
+  }
+  if (!IS_PROD) {
+    if (innerTagName != null || outerTagName != null || itemTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn('The itemTagName、innerTagName and outerTagName props have been deprecated. ' + 'Please use the itemElementType、innerElementType and outerElementType props instead.');
+      }
+    }
+    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    switch (direction) {
+      case 'horizontal':
+      case 'vertical':
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
+        }
+        break;
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + "\"".concat(direction, "\" was specified."));
+    }
+    switch (layout) {
+      case 'horizontal':
+      case 'vertical':
+        // Valid values
+        break;
+      default:
+        throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + "\"".concat(layout, "\" was specified."));
+    }
+    if (item == null) {
+      throw Error('An invalid "item" prop has been specified. ' + 'Value should be a React component. ' + "\"".concat(item === null ? 'null' : _typeof(item), "\" was specified."));
+    }
+    if (isHorizontal && typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + "\"".concat(width === null ? 'null' : _typeof(width), "\" was specified."));
+    } else if (!isHorizontal && typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + "\"".concat(height === null ? 'null' : _typeof(height), "\" was specified."));
+    }
+  }
+  return null;
+};

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

@@ -0,0 +1,12 @@
+export declare const defaultItemKey: (index: number, _itemData?: unknown) => number;
+interface IHorizontal {
+    direction?: string;
+    layout?: string;
+}
+export declare function isHorizontalFunc({ direction, layout }: IHorizontal): boolean;
+interface IRrl {
+    direction?: string;
+}
+export declare function isRtlFunc({ direction }: IRrl): boolean;
+export declare function getRectSize(id: string, success?: TFunc, fail?: TFunc, retryMs?: number): void;
+export {};

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

@@ -0,0 +1,33 @@
+import Taro, { createSelectorQuery as _createSelectorQuery } from '@tarojs/taro';
+
+// In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+export var defaultItemKey = function defaultItemKey(index, _itemData) {
+  return index;
+};
+export function isHorizontalFunc(_ref) {
+  var direction = _ref.direction,
+    layout = _ref.layout;
+  return direction === 'horizontal' || layout === 'horizontal';
+}
+export function isRtlFunc(_ref2) {
+  var direction = _ref2.direction;
+  return direction === 'rtl';
+}
+export function getRectSize(id, success, fail) {
+  var retryMs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 500;
+  var query = _createSelectorQuery();
+  try {
+    query.select(id).boundingClientRect(function (res) {
+      if (res) {
+        success === null || success === void 0 ? void 0 : success(res);
+      } else {
+        fail === null || fail === void 0 ? void 0 : fail();
+      }
+    }).exec();
+  } catch (err) {
+    setTimeout(function () {
+      getRectSize(id, success, fail, retryMs);
+    }, retryMs);
+  }
+}

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

@@ -0,0 +1,17 @@
+import type { ElementAttrs, TransformReact2VueType } from '@tarojs/components/types/index.vue3';
+import type { App } from 'vue';
+import type { VirtualListProps } from '../';
+export declare type VueVirtualListProps = Omit<VirtualListProps, 'renderTop' | 'renderBottom'>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'virtual-list': ElementAttrs<TransformReact2VueType<VueVirtualListProps>>;
+        }
+    }
+}
+export declare const VirtualList: DefineComponent<TransformReact2VueType<P>>;
+declare function install(Vue: App): void;
+declare const _default: {
+    install: typeof install;
+};
+export default _default;

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

@@ -0,0 +1,8 @@
+import List from './list';
+export var VirtualList = List;
+function install(Vue) {
+  Vue.component('virtual-list', VirtualList);
+}
+export default {
+  install: install
+};