@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/VirtualList/ColumnListWithExternalScrolling.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { CSSProperties, useCallback } from 'react';
+
+import { join } from '../../utils/join';
+import { VirtualBrain } from '../VirtualBrain';
+
+import type { RenderColumn } from './types';
+import type { ScrollPosition } from '../types/ScrollPosition';
+
+import type { RenderItem, RenderItemParam } from '../RawList/types';
+import { RawList } from '../RawList';
+import { VirtualListCls, VirtualListClsOrientation } from './VirtualList.css';
+import { position, transform } from '../InfiniteTable/utilities.css';
+import { InfiniteListRootClassName } from './InfiniteListRootClassName';
+
+const rootClassName = InfiniteListRootClassName;
+const defaultClasses = [position.relative, transform.translateZero];
+
+export type ColumnWidth = number | ((columnWidth: number) => number);
+type ColumnListExternalScrollingListProps = {
+  columnWidth: ColumnWidth;
+
+  brain: VirtualBrain;
+
+  renderColumn: RenderColumn;
+
+  repaintId?: number | string;
+  updateScroll?: (node: HTMLElement, scrollPosition: ScrollPosition) => void;
+
+  style?: CSSProperties;
+  className?: string;
+};
+
+export const ColumnListWithExternalScrolling = (
+  props: ColumnListExternalScrollingListProps,
+) => {
+  const {
+    renderColumn,
+    repaintId,
+
+    brain,
+
+    style,
+    className,
+  } = props;
+
+  const renderItem = useCallback<RenderItem>(
+    (renderProps: RenderItemParam) =>
+      renderColumn({
+        domRef: renderProps.domRef,
+        columnWidth: renderProps.itemSize,
+        columnIndex: renderProps.itemIndex,
+      }),
+    [renderColumn],
+  );
+
+  const domProps: React.HTMLProps<HTMLDivElement> = {
+    style,
+    className: join(
+      className,
+      rootClassName,
+      `${rootClassName}--horizontal`,
+      VirtualListCls,
+      VirtualListClsOrientation.horizontal,
+      ...defaultClasses,
+    ),
+  };
+
+  if (__DEV__) {
+    (domProps as any)['data-cmp-name'] = 'ColumnListWithExternalScrolling';
+  }
+
+  return (
+    <div {...domProps}>
+      <RawList brain={brain} renderItem={renderItem} repaintId={repaintId} />
+    </div>
+  );
+};

package/src/components/VirtualList/InfiniteListRootClassName.ts

@@ -0,0 +1 @@
+export const InfiniteListRootClassName = 'InfiniteList';

