@infinite-table/infinite-react 0.4.13 → 0.5.1

package/src/components/InfiniteTable/types/Utility.ts

@@ -0,0 +1,35 @@
+export type ArrayElement<ArrayType extends readonly unknown[]> =
+  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+export type MapOrRecord<K extends string, V> = Map<K, V> | Record<K, V>;
+
+export type RequireOnlyOneProperty<T, Keys extends keyof T> = Pick<
+  T,
+  Exclude<keyof T, Keys>
+> &
+  {
+    [K in Keys]-?: Required<Pick<T, K>> &
+      Partial<Record<Exclude<Keys, K>, undefined>>;
+  }[Keys];
+
+export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
+  T,
+  Exclude<keyof T, Keys>
+> &
+  {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+  }[Keys];
+
+export type DiscriminatedUnion<A, B> =
+  | (A & {
+      [K in keyof B]?: undefined;
+    })
+  | (B & {
+      [K in keyof A]?: undefined;
+    });
+
+export type AllPropertiesOrNone<DATA_TYPE> =
+  | DATA_TYPE
+  | { [KEY in keyof DATA_TYPE]?: never };
+
+export type KeyOfNoSymbol<T> = Exclude<keyof T, Symbol>;

package/src/components/InfiniteTable/types/index.ts

@@ -0,0 +1,96 @@
+import type { InfiniteTableRowInfo } from '../../../utils/groupAndPivot';
+
+import type { InfiniteTableAction } from './InfiniteTableAction';
+import type { InfiniteTableActionType } from './InfiniteTableActionType';
+import type {
+  InfiniteTableColumn,
+  InfiniteTableColumnComparer,
+  InfiniteTableComputedColumn,
+  InfiniteTableColumnRenderParam,
+  InfiniteTableColumnRenderValueParam,
+  InfiniteTableColumnRowspanParam,
+  InfiniteTablePivotColumn,
+  InfiniteTableColumnRenderFunctionForGroupRows,
+  InfiniteTableColumnRenderFunctionForNormalRows,
+} from './InfiniteTableColumn';
+import type { InfiniteTableComputedValues } from './InfiniteTableComputedValues';
+import type { InfiniteTableContextValue } from './InfiniteTableContextValue';
+import type {
+  InfiniteTableProps,
+  InfiniteTableApi,
+  InfiniteTablePropColumnOrder,
+  InfiniteTablePropColumnVisibility,
+  InfiniteTablePropColumnPinning,
+  InfiniteTableColumnAggregator,
+  InfiniteTableColumnGroup,
+  InfiniteTablePropGroupRenderStrategy,
+  InfiniteTablePropColumnGroups,
+  InfiniteTablePropRowStyle,
+  InfiniteTableRowStyleFn,
+  InfiniteTableRowClassNameFn,
+  InfiniteTableFilterEditorProps,
+  InfiniteTablePropFilterEditors,
+  InfiniteTablePropRowClassName,
+  InfiniteTablePropColumns,
+  InfiniteTableColumnsMap,
+  InfiniteTablePropComponents,
+  InfiniteTableGroupColumnFunction,
+  InfiniteTableGroupColumnGetterOptions,
+  InfiniteTablePropColumnSizing,
+  InfiniteTablePropColumnTypes,
+  InfiniteTableColumnSizingOptions,
+  Scrollbars,
+  InfiniteTableGroupColumnBase,
+  InfiniteTablePropGroupColumn,
+  InfiniteTablePropAutoSizeColumnsKey,
+  InfiniteTablePropHeaderOptions,
+  InfiniteTablePropKeyboardNavigation,
+} from './InfiniteTableProps';
+import type { InfiniteTableState } from './InfiniteTableState';
+
+export type {
+  Scrollbars,
+  InfiniteTablePropHeaderOptions,
+  InfiniteTablePropAutoSizeColumnsKey,
+  InfiniteTableColumnAggregator,
+  InfiniteTableComputedValues,
+  InfiniteTableColumnRowspanParam,
+  InfiniteTablePivotColumn,
+  InfiniteTablePropColumns,
+  InfiniteTablePropGroupColumn,
+  InfiniteTableColumnsMap,
+  InfiniteTableRowInfo,
+  InfiniteTableGroupColumnFunction,
+  InfiniteTableGroupColumnBase,
+  InfiniteTablePropColumnOrder,
+  InfiniteTablePropComponents,
+  InfiniteTablePropColumnVisibility,
+  InfiniteTablePropColumnPinning,
+  InfiniteTableColumnGroup,
+  InfiniteTableColumn,
+  InfiniteTableColumnComparer,
+  InfiniteTableComputedColumn,
+  InfiniteTableColumnRenderParam,
+  InfiniteTableColumnRenderFunctionForGroupRows,
+  InfiniteTableColumnRenderFunctionForNormalRows,
+  InfiniteTableColumnRenderValueParam,
+  InfiniteTableContextValue,
+  InfiniteTablePropGroupRenderStrategy,
+  InfiniteTablePropColumnGroups,
+  InfiniteTablePropColumnSizing,
+  InfiniteTableColumnSizingOptions,
+  InfiniteTableState,
+  InfiniteTableAction,
+  InfiniteTableProps,
+  InfiniteTablePropKeyboardNavigation,
+  InfiniteTablePropColumnTypes,
+  InfiniteTableApi,
+  InfiniteTableActionType,
+  InfiniteTablePropRowStyle,
+  InfiniteTablePropRowClassName,
+  InfiniteTableRowStyleFn,
+  InfiniteTableRowClassNameFn,
+  InfiniteTableGroupColumnGetterOptions,
+  InfiniteTableFilterEditorProps,
+  InfiniteTablePropFilterEditors,
+};

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

