@infinite-table/infinite-react 0.4.12 → 0.5.0

package/src/components/HeadlessTable/index.tsx

@@ -0,0 +1,234 @@
+import * as React from 'react';
+import {
+  MutableRefObject,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { setupResizeObserver } from '../ResizeObserver';
+
+import type { ScrollPosition } from '../types/ScrollPosition';
+import type { Size } from '../types/Size';
+import type {
+  ReactHeadlessTableRenderer,
+  TableRenderCellFn,
+} from './ReactHeadlessTableRenderer';
+
+import { MatrixBrain, MatrixBrainOptions } from '../VirtualBrain/MatrixBrain';
+import { SpacePlaceholder } from '../VirtualList/SpacePlaceholder';
+import { scrollTransformTargetCls } from '../VirtualList/VirtualList.css';
+import { VirtualScrollContainer } from '../VirtualScrollContainer';
+import { RawTable } from './RawTable';
+import { SubscriptionCallback } from '../types/SubscriptionCallback';
+import { Renderable } from '../types/Renderable';
+import { ActiveRowIndicator } from '../InfiniteTable/components/ActiveRowIndicator';
+import { ActiveCellIndicator } from '../InfiniteTable/components/ActiveCellIndicator';
+
+export type HeadlessTableProps = {
+  scrollerDOMRef?: MutableRefObject<HTMLElement | null>;
+  brain: MatrixBrain;
+  renderCell: TableRenderCellFn;
+  activeRowIndex?: number | null;
+  activeCellIndex?: [number, number] | null;
+  scrollStopDelay?: number;
+  cellHoverClassNames?: string[];
+  renderer?: ReactHeadlessTableRenderer;
+  onRenderUpdater?: SubscriptionCallback<Renderable>;
+};
+
+export function useMatrixBrainLazy(
+  brain: MatrixBrain,
+  brainOptions: Partial<MatrixBrainOptions>,
+  fixedCellsInfo: {
+    fixedColsStart?: number;
+    fixedColsEnd?: number;
+    fixedRowsStart?: number;
+    fixedRowsEnd?: number;
+  },
+) {
+  useEffect(() => {
+    brain.updateFixedCells({
+      fixedColsStart: fixedCellsInfo.fixedColsStart,
+      fixedColsEnd: fixedCellsInfo.fixedColsEnd,
+      fixedRowsStart: fixedCellsInfo.fixedRowsStart,
+      fixedRowsEnd: fixedCellsInfo.fixedRowsEnd,
+    });
+  }, [
+    fixedCellsInfo.fixedColsStart,
+    fixedCellsInfo.fixedColsEnd,
+    fixedCellsInfo.fixedRowsStart,
+    fixedCellsInfo.fixedRowsEnd,
+    brain,
+  ]);
+
+  useEffect(() => {
+    brain.update({
+      height: brainOptions.height,
+      width: brainOptions.width,
+
+      cols: brainOptions.cols,
+      rows: brainOptions.rows,
+
+      colWidth: brainOptions.colWidth,
+      rowHeight: brainOptions.rowHeight,
+
+      rowspan: brainOptions.rowspan,
+      colspan: brainOptions.colspan,
+    });
+  }, [
+    brainOptions.height,
+    brainOptions.width,
+
+    brainOptions.cols,
+    brainOptions.rows,
+
+    brainOptions.colspan,
+    brainOptions.rowspan,
+
+    brainOptions.colWidth,
+    brainOptions.rowHeight,
+
+    brain,
+  ]);
+}
+
+export function useMatrixBrain(
+  brain: MatrixBrain,
+  brainOptions: Partial<MatrixBrainOptions>,
+  fixedCellsInfo?: {
+    fixedColsStart?: number;
+    fixedColsEnd?: number;
+    fixedRowsStart?: number;
+    fixedRowsEnd?: number;
+  },
+) {
+  if (
+    fixedCellsInfo &&
+    (fixedCellsInfo.fixedColsStart ||
+      fixedCellsInfo.fixedColsEnd ||
+      fixedCellsInfo.fixedRowsStart ||
+      fixedCellsInfo.fixedRowsEnd)
+  ) {
+    brain.updateFixedCells({
+      fixedColsStart: fixedCellsInfo.fixedColsStart,
+      fixedColsEnd: fixedCellsInfo.fixedColsEnd,
+      fixedRowsStart: fixedCellsInfo.fixedRowsStart,
+      fixedRowsEnd: fixedCellsInfo.fixedRowsEnd,
+    });
+  }
+
+  brain.update({
+    height: brainOptions.height,
+    width: brainOptions.width,
+
+    cols: brainOptions.cols,
+    rows: brainOptions.rows,
+
+    colWidth: brainOptions.colWidth,
+    rowHeight: brainOptions.rowHeight,
+
+    rowspan: brainOptions.rowspan,
+    colspan: brainOptions.colspan,
+  });
+}
+export function HeadlessTable(
+  props: HeadlessTableProps & React.HTMLProps<HTMLDivElement>,
+) {
+  const {
+    brain,
+    scrollerDOMRef,
+    scrollStopDelay,
+    renderCell,
+    cellHoverClassNames,
+    renderer,
+    activeRowIndex,
+    activeCellIndex,
+    onRenderUpdater,
+    ...domProps
+  } = props;
+
+  const domRef = useRef<HTMLDivElement>(null);
+
+  const [scrollSize, setTotalScrollSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (scrollStopDelay != null) {
+      brain.setScrollStopDelay(scrollStopDelay);
+    }
+  }, [scrollStopDelay, brain]);
+
+  useEffect(() => {
+    const node = domRef.current?.parentNode as HTMLElement;
+    if (!node) {
+      return;
+    }
+    const onResize = () => {
+      // it's not enough to read the size from onResize
+      // since that doesn't account for scrollbar presence and size
+      // so we need to read it from the DOM from clientWidth/clientHeight
+      const size: Size = {
+        height: node.clientHeight,
+        width: node.clientWidth,
+      };
+
+      brain.update(size);
+    };
+    const remove = setupResizeObserver(node, onResize, { debounce: 50 });
+
+    return remove;
+  }, []);
+
+  const onContainerScroll = useCallback(
+    (scrollPos: ScrollPosition) => {
+      brain.setScrollPosition(scrollPos, (scrollPos) => {
+        domRef.current!.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
+      });
+    },
+    [brain],
+  );
+
+  useEffect(() => {
+    const removeOnRenderCount = brain.onRenderCountChange(() => {
+      setTotalScrollSize(brain.getTotalSize());
+    });
+
+    setTotalScrollSize(brain.getTotalSize());
+
+    return removeOnRenderCount;
+  }, [brain]);
+
+  return (
+    <VirtualScrollContainer
+      onContainerScroll={onContainerScroll}
+      {...domProps}
+      ref={scrollerDOMRef as RefObject<HTMLDivElement>}
+    >
+      <div
+        ref={domRef}
+        className={scrollTransformTargetCls}
+        data-name="scroll-transform-target"
+      >
+        <RawTable
+          renderer={renderer}
+          onRenderUpdater={onRenderUpdater}
+          renderCell={renderCell}
+          brain={brain}
+          cellHoverClassNames={cellHoverClassNames}
+        />
+        <ActiveCellIndicator brain={brain} activeCellIndex={activeCellIndex} />
+      </div>
+      <ActiveRowIndicator brain={brain} activeRowIndex={activeRowIndex} />
+
+      <SpacePlaceholder
+        width={scrollSize.width}
+        height={scrollSize.height}
+      ></SpacePlaceholder>
+    </VirtualScrollContainer>
+  );
+}

