@infinite-table/infinite-react 0.4.12 → 0.5.0

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

@@ -0,0 +1,263 @@
+import { DataSourceState } from '../../../DataSource';
+import {
+  InfiniteTableApi,
+  InfiniteTableColumn,
+  InfiniteTableColumnRenderParam,
+  InfiniteTableComputedColumn,
+  InfiniteTableRowInfo,
+  InfiniteTableState,
+} from '../../types';
+import {
+  InfiniteTableColumnValueFormatterParams,
+  InfiniteTableColumnWithField,
+} from '../../types/InfiniteTableColumn';
+import { InfiniteTableActions } from '../../types/InfiniteTableState';
+
+function isColumnWithField<T>(
+  c: InfiniteTableColumn<T>,
+): c is InfiniteTableColumnWithField<T> & InfiniteTableColumn<T> {
+  return typeof (c as InfiniteTableColumnWithField<T>).field === 'string';
+}
+
+export type InfiniteTableColumnRenderingContext<T> = {
+  getState: () => InfiniteTableState<T>;
+  getDataSourceState: () => DataSourceState<T>;
+  actions: InfiniteTableActions<T>;
+  api: InfiniteTableApi<T>;
+};
+
+export function getGroupByColumn<T>(options: {
+  rowInfo: InfiniteTableRowInfo<T>;
+  column: InfiniteTableComputedColumn<T>;
+  fieldsToColumn: Map<keyof T, InfiniteTableComputedColumn<T>>;
+}) {
+  const { column, rowInfo, fieldsToColumn } = options;
+  let groupByColumn: InfiniteTableComputedColumn<T> | undefined = undefined;
+  if (column.groupByField) {
+    if (rowInfo.isGroupRow) {
+      groupByColumn = fieldsToColumn.get(
+        rowInfo.groupBy[rowInfo.groupBy.length - 1],
+      );
+    } else if (column.field) {
+      groupByColumn = fieldsToColumn.get(column.field);
+    }
+  }
+
+  return groupByColumn;
+}
+
+export function getColumnRenderingParams<T>(options: {
+  column: InfiniteTableComputedColumn<T>;
+  rowInfo: InfiniteTableRowInfo<T>;
+  columnsMap: Map<string, InfiniteTableComputedColumn<T>>;
+  fieldsToColumn: Map<keyof T, InfiniteTableComputedColumn<T>>;
+  context: InfiniteTableColumnRenderingContext<T>;
+}) {
+  const { column } = options;
+  const groupByColumn = getGroupByColumn(options);
+
+  const formattedResult = getFormattedValueContextForCell({
+    ...options,
+    column: groupByColumn || column,
+  });
+  const { formattedValueContext } = formattedResult;
+
+  return {
+    stylingParam: {
+      column: options.column,
+      ...formattedValueContext,
+    },
+    formattedValueContext,
+    renderFunctions: {
+      renderGroupIcon: column.renderGroupIcon || groupByColumn?.renderGroupIcon,
+      renderSelectionCheckBox: column.renderSelectionCheckBox,
+      renderValue: column.renderValue || groupByColumn?.renderValue,
+      renderGroupValue:
+        column.renderGroupValue || groupByColumn?.renderGroupValue,
+      renderLeafValue: column.renderLeafValue || groupByColumn?.renderLeafValue,
+    },
+    renderParams: getColumnRenderParam({
+      ...options,
+
+      formattedValueContext,
+    }),
+    groupByColumn,
+  };
+}
+
+export function getColumnRenderParam<T>(options: {
+  column: InfiniteTableComputedColumn<T>;
+  rowInfo: InfiniteTableRowInfo<T>;
+  formattedValueContext: InfiniteTableColumnValueFormatterParams<T>;
+  columnsMap: Map<string, InfiniteTableComputedColumn<T>>;
+  fieldsToColumn: Map<keyof T, InfiniteTableComputedColumn<T>>;
+
+  context: InfiniteTableColumnRenderingContext<T>;
+}) {
+  const {
+    column,
+    context,
+    rowInfo,
+    columnsMap,
+    fieldsToColumn,
+    formattedValueContext,
+  } = options;
+  const { value } = formattedValueContext;
+  const { api: imperativeApi, getDataSourceState } = context;
+
+  const { indexInAll: rowIndex } = rowInfo;
+
+  const dataSourceState = getDataSourceState();
+  const { selectionMode } = dataSourceState;
+
+  const groupByColumn = getGroupByColumn({ rowInfo, column, fieldsToColumn });
+
+  const toggleGroupRow = imperativeApi.toggleGroupRow;
+
+  const renderParam: Omit<InfiniteTableColumnRenderParam<T>, 'domRef'> = {
+    column,
+    columnsMap,
+    fieldsToColumn,
+
+    ...formattedValueContext,
+    groupByColumn,
+    selectionMode,
+    api: imperativeApi,
+    selectRow: imperativeApi.selectionApi.selectRow,
+    deselectRow: imperativeApi.selectionApi.deselectRow,
+    toggleRowSelection: imperativeApi.selectionApi.toggleRowSelection,
+    toggleGroupRowSelection: imperativeApi.selectionApi.toggleGroupRowSelection,
+    renderBag: {
+      value,
+      selectionCheckBox: null,
+      groupIcon: null,
+    },
+
+    selectCurrentRow: () => {
+      return imperativeApi.selectionApi.selectRow(
+        rowInfo.id,
+        rowInfo.dataSourceHasGrouping ? rowInfo.groupKeys : undefined,
+      );
+    },
+    deselectCurrentRow: () => {
+      return imperativeApi.selectionApi.deselectRow(
+        rowInfo.id,
+        rowInfo.dataSourceHasGrouping ? rowInfo.groupKeys : undefined,
+      );
+    },
+    rowIndex,
+    toggleGroupRow,
+    toggleCurrentGroupRow: () => {
+      if (!rowInfo.isGroupRow) {
+        return;
+      }
+
+      toggleGroupRow(rowInfo.groupKeys!);
+    },
+
+    toggleCurrentRowSelection: () => {
+      if (rowInfo.isGroupRow) {
+        return;
+      }
+      return imperativeApi.selectionApi.toggleRowSelection(rowInfo.id);
+    },
+
+    toggleCurrentGroupRowSelection: () => {
+      if (!rowInfo.isGroupRow) {
+        return;
+      }
+      return imperativeApi.selectionApi.toggleGroupRowSelection(
+        rowInfo.isGroupRow ? rowInfo.groupKeys : [],
+      );
+    },
+    rootGroupBy: dataSourceState.groupBy,
+    pivotBy: dataSourceState.pivotBy,
+  };
+
+  return renderParam;
+}
+
+export function getRawValueForCell<T>(
+  column: InfiniteTableComputedColumn<T>,
+  rowInfo: InfiniteTableRowInfo<T>,
+) {
+  const { data, isGroupRow, dataSourceHasGrouping } = rowInfo;
+  const groupBy = dataSourceHasGrouping ? rowInfo.groupBy : undefined;
+
+  let value =
+    isGroupRow && groupBy && column.groupByField
+      ? rowInfo.value
+      : isColumnWithField(column)
+      ? data?.[column.field]
+      : null;
+
+  if (column.valueGetter) {
+    if (!rowInfo.isGroupRow && rowInfo.data) {
+      value = column.valueGetter({ data: rowInfo.data, field: column.field });
+    }
+  }
+
+  return value;
+}
+
+export function getFormattedValueParamForCell<T>(
+  value: any,
+  column: InfiniteTableComputedColumn<T>,
+  rowInfo: InfiniteTableRowInfo<T>,
+  context: InfiniteTableColumnRenderingContext<T>,
+) {
+  const { rowSelected, indexInAll: rowIndex } = rowInfo;
+  const { activeRowIndex, keyboardNavigation } = context.getState();
+  const rowActive = rowIndex === activeRowIndex && keyboardNavigation === 'row';
+
+  // TS hack to discriminate between the grouped vs non-grouped rows
+  return rowInfo.isGroupRow
+    ? {
+        rowInfo,
+        isGroupRow: rowInfo.isGroupRow,
+        data: rowInfo.data,
+        rowSelected,
+        rowActive,
+        value,
+        field: column.field,
+      }
+    : {
+        rowInfo,
+        isGroupRow: rowInfo.isGroupRow,
+        data: rowInfo.data,
+        rowSelected,
+        rowActive,
+        value,
+        field: column.field,
+      };
+}
+
+export function getFormattedValueContextForCell<T>(options: {
+  column: InfiniteTableComputedColumn<T>;
+  rowInfo: InfiniteTableRowInfo<T>;
+  columnsMap: Map<string, InfiniteTableComputedColumn<T>>;
+  context: InfiniteTableColumnRenderingContext<T>;
+}): {
+  formattedValueContext: InfiniteTableColumnValueFormatterParams<T>;
+  formattedValue: any;
+} {
+  const { column, rowInfo, context } = options;
+  const rawValue = getRawValueForCell(column, rowInfo);
+  const formattedValueContext = getFormattedValueParamForCell(
+    rawValue,
+    column,
+    rowInfo,
+    context,
+  );
+
+  const formattedValue: any = column.valueFormatter
+    ? column.valueFormatter(formattedValueContext)
+    : rawValue;
+
+  formattedValueContext.value = formattedValue;
+
+  return {
+    formattedValue,
+    formattedValueContext,
+  };
+}

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