package/src/components/VirtualList/RowListWithExternalScrolling.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { useEffect, CSSProperties, useCallback, useRef } from 'react';
+
+import { join } from '../../utils/join';
+import { VirtualBrain } from '../VirtualBrain';
+
+import type { RenderRow } from './types';
+import type { ScrollPosition } from '../types/ScrollPosition';
+import type { RenderItem, RenderItemParam } from '../RawList/types';
+import { RawList } from '../RawList';
+import { OnMountProps, useOnMount } from '../hooks/useOnMount';
+import { VirtualListCls, VirtualListClsOrientation } from './VirtualList.css';
+import {
+  position,
+  transform,
+  willChange,
+} from '../InfiniteTable/utilities.css';
+import { InfiniteListRootClassName } from './InfiniteListRootClassName';
+
+const rootClassName = InfiniteListRootClassName;
+const defaultClasses = [
+  willChange.transform,
+  position.relative,
+  transform.translateZero,
+];
+
+export type RowListWithExternalScrollingListProps = {
+  brain: VirtualBrain;
+  renderRow: RenderRow;
+
+  repaintId?: number | string;
+  updateScroll?: (node: HTMLElement, scrollPosition: ScrollPosition) => void;
+
+  style?: CSSProperties;
+  className?: string;
+} & OnMountProps;
+
+export const RowListWithExternalScrolling = (
+  props: RowListWithExternalScrollingListProps,
+) => {
+  const {
+    renderRow,
+    repaintId,
+
+    brain,
+    updateScroll,
+
+    style,
+    className,
+
+    onMount,
+    onUnmount,
+  } = props;
+
+  const domRef = useRef<HTMLDivElement>(null);
+
+  const renderItem = useCallback<RenderItem>(
+    (renderProps: RenderItemParam) =>
+      renderRow({
+        domRef: renderProps.domRef,
+        rowHeight: renderProps.itemSize,
+        rowIndex: renderProps.itemIndex,
+      }),
+    [renderRow],
+  );
+
+  useOnMount(domRef, {
+    onMount,
+    onUnmount,
+  });
+
+  useEffect(() => {
+    const onScroll = (scrollPosition: ScrollPosition) => {
+      const node = domRef.current;
+
+      if (node) {
+        if (__DEV__) {
+          const { renderStartIndex, renderEndIndex } = brain.getRenderRange();
+          (node.dataset as any).renderStartIndex = renderStartIndex;
+          (node.dataset as any).renderEndIndex = renderEndIndex;
+          // (node.dataset as any).scrollLeft = scrollPosition.scrollLeft;
+          // (node.dataset as any).scrollTop = scrollPosition.scrollTop;
+        }
+
+        if (updateScroll) {
+          updateScroll(node, scrollPosition);
+        } else {
+          node.style.transform = `translate3d(${-scrollPosition.scrollLeft}px, ${-scrollPosition.scrollTop}px, 0px)`;
+        }
+      }
+    };
+    const removeOnScroll = brain.onScroll(onScroll);
+
+    return () => {
+      removeOnScroll();
+    };
+  }, [brain]);
+
+  const domProps: React.HTMLProps<HTMLDivElement> = {
+    ref: domRef,
+    style,
+    className: join(
+      className,
+      rootClassName,
+      `${rootClassName}--vertical`,
+      VirtualListCls,
+      VirtualListClsOrientation.vertical,
+      ...defaultClasses,
+    ),
+  };
+  if (__DEV__) {
+    (domProps as any)['data-cmp-name'] = 'RowListWithExternalScrolling';
+  }
+
+  return (
+    <div {...domProps}>
+      <RawList brain={brain} renderItem={renderItem} repaintId={repaintId} />
+    </div>
+  );
+};

package/src/components/VirtualList/SpacePlaceholder.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface SpacePlaceholderProps {
+  width: number;
+  height: number;
+  count?: number;
+}
+
+function SpacePlaceholderFn(props: SpacePlaceholderProps) {
+  const { height, width, count } = props;
+
+  const style: React.CSSProperties = {
+    height,
+    width,
+    zIndex: -1,
+    opacity: 0,
+    pointerEvents: 'none',
+    contain: 'strict',
+  };
+
+  return (
+    <div
+      data-count={count}
+      data-placeholder-width={__DEV__ ? width : undefined}
+      data-placeholder-height={__DEV__ ? height : undefined}
+      data-name="SpacePlaceholder"
+      style={style}
+    />
+  );
+}
+
+export const SpacePlaceholder = React.memo(SpacePlaceholderFn);

package/src/components/VirtualList/VirtualList.css.ts

@@ -0,0 +1,29 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import {
+  boxSizingBorderBox,
+  position,
+  transformTranslateZero,
+} from '../InfiniteTable/utilities.css';
+
+export const VirtualListCls = style([
+  position.relative,
+  // THIS IS MANDATORY, in order to make position: fixed children relative to this container
+  transformTranslateZero,
+  boxSizingBorderBox,
+]);
+
+export const VirtualListClsOrientation = styleVariants({
+  horizontal: {},
+  vertical: {
+    display: 'inline-block',
+  },
+});
+
+export const scrollTransformTargetCls = style(
+  {
+    height: 0,
+    width: 0,
+    willChange: 'transform',
+  },
+  'scrollTransformTarget',
+);