package/src/components/InfiniteTable/InfiniteCls.css.ts

@@ -0,0 +1,164 @@
+import { fallbackVar, style, styleVariants } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { InternalVars, ThemeVars } from './theme.css';
+
+import {
+  boxSizingBorderBox,
+  cursor,
+  top,
+  display,
+  flexFlow,
+  pointerEvents,
+  position,
+  userSelect,
+  visibility,
+  width,
+  zIndex,
+} from './utilities.css';
+
+export const InfiniteCls = style([
+  position.relative,
+  display.flex,
+  flexFlow.column,
+  {
+    outline: 'none',
+    fontFamily: ThemeVars.fontFamily,
+    color: ThemeVars.color.color,
+    background: ThemeVars.background,
+    minHeight: ThemeVars.minHeight,
+  },
+  boxSizingBorderBox,
+]);
+
+export const InfiniteClsScrolling = style(
+  {
+    vars: {
+      [ThemeVars.components.Row.pointerEventsWhileScrolling]: 'none',
+    },
+  },
+  'InfiniteClsScrolling',
+);
+
+const activeCellBorderVarsForUnfocusedState = {
+  // we adjust the alpha opacity for the background
+  [ThemeVars.components.Cell
+    .activeBackgroundAlpha]: `${ThemeVars.components.Cell.activeBackgroundAlphaWhenTableUnfocused}`,
+  [ThemeVars.components.Row.activeBackgroundAlpha]: fallbackVar(
+    ThemeVars.components.Row.activeBackgroundAlphaWhenTableUnfocused,
+    ThemeVars.components.Cell.activeBackgroundAlphaWhenTableUnfocused,
+  ),
+};
+export const InfiniteClsRecipe = recipe({
+  variants: {
+    focused: {
+      true: {},
+      false: {},
+    },
+    focusedWithin: {
+      true: {},
+      false: {},
+    },
+    hasPinnedStart: {
+      true: {},
+      false: {},
+    },
+    hasPinnedEnd: {
+      true: {},
+      false: {},
+    },
+    hasPinnedStartOverflow: {
+      true: {},
+      false: {},
+    },
+    hasPinnedEndOverflow: {
+      true: {},
+      false: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        focused: false,
+        focusedWithin: false,
+      },
+      style: {
+        vars: activeCellBorderVarsForUnfocusedState,
+      },
+    },
+  ],
+});
+
+export const PinnedRowsClsVariants = styleVariants({
+  pinnedStart: {},
+  pinnedEnd: {},
+  overflow: {},
+});
+export const PinnedRowsContainerClsVariants = recipe({
+  variants: {
+    pinned: {
+      start: {
+        borderRight: [ThemeVars.components.Cell.border],
+      },
+      end: {
+        borderLeft: [ThemeVars.components.Cell.border],
+      },
+      false: {},
+    },
+  },
+});
+
+export const InfiniteClsShiftingColumns = style(
+  {
+    userSelect: 'none',
+  },
+  'shiftingcols',
+);
+
+export const FooterCls = style([position.relative]);
+
+export const InfiniteClsHasPinnedStart = style({});
+export const InfiniteClsHasPinnedEnd = style({});
+
+export const PinnedIndicatorCls = style([
+  position.absolute,
+  top[0],
+  cursor.colResize,
+  userSelect.none,
+  width[0],
+  visibility.hidden,
+  pointerEvents['none'],
+  zIndex[10_000_000],
+  {
+    // zIndex: InternalVars.baseZIndexForCells,
+    transform: `translate3d(-100%, 0px, 0px)`,
+    borderRight: ThemeVars.components.Cell.pinnedBorder,
+    bottom: InternalVars.scrollbarWidthHorizontal,
+  },
+]);
+export const PinnedStartIndicatorBorder = style([
+  PinnedIndicatorCls,
+  {
+    left: InternalVars.pinnedStartWidth,
+
+    selectors: {
+      [`${InfiniteClsHasPinnedStart} &`]: {
+        visibility: 'visible',
+      },
+    },
+  },
+]);
+
+export const PinnedEndIndicatorBorder = style([
+  PinnedIndicatorCls,
+
+  {
+    // right: `calc( ${InternalVars.pinnedEndWidth} + ${InternalVars.scrollbarWidthVertical})`,
+    left: `calc( ${InternalVars.pinnedEndOffset} )`,
+
+    selectors: {
+      [`${InfiniteClsHasPinnedEnd} &`]: {
+        visibility: 'visible',
+      },
+    },
+  },
+]);

package/src/components/InfiniteTable/InfiniteTableContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+import { InfiniteTableContextValue } from './types/InfiniteTableContextValue';
+
+let TableContext: any;
+
+export function getInfiniteTableContext<T>(): React.Context<
+  InfiniteTableContextValue<T>
+> {
+  if (TableContext as React.Context<InfiniteTableContextValue<T>>) {
+    return TableContext;
+  }
+
+  return (TableContext = createContext<InfiniteTableContextValue<T>>(
+    null as any as InfiniteTableContextValue<T>,
+  ));
+}