@beppla/tapas-ui 1.5.14 → 1.5.15

package/components/Grid/VariableSizeGrid.tsx

@@ -0,0 +1,509 @@
+
+import createGridComponent from './Grid.base';
+import type { Props, ScrollToAlign } from './Grid.base';
+
+const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+
+type VariableSizeProps = {
+    estimatedColumnWidth: number,
+    estimatedRowHeight: number,
+};
+
+type itemSizeGetter = (index: number) => number;
+type ItemType = 'column' | 'row';
+
+type ItemMetadata = {
+    offset: number,
+    size: number,
+};
+type ItemMetadataMap = { [index: number]: ItemMetadata };
+type InstanceProps = {
+    columnMetadataMap: ItemMetadataMap,
+    estimatedColumnWidth: number,
+    estimatedRowHeight: number,
+    lastMeasuredColumnIndex: number,
+    lastMeasuredRowIndex: number,
+    rowMetadataMap: ItemMetadataMap,
+};
+
+const getEstimatedTotalHeight = (
+    { rowCount }: Props<any>,
+    { rowMetadataMap, estimatedRowHeight, lastMeasuredRowIndex }: InstanceProps
+) => {
+    let totalSizeOfMeasuredRows = 0;
+
+    if (lastMeasuredRowIndex >= rowCount) {
+        lastMeasuredRowIndex = rowCount - 1;
+    }
+
+    if (lastMeasuredRowIndex >= 0) {
+        const itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
+        if (itemMetadata) {
+            totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+        }
+    }
+
+    const numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
+    const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
+
+    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+const getEstimatedTotalWidth = (
+    { columnCount }: Props<any>,
+    {
+        columnMetadataMap,
+        estimatedColumnWidth,
+        lastMeasuredColumnIndex,
+    }: InstanceProps
+) => {
+    let totalSizeOfMeasuredRows = 0;
+
+    if (lastMeasuredColumnIndex >= columnCount) {
+        lastMeasuredColumnIndex = columnCount - 1;
+    }
+
+    if (lastMeasuredColumnIndex >= 0) {
+        const itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
+        if (itemMetadata) {
+            totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+        }
+    }
+
+    const numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
+    const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
+
+    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+
+const getItemMetadata = (
+    itemType: ItemType,
+    props: Props<any>,
+    index: number,
+    instanceProps: InstanceProps
+): ItemMetadata => {
+    let itemMetadataMap, itemSize, lastMeasuredIndex;
+    if (itemType === 'column') {
+        itemMetadataMap = instanceProps.columnMetadataMap;
+        itemSize = props.columnWidth as itemSizeGetter;
+        lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+    } else {
+        itemMetadataMap = instanceProps.rowMetadataMap;
+        itemSize = props.rowHeight as itemSizeGetter;
+        lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+    }
+
+    if (index > lastMeasuredIndex) {
+        let offset = 0;
+        if (lastMeasuredIndex >= 0) {
+            const itemMetadata = itemMetadataMap[lastMeasuredIndex];
+            if (itemMetadata) {
+                offset = itemMetadata.offset + itemMetadata.size;
+            }
+        }
+
+        for (let i = lastMeasuredIndex + 1; i <= index; i++) {
+            let size = itemSize(i);
+
+            itemMetadataMap[i] = {
+                offset,
+                size,
+            };
+
+            offset += size;
+        }
+
+        if (itemType === 'column') {
+            instanceProps.lastMeasuredColumnIndex = index;
+        } else {
+            instanceProps.lastMeasuredRowIndex = index;
+        }
+    }
+    return itemMetadataMap[index] as ItemMetadata;
+};
+
+const findNearestItem = (
+    itemType: ItemType,
+    props: Props<any>,
+    instanceProps: InstanceProps,
+    offset: number
+) => {
+    let itemMetadataMap, lastMeasuredIndex;
+    if (itemType === 'column') {
+        itemMetadataMap = instanceProps.columnMetadataMap;
+        lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+    } else {
+        itemMetadataMap = instanceProps.rowMetadataMap;
+        lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+    }
+
+    const lastMeasuredItemOffset =
+        lastMeasuredIndex > 0
+            ? (itemMetadataMap[lastMeasuredIndex]?.offset ?? 0)
+            : 0;
+
+    if (lastMeasuredItemOffset >= offset) {
+        // If we've already measured items within this range just use a binary search as it's faster.
+        return findNearestItemBinarySearch(
+            itemType,
+            props,
+            instanceProps,
+            lastMeasuredIndex,
+            0,
+            offset
+        );
+    } else {
+        // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+        // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+        // The overall complexity for this approach is O(log n).
+        return findNearestItemExponentialSearch(
+            itemType,
+            props,
+            instanceProps,
+            Math.max(0, lastMeasuredIndex),
+            offset
+        );
+    }
+};
+
+const findNearestItemBinarySearch = (
+    itemType: ItemType,
+    props: Props<any>,
+    instanceProps: InstanceProps,
+    high: number,
+    low: number,
+    offset: number
+): number => {
+    while (low <= high) {
+        const middle = low + Math.floor((high - low) / 2);
+        const currentOffset = getItemMetadata(
+            itemType,
+            props,
+            middle,
+            instanceProps
+        ).offset;
+
+        if (currentOffset === offset) {
+            return middle;
+        } else if (currentOffset < offset) {
+            low = middle + 1;
+        } else if (currentOffset > offset) {
+            high = middle - 1;
+        }
+    }
+
+    if (low > 0) {
+        return low - 1;
+    } else {
+        return 0;
+    }
+};
+
+const findNearestItemExponentialSearch = (
+    itemType: ItemType,
+    props: Props<any>,
+    instanceProps: InstanceProps,
+    index: number,
+    offset: number
+): number => {
+    const itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
+    let interval = 1;
+
+    while (
+        index < itemCount &&
+        getItemMetadata(itemType, props, index, instanceProps).offset < offset
+    ) {
+        index += interval;
+        interval *= 2;
+    }
+
+    return findNearestItemBinarySearch(
+        itemType,
+        props,
+        instanceProps,
+        Math.min(index, itemCount - 1),
+        Math.floor(index / 2),
+        offset
+    );
+};
+
+const getOffsetForIndexAndAlignment = (
+    itemType: ItemType,
+    props: Props<any>,
+    index: number,
+    align: ScrollToAlign,
+    scrollOffset: number,
+    instanceProps: InstanceProps,
+    scrollbarSize: number
+): number => {
+    const size = itemType === 'column' ? props.width : props.height;
+    const itemMetadata = getItemMetadata(itemType, props, index, instanceProps);
+
+    // Get estimated total size after ItemMetadata is computed,
+    // To ensure it reflects actual measurements instead of just estimates.
+    const estimatedTotalSize =
+        itemType === 'column'
+            ? getEstimatedTotalWidth(props, instanceProps)
+            : getEstimatedTotalHeight(props, instanceProps);
+
+    const maxOffset = Math.max(
+        0,
+        Math.min(estimatedTotalSize - size, itemMetadata.offset)
+    );
+    const minOffset = Math.max(
+        0,
+        itemMetadata.offset - size + scrollbarSize + itemMetadata.size
+    );
+
+    if (align === 'smart') {
+        if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+            align = 'auto';
+        } else {
+            align = 'center';
+        }
+    }
+
+    switch (align) {
+        case 'start':
+            return maxOffset;
+        case 'end':
+            return minOffset;
+        case 'center':
+            return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        case 'auto':
+        default:
+            if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+                return scrollOffset;
+            } else if (minOffset > maxOffset) {
+                // Because we only take into account the scrollbar size when calculating minOffset
+                // this value can be larger than maxOffset when at the end of the list
+                return minOffset;
+            } else if (scrollOffset < minOffset) {
+                return minOffset;
+            } else {
+                return maxOffset;
+            }
+    }
+};
+
+const VariableSizeGrid = createGridComponent({
+    getColumnOffset: (
+        props: Props<any>,
+        index: number,
+        instanceProps: InstanceProps
+    ): number => getItemMetadata('column', props, index, instanceProps).offset,
+
+    getColumnStartIndexForOffset: (
+        props: Props<any>,
+        scrollLeft: number,
+        instanceProps: InstanceProps
+    ): number => findNearestItem('column', props, instanceProps, scrollLeft),
+
+    getColumnStopIndexForStartIndex: (
+        props: Props<any>,
+        startIndex: number,
+        scrollLeft: number,
+        instanceProps: InstanceProps
+    ): number => {
+        const { columnCount, width } = props;
+
+        const itemMetadata = getItemMetadata(
+            'column',
+            props,
+            startIndex,
+            instanceProps
+        );
+        const maxOffset = scrollLeft + width;
+
+        let offset = itemMetadata.offset + itemMetadata.size;
+        let stopIndex = startIndex;
+
+        while (stopIndex < columnCount - 1 && offset < maxOffset) {
+            stopIndex++;
+            offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
+        }
+
+        return stopIndex;
+    },
+    getColumnWidth: (
+        _props: Props<any>,
+        index: number,
+        instanceProps: InstanceProps
+    ): number => {
+        return (instanceProps.columnMetadataMap[index] as ItemMetadata).size;
+    },
+
+    getEstimatedTotalHeight,
+    getEstimatedTotalWidth,
+
+    getOffsetForColumnAndAlignment: (
+        props: Props<any>,
+        index: number,
+        align: ScrollToAlign,
+        scrollOffset: number,
+        instanceProps: InstanceProps,
+        scrollbarSize: number
+    ): number =>
+        getOffsetForIndexAndAlignment(
+            'column',
+            props,
+            index,
+            align,
+            scrollOffset,
+            instanceProps,
+            scrollbarSize
+        ),
+
+    getOffsetForRowAndAlignment: (
+        props: Props<any>,
+        index: number,
+        align: ScrollToAlign,
+        scrollOffset: number,
+        instanceProps: InstanceProps,
+        scrollbarSize: number
+    ): number =>
+        getOffsetForIndexAndAlignment(
+            'row',
+            props,
+            index,
+            align,
+            scrollOffset,
+            instanceProps,
+            scrollbarSize
+        ),
+
+    getRowOffset: (
+        _props: Props<any>,
+        index: number,
+        instanceProps: InstanceProps
+    ): number => getItemMetadata('row', _props, index, instanceProps).offset,
+
+    getRowHeight: (
+        _props: Props<any>,
+        index: number,
+        instanceProps: InstanceProps
+    ): number => {
+        return (instanceProps.rowMetadataMap[index] as ItemMetadata).size;
+    },
+
+    getRowStartIndexForOffset: (
+        props: Props<any>,
+        scrollTop: number,
+        instanceProps: InstanceProps
+    ): number => findNearestItem('row', props, instanceProps, scrollTop),
+
+    getRowStopIndexForStartIndex: (
+        props: Props<any>,
+        startIndex: number,
+        scrollTop: number,
+        instanceProps: InstanceProps
+    ): number => {
+        const { rowCount, height } = props;
+
+        const itemMetadata = getItemMetadata(
+            'row',
+            props,
+            startIndex,
+            instanceProps
+        );
+        const maxOffset = scrollTop + height;
+
+        let offset = itemMetadata.offset + itemMetadata.size;
+        let stopIndex = startIndex;
+
+        while (stopIndex < rowCount - 1 && offset < maxOffset) {
+            stopIndex++;
+            offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
+        }
+
+        return stopIndex;
+    },
+
+    initInstanceProps(props: Props<any>, instance: any): InstanceProps {
+        const {
+            estimatedColumnWidth,
+            estimatedRowHeight,
+        } = props as unknown as VariableSizeProps;
+
+        const instanceProps = {
+            columnMetadataMap: {},
+            estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
+            estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+            lastMeasuredColumnIndex: -1,
+            lastMeasuredRowIndex: -1,
+            rowMetadataMap: {},
+        };
+
+        instance.resetAfterColumnIndex = (
+            columnIndex: number,
+            shouldForceUpdate: boolean = true
+        ) => {
+            instance.resetAfterIndices({ columnIndex, shouldForceUpdate });
+        };
+
+        instance.resetAfterRowIndex = (
+            rowIndex: number,
+            shouldForceUpdate: boolean = true
+        ) => {
+            instance.resetAfterIndices({ rowIndex, shouldForceUpdate });
+        };
+
+        instance.resetAfterIndices = ({
+            columnIndex,
+            rowIndex,
+            shouldForceUpdate = true,
+        }: {
+            columnIndex?: number,
+            rowIndex?: number,
+            shouldForceUpdate: boolean,
+        }) => {
+            if (typeof columnIndex === 'number') {
+                instanceProps.lastMeasuredColumnIndex = Math.min(
+                    instanceProps.lastMeasuredColumnIndex,
+                    columnIndex - 1
+                );
+            }
+            if (typeof rowIndex === 'number') {
+                instanceProps.lastMeasuredRowIndex = Math.min(
+                    instanceProps.lastMeasuredRowIndex,
+                    rowIndex - 1
+                );
+            }
+
+            // We could potentially optimize further by only evicting styles after this index,
+            // But since styles are only cached while scrolling is in progress-
+            // It seems an unnecessary optimization.
+            // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
+            instance._getItemStyleCache(-1);
+
+            if (shouldForceUpdate) {
+                instance.forceUpdate();
+            }
+        };
+
+        return instanceProps;
+    },
+
+    shouldResetStyleCacheOnItemSizeChange: false,
+
+    validateProps: ({ columnWidth, rowHeight }: Props<any>): void => {
+        if (process.env.NODE_ENV !== 'production') {
+            if (typeof columnWidth !== 'function') {
+                throw Error(
+                    'An invalid "columnWidth" prop has been specified. ' +
+                    'Value should be a function. ' +
+                    `"${columnWidth === null ? 'null' : typeof columnWidth
+                    }" was specified.`
+                );
+            } else if (typeof rowHeight !== 'function') {
+                throw Error(
+                    'An invalid "rowHeight" prop has been specified. ' +
+                    'Value should be a function. ' +
+                    `"${rowHeight === null ? 'null' : typeof rowHeight}" was specified.`
+                );
+            }
+        }
+    },
+});
+
+export default VariableSizeGrid;

package/components/Grid/helper.ts

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

package/components/Grid/timer.ts

@@ -0,0 +1,32 @@
+const hasNativePerformanceNow =
+    typeof performance === 'object' && typeof performance.now === 'function';
+
+const now = hasNativePerformanceNow
+    ? () => performance.now()
+    : () => Date.now();
+
+export type TimeoutID = {
+    id: number,
+};
+
+export function cancelTimeout(timeoutID: TimeoutID) {
+    cancelAnimationFrame(timeoutID.id);
+}
+
+export function requestTimeout(callback: Function, delay: number): TimeoutID {
+    const start = now();
+
+    function tick() {
+        if (now() - start >= delay) {
+            callback.call(null);
+        } else {
+            timeoutID.id = requestAnimationFrame(tick);
+        }
+    }
+
+    const timeoutID: TimeoutID = {
+        id: requestAnimationFrame(tick),
+    };
+
+    return timeoutID;
+}