@@ -0,0 +1 @@
+export * from './InfiniteTableRow';

package/src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts

@@ -0,0 +1,74 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { ThemeVars } from '../../theme.css';
+
+const RowCls = style({
+  willChange: 'transform',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  pointerEvents: ThemeVars.components.Row.pointerEventsWhileScrolling,
+  [ThemeVars.components.ColumnCell.background.slice(4, -1)]:
+    ThemeVars.components.Row.background,
+});
+
+const groupRowStyle = {
+  zIndex: 100,
+};
+
+export const RowHoverCls = style({
+  vars: {
+    [ThemeVars.components.Row.background]:
+      ThemeVars.components.Row.hoverBackground,
+    [ThemeVars.components.Row.selectedBackground]:
+      ThemeVars.components.Row.selectedHoverBackground,
+    [ThemeVars.components.Row.oddBackground]:
+      ThemeVars.components.Row.hoverBackground,
+  },
+});
+
+export const RowClsRecipe = recipe({
+  base: RowCls,
+  variants: {
+    zebra: {
+      false: {},
+      even: {
+        background: ThemeVars.components.Row.background,
+      },
+      odd: {
+        background: ThemeVars.components.Row.oddBackground,
+      },
+    },
+    groupRow: {
+      true: {
+        ...groupRowStyle,
+      },
+      false: {},
+    },
+    inlineGroupRow: {
+      true: { ...groupRowStyle },
+      false: {},
+    },
+    showHoverRows: {
+      true: {},
+      false: {},
+    },
+  },
+});
+
+export const GroupRowExpanderCls = recipe({
+  variants: {
+    align: {
+      start: {
+        paddingInlineStart: `calc(${ThemeVars.components.Row.groupNesting} * ${ThemeVars.components.Row.groupRowColumnNesting})`,
+      },
+      center: {
+        paddingInlineStart: `calc(${ThemeVars.components.Row.groupNesting} * ${ThemeVars.components.Row.groupRowColumnNesting})`,
+      },
+      end: {
+        paddingInlineEnd: `calc(${ThemeVars.components.Row.groupNesting} * ${ThemeVars.components.Row.groupRowColumnNesting})`,
+      },
+    },
+  },
+});

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

