@infinite-table/infinite-react 0.5.1 → 0.5.2

package/src/components/VirtualList/ColumnListWithExternalScrolling.tsx

@@ -1,78 +0,0 @@
-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

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

package/src/components/VirtualList/RowListWithExternalScrolling.tsx

@@ -1,120 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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>
-    );
-  },
-);