@infinite-table/infinite-react 0.4.13 → 0.5.0

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

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

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

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

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

@@ -0,0 +1,75 @@
+//@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;