package/src/components/VirtualList/VirtualList.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { HTMLProps, useRef, useEffect, useState } from 'react';
+
+import type { VirtualListProps } from './types';
+
+import { join } from '../../utils/join';
+import { SpacePlaceholder } from './SpacePlaceholder';
+import { VirtualScrollContainer } from '../VirtualScrollContainer';
+import { useRerender } from '../hooks/useRerender';
+
+import { dbg } from '../../utils/debug';
+import { RawList } from '../RawList';
+import type { ScrollPosition } from '../types/ScrollPosition';
+import {
+  scrollTransformTargetCls,
+  VirtualListCls,
+  VirtualListClsOrientation,
+} from './VirtualList.css';
+
+const UPDATE_SCROLL = (node: HTMLElement, scrollPosition: ScrollPosition) => {
+  node.style.transform = `translate3d(${-scrollPosition.scrollLeft}px, ${-scrollPosition.scrollTop}px, 0px)`;
+};
+
+const debug = dbg('VirtuaList');
+
+const rootClassName = 'InfiniteList';
+
+export const VirtualList = (
+  props: VirtualListProps & HTMLProps<HTMLDivElement>,
+) => {
+  const {
+    scrollable,
+    outerChildren,
+    itemCrossAxisSize,
+    brain: virtualBrain,
+
+    mainAxisSize,
+
+    sizeRef,
+
+    count,
+    mainAxis,
+    itemMainAxisSize,
+    renderItem,
+    repaintId,
+    onContainerScroll,
+    children,
+    ...restDOMProps
+  } = props;
+
+  const domRef = useRef<HTMLDivElement>(null);
+
+  const [, rerender] = useRerender();
+  const [totalSize, setTotalSize] = useState(0);
+
+  const renderCountRef = useRef<number>(0);
+
+  useEffect(() => {
+    const removeOnRenderCount = virtualBrain.onRenderCountChange(
+      (renderCount) => {
+        renderCountRef.current = renderCount;
+        if (__DEV__) {
+          debug.extend(mainAxis)(`Render count change ${renderCount}`);
+        }
+        rerender();
+      },
+    );
+
+    setTotalSize(virtualBrain.getTotalSize());
+
+    const removeOnTotalSizeChange = virtualBrain.onTotalSizeChange(
+      (totalSize) => {
+        requestAnimationFrame(() => {
+          setTotalSize(totalSize);
+        });
+      },
+    );
+
+    return () => {
+      removeOnRenderCount();
+      removeOnTotalSizeChange();
+    };
+  }, [virtualBrain]);
+
+  useEffect(() => {
+    const onScroll = (scrollPosition: ScrollPosition) => {
+      UPDATE_SCROLL(domRef.current!, scrollPosition);
+    };
+
+    const removeOnScroll = virtualBrain.onScroll(onScroll);
+
+    return removeOnScroll;
+  }, [virtualBrain]);
+
+  const width = mainAxis === 'horizontal' ? totalSize : itemCrossAxisSize ?? 0;
+  const height = mainAxis === 'vertical' ? totalSize : itemCrossAxisSize ?? 0;
+
+  const domProps = {
+    ...restDOMProps,
+    className: join(
+      props.className,
+
+      rootClassName,
+      `${rootClassName}--${mainAxis}`,
+
+      VirtualListCls,
+      VirtualListClsOrientation[mainAxis],
+    ),
+  };
+  if (__DEV__) {
+    (domProps as any)['data-cmp-name'] = `VirtualList`;
+  }
+
+  return (
+    <>
+      <div {...domProps}>
+        <VirtualScrollContainer
+          scrollable={scrollable}
+          onContainerScroll={onContainerScroll}
+        >
+          <div
+            ref={domRef}
+            className={scrollTransformTargetCls}
+            data-name="scroll-transform-target"
+          >
+            <RawList
+              brain={virtualBrain}
+              renderItem={renderItem}
+              repaintId={repaintId}
+              debugChannel={'VirtualList-' + mainAxis}
+            />
+          </div>
+          {children}
+          <SpacePlaceholder count={count} width={width} height={height} />
+        </VirtualScrollContainer>
+
+        {outerChildren}
+      </div>
+    </>
+  );
+};