@@ -0,0 +1,179 @@
+import {
+  CSSProperties,
+  globalStyle,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';
+
+import { ThemeVars } from './theme.css';
+
+const borderBox: CSSProperties = {
+  boxSizing: 'border-box',
+};
+export const boxSizingBorderBox = style(borderBox);
+
+globalStyle(`${boxSizingBorderBox}:before`, borderBox);
+globalStyle(`${boxSizingBorderBox}:after`, borderBox);
+globalStyle(`${boxSizingBorderBox} *`, borderBox);
+globalStyle(`${boxSizingBorderBox} *:before`, borderBox);
+globalStyle(`${boxSizingBorderBox} *:after`, borderBox);
+
+export const position = styleVariants({
+  relative: { position: 'relative' },
+  absolute: { position: 'absolute' },
+  sticky: { position: 'sticky' },
+  fixed: { position: 'fixed' },
+});
+
+export const fill = styleVariants({
+  currentColor: { fill: 'currentColor' },
+  accentColor: { fill: ThemeVars.color.accent },
+});
+
+export const margin = styleVariants({
+  none: { margin: 0 },
+});
+
+export const stroke = styleVariants({
+  currentColor: { stroke: 'currentColor' },
+  accentColor: { stroke: ThemeVars.color.accent },
+});
+
+export const background = styleVariants({
+  inherit: { background: 'inherit' },
+});
+
+export const transformTranslateZero = style({
+  transform: 'translate3d(0,0,0)',
+});
+
+export const transform = styleVariants({
+  translateZero: { transform: 'translate3d(0,0,0)' },
+  rotate90: { transform: 'rotate(90deg)' },
+  rotate180: { transform: 'rotate(180deg)' },
+});
+
+export const cursor = styleVariants({
+  pointer: { cursor: 'pointer' },
+  default: { cursor: 'default' },
+  colResize: { cursor: 'col-resize' },
+});
+
+export const pointerEvents = styleVariants({
+  none: { pointerEvents: 'none' },
+});
+
+export const flex = styleVariants({
+  1: { flex: 1 },
+  none: { flex: 'none' },
+});
+export const zIndex = styleVariants({
+  1: { zIndex: 1 },
+  10: { zIndex: 10 },
+  100: { zIndex: 100 },
+  1000: { zIndex: 1000 },
+  '1k': { zIndex: 1000 },
+  10_000: { zIndex: 10_000 },
+  '10k': { zIndex: 10_000 },
+  100_000: { zIndex: 100_000 },
+  '100k': { zIndex: 100_000 },
+  1_000_000: { zIndex: 1_000_000 },
+  10_000_000: { zIndex: 10_000_000 },
+});
+
+export const display = styleVariants({
+  flex: { display: 'flex' },
+  contents: { display: 'contents' },
+  none: { display: 'none' },
+  block: { display: 'block' },
+  grid: { display: 'grid' },
+  inlineBlock: { display: 'inline-block' },
+  inlineFlex: { display: 'inline-flex' },
+  inlineGrid: { display: 'inline-grid' },
+});
+export const userSelect = styleVariants({
+  none: { userSelect: 'none' },
+});
+
+export const height = styleVariants({
+  '100%': { height: '100%' },
+  '0': { height: '0' },
+});
+export const width = styleVariants({
+  '100%': { width: '100%' },
+  '0': { width: '0' },
+});
+export const top = styleVariants({
+  '100%': { top: '100%' },
+  '0': { top: '0' },
+});
+
+export const left = styleVariants({
+  '100%': { left: '100%' },
+  '0': { left: '0' },
+  auto: { left: 'auto' },
+});
+export const bottom = styleVariants({
+  '100%': { bottom: '100%' },
+  '0': { bottom: '0' },
+});
+export const right = styleVariants({
+  '100%': { right: '100%' },
+  '0': { right: '0' },
+  auto: { right: 'auto' },
+});
+export const flexFlow = styleVariants({
+  column: { flexFlow: 'column' },
+  columnReverse: { flexFlow: 'column-reverse' },
+  row: { flexFlow: 'row' },
+  rowReverse: { flexFlow: 'row-reverse' },
+});
+
+export const alignItems = styleVariants({
+  center: { alignItems: 'center' },
+  stretch: { alignItems: 'stretch' },
+});
+
+export const justifyContent = styleVariants({
+  center: { justifyContent: 'center' },
+  spaceBetween: { justifyContent: 'space-between' },
+  spaceAround: { justifyContent: 'space-around' },
+  start: { justifyContent: 'flex-start' },
+  end: { justifyContent: 'flex-end' },
+});
+
+export const overflow = styleVariants({
+  hidden: { overflow: 'hidden' },
+  auto: { overflow: 'auto' },
+  visible: { overflow: 'visible' },
+});
+
+export const visibility = styleVariants({
+  visible: { visibility: 'visible' },
+  hidden: { visibility: 'hidden' },
+});
+
+export const willChange = styleVariants({
+  transform: { willChange: 'transform' },
+});
+
+export const whiteSpace = styleVariants({
+  nowrap: { whiteSpace: 'nowrap' },
+});
+export const textOverflow = styleVariants({
+  ellipsis: { textOverflow: 'ellipsis' },
+});
+
+export const cssEllipsisClassName = style([
+  whiteSpace.nowrap,
+  textOverflow.ellipsis,
+  overflow.hidden,
+]);
+
+export const absoluteCover = style([
+  position.absolute,
+  top[0],
+  left[0],
+  right[0],
+  bottom[0],
+]);

package/src/components/InfiniteTable/utils/MultiRowSelector.ts

@@ -0,0 +1,111 @@
+import { RowSelectionState } from '../../DataSource/RowSelectionState';
+
+export type MultiRowSelectorOptions = {
+  getIdForIndex: (index: number) => string | number;
+};
+
+function ensureMinMax(start: number, end: number) {
+  return start < end ? [start, end] : [end, start];
+}
+
+export class MultiRowSelector {
+  getIdForIndex: MultiRowSelectorOptions['getIdForIndex'];
+
+  multiSelectStartIndex: number = 0;
+  multiSelectEndIndex?: number;
+
+  _rowSelectionState!: RowSelectionState;
+
+  constructor(options: MultiRowSelectorOptions) {
+    this.getIdForIndex = options.getIdForIndex;
+  }
+
+  set rowSelectionState(rowSelectionState: RowSelectionState) {
+    this._rowSelectionState = rowSelectionState;
+  }
+
+  get rowSelectionState() {
+    return this._rowSelectionState;
+  }
+
+  private selectRange(startIndex: number, endIndex: number) {
+    const [start, end] = ensureMinMax(startIndex, endIndex);
+
+    const rowSelectionState = this.rowSelectionState;
+
+    for (let i = start; i <= end; i++) {
+      const id = this.getIdForIndex(i);
+
+      rowSelectionState.selectRow(id);
+    }
+  }
+  private deselectRange(startIndex: number, endIndex: number) {
+    const [start, end] = ensureMinMax(startIndex, endIndex);
+
+    const rowSelectionState = this.rowSelectionState;
+
+    for (let i = start; i <= end; i++) {
+      const id = this.getIdForIndex(i);
+
+      rowSelectionState.deselectRow(id);
+    }
+  }
+
+  /**
+   * This is the single click, without any modifier
+   */
+  resetClick(index: number) {
+    this.rowSelectionState.deselectAll();
+    const id = this.getIdForIndex(index);
+
+    this.rowSelectionState.selectRow(id);
+
+    this.multiSelectStartIndex = index;
+    this.multiSelectEndIndex = undefined;
+  }
+
+  /**
+   * This is the click with ctrl/cmd key pressed
+   * @param index
+   */
+  singleAddClick(index: number) {
+    const id = this.getIdForIndex(index);
+
+    if (this.rowSelectionState.isRowSelected(id)) {
+      this.rowSelectionState.deselectRow(id);
+      if (this.rowSelectionState.isRowSelected(this.getIdForIndex(index + 1))) {
+        this.multiSelectStartIndex = index + 1;
+      } else {
+        // this.lastResetClickIndex = index;
+      }
+      // this.lastMultiAddClickIndex = undefined;
+    } else {
+      this.rowSelectionState.selectRow(id);
+      this.multiSelectStartIndex = index;
+
+      let multiSelectEndIndex = undefined;
+
+      // we have to go to previous rows and find the last row that we meet that is selected
+      // without going over any deselected rows and that's the selection end
+      for (let i = index - 1; i >= 0; i--) {
+        const id = this.getIdForIndex(i);
+        if (this.rowSelectionState.isRowSelected(id)) {
+          multiSelectEndIndex = i;
+        } else {
+          break;
+        }
+      }
+      this.multiSelectEndIndex = multiSelectEndIndex;
+    }
+  }
+
+  multiSelectClick(index: number) {
+    if (this.multiSelectEndIndex != null) {
+      this.deselectRange(this.multiSelectStartIndex, this.multiSelectEndIndex);
+    }
+
+    this.selectRange(this.multiSelectStartIndex, index);
+
+    this.multiSelectEndIndex = index;
+  }
+}

package/src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { InfiniteTableHeaderCellContext } from '../components/InfiniteTableHeader/InfiniteTableHeaderCell';
+
+import { InfiniteTableColumnCellContext } from '../components/InfiniteTableRow/InfiniteTableColumnCell';
+import {
+  InfiniteTableColumnCellContextType,
+  InfiniteTableHeaderCellContextType,
+} from '../types/InfiniteTableColumn';
+import {
+  RenderHookComponent,
+  RenderHookComponentProps,
+} from '../../RenderHookComponent';
+
+export function RenderCellHookComponent<T, RENDER_FN extends Function>(
+  props: RenderHookComponentProps<
+    RENDER_FN,
+    InfiniteTableColumnCellContextType<T>
+  >,
+) {
+  const ContextProvider =
+    InfiniteTableColumnCellContext.Provider as React.Provider<
+      InfiniteTableColumnCellContextType<T>
+    >;
+  return (
+    <ContextProvider value={props.renderParam}>
+      <RenderHookComponent
+        render={props.render}
+        renderParam={props.renderParam}
+      />
+    </ContextProvider>
+  );
+}
+
+export function RenderHeaderCellHookComponent<T, RENDER_FN extends Function>(
+  props: RenderHookComponentProps<
+    RENDER_FN,
+    InfiniteTableHeaderCellContextType<T>
+  >,
+) {
+  const ContextProvider =
+    InfiniteTableHeaderCellContext.Provider as React.Provider<
+      InfiniteTableHeaderCellContextType<T>
+    >;
+  return (
+    <ContextProvider value={props.renderParam}>
+      <RenderHookComponent
+        render={props.render}
+        renderParam={props.renderParam}
+      />
+    </ContextProvider>
+  );
+}

package/src/components/InfiniteTable/utils/adjustColumnOrderForPinning.ts

@@ -0,0 +1,33 @@
+import {
+  InfiniteTablePropColumnOrderNormalized,
+  InfiniteTablePropColumnPinning,
+} from '../types/InfiniteTableProps';
+
+const order = ['start', undefined, 'end'];
+export const adjustColumnOrderForPinning = (
+  columnOrder: InfiniteTablePropColumnOrderNormalized,
+  columnPinning: InfiniteTablePropColumnPinning,
+) => {
+  if (columnPinning && Object.keys(columnPinning).length > 0) {
+    // make sure pinned columns are coming first
+    columnOrder.sort((colId1: string, colId2: string) => {
+      let p1 = columnPinning[colId1];
+      let p2 = columnPinning[colId2];
+
+      if (p1 === true) {
+        p1 = 'start';
+      }
+
+      if (p2 === true) {
+        p2 = 'start';
+      }
+
+      if (p1 == p2) {
+        return 0;
+      }
+
+      return order.indexOf(p1) - order.indexOf(p2);
+    });
+  }
+  return columnOrder;
+};

package/src/components/InfiniteTable/utils/assignFiltered.ts

@@ -0,0 +1,29 @@
+export function assignFiltered(
+  filterFn: (value: any, key: string) => boolean,
+  target: any,
+  ...rest: any[]
+) {
+  const result = target;
+
+  rest.forEach((obj) => {
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key) && filterFn(obj[key], key)) {
+        result[key] = obj[key];
+      }
+    }
+  });
+
+  return result;
+}
+
+export function assignNonNull(target: any, ...rest: any[]) {
+  return assignFiltered((value) => value != null, target, ...rest);
+}
+
+export function assignExcept(
+  exceptKeys: Record<string, boolean>,
+  target: any,
+  ...rest: any[]
+) {
+  return assignFiltered((_value, key) => !(key in exceptKeys), target, ...rest);
+}

