@beppla/tapas-ui 1.0.65 → 1.0.67

package/components/Grid/Grid.base.tsx

@@ -1,933 +0,0 @@
-import memoize from 'memoize-one';
-import { createElement, PureComponent, RefCallback, SyntheticEvent, RefObject, CSSProperties } from 'react';
-import { cancelTimeout, requestTimeout } from './timer';
-import { getScrollbarSize, getRTLOffsetType } from './helper';
-
-import type { TimeoutID } from './timer';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-console */
-
-export type Direction = 'ltr' | 'rtl';
-export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
-
-export type itemSize = number | ((index: number) => number);
-
-type RenderComponentProps<T> = {
-    columnIndex: number,
-    data: T,
-    isScrolling?: boolean,
-    rowIndex: number,
-    style: Object,
-};
-
-interface OuterElementProps {
-    className?: string;
-    children: React.ReactNode;
-    onScroll: (event: ScrollEvent) => void
-    ref: RefCallback<HTMLElement> | RefObject<HTMLElement>;
-    style: CSSProperties;
-}
-
-interface InnerElementProps {
-    children: React.ReactNode;
-    ref: RefObject<HTMLElement>;
-    style: CSSProperties;
-}
-
-export type RenderComponent<T> = React.ComponentType<Partial<RenderComponentProps<T>>>;
-
-
-type ScrollDirection = 'forward' | 'backward';
-
-export type OnItemsRenderedCallback = (props: {
-    overscanColumnStartIndex: number,
-    overscanColumnStopIndex: number,
-    overscanRowStartIndex: number,
-    overscanRowStopIndex: number,
-    visibleColumnStartIndex: number,
-    visibleColumnStopIndex: number,
-    visibleRowStartIndex: number,
-    visibleRowStopIndex: number,
-}) => void;
-export type OnScrollCallback = (props: {
-    horizontalScrollDirection: ScrollDirection,
-    scrollLeft: number,
-    scrollTop: number,
-    scrollUpdateWasRequested: boolean,
-    verticalScrollDirection: ScrollDirection,
-}) => void;
-
-type ScrollEvent = SyntheticEvent<HTMLDivElement>;
-type ItemStyleCache = { [key: string]: Object };
-
-export type OuterProps = {
-    children: React.ReactNode;
-    className?: string;
-    onScroll: (event: ScrollEvent) => void;
-    style: {
-        [key: string]: any;
-    };
-};
-
-export type InnerProps = {
-    children: React.ReactNode,
-    style: {
-        [key: string]: any,
-    },
-};
-
-export type Props<T> = {
-    children: RenderComponent<T>,
-    className?: string,
-    columnCount: number,
-    columnWidth: itemSize,
-    direction: Direction,
-    height: number,
-    initialScrollLeft?: number,
-    initialScrollTop?: number,
-    innerRef?: any,
-    innerElementType?: string | React.ComponentType<InnerProps>;
-    innerTagName?: string, // deprecated
-    itemData: T,
-    itemKey?: (params: {
-        columnIndex: number,
-        data: T,
-        rowIndex: number,
-    }) => any,
-    onItemsRendered?: OnItemsRenderedCallback,
-    onScroll?: OnScrollCallback,
-    outerRef?: any,
-    outerElementType?: string | React.ComponentType<OuterProps>,
-    outerTagName?: string, // deprecated
-    overscanColumnCount?: number,
-    overscanColumnsCount?: number, // deprecated
-    overscanCount?: number, // deprecated
-    overscanRowCount?: number,
-    overscanRowsCount?: number, // deprecated
-    rowCount: number,
-    rowHeight: itemSize,
-    style?: Object,
-    testID?: string,
-    useIsScrolling: boolean,
-    width: number,
-};
-
-export type State = {
-    instance: any,
-    isScrolling: boolean,
-    horizontalScrollDirection: ScrollDirection,
-    scrollLeft: number,
-    scrollTop: number,
-    scrollUpdateWasRequested: boolean,
-    verticalScrollDirection: ScrollDirection,
-};
-
-type getItemOffset = (
-    props: Props<any>,
-    index: number,
-    instanceProps: any
-) => number;
-type getItemSize = (
-    props: Props<any>,
-    index: number,
-    instanceProps: any
-) => number;
-type getEstimatedTotalSize = (props: Props<any>, instanceProps: any) => number;
-type GetOffsetForItemAndAlignment = (
-    props: Props<any>,
-    index: number,
-    align: ScrollToAlign,
-    scrollOffset: number,
-    instanceProps: any,
-    scrollbarSize: number
-) => number;
-type GetStartIndexForOffset = (
-    props: Props<any>,
-    offset: number,
-    instanceProps: any
-) => number;
-type GetStopIndexForStartIndex = (
-    props: Props<any>,
-    startIndex: number,
-    scrollOffset: number,
-    instanceProps: any
-) => number;
-type InitInstanceProps = (props: Props<any>, instance: any) => any;
-type ValidateProps = (props: Props<any>) => void;
-
-const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
-
-
-// @ts-ignore
-const defaultItemKey = ({ columnIndex, data: _data, rowIndex }: { columnIndex: number, data: any, rowIndex: number }) =>`${rowIndex}:${columnIndex}`;
-// 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.
-let devWarningsOverscanCount: WeakSet<WeakKey> | null = null;
-let devWarningsOverscanRowsColumnsCount: WeakSet<WeakKey> | null = null;
-let devWarningsTagName: WeakSet<WeakKey> | null = null;
-if (process.env.NODE_ENV !== 'production') {
-    if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
-        devWarningsOverscanCount = new WeakSet();
-        devWarningsOverscanRowsColumnsCount = new WeakSet();
-        devWarningsTagName = new WeakSet();
-    }
-}
-
-export default function createGridComponent({
-    getColumnOffset,
-    getColumnStartIndexForOffset,
-    getColumnStopIndexForStartIndex,
-    getColumnWidth,
-    getEstimatedTotalHeight,
-    getEstimatedTotalWidth,
-    getOffsetForColumnAndAlignment,
-    getOffsetForRowAndAlignment,
-    getRowHeight,
-    getRowOffset,
-    getRowStartIndexForOffset,
-    getRowStopIndexForStartIndex,
-    initInstanceProps,
-    shouldResetStyleCacheOnItemSizeChange,
-    validateProps,
-}: {
-    getColumnOffset: getItemOffset,
-    getColumnStartIndexForOffset: GetStartIndexForOffset,
-    getColumnStopIndexForStartIndex: GetStopIndexForStartIndex,
-    getColumnWidth: getItemSize,
-    getEstimatedTotalHeight: getEstimatedTotalSize,
-    getEstimatedTotalWidth: getEstimatedTotalSize,
-    getOffsetForColumnAndAlignment: GetOffsetForItemAndAlignment,
-    getOffsetForRowAndAlignment: GetOffsetForItemAndAlignment,
-    getRowOffset: getItemOffset,
-    getRowHeight: getItemSize,
-    getRowStartIndexForOffset: GetStartIndexForOffset,
-    getRowStopIndexForStartIndex: GetStopIndexForStartIndex,
-    initInstanceProps: InitInstanceProps,
-    shouldResetStyleCacheOnItemSizeChange: boolean,
-    validateProps: ValidateProps,
-}) {
-    return class Grid<T> extends PureComponent<Props<T>, State> {
-        _instanceProps: any = initInstanceProps(this.props, this);
-        _resetIsScrollingTimeoutId: TimeoutID | null = null;
-        _outerRef: HTMLDivElement | null | undefined;
-
-        static defaultProps = {
-            direction: 'ltr',
-            itemData: undefined,
-            useIsScrolling: false,
-        };
-
-        state: State = {
-            instance: this,
-            isScrolling: false,
-            horizontalScrollDirection: 'forward',
-            scrollLeft:
-                typeof this.props.initialScrollLeft === 'number'
-                    ? this.props.initialScrollLeft
-                    : 0,
-            scrollTop:
-                typeof this.props.initialScrollTop === 'number'
-                    ? this.props.initialScrollTop
-                    : 0,
-            scrollUpdateWasRequested: false,
-            verticalScrollDirection: 'forward',
-        };
-
-        // Always use explicit constructor for React components.
-        // It produces less code after transpilation. (#26)
-        // eslint-disable-next-line no-useless-constructor
-        constructor(props: Props<T>) {
-            super(props);
-        }
-
-        static getDerivedStateFromProps(
-            nextProps: Props<any>,
-            prevState: State
-        ): Partial<State> | null {
-            validateSharedProps(nextProps, prevState);
-            validateProps(nextProps);
-            return null;
-        }
-
-        scrollTo({
-            scrollLeft,
-            scrollTop,
-        }: {
-            scrollLeft: number,
-            scrollTop: number,
-        }): void {
-            if (scrollLeft !== undefined) {
-                scrollLeft = Math.max(0, scrollLeft);
-            }
-            if (scrollTop !== undefined) {
-                scrollTop = Math.max(0, scrollTop);
-            }
-
-            this.setState(prevState => {
-                if (scrollLeft === undefined) {
-                    scrollLeft = prevState.scrollLeft;
-                }
-                if (scrollTop === undefined) {
-                    scrollTop = prevState.scrollTop;
-                }
-
-                if (
-                    prevState.scrollLeft === scrollLeft &&
-                    prevState.scrollTop === scrollTop
-                ) {
-                    return null;
-                }
-
-                return {
-                    horizontalScrollDirection:
-                        prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
-                    scrollLeft,
-                    scrollTop,
-                    scrollUpdateWasRequested: true,
-                    verticalScrollDirection:
-                        prevState.scrollTop < scrollTop ? 'forward' : 'backward',
-                };
-            }, this._resetIsScrollingDebounced);
-        }
-
-
-        scrollToItem({
-            align = 'auto',
-            columnIndex,
-            rowIndex,
-        }: {
-            align: ScrollToAlign,
-            columnIndex?: number,
-            rowIndex?: number,
-        }): void {
-            const { columnCount, height, rowCount, width } = this.props;
-            const { scrollLeft, scrollTop } = this.state;
-            const scrollbarSize = getScrollbarSize();
-
-            if (columnIndex !== undefined) {
-                columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
-            }
-            if (rowIndex !== undefined) {
-                rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
-            }
-
-            const estimatedTotalHeight = getEstimatedTotalHeight(
-                this.props,
-                this._instanceProps
-            );
-            const estimatedTotalWidth = getEstimatedTotalWidth(
-                this.props,
-                this._instanceProps
-            );
-
-            // The scrollbar size should be considered when scrolling an item into view,
-            // to ensure it's fully visible.
-            // But we only need to account for its size when it's actually visible.
-            const horizontalScrollbarSize =
-                estimatedTotalWidth > width ? scrollbarSize : 0;
-            const verticalScrollbarSize =
-                estimatedTotalHeight > height ? scrollbarSize : 0;
-
-            this.scrollTo({
-                scrollLeft:
-                    columnIndex !== undefined
-                        ? getOffsetForColumnAndAlignment(
-                            this.props,
-                            columnIndex,
-                            align,
-                            scrollLeft,
-                            this._instanceProps,
-                            verticalScrollbarSize
-                        )
-                        : scrollLeft,
-                scrollTop:
-                    rowIndex !== undefined
-                        ? getOffsetForRowAndAlignment(
-                            this.props,
-                            rowIndex,
-                            align,
-                            scrollTop,
-                            this._instanceProps,
-                            horizontalScrollbarSize
-                        )
-                        : scrollTop,
-            });
-        }
-
-        componentDidMount() {
-            const { initialScrollLeft, initialScrollTop } = this.props;
-
-            if (this._outerRef != null) {
-                const outerRef = this._outerRef as HTMLElement;
-                if (typeof initialScrollLeft === 'number') {
-                    outerRef.scrollLeft = initialScrollLeft;
-                }
-                if (typeof initialScrollTop === 'number') {
-                    outerRef.scrollTop = initialScrollTop;
-                }
-            }
-
-            this._callPropsCallbacks();
-        }
-
-        componentDidUpdate() {
-            const { direction } = this.props;
-            const { scrollLeft, scrollTop, scrollUpdateWasRequested } = this.state;
-
-            if (scrollUpdateWasRequested && this._outerRef != null) {
-                // 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.
-                const outerRef = this._outerRef as HTMLElement;
-                if (direction === 'rtl') {
-                    switch (getRTLOffsetType()) {
-                        case 'negative':
-                            outerRef.scrollLeft = -scrollLeft;
-                            break;
-                        case 'positive-ascending':
-                            outerRef.scrollLeft = scrollLeft;
-                            break;
-                        default: {
-                            const { clientWidth, scrollWidth } = outerRef;
-                            outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
-                            break;
-                        }
-                    }
-                } else {
-                    outerRef.scrollLeft = Math.max(0, scrollLeft);
-                }
-
-                outerRef.scrollTop = Math.max(0, scrollTop);
-            }
-
-            this._callPropsCallbacks();
-        }
-
-        componentWillUnmount() {
-            if (this._resetIsScrollingTimeoutId !== null) {
-                cancelTimeout(this._resetIsScrollingTimeoutId);
-            }
-        }
-
-        render() {
-            const {
-                children,
-                className,
-                columnCount,
-                direction,
-                height,
-                innerRef,
-                innerElementType,
-                innerTagName,
-                itemData,
-                itemKey = defaultItemKey,
-                outerElementType,
-                outerTagName,
-                rowCount,
-                style,
-                testID,
-                useIsScrolling,
-                width,
-            } = this.props;
-            const { isScrolling } = this.state;
-            const [
-                columnStartIndex,
-                columnStopIndex,
-            ] = this._getHorizontalRangeToRender();
-            const [rowStartIndex, rowStopIndex] = this._getVerticalRangeToRender();
-
-            const items = [];
-            if (columnCount > 0 && rowCount) {
-                for (
-                    let rowIndex = rowStartIndex;
-                    rowIndex <= rowStopIndex;
-                    rowIndex++
-                ) {
-                    for (
-                        let columnIndex = columnStartIndex;
-                        columnIndex <= columnStopIndex;
-                        columnIndex++
-                    ) {
-                        items.push(
-                            createElement(children, {
-                                columnIndex,
-                                data: itemData,
-                                isScrolling: useIsScrolling ? isScrolling : undefined,
-                                key: itemKey({ columnIndex, data: itemData, rowIndex }),
-                                rowIndex,
-                                style: this._getItemStyle(rowIndex, columnIndex),
-                            })
-                        );
-                    }
-                }
-            }
-
-            // Read this value AFTER items have been created,
-            // So their actual sizes (if variable) are taken into consideration.
-            const estimatedTotalHeight = getEstimatedTotalHeight(
-                this.props,
-                this._instanceProps
-            );
-            const estimatedTotalWidth = getEstimatedTotalWidth(
-                this.props,
-                this._instanceProps
-            );
-            const outerRefSetter: OuterElementProps = {
-                className,
-                onScroll: this._onScroll,
-                ref: this._outerRefSetter,
-                style: {
-                    position: 'relative',
-                    height,
-                    width,
-                    overflow: 'auto',
-                    WebkitOverflowScrolling: 'touch',
-                    willChange: 'transform',
-                    direction,
-                    ...style,
-                },
-                children: undefined,
-                ...(testID && { testID })
-            };
-            const innerElement: InnerElementProps = {
-                children: items,
-                ref: innerRef,
-                style: {
-                    height: estimatedTotalHeight,
-                    pointerEvents: isScrolling ? 'none' : undefined,
-                    width: estimatedTotalWidth || 0,
-                },
-            }
-            return createElement(
-                outerElementType || outerTagName || 'div',
-                outerRefSetter,
-                createElement(innerElementType || innerTagName || 'div', innerElement)
-            );
-        }
-
-        _outerRefSetter = (ref: any): void => {
-            const { outerRef } = this.props;
-
-            this._outerRef = ref as HTMLDivElement;
-
-            if (typeof outerRef === 'function') {
-                outerRef(ref);
-            } else if (
-                outerRef != null &&
-                typeof outerRef === 'object' &&
-                Object.prototype.hasOwnProperty.call(outerRef, 'current')
-            ) {
-                outerRef.current = ref;
-            }
-        };
-
-        _onScroll = (event: ScrollEvent): void => {
-            const {
-                clientHeight,
-                clientWidth,
-                scrollLeft,
-                scrollTop,
-                scrollHeight,
-                scrollWidth,
-            } = event.currentTarget;
-            this.setState(prevState => {
-                if (
-                    prevState.scrollLeft === scrollLeft &&
-                    prevState.scrollTop === scrollTop
-                ) {
-                    // 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;
-                }
-
-                const { direction } = this.props;
-
-                // 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.
-                let calculatedScrollLeft = scrollLeft;
-                if (direction === 'rtl') {
-                    switch (getRTLOffsetType()) {
-                        case 'negative':
-                            calculatedScrollLeft = -scrollLeft;
-                            break;
-                        case 'positive-descending':
-                            calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
-                            break;
-                    }
-                }
-
-                // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-                calculatedScrollLeft = Math.max(
-                    0,
-                    Math.min(calculatedScrollLeft, scrollWidth - clientWidth)
-                );
-                const calculatedScrollTop = Math.max(
-                    0,
-                    Math.min(scrollTop, scrollHeight - clientHeight)
-                );
-
-                return {
-                    isScrolling: true,
-                    horizontalScrollDirection:
-                        prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
-                    scrollLeft: calculatedScrollLeft,
-                    scrollTop: calculatedScrollTop,
-                    verticalScrollDirection:
-                        prevState.scrollTop < scrollTop ? 'forward' : 'backward',
-                    scrollUpdateWasRequested: false,
-                };
-            }, this._resetIsScrollingDebounced);
-        };
-
-        _getItemStyle: (rowIndex: number, columnIndex: number) => Object = (rowIndex: number, columnIndex: number): Object => {
-            const { columnWidth, direction, rowHeight } = this.props;
-
-            const itemStyleCache = this._getItemStyleCache(
-                shouldResetStyleCacheOnItemSizeChange && columnWidth,
-                shouldResetStyleCacheOnItemSizeChange && direction,
-                shouldResetStyleCacheOnItemSizeChange && rowHeight
-            );
-
-            const key = `${rowIndex}:${columnIndex}`;
-
-            let style;
-            if (Object.prototype.hasOwnProperty.call(itemStyleCache, key)) {
-                style = itemStyleCache[key];
-            } else {
-                const offset = getColumnOffset(
-                    this.props,
-                    columnIndex,
-                    this._instanceProps
-                );
-                const isRtl = direction === 'rtl';
-                itemStyleCache[key] = style = {
-                    position: 'absolute',
-                    left: isRtl ? undefined : offset,
-                    right: isRtl ? offset : undefined,
-                    top: getRowOffset(this.props, rowIndex, this._instanceProps),
-                    height: getRowHeight(this.props, rowIndex, this._instanceProps),
-                    width: getColumnWidth(this.props, columnIndex, this._instanceProps),
-                };
-            }
-
-            return style || {};
-        };
-
-        _callPropsCallbacks() {
-            const { columnCount, onItemsRendered, onScroll, rowCount } = this.props;
-
-            if (typeof onItemsRendered === 'function') {
-                if (columnCount > 0 && rowCount > 0) {
-                    const [
-                        overscanColumnStartIndex,
-                        overscanColumnStopIndex,
-                        visibleColumnStartIndex,
-                        visibleColumnStopIndex,
-                    ] = this._getHorizontalRangeToRender();
-                    const [
-                        overscanRowStartIndex,
-                        overscanRowStopIndex,
-                        visibleRowStartIndex,
-                        visibleRowStopIndex,
-                    ] = this._getVerticalRangeToRender();
-                    this._callOnItemsRendered(
-                        overscanColumnStartIndex,
-                        overscanColumnStopIndex,
-                        overscanRowStartIndex,
-                        overscanRowStopIndex,
-                        visibleColumnStartIndex,
-                        visibleColumnStopIndex,
-                        visibleRowStartIndex,
-                        visibleRowStopIndex
-                    );
-                }
-            }
-
-            if (typeof onScroll === 'function') {
-                const {
-                    horizontalScrollDirection,
-                    scrollLeft,
-                    scrollTop,
-                    scrollUpdateWasRequested,
-                    verticalScrollDirection,
-                } = this.state;
-                this._callOnScroll(
-                    scrollLeft,
-                    scrollTop,
-                    horizontalScrollDirection,
-                    verticalScrollDirection,
-                    scrollUpdateWasRequested
-                );
-            }
-        }
-
-        _callOnScroll: (
-            scrollLeft: number,
-            scrollTop: number,
-            horizontalScrollDirection: ScrollDirection,
-            verticalScrollDirection: ScrollDirection,
-            scrollUpdateWasRequested: boolean
-        ) => void = memoize(
-            (
-                scrollLeft: number,
-                scrollTop: number,
-                horizontalScrollDirection: ScrollDirection,
-                verticalScrollDirection: ScrollDirection,
-                scrollUpdateWasRequested: boolean
-            ) =>
-                (this.props.onScroll as OnScrollCallback)({
-                    horizontalScrollDirection,
-                    scrollLeft,
-                    scrollTop,
-                    verticalScrollDirection,
-                    scrollUpdateWasRequested,
-                })
-        );
-
-        _callOnItemsRendered: (
-            overscanColumnStartIndex: number,
-            overscanColumnStopIndex: number,
-            overscanRowStartIndex: number,
-            overscanRowStopIndex: number,
-            visibleColumnStartIndex: number,
-            visibleColumnStopIndex: number,
-            visibleRowStartIndex: number,
-            visibleRowStopIndex: number
-        ) => void = memoize(
-            (
-                overscanColumnStartIndex: number,
-                overscanColumnStopIndex: number,
-                overscanRowStartIndex: number,
-                overscanRowStopIndex: number,
-                visibleColumnStartIndex: number,
-                visibleColumnStopIndex: number,
-                visibleRowStartIndex: number,
-                visibleRowStopIndex: number
-            ) =>
-                (this.props.onItemsRendered as OnItemsRenderedCallback)({
-                    overscanColumnStartIndex,
-                    overscanColumnStopIndex,
-                    overscanRowStartIndex,
-                    overscanRowStopIndex,
-                    visibleColumnStartIndex,
-                    visibleColumnStopIndex,
-                    visibleRowStartIndex,
-                    visibleRowStopIndex,
-                })
-        );
-
-        _getVerticalRangeToRender(): [number, number, number, number] {
-            const {
-                columnCount,
-                overscanCount,
-                overscanRowCount,
-                overscanRowsCount,
-                rowCount,
-            } = this.props;
-            const { isScrolling, verticalScrollDirection, scrollTop } = this.state;
-
-            const overscanCountResolved: number =
-                overscanRowCount || overscanRowsCount || overscanCount || 1;
-
-            if (columnCount === 0 || rowCount === 0) {
-                return [0, 0, 0, 0];
-            }
-
-            const startIndex = getRowStartIndexForOffset(
-                this.props,
-                scrollTop,
-                this._instanceProps
-            );
-            const stopIndex = getRowStopIndexForStartIndex(
-                this.props,
-                startIndex,
-                scrollTop,
-                this._instanceProps
-            );
-
-            // Overscan by one item in each direction so that tab/focus works.
-            // If there isn't at least one extra item, tab loops back around.
-            const overscanBackward =
-                !isScrolling || verticalScrollDirection === 'backward'
-                    ? Math.max(1, overscanCountResolved)
-                    : 1;
-            const overscanForward =
-                !isScrolling || verticalScrollDirection === 'forward'
-                    ? Math.max(1, overscanCountResolved)
-                    : 1;
-
-            return [
-                Math.max(0, startIndex - overscanBackward),
-                Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)),
-                startIndex,
-                stopIndex,
-            ];
-        }
-
-        _getHorizontalRangeToRender(): [number, number, number, number] {
-            const {
-                columnCount,
-                overscanColumnCount,
-                overscanColumnsCount,
-                overscanCount,
-                rowCount,
-            } = this.props;
-            const { horizontalScrollDirection, isScrolling, scrollLeft } = this.state;
-
-            const overscanCountResolved: number =
-                overscanColumnCount || overscanColumnsCount || overscanCount || 1;
-
-            if (columnCount === 0 || rowCount === 0) {
-                return [0, 0, 0, 0];
-            }
-
-            const startIndex = getColumnStartIndexForOffset(
-                this.props,
-                scrollLeft,
-                this._instanceProps
-            );
-            const stopIndex = getColumnStopIndexForStartIndex(
-                this.props,
-                startIndex,
-                scrollLeft,
-                this._instanceProps
-            );
-
-            // Overscan by one item in each direction so that tab/focus works.
-            // If there isn't at least one extra item, tab loops back around.
-            const overscanBackward =
-                !isScrolling || horizontalScrollDirection === 'backward'
-                    ? Math.max(1, overscanCountResolved)
-                    : 1;
-            const overscanForward =
-                !isScrolling || horizontalScrollDirection === 'forward'
-                    ? Math.max(1, overscanCountResolved)
-                    : 1;
-
-            return [
-                Math.max(0, startIndex - overscanBackward),
-                Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)),
-                startIndex,
-                stopIndex,
-            ];
-        }
-
-        _resetIsScrollingDebounced = () => {
-            if (this._resetIsScrollingTimeoutId !== null) {
-                cancelTimeout(this._resetIsScrollingTimeoutId);
-            }
-
-            this._resetIsScrollingTimeoutId = requestTimeout(
-                this._resetIsScrolling,
-                IS_SCROLLING_DEBOUNCE_INTERVAL
-            );
-        };
-        _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._getItemStyleCache(-1);
-            });
-        };
-
-        _getItemStyleCache: (_: any, __?: any, ___?: any) => ItemStyleCache = memoize((_: any, __: any, ___: any) => ({}));
-
-
-    }
-}
-
-const validateSharedProps = (
-    {
-        children,
-        direction,
-        height,
-        innerTagName,
-        outerTagName,
-        overscanColumnsCount,
-        overscanCount,
-        overscanRowsCount,
-        width,
-    }: Props<any>,
-    { instance }: State
-): void => {
-    if (process.env.NODE_ENV !== 'production') {
-        if (typeof overscanCount === 'number') {
-            if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
-                devWarningsOverscanCount.add(instance);
-                console.warn(
-                    'The overscanCount prop has been deprecated. ' +
-                    'Please use the overscanColumnCount and overscanRowCount props instead.'
-                );
-            }
-        }
-
-        if (
-            typeof overscanColumnsCount === 'number' ||
-            typeof overscanRowsCount === 'number'
-        ) {
-            if (
-                devWarningsOverscanRowsColumnsCount &&
-                !devWarningsOverscanRowsColumnsCount.has(instance)
-            ) {
-                devWarningsOverscanRowsColumnsCount.add(instance);
-                console.warn(
-                    'The overscanColumnsCount and overscanRowsCount props have been deprecated. ' +
-                    'Please use the overscanColumnCount and overscanRowCount props instead.'
-                );
-            }
-        }
-
-        if (innerTagName != null || outerTagName != null) {
-            if (devWarningsTagName && !devWarningsTagName.has(instance)) {
-                devWarningsTagName.add(instance);
-                console.warn(
-                    'The innerTagName and outerTagName props have been deprecated. ' +
-                    'Please use the innerElementType and outerElementType props instead.'
-                );
-            }
-        }
-
-        if (children == null) {
-            throw Error(
-                'An invalid "children" prop has been specified. ' +
-                'Value should be a React component. ' +
-                `"${children === null ? 'null' : typeof children}" was specified.`
-            );
-        }
-
-        switch (direction) {
-            case 'ltr':
-            case 'rtl':
-                // Valid values
-                break;
-            default:
-                throw Error(
-                    'An invalid "direction" prop has been specified. ' +
-                    'Value should be either "ltr" or "rtl". ' +
-                    `"${direction}" was specified.`
-                );
-        }
-
-        if (typeof width !== 'number') {
-            throw Error(
-                'An invalid "width" prop has been specified. ' +
-                'Grids must specify a number for width. ' +
-                `"${width === null ? 'null' : typeof width}" was specified.`
-            );
-        }
-
-        if (typeof height !== 'number') {
-            throw Error(
-                'An invalid "height" prop has been specified. ' +
-                'Grids must specify a number for height. ' +
-                `"${height === null ? 'null' : typeof height}" was specified.`
-            );
-        }
-    }
-};