@infinite-table/infinite-react 0.5.0 → 0.5.2

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

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

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

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

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

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

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

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

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