@infinite-table/infinite-react 0.5.0 → 0.5.2

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

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

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

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

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

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

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

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

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

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