package/src/components/InfiniteTable/utils/defaultGetColumContextMenuItems.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { MenuItemObject, MenuProps } from '../../Menu/MenuProps';
+import { InfiniteCheckBox } from '../components/CheckBox';
+import {
+  InfiniteTableApi,
+  InfiniteTableComputedColumn,
+  InfiniteTableComputedValues,
+  InfiniteTableState,
+} from '../types';
+import { InfiniteTableActions } from '../types/InfiniteTableState';
+
+export function defaultGetColumContextMenuItems<T>(params: {
+  column: InfiniteTableComputedColumn<T>;
+  api: InfiniteTableApi<T>;
+  getState: () => InfiniteTableState<T>;
+  getComputed: () => InfiniteTableComputedValues<T>;
+  actions: InfiniteTableActions<T>;
+}): MenuProps['items'] {
+  const { column, getComputed, api } = params;
+
+  return [
+    {
+      key: 'sort-asc',
+      label: 'Sort Ascending',
+      disabled: column.computedSortedAsc,
+      onAction: () => {
+        api.setSortingForColumn(column.id, 1);
+      },
+    },
+    {
+      key: 'sort-desc',
+      label: 'Sort Descending',
+      disabled: column.computedSortedDesc,
+      onAction: () => {
+        api.setSortingForColumn(column.id, -1);
+      },
+    },
+    {
+      key: 'sort-none',
+      label: 'Unsort',
+      disabled: !column.computedSorted,
+      onAction: () => {
+        api.setSortingForColumn(column.id, null);
+      },
+    },
+    '-',
+    {
+      key: 'pin-start',
+      label: 'Pin to start',
+      disabled: column.computedPinned === 'start',
+      onAction: () => {
+        api.setPinningForColumn(column.id, 'start');
+      },
+    },
+    // {
+    //   key: 'pin-end',
+    //   label: 'Pin to end',
+    //   disabled: column.computedPinned === 'end',
+    //   onAction: () => {},
+    // },
+    {
+      key: 'unpin',
+      label: 'Unpin',
+      disabled: !column.computedPinned,
+      onAction: () => {
+        api.setPinningForColumn(column.id, false);
+      },
+    },
+    '-',
+    {
+      key: 'columns',
+      label: 'Columns',
+      menu: () => {
+        const colItems: MenuItemObject[] = [];
+
+        getComputed().computedColumnsMapInInitialOrder.forEach((col, id) => {
+          colItems.push({
+            key: id,
+            label: col.name || id || '',
+
+            check: (
+              <InfiniteCheckBox
+                key={col.id}
+                disabled={
+                  col.computedVisible && api.getVisibleColumnsCount() === 1
+                }
+                checked={col.computedVisible}
+                onChange={(checked) => {
+                  api.setVisibilityForColumn(col.id, !!checked);
+                }}
+              ></InfiniteCheckBox>
+            ),
+          });
+        });
+
+        return {
+          columns: [
+            {
+              name: 'check',
+            },
+            { name: 'label' },
+          ],
+          items: colItems,
+        };
+      },
+    },
+  ];
+}

package/src/components/InfiniteTable/utils/getColumnComputedType.ts

@@ -0,0 +1,33 @@
+import type { InfiniteTableColumn } from '../types';
+import type {
+  InfiniteTableColumnType,
+  InfiniteTablePropColumnTypes,
+} from '../types/InfiniteTableProps';
+
+const emptyType: InfiniteTableColumnType<any> = Object.freeze({
+  filterType: 'string',
+});
+
+export function getColumnComputedType<T>(
+  column: InfiniteTableColumn<T>,
+  columnTypes: InfiniteTablePropColumnTypes<T>,
+): InfiniteTableColumnType<T> {
+  const defaultType: InfiniteTableColumnType<T> =
+    columnTypes['default'] || emptyType;
+
+  if (column.type === undefined) {
+    return defaultType;
+  }
+  if (column.type === null) {
+    return emptyType;
+  }
+  if (typeof column.type === 'string') {
+    const type = columnTypes[column.type] || emptyType;
+
+    return type;
+  }
+  return column.type.reduce(
+    (acc, columnType) => Object.assign(acc, columnTypes[columnType]),
+    {} as InfiniteTableColumnType<T>,
+  );
+}