package/src/components/VirtualList/VirtualRowList.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { HTMLProps } from 'react';
+
+import { VirtualRowListProps } from './types';
+import { VirtualList } from './VirtualList';
+
+import { RenderItem } from '../RawList/types';
+
+export const VirtualRowList = (
+  props: VirtualRowListProps & HTMLProps<HTMLDivElement>,
+) => {
+  const { rowWidth, rowHeight, renderRow, ...listProps } = props;
+
+  const renderItem = React.useCallback<RenderItem>(
+    (renderProps) => {
+      return renderRow({
+        domRef: renderProps.domRef,
+        rowHeight: renderProps.itemSize,
+        rowIndex: renderProps.itemIndex,
+      });
+    },
+    [renderRow],
+  );
+
+  return (
+    <VirtualList
+      {...listProps}
+      renderItem={renderItem}
+      mainAxis="vertical"
+      itemMainAxisSize={rowHeight}
+      itemCrossAxisSize={rowWidth}
+    />
+  );
+};

package/src/components/VirtualList/types.ts

@@ -0,0 +1,56 @@
+import type { MutableRefObject, RefCallback } from 'react';
+
+import type { Renderable } from '../types/Renderable';
+
+import type { Scrollable } from '../VirtualScrollContainer';
+import type { VirtualBrain } from '../VirtualBrain';
+
+import type { RenderItem } from '../RawList/types';
+
+export type OnContainerScrollFn = (scrollInfo: {
+  scrollLeft: number;
+  scrollTop: number;
+}) => void;
+
+interface BaseVirtualListProps {
+  brain: VirtualBrain;
+  count: number;
+  sizeRef?: MutableRefObject<HTMLElement | null>;
+
+  scrollable?: Scrollable;
+  outerChildren?: Renderable;
+  onContainerScroll?: OnContainerScrollFn;
+
+  children?: Renderable;
+  repaintId?: number | string;
+}
+
+export interface VirtualListProps extends BaseVirtualListProps {
+  mainAxis: 'vertical' | 'horizontal';
+  renderItem: RenderItem;
+  itemMainAxisSize: number | ((itemIndex: number) => number);
+
+  mainAxisSize?: number;
+  itemCrossAxisSize?: number;
+}
+
+export type RowHeight = number | ((rowIndex: number) => number);
+
+export interface VirtualRowListProps extends BaseVirtualListProps {
+  renderRow: RenderRow;
+  rowHeight: RowHeight;
+  rowWidth?: number;
+}
+
+export type RenderRowParam = {
+  domRef: RefCallback<HTMLElement>;
+  rowIndex: number;
+  rowHeight: number;
+};
+export type RenderColumnParam = {
+  domRef: RefCallback<HTMLElement>;
+  columnIndex: number;
+  columnWidth: number;
+};
+export type RenderRow = (renderProps: RenderRowParam) => Renderable;
+export type RenderColumn = (renderProps: RenderColumnParam) => Renderable;

package/src/components/VirtualList/useCorrectHeightForRowElements.ts

@@ -0,0 +1,14 @@
+import { useEffect, MutableRefObject } from 'react';
+
+const useCorrectHeightForRowElements = (
+  domElements: MutableRefObject<HTMLDivElement[]>,
+  rowHeight: number,
+) => {
+  useEffect(() => {
+    domElements.current.forEach((el) => {
+      el.style.height = `${rowHeight}px`;
+    });
+  }, [rowHeight]);
+};
+
+export default useCorrectHeightForRowElements;

package/src/components/VirtualScrollContainer/VirtualScrollContainer.css.ts

