@tarojs/components-advanced 3.6.0-beta.2 → 3.6.0-beta.4

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

@@ -1,481 +1,378 @@
-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 { __rest } from 'tslib';
 import memoizeOne from 'memoize-one';
 import React from 'react';
-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), "itemList", void 0);
-    _defineProperty(_assertThisInitialized(_this), "preset", void 0);
-    _defineProperty(_assertThisInitialized(_this), "refresh", function () {
-      if (process.env.FRAMEWORK === 'preact') {
-        _this.forceUpdate();
-      } else {
-        _this.setState(function (_ref) {
-          var refreshCount = _ref.refreshCount;
-          return {
-            refreshCount: ++refreshCount
-          };
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "_outerRef", undefined);
-    _defineProperty(_assertThisInitialized(_this), "_resetIsScrollingTimeoutId", null);
-    _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));
-          }
+import { convertNumber2PX } from '../../../utils/convert.js';
+import { omit } from '../../../utils/lodash.js';
+import { cancelTimeout, requestTimeout } from '../../../utils/timer.js';
+import { IS_SCROLLING_DEBOUNCE_INTERVAL } from '../constants.js';
+import { getRTLOffsetType } from '../dom-helpers.js';
+import Preset from '../preset.js';
+import { getRectSize, defaultItemKey } from '../utils.js';
+import { validateListProps } from './validate.js';
+
+class List extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        // FIXME Warning: Cannot update during an existing state transition (such as within `render`).
+        this.refresh = () => {
+            if (process.env.FRAMEWORK === 'preact') {
+                this.forceUpdate();
+            }
+            else {
+                this.setState(({ refreshCount }) => ({
+                    refreshCount: ++refreshCount
+                }));
+            }
         };
-        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);
-          }
+        this._outerRef = undefined;
+        this._resetIsScrollingTimeoutId = null;
+        this._callOnItemsRendered = memoizeOne((overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) => this.props.onItemsRendered({
+            overscanStartIndex,
+            overscanStopIndex,
+            visibleStartIndex,
+            visibleStopIndex
+        }));
+        // FIXME 优化事件信息
+        this._callOnScroll = memoizeOne((scrollDirection, scrollOffset, scrollUpdateWasRequested, detail) => this.props.onScroll({
+            scrollDirection,
+            scrollOffset,
+            scrollUpdateWasRequested,
+            detail
+        }));
+        this._getSizeUploadSync = (index, isHorizontal) => {
+            const ID = `#${this.state.id}-${index}`;
+            return new Promise((resolve) => {
+                const success = ({ width, height }) => {
+                    const size = isHorizontal ? width : height;
+                    if (!this.itemList.compareSize(index, size)) {
+                        this.itemList.setSize(index, size);
+                        resolve(this.itemList.getSize(index));
+                    }
+                };
+                const fail = () => {
+                    const [startIndex, stopIndex] = this._getRangeToRender();
+                    if (index >= startIndex && index <= stopIndex) {
+                        setTimeout(() => {
+                            getRectSize(ID, success, fail);
+                        }, 100);
+                    }
+                };
+                getRectSize(ID, success, fail);
+            });
         };