@@ -0,0 +1,199 @@
+//@ts-nocheck
+import {
+  CSSProperties,
+  MutableRefObject,
+  RefCallback,
+  useCallback,
+  useRef,
+} from 'react';
+
+import { join } from '../../../../utils/join';
+import { stripVar } from '../../../../utils/stripVar';
+import { ThemeVars } from '../../theme.css';
+import { InfiniteTableRowStyleFnParams } from '../../types/InfiniteTableProps';
+import { InfiniteTableState } from '../../types/InfiniteTableState';
+
+import {
+  InfiniteTableRowClassName,
+  InfiniteTableRowClassName__hover,
+} from './InfiniteTableRowClassName';
+import type { InfiniteTableRowProps } from './InfiniteTableRowTypes';
+import { RowClsRecipe, RowHoverCls } from './row.css';
+
+export type TableRowHTMLAttributes = React.HTMLAttributes<HTMLDivElement> & {
+  'data-virtualize-columns': 'on' | 'off';
+  'data-hover-index': number;
+  'data-row-index': number;
+  'data-row-id': string;
+  ref: RefCallback<HTMLElement | null>;
+} & any;
+
+export function useRowDOMProps<T>(
+  props: InfiniteTableRowProps<T>,
+  rowProps: InfiniteTableState<T>['rowProps'],
+  rowStyle: InfiniteTableState<T>['rowStyle'],
+  rowClassName: InfiniteTableState<T>['rowClassName'],
+  groupRenderStrategy: InfiniteTableState<T>['groupRenderStrategy'],
+  tableDOMRef: MutableRefObject<HTMLDivElement | null>,
+): {
+  domProps: TableRowHTMLAttributes;
+  domRef: MutableRefObject<HTMLElement | null>;
+} {
+  const domProps = props.domProps;
+  const {
+    showZebraRows = false,
+    showHoverRows = false,
+    rowIndex,
+    domRef: domRefFromProps,
+    rowInfo,
+    rowSpan,
+  } = props;
+
+  const domRef = useRef<HTMLElement | null>(null);
+  const rowDOMRef = useCallback((node) => {
+    domRefFromProps(node);
+    domRef.current = node;
+  }, []);
+
+  // TS hack to discriminate between for grouped vs non-grouped rows
+  const rest = rowInfo.isGroupRow
+    ? { data: rowInfo.data, rowInfo }
+    : { data: rowInfo.data, rowInfo };
+
+  const rowPropsAndStyleArgs: InfiniteTableRowStyleFnParams<T> = {
+    ...rest,
+    rowIndex,
+  };
+
+  if (typeof rowProps === 'function') {
+    rowProps = rowProps(rowPropsAndStyleArgs);
+  }
+
+  let style: CSSProperties | undefined = rowProps ? rowProps.style : undefined;
+
+  const inlineGroupRoot =
+    groupRenderStrategy === 'inline' && rowInfo.indexInGroup === 0;
+
+  if (rowStyle) {
+    style =
+      typeof rowStyle === 'function'
+        ? { ...style, ...rowStyle(rowPropsAndStyleArgs) }
+        : { ...style, ...rowStyle };
+  }
+
+  if (inlineGroupRoot || rowSpan) {
+    style = style || {};
+    //TODO remove this harcoded value - should be datasource size - ...
+    style.zIndex = 2_000_000 - rowInfo.indexInAll;
+  }
+
+  const odd =
+    (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
+
+  const rowComputedClassName =
+    typeof rowClassName === 'function'
+      ? rowClassName(rowPropsAndStyleArgs)
+      : rowClassName;
+
+  const className = join(
+    InfiniteTableRowClassName,
+
+    RowClsRecipe({
+      groupRow: rowInfo.isGroupRow,
+      inlineGroupRow: inlineGroupRoot,
+      zebra: showHoverRows ? (odd ? 'odd' : 'even') : false,
+      showHoverRows,
+    }),
+    `${InfiniteTableRowClassName}--${
+      rowInfo.isGroupRow ? 'group' : 'normal'
+    }-row`,
+
+    inlineGroupRoot ? `${InfiniteTableRowClassName}--inline-group-row` : '',
+    showZebraRows
+      ? `${InfiniteTableRowClassName}--${odd ? 'odd' : 'even'}`
+      : null,
+    showHoverRows ? `${InfiniteTableRowClassName}--show-hover` : null,
+    domProps?.className,
+    rowProps?.className,
+    rowComputedClassName,
+  );
+
+  const initialMouseEnter = rowProps?.onMouseEnter;
+  const initialMouseLeave = rowProps?.onMouseLeave;
+
+  // const parentIndex = brain.getItemSpanParent(rowIndex);
+  // const covered = parentIndex !== rowIndex;
+
+  const onMouseEnter = useCallback(
+    (event) => {
+      initialMouseEnter?.(event);
+
+      const rowIndex = event.currentTarget?.dataset.rowIndex * 1;
+
+      const parentNode = tableDOMRef.current;
+
+      if (!parentNode || !showHoverRows) {
+        return;
+      }
+
+      const hoverSelector = [
+        `.${InfiniteTableRowClassName}[data-hover-index="${rowIndex}"]`,
+      ];
+
+      const rows = parentNode.querySelectorAll(hoverSelector.join(','));
+
+      rows.forEach((row) =>
+        row.classList.add(InfiniteTableRowClassName__hover, RowHoverCls),
+      );
+    },
+    [initialMouseEnter, showHoverRows],
+  );
+
+  const onMouseLeave = useCallback(
+    (event) => {
+      initialMouseLeave?.(event);
+
+      const rowIndex = event.currentTarget?.dataset.rowIndex;
+
+      const parentNode = tableDOMRef.current;
+
+      if (!parentNode || !showHoverRows) {
+        return;
+      }
+
+      const hoverSelector = [
+        `.${InfiniteTableRowClassName}[data-hover-index="${rowIndex}"]`,
+      ];
+      const rows = parentNode.querySelectorAll(hoverSelector.join(','));
+      rows.forEach((row) =>
+        row.classList.remove(InfiniteTableRowClassName__hover, RowHoverCls),
+      );
+    },
+    [initialMouseLeave, showHoverRows],
+  );
+
+  if (rowInfo.dataSourceHasGrouping) {
+    style = style || {};
+    //@ts-ignore
+    style[stripVar(ThemeVars.components.Row.groupNesting)] =
+      rowInfo.groupNesting! - 1;
+  }
+  return {
+    domRef,
+    domProps: {
+      ...rowProps,
+      ...domProps,
+      style,
+      'data-virtualize-columns': props.virtualizeColumns ? 'on' : 'off',
+      'data-row-index': rowIndex,
+
+      // 'data-hover-index': covered ? null : rowIndex,
+      'data-hover-index': rowIndex,
+      'data-row-id': `${rowInfo.id}`,
+      className,
+      onMouseEnter,
+      onMouseLeave,
+      ref: rowDOMRef,
+    },
+  };
+}

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

@@ -0,0 +1,34 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import { ThemeVars } from '../theme.css';
+import { absoluteCover } from '../utilities.css';
+
+const LoadMaskBaseCls = style([
+  {
+    flexFlow: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  absoluteCover,
+]);
+
+export const LoadMaskCls = styleVariants({
+  visible: [LoadMaskBaseCls, { display: 'flex' }],
+  hidden: [LoadMaskBaseCls, { display: 'none' }],
+});
+export const LoadMaskOverlayCls = style([
+  absoluteCover,
+  {
+    background: ThemeVars.components.LoadMask.overlayBackground,
+    opacity: ThemeVars.components.LoadMask.overlayOpacity,
+  },
+]);
+
+export const LoadMaskTextCls = style({
+  position: 'relative',
+
+  padding: ThemeVars.components.LoadMask.padding,
+  color: ThemeVars.components.LoadMask.color,
+  background: ThemeVars.components.LoadMask.textBackground,
+  borderRadius: ThemeVars.components.LoadMask.borderRadius,
+});

package/src/components/InfiniteTable/components/LoadMask.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {
+  LoadMaskCls,
+  LoadMaskOverlayCls,
+  LoadMaskTextCls,
+} from './LoadMask.css';
+import { internalProps } from '../internalProps';
+
+import { LoadMaskProps } from '../types/InfiniteTableProps';
+
+const { rootClassName } = internalProps;
+const baseCls = `${rootClassName}-LoadMask`;
+
+function LoadMaskFn(props: LoadMaskProps) {
+  const { visible, children = 'Loading' } = props;
+
+  return (
+    <div
+      className={`${LoadMaskCls[visible ? 'visible' : 'hidden']} ${baseCls}`}
+    >
+      <div className={`${LoadMaskOverlayCls} ${baseCls}-Overlay`}></div>
+      <div className={`${LoadMaskTextCls} ${baseCls}-Text`}>{children}</div>
+    </div>
+  );
+}
+
+export const LoadMask = React.memo(LoadMaskFn) as typeof LoadMaskFn;

package/src/components/InfiniteTable/components/ScrollbarPlaceholder.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { getScrollbarWidth } from '../../utils/getScrollbarWidth';
+
+function HorizontalScrollbarPlaceholderFn(props: {
+  style: React.CSSProperties;
+}) {
+  const scrollbarWidth = getScrollbarWidth();
+
+  // we're on a system with no visible scrollbar, so no need to render anything
+  if (!scrollbarWidth) {
+    return null;
+  }
+  return (
+    <div
+      data-name="horizontal-scrollbar-placeholder"
+      style={{
+        position: 'absolute',
+        overflow: 'visible',
+        overflowX: 'scroll',
+        // height: scrollbarWidth,// not needed, as browser makes the element have the needed width
+        bottom: 0,
+        ...props.style,
+      }}
+    ></div>
+  );
+}
+
+export const HorizontalScrollbarPlaceholder = React.memo(
+  HorizontalScrollbarPlaceholderFn,
+);
+
+function VerticalScrollbarPlaceholderFn(props: { style: React.CSSProperties }) {
+  const scrollbarWidth = getScrollbarWidth();
+
+  // we're on a system with no visible scrollbar, so no need to render anything
+  if (!scrollbarWidth) {
+    return null;
+  }
+  return (
+    <div
+      data-name="vertical-scrollbar-placeholder"
+      style={{
+        position: 'absolute',
+        overflow: 'visible',
+        overflowY: 'scroll',
+        bottom: 0,
+        // width: scrollbarWidth, // not needed, as browser makes the element have the needed width
+        ...props.style,
+      }}
+    ></div>
+  );
+}
+
+export const VerticalScrollbarPlaceholder = React.memo(
+  VerticalScrollbarPlaceholderFn,
+);