@infinite-table/infinite-react 0.5.0 → 0.5.2

package/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx

@@ -1,457 +0,0 @@
-import * as React from 'react';
-import { useCallback, useContext, useMemo } from 'react';
-
-import { join } from '../../../../utils/join';
-import { stripVar } from '../../../../utils/stripVar';
-import { useDataSourceContextValue } from '../../../DataSource/publicHooks/useDataSource';
-
-import { useCellClassName } from '../../hooks/useCellClassName';
-import { useInfiniteTable } from '../../hooks/useInfiniteTable';
-import { internalProps } from '../../internalProps';
-import { InternalVars } from '../../theme.css';
-
-import type {
-  InfiniteTableColumnRenderParam,
-  InfiniteTableColumnCellContextType,
-  InfiniteTableColumnRenderFunction,
-  InfiniteTableColumnClassName,
-  InfiniteTableColumnStyleFnParams,
-  InfiniteTableColumnStyle,
-} from '../../types/InfiniteTableColumn';
-import { InfiniteTableRowStyleFnParams } from '../../types/InfiniteTableProps';
-import { styleForGroupColumn } from '../../utils/getColumnForGroupBy';
-import { objectValuesExcept } from '../../utils/objectValuesExcept';
-import { RenderCellHookComponent } from '../../utils/RenderHookComponentForInfinite';
-import { ColumnCellRecipe, SelectionCheckboxCls } from '../cell.css';
-import { InfiniteCheckBox } from '../CheckBox';
-import {
-  getColumnRenderingParams,
-  InfiniteTableColumnRenderingContext,
-} from './columnRendering';
-
-import {
-  InfiniteTableCell,
-  InfiniteTableCellClassName,
-} from './InfiniteTableCell';
-import {
-  InfiniteTableCellProps,
-  InfiniteTableColumnCellProps,
-} from './InfiniteTableCellTypes';
-
-const { rootClassName } = internalProps;
-
-const columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex);
-
-export const InfiniteTableColumnCellContext = React.createContext<
-  InfiniteTableColumnCellContextType<any>
->(null as any as InfiniteTableColumnCellContextType<any>);
-
-export const InfiniteTableColumnCellClassName = `${rootClassName}ColumnCell`;
-
-export const defaultRenderSelectionCheckBox: InfiniteTableColumnRenderFunction<
-  any
-> = (params) => {
-  const {
-    rowInfo,
-    selectCurrentRow,
-    deselectCurrentRow,
-    toggleCurrentGroupRowSelection,
-    column,
-  } = params;
-
-  if (rowInfo.isGroupRow && !column.groupByField) {
-    return null;
-  }
-
-  return (
-    <InfiniteCheckBox
-      domProps={{
-        className: SelectionCheckboxCls,
-      }}
-      onChange={(selected) => {
-        if (rowInfo.isGroupRow) {
-          toggleCurrentGroupRowSelection();
-          return;
-        }
-
-        if (selected) {
-          selectCurrentRow();
-        } else {
-          deselectCurrentRow();
-        }
-      }}
-      checked={rowInfo.rowSelected}
-    />
-  );
-};
-
-function applyColumnClassName<T>(
-  columnClassName: InfiniteTableColumnClassName<T>,
-  param: InfiniteTableColumnStyleFnParams<T>,
-) {
-  const colClassName: undefined | string = columnClassName
-    ? typeof columnClassName === 'function'
-      ? columnClassName(param)
-      : columnClassName
-    : undefined;
-
-  return colClassName;
-}
-
-function applyColumnStyle<T>(
-  existingStyle: React.CSSProperties | undefined,
-  columnStyle: InfiniteTableColumnStyle<T>,
-  param: InfiniteTableColumnStyleFnParams<T>,
-) {
-  return typeof columnStyle === 'function'
-    ? { ...existingStyle, ...columnStyle(param) }
-    : { ...existingStyle, ...columnStyle };
-}
-
-function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>) {
-  const {
-    rowInfo,
-    rowStyle,
-    rowClassName,
-
-    // getData,
-    width,
-    column,
-    onMouseLeave,
-    onMouseEnter,
-
-    // toggleGroupRow,
-    rowIndex,
-    rowHeight,
-    columnsMap,
-
-    fieldsToColumn,
-
-    domRef,
-    hidden,
-    showZebraRows,
-  } = props;
-
-  if (!column) {
-    return <div ref={domRef}>no column</div>;
-  }
-
-  const { rowSelected } = rowInfo;
-
-  const { getState, componentActions, imperativeApi } = useInfiniteTable<T>();
-  const { componentState: dataSourceState, getState: getDataSourceState } =
-    useDataSourceContextValue<T>();
-
-  const { activeRowIndex, keyboardNavigation } = getState();
-  const rowActive = rowIndex === activeRowIndex && keyboardNavigation === 'row';
-
-  const renderingContext: InfiniteTableColumnRenderingContext<T> = {
-    getState,
-    getDataSourceState,
-    actions: componentActions,
-    api: imperativeApi,
-  };
-
-  const {
-    stylingParam,
-    renderParams,
-    formattedValueContext,
-    renderFunctions,
-    groupByColumn,
-  } = getColumnRenderingParams({
-    column,
-    rowInfo,
-    columnsMap,
-    fieldsToColumn,
-    context: renderingContext,
-  });
-
-  const renderParam = renderParams as InfiniteTableColumnRenderParam<T>;
-  const renderParamRef =
-    React.useRef<InfiniteTableColumnRenderParam<T>>(renderParam);
-
-  const onClick = useCallback(
-    (event: React.MouseEvent) => {
-      const colIndex = column.computedVisibleIndex;
-
-      getState().cellClick({
-        rowIndex,
-        colIndex,
-        event,
-      });
-    },
-    [rowIndex, column.computedVisibleIndex, keyboardNavigation],
-  );
-
-  const onMouseDown = useCallback(
-    (event: React.MouseEvent) => {
-      const colIndex = column.computedVisibleIndex;
-
-      getState().cellMouseDown({
-        rowIndex,
-        colIndex,
-        event,
-      });
-
-      if (keyboardNavigation === 'row') {
-        componentActions.activeRowIndex = rowIndex;
-        return;
-      }
-      if (keyboardNavigation === 'cell') {
-        componentActions.activeCellIndex = [rowIndex, colIndex];
-      }
-    },
-    [rowIndex, column.computedVisibleIndex, keyboardNavigation],
-  );
-
-  const { selectionMode } = dataSourceState;
-
-  renderParam.domRef = domRef;
-
-  renderParam.selectCurrentRow = useCallback(renderParam.selectCurrentRow, [
-    rowInfo,
-  ]);
-  renderParam.deselectCurrentRow = useCallback(renderParam.deselectCurrentRow, [
-    rowInfo,
-  ]);
-  renderParam.toggleCurrentGroupRow = useCallback(
-    renderParam.toggleCurrentGroupRow,
-    [rowInfo],
-  );
-  renderParam.toggleCurrentRowSelection = useCallback(
-    renderParam.toggleCurrentRowSelection,
-    [rowInfo],
-  );
-  renderParam.toggleCurrentGroupRowSelection = useCallback(
-    renderParam.toggleCurrentGroupRowSelection,
-    [rowInfo],
-  );
-
-  const renderChildren = useCallback(() => {
-    if (hidden) {
-      return null;
-    }
-
-    if (renderFunctions.renderGroupIcon) {
-      renderParam.renderBag.groupIcon = (
-        <RenderCellHookComponent
-          render={renderFunctions.renderGroupIcon}
-          renderParam={{
-            ...renderParam,
-            renderBag: { ...renderParam.renderBag },
-          }}
-        />
-      );
-    }
-    if (
-      renderFunctions.renderSelectionCheckBox &&
-      selectionMode == 'multi-row'
-    ) {
-      // make selectionCheckBox available in the render bag
-      // when we have column.renderSelectionCheckBox defined as a function
-      // as people might want to use the default value
-      // and enhance it
-      renderParam.renderBag.selectionCheckBox = (
-        <RenderCellHookComponent
-          render={defaultRenderSelectionCheckBox}
-          renderParam={renderParam}
-        />
-      );
-
-      if (renderFunctions.renderSelectionCheckBox !== true) {
-        renderParam.renderBag.selectionCheckBox = (
-          <RenderCellHookComponent
-            render={renderFunctions.renderSelectionCheckBox}
-            renderParam={{
-              ...renderParam,
-              renderBag: { ...renderParam.renderBag },
-            }}
-          />
-        );
-      }
-    }
-
-    if (renderFunctions.renderValue) {
-      renderParam.renderBag.value = (
-        <RenderCellHookComponent
-          render={renderFunctions.renderValue}
-          renderParam={{
-            ...renderParam,
-            renderBag: { ...renderParam.renderBag },
-          }}
-        />
-      );
-    }
-
-    if (rowInfo.isGroupRow && renderFunctions.renderGroupValue) {
-      renderParam.renderBag.value = (
-        <RenderCellHookComponent
-          render={renderFunctions.renderGroupValue}
-          renderParam={{
-            ...renderParam,
-            renderBag: { ...renderParam.renderBag },
-          }}
-        />
-      );
-    }
-    if (!rowInfo.isGroupRow && renderFunctions.renderLeafValue) {
-      renderParam.renderBag.value = (
-        <RenderCellHookComponent
-          render={renderFunctions.renderLeafValue}
-          renderParam={{
-            ...renderParam,
-            renderBag: { ...renderParam.renderBag },
-          }}
-        />
-      );
-    }
-
-    renderParamRef.current = renderParam;
-
-    if (column.render) {
-      return (
-        <RenderCellHookComponent
-          render={column.render}
-          renderParam={renderParam}
-        />
-      );
-    }
-
-    return (
-      <>
-        {column.align !== 'end' ? renderParam.renderBag.groupIcon : null}
-        {column.align !== 'end'
-          ? renderParam.renderBag.selectionCheckBox
-          : null}
-        {renderParam.renderBag.value}
-
-        {column.align === 'end'
-          ? renderParam.renderBag.selectionCheckBox
-          : null}
-        {column.align === 'end' ? renderParam.renderBag.groupIcon : null}
-      </>
-    );
-  }, [
-    column,
-    hidden,
-    ...objectValuesExcept(renderParam, {
-      renderBag: true,
-    }),
-  ]);
-
-  const rowPropsAndStyleArgs: InfiniteTableRowStyleFnParams<T> = {
-    ...formattedValueContext,
-    rowIndex,
-  };
-
-  const rowComputedClassName =
-    typeof rowClassName === 'function'
-      ? rowClassName(rowPropsAndStyleArgs)
-      : rowClassName;
-
-  let colClassName: string | undefined = undefined;
-
-  if (groupByColumn?.className) {
-    colClassName = applyColumnClassName(groupByColumn.className, stylingParam);
-  }
-  if (column.className) {
-    colClassName = join(
-      colClassName,
-      applyColumnClassName(column.className, stylingParam),
-    );
-  }
-
-  let style: React.CSSProperties | undefined;
-
-  if (rowInfo.dataSourceHasGrouping && column.groupByField) {
-    style = styleForGroupColumn({ rowInfo });
-  }
-
-  if (rowStyle) {
-    style =
-      typeof rowStyle === 'function'
-        ? { ...style, ...rowStyle(rowPropsAndStyleArgs) }
-        : { ...style, ...rowStyle };
-  }
-
-  if (groupByColumn?.style) {
-    style = applyColumnStyle(style, groupByColumn.style, stylingParam);
-  }
-  if (column.style) {
-    style = applyColumnStyle(style, column.style, stylingParam);
-  }
-  style = style || {};
-
-  style.height = rowHeight;
-  style.zIndex = `var(${columnZIndexAtIndex}-${column.computedVisibleIndex})`;
-
-  const memoizedStyle = useMemo(
-    () => style,
-    [!style ? null : JSON.stringify(style)],
-  );
-
-  const odd =
-    (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
-
-  const zebra = showZebraRows ? (odd ? 'odd' : 'even') : false;
-
-  const cellProps: InfiniteTableCellProps<T> &
-    React.HTMLAttributes<HTMLElement> = {
-    domRef,
-    cellType: 'body',
-    column,
-    width,
-    rowId: rowInfo.id,
-
-    style: memoizedStyle,
-    onMouseLeave,
-    onMouseEnter,
-    onClick,
-    onMouseDown,
-    cssEllipsis: column.cssEllipsis ?? true,
-    className: join(
-      useCellClassName(
-        column,
-        [InfiniteTableColumnCellClassName, InfiniteTableCellClassName],
-        ColumnCellRecipe,
-        {
-          dragging: false,
-          zebra,
-          rowActive,
-          rowSelected,
-          groupRow: rowInfo.isGroupRow,
-          rowExpanded: rowInfo.isGroupRow ? !rowInfo.collapsed : false,
-        },
-      ),
-      colClassName,
-      rowComputedClassName,
-    ),
-    renderChildren,
-  };
-
-  const ContextProvider =
-    InfiniteTableColumnCellContext.Provider as React.Provider<
-      InfiniteTableColumnCellContextType<T>
-    >;
-  return (
-    // this context is here for supporting useInfiniteColumnCell to be used
-    // with a custom column component, specified via column.components.ColumnCell
-    <ContextProvider
-      value={renderParamRef.current as InfiniteTableColumnCellContextType<T>}
-    >
-      <InfiniteTableCell<T> {...cellProps}></InfiniteTableCell>
-    </ContextProvider>
-  );
-}
-
-export const InfiniteTableColumnCell = React.memo(
-  InfiniteTableColumnCellFn,
-) as typeof InfiniteTableColumnCellFn;
-
-export function useInfiniteColumnCell<T>() {
-  const result = useContext(
-    InfiniteTableColumnCellContext,
-  ) as InfiniteTableColumnCellContextType<T>;
-
-  return result;
-}

package/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.tsx

@@ -1,107 +0,0 @@
-//@ts-nocheck - this file is not being used
-import * as React from 'react';
-import { useRef } from 'react';
-
-import { useInfiniteTable } from '../../hooks/useInfiniteTable';
-import { InfiniteTableColumnCell } from './InfiniteTableColumnCell';
-
-import { useRowDOMProps } from './useRowDOMProps';
-
-import { InfiniteTableRowClassName } from './InfiniteTableRowClassName';
-
-import type { InfiniteTableRowProps } from './InfiniteTableRowTypes';
-import { RawList } from '../../../RawList';
-import { RenderItem } from '../../../RawList/types';
-
-function InfiniteTableRowFn<T>(
-  props: InfiniteTableRowProps<T> & React.HTMLAttributes<HTMLDivElement>,
-) {
-  const {
-    rowWidth,
-    rowHeight,
-    getData,
-    rowInfo,
-    toggleGroupRow,
-    rowIndex,
-    //TODO continue here?? receive columnWidth from props
-    brain,
-    columns,
-  } = props;
-  const tableContextValue = useInfiniteTable<T>();
-
-  const { componentState } = tableContextValue;
-  const { domRef: tableDOMRef } = componentState;
-
-  const { groupRenderStrategy } = componentState;
-
-  const { domProps } = useRowDOMProps(
-    props,
-    componentState.rowProps,
-    componentState.rowStyle,
-    componentState.rowClassName,
-    groupRenderStrategy,
-    tableDOMRef,
-  );
-
-  const style = {
-    width: rowWidth,
-    height: rowHeight,
-    ...domProps.style,
-  };
-
-  const renderCellRef = useRef<any>(null);
-
-  const renderCell: RenderItem = React.useCallback(
-    ({ domRef, itemIndex }) => {
-      const column = columns[itemIndex];
-
-      if (!column) {
-        // return null;
-      }
-      // const parentIndex = verticalBrain.getItemSpanParent(rowIndex);
-      const hidden = false; //parentIndex < rowIndex;
-      return (
-        <InfiniteTableColumnCell<T>
-          getData={getData}
-          rowInfo={rowInfo}
-          groupRenderStrategy={groupRenderStrategy}
-          virtualized
-          hidden={hidden}
-          rowHeight={rowHeight}
-          toggleGroupRow={toggleGroupRow}
-          rowIndex={rowIndex}
-          domRef={domRef}
-          column={column}
-        />
-      );
-    },
-    [columns, rowIndex, rowInfo, rowHeight, groupRenderStrategy, getData], // don't add repaintId here since it would make this out-of-sync with the available columns when columnOrder controlled changes
-  );
-
-  if (renderCellRef.current !== renderCell) {
-    renderCellRef.current = renderCell;
-  }
-  // (renderCell as any)._colscount = columns.length;
-  // (renderCell as any)._repaintId = repaintId;
-  // (globalThis as any).renderCell = renderCell;
-
-  if (__DEV__) {
-    (domProps as any)['data-cmp-name'] = 'ITableRow';
-  }
-
-  return (
-    <div {...domProps} style={style}>
-      <RawList
-        brain={brain}
-        renderItem={renderCell}
-        debugChannel={`${rowIndex}`}
-      />
-    </div>
-  );
-}
-
-export const InfiniteTableRow = React.memo(
-  InfiniteTableRowFn,
-) as typeof InfiniteTableRowFn;
-
-export { InfiniteTableRowClassName };

package/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowClassName.ts

@@ -1,6 +0,0 @@
-import { internalProps } from '../../internalProps';
-
-const { rootClassName } = internalProps;
-
-export const InfiniteTableRowClassName = `${rootClassName}Row`;
-export const InfiniteTableRowClassName__hover = `${rootClassName}Element--hover`;

package/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowTypes.ts

@@ -1,32 +0,0 @@
-import type { ScrollPosition } from '../../../types/ScrollPosition';
-import type {
-  InfiniteTableComputedColumn,
-  InfiniteTableRowInfo,
-} from '../../types';
-import { InfiniteTableToggleGroupRowFn } from '../../types/InfiniteTableColumn';
-import { MatrixBrain } from '../../../VirtualBrain/MatrixBrain';
-
-export interface InfiniteTableRowProps<T> {
-  rowHeight: number;
-  rowWidth: number;
-  rowIndex: number;
-  brain: MatrixBrain;
-
-  domRef: React.RefCallback<HTMLElement>;
-  rowInfo: InfiniteTableRowInfo<T>;
-  getData: () => InfiniteTableRowInfo<T>[];
-  toggleGroupRow: InfiniteTableToggleGroupRowFn;
-  repaintId?: number | string;
-  // rowSpan?: VirtualBrainOptions['itemSpan'];
-
-  virtualizeColumns: boolean;
-  showZebraRows?: boolean;
-  showHoverRows?: boolean;
-
-  columns: InfiniteTableComputedColumn<T>[];
-
-  domProps?: React.HTMLAttributes<HTMLDivElement>;
-}
-export type InfiniteTableRowApi = {
-  setScrollPosition: (scrollPosition: ScrollPosition) => void;
-};

package/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowUnvirtualized.tsx

@@ -1,75 +0,0 @@
-//@ts-nocheck - this file is not being used
-import * as React from 'react';
-
-import type { InfiniteTableRowProps } from './InfiniteTableRowTypes';
-
-import { InfiniteTableColumnCell } from './InfiniteTableColumnCell';
-import { VirtualBrain } from '../../../VirtualBrain';
-import { useRowDOMProps } from './useRowDOMProps';
-import { useInfiniteTable } from '../../hooks/useInfiniteTable';
-
-function TableRowUnvirtualizedFn<T>(
-  props: InfiniteTableRowProps<T> & {
-    brain: VirtualBrain | null | undefined;
-    verticalBrain: VirtualBrain;
-  },
-) {
-  const {
-    rowHeight,
-    rowWidth,
-    getData,
-    rowInfo,
-    rowIndex,
-    columns,
-    toggleGroupRow,
-  } = props;
-
-  const tableContextValue = useInfiniteTable<T>();
-
-  const { componentState } = tableContextValue;
-  const { domRef: tableDOMRef } = componentState;
-  const { domProps } = useRowDOMProps(
-    props,
-    componentState.rowProps,
-    componentState.rowStyle,
-    componentState.rowClassName,
-    componentState.groupRenderStrategy,
-    tableDOMRef,
-  );
-
-  const style = {
-    width: rowWidth,
-    height: rowHeight,
-    ...domProps.style,
-  };
-
-  const children = columns.map((col) => {
-    // const parentIndex = verticalBrain.getItemSpanParent(rowIndex);
-    const hidden = false; //parentIndex < rowIndex;
-    return (
-      <InfiniteTableColumnCell<T>
-        key={col.id}
-        virtualized={false}
-        rowHeight={rowHeight}
-        getData={getData}
-        hidden={hidden}
-        groupRenderStrategy={componentState.groupRenderStrategy}
-        toggleGroupRow={toggleGroupRow}
-        rowInfo={rowInfo}
-        rowIndex={rowIndex}
-        column={col}
-      />
-    );
-  });
-
-  return (
-    <div {...domProps} style={style}>
-      {children}
-    </div>
-  );
-}
-
-export const TableRowUnvirtualized = React.memo(
-  TableRowUnvirtualizedFn,
-) as typeof TableRowUnvirtualizedFn;
-// export const TableRow = TableRowUnvirtualizedFn;