@@ -0,0 +1,51 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { boxSizingBorderBox } from '../InfiniteTable/utilities.css';
+
+export const VirtualScrollContainerCls = style([
+  boxSizingBorderBox,
+  {
+    backfaceVisibility: 'hidden',
+    WebkitOverflowScrolling: 'touch',
+    outline: 'none',
+
+    /** MANDATORY BLOCK - START **/
+    position: 'fixed',
+    height: '100%',
+    width: '100%',
+    left: 0,
+    top: 0,
+    /** MANDATORY BLOCK - END **/
+  },
+]);
+
+globalStyle(`${VirtualScrollContainerCls} > :first-child`, {
+  position: 'sticky',
+  top: 0,
+  left: 0,
+});
+
+const getOverflowFor = (
+  overflowProperty: 'overflow' | 'overflowX' | 'overflowY',
+) => {
+  return {
+    true: style({
+      [overflowProperty]: 'auto',
+    }),
+    false: style({
+      [overflowProperty]: 'hidden',
+    }),
+    visible: style({
+      [overflowProperty]: 'visible',
+    }),
+    auto: style({
+      [overflowProperty]: 'auto',
+    }),
+    hidden: style({
+      [overflowProperty]: 'hidden',
+    }),
+  };
+};
+
+export const ScrollableCls = getOverflowFor('overflow');
+export const ScrollableHorizontalCls = getOverflowFor('overflowX');
+export const ScrollableVerticalCls = getOverflowFor('overflowY');

package/src/components/VirtualScrollContainer/getScrollableClassName.ts

@@ -0,0 +1,30 @@
+import { join } from '../../utils/join';
+import {
+  ScrollableCls,
+  ScrollableHorizontalCls,
+  ScrollableVerticalCls,
+} from './VirtualScrollContainer.css';
+
+type ScrollType = 'hidden' | 'visible' | 'auto';
+
+export type Scrollable =
+  | boolean
+  | ScrollType
+  | {
+      vertical: boolean | ScrollType;
+      horizontal: boolean | ScrollType;
+    };
+
+export const getScrollableClassName = (scrollable: Scrollable) => {
+  let scrollableClassName = '';
+
+  if (typeof scrollable === 'boolean' || typeof scrollable === 'string') {
+    scrollableClassName = ScrollableCls[`${scrollable}`];
+  } else {
+    scrollableClassName = join(
+      ScrollableHorizontalCls[`${scrollable.horizontal}`],
+      ScrollableVerticalCls[`${scrollable.vertical}`],
+    );
+  }
+  return scrollableClassName;
+};

package/src/components/VirtualScrollContainer/index.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { CSSProperties, Ref, RefObject, useRef } from 'react';
+
+import { useOnScroll } from '../hooks/useOnScroll';
+
+import { getScrollableClassName, Scrollable } from './getScrollableClassName';
+import type { Renderable } from '../types/Renderable';
+import { VirtualScrollContainerCls } from './VirtualScrollContainer.css';
+import { join } from '../../utils/join';
+
+export type { Scrollable };
+
+const rootClassName = 'InfiniteVirtualScrollContainer';
+
+export interface VirtualScrollContainerProps {
+  className?: string;
+  style?: CSSProperties;
+  children?: Renderable;
+
+  scrollable?: Scrollable;
+  tabIndex?: number;
+
+  onContainerScroll?: (scrollPos: {
+    scrollTop: number;
+    scrollLeft: number;
+  }) => void;
+}
+
+export const VirtualScrollContainer = React.forwardRef(
+  function VirtualScrollContainer(
+    props: VirtualScrollContainerProps,
+    ref?: Ref<HTMLDivElement>,
+  ) {
+    const {
+      children,
+      scrollable = true,
+      onContainerScroll,
+      className,
+      tabIndex,
+      style,
+    } = props;
+
+    const domRef = ref ?? useRef<HTMLDivElement | null>(null);
+
+    useOnScroll(domRef as RefObject<HTMLDivElement>, onContainerScroll);
+
+    return (
+      <div
+        ref={domRef}
+        style={style}
+        tabIndex={tabIndex}
+        className={join(
+          className,
+          rootClassName,
+          VirtualScrollContainerCls,
+          getScrollableClassName(scrollable),
+        )}
+      >
+        {children}
+      </div>
+    );
+  },
+);