@infinite-table/infinite-react 0.5.1 → 0.5.2

package/src/components/HeadlessTable/index.tsx

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

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

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