-        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.preset.field = {
-        scrollHeight: scrollHeight,
-        scrollWidth: _this.itemList.getOffsetSize(),
-        scrollTop: scrollTop,
-        scrollLeft: scrollLeft,
-        clientHeight: scrollHeight,
-        clientWidth: scrollWidth
-      };
-      _this.setState(function (prevState) {
-        var diffOffset = _this.preset.field.scrollLeft - scrollLeft;
-        if (prevState.scrollOffset === scrollLeft || _this.preset.isShaking(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.
-
-        _this.preset.field = {
-          scrollWidth: scrollOffset
+        this._onScrollHorizontal = event => {
+            const { clientWidth, scrollTop, scrollLeft, scrollHeight, scrollWidth } = event.currentTarget;
+            this.preset.field = {
+                scrollHeight: scrollHeight,
+                scrollWidth: this.itemList.getOffsetSize(),
+                scrollTop: scrollTop,
+                scrollLeft: scrollLeft,
+                clientHeight: scrollHeight,
+                clientWidth: scrollWidth
+            };
+            this.setState((prevState) => {
+                const diffOffset = this.preset.field.scrollLeft - scrollLeft;
+                if (prevState.scrollOffset === scrollLeft || this.preset.isShaking(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;
+                }
+                let 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.
+                this.preset.field = {
+                    scrollWidth: scrollOffset,
+                };
+                return {
+                    isScrolling: true,
+                    scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+                    scrollOffset,
+                    scrollUpdateWasRequested: false
+                };
+            }, this._resetIsScrollingDebounced);
         };
-        return {
-          isScrolling: true,
-          scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
-          scrollOffset: scrollOffset,
-          scrollUpdateWasRequested: false
+        this._onScrollVertical = event => {
+            const { clientHeight, scrollHeight, scrollWidth, scrollTop, scrollLeft } = event.currentTarget;
+            this.setState((prevState) => {
+                const diffOffset = this.preset.field.scrollTop - scrollTop;
+                if (prevState.scrollOffset === scrollTop || this.preset.isShaking(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.
+                const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+                this.preset.field = {
+                    scrollHeight: this.itemList.getOffsetSize(),
+                    scrollWidth: scrollWidth,
+                    scrollTop: scrollOffset,
+                    scrollLeft: scrollLeft,
+                    clientHeight: clientHeight,
+                    clientWidth: scrollWidth,
+                    diffOffset: this.preset.field.scrollTop - scrollOffset,
+                };
+                return {
+                    isScrolling: true,
+                    scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
+                    scrollOffset,
+                    scrollUpdateWasRequested: false
+                };
+            }, this._resetIsScrollingDebounced);
         };
-      }, _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.preset.field.scrollTop - scrollTop;
-        if (prevState.scrollOffset === scrollTop || _this.preset.isShaking(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.preset.field = {
-          scrollHeight: _this.itemList.getOffsetSize(),
-          scrollWidth: scrollWidth,
-          scrollTop: scrollOffset,
-          scrollLeft: scrollLeft,
-          clientHeight: clientHeight,
-          clientWidth: scrollWidth,
-          diffOffset: _this.preset.field.scrollTop - scrollOffset
+        this._outerRefSetter = ref => {
+            const { outerRef } = this.props;
+            this._outerRef = ref;
+            if (typeof outerRef === 'function') {
+                outerRef(ref);
+            }
+            else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+                // @ts-ignore
+                outerRef.current = ref;
+            }
         };
-        return {
-          isScrolling: true,
-          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
-          scrollOffset: scrollOffset,
-          scrollUpdateWasRequested: false
+        this._resetIsScrollingDebounced = () => {
+            if (this._resetIsScrollingTimeoutId !== null) {
+                cancelTimeout(this._resetIsScrollingTimeoutId);
+            }
+            this._resetIsScrollingTimeoutId = requestTimeout(this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
         };
-      }, _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.preset.field);
+        this._resetIsScrolling = () => {
+            this._resetIsScrollingTimeoutId = null;
+            this.setState({
+                isScrolling: false
+            }, () => {
+                // 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: this,
+            isScrolling: false,
+            scrollDirection: 'forward',
+            scrollOffset: typeof this.props.initialScrollOffset === 'number'
+                ? this.props.initialScrollOffset
+                : 0,
+            scrollUpdateWasRequested: false,
+            refreshCount: 0
+        };
+    }
+    static getDerivedStateFromProps(nextProps, prevState) {
+        return validateListProps(nextProps, prevState);
+    }
+    _callPropsCallbacks(prevProps = {}, prevState = {}) {
+        if (typeof this.props.onItemsRendered === 'function') {
+            if (this.props.itemCount > 0) {
+                if (prevProps && prevProps.itemCount !== this.props.itemCount) {
+                    const [overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex] = this._getRangeToRender();
+                    this._callOnItemsRendered(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex);
+                }
+            }
         }
-      }
-      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);
+        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.preset.field);
+            }
         }
-      }, 0);
+        setTimeout(() => {
+            const [startIndex, stopIndex] = this._getRangeToRender();
+            const isHorizontal = this.preset.isHorizontal;
+            for (let index = startIndex; index <= stopIndex; index++) {
+                this._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);
+    _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);
+    scrollTo(scrollOffset) {
+        scrollOffset = Math.max(0, scrollOffset);
+        this.setState((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));
+    scrollToItem(index, align = 'auto') {
+        const { itemCount } = this.props;
+        const { scrollOffset } = this.state;
+        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;
+    componentDidMount() {
+        const { initialScrollOffset } = this.props;
+        if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
+            const outerRef = this._outerRef;
+            if (this.preset.isHorizontal) {
+                outerRef.scrollLeft = initialScrollOffset;
+            }
+            else {
+                outerRef.scrollTop = initialScrollOffset;
+            }
         }
-      }
-      this._callPropsCallbacks();
+        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;
+    componentDidUpdate(prevProps, prevState) {
+        const { scrollOffset, scrollUpdateWasRequested } = this.state;
+        this.preset.update(this.props);
+        if (scrollUpdateWasRequested && this._outerRef != null) {
+            const 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;
             }
-          } else {
-            outerRef.scrollLeft = scrollOffset;
-          }
-        } else {
-          outerRef.scrollTop = scrollOffset;
         }
-      }
-      this._callPropsCallbacks(prevProps, prevState);
+        this._callPropsCallbacks(prevProps, prevState);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this._resetIsScrollingTimeoutId !== null) {
-        cancelTimeout(this._resetIsScrollingTimeoutId);
-      }
+    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'
+    render() {
+        const _a = omit(this.props, ['innerElementType', 'innerTagName', 'itemElementType', 'itemTagName', 'outerElementType', 'outerTagName', 'position']), { className, direction, height, innerRef, item, itemCount, itemData, itemKey = defaultItemKey, layout, style, useIsScrolling, width, renderTop, renderBottom } = _a, rest = __rest(_a, ["className", "direction", "height", "innerRef", "item", "itemCount", "itemData", "itemKey", "layout", "style", "useIsScrolling", "width", "renderTop", "renderBottom"]);
+        const { id, isScrolling, scrollOffset, scrollUpdateWasRequested } = this.state;
+        const isHorizontal = this.preset.isHorizontal;
+        const placeholderCount = this.preset.placeholderCount;
+        const onScroll = isHorizontal
+            ? this._onScrollHorizontal
+            : this._onScrollVertical;
+        const [startIndex, stopIndex] = this._getRangeToRender();
+        const items = [];
+        if (itemCount > 0) {
+            const prevPlaceholder = startIndex < placeholderCount ? startIndex : placeholderCount;
+            items.push(new Array(prevPlaceholder).fill(-1).map((_, index) => React.createElement(this.preset.itemTagName, {
+                key: itemKey(index + startIndex - prevPlaceholder, itemData),
+                style: { display: 'none' }
+            })));
+            for (let index = startIndex; index <= stopIndex; index++) {
+                const style = this.preset.getItemStyle(index);
+                items.push(React.createElement(this.preset.itemTagName, {
+                    key: itemKey(index, itemData),
+                    style
+                }, React.createElement(item, {
+                    id: `${id}-${index}`,
+                    data: itemData,
+                    index,
+                    isScrolling: useIsScrolling ? isScrolling : undefined
+                })));
             }
-          });
-        }));
-        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
-          })));
+            const restCount = itemCount - stopIndex;
+            const postPlaceholder = restCount < placeholderCount ? restCount : placeholderCount;
+            items.push(new Array(postPlaceholder).fill(-1).map((_, index) => React.createElement(this.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.
+        const estimatedTotalSize = convertNumber2PX(this.itemList.getOffsetSize());
+        const outerElementProps = Object.assign(Object.assign({}, rest), { id,
+            className,
+            onScroll, ref: this._outerRefSetter, layout, style: Object.assign({ position: 'relative', height: convertNumber2PX(height), width: convertNumber2PX(width), overflow: 'auto', WebkitOverflowScrolling: 'touch', willChange: 'transform', direction }, style) });
+        if (isHorizontal) {
+            outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollLeft;
+        }
+        else {
+            outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollTop;
+        }
+        if (this.preset.isRelative) {
+            const pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
+            return React.createElement(this.preset.outerTagName, outerElementProps, renderTop, React.createElement(this.preset.itemTagName, {
+                key: `${id}-pre`,
+                id: `${id}-pre`,
+                style: {
+                    height: isHorizontal ? '100%' : pre,
+                    width: !isHorizontal ? '100%' : pre
+                }
+            }), React.createElement(this.preset.innerTagName, {
+                ref: innerRef,
+                key: `${id}-inner`,
+                id: `${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: `${id}-inner`,
+                id: `${id}-inner`,
+                style: {
+                    height: isHorizontal ? '100%' : estimatedTotalSize,
+                    pointerEvents: isScrolling ? 'none' : 'auto',
+                    position: 'relative',
+                    width: !isHorizontal ? '100%' : estimatedTotalSize
+                }
+            }, items), renderBottom);
         }
-        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.preset.field.scrollLeft;
-      } else {
-        outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.preset.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);
     }
-  }]);
-  return List;
-}(React.PureComponent); // NOTE: I considered further wrapping individual items with a pure ListItem component.
+}
+List.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    layout: 'vertical',
+    overscanCount: 2,
+    useIsScrolling: false,
+    shouldResetStyleCacheOnItemSizeChange: true
+};
+// 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 };
+
+export { List as default };
+//# sourceMappingURL=list.js.map