@infinite-table/infinite-react 0.5.1 → 0.5.2

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

@@ -1,95 +0,0 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
-import { useCallback, useMemo, useEffect } from 'react';
-import { useDataSourceContextValue } from '../../DataSource/publicHooks/useDataSource';
-import { CellPosition } from '../../types/CellPosition';
-import { cloneRowSelection } from '../api/getSelectionApi';
-import { useInfiniteTable } from '../hooks/useInfiniteTable';
-import { InfiniteTableEventHandlerContext } from './eventHandlerTypes';
-import { onCellClick } from './onCellClick';
-import { onKeyDown } from './onKeyDown';
-
-function useEventHandlersContext<T>() {
-  const {
-    getState,
-    componentActions: actions,
-    imperativeApi,
-    getComputed,
-  } = useInfiniteTable<T>();
-  const { getState: getDataSourceState, componentActions: dataSourceActions } =
-    useDataSourceContextValue<T>();
-
-  const context = useMemo(() => {
-    const context: InfiniteTableEventHandlerContext<T> = {
-      getComputed,
-      api: imperativeApi,
-      getState,
-      actions,
-      getDataSourceState,
-      dataSourceActions,
-      cloneRowSelection: (rowSelection) => {
-        return cloneRowSelection<T>(rowSelection, getDataSourceState);
-      },
-    };
-    return context;
-  }, [getState, actions, getDataSourceState, dataSourceActions]);
-
-  return context;
-}
-
-function handleDOMEvents<T>() {
-  const context = useEventHandlersContext<T>();
-
-  useEffect(() => {
-    const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
-      onKeyDown(context, event!);
-    });
-
-    function cellClickHandler(
-      cellClickParam: (CellPosition & { event: MouseEvent<Element> }) | null,
-    ) {
-      if (!cellClickParam) {
-        return;
-      }
-      const event = cellClickParam.event;
-      const virtualEvent = {
-        metaKey: event.metaKey,
-        ctrlKey: event.ctrlKey,
-        shiftKey: event.shiftKey,
-        key: '',
-        preventDefault: () => event.preventDefault(),
-      };
-
-      onCellClick(
-        {
-          ...context,
-          rowIndex: cellClickParam.rowIndex,
-          colIndex: cellClickParam.colIndex,
-        },
-        virtualEvent,
-      );
-    }
-    const removeOnCellClick = context
-      .getState()
-      .cellClick.onChange(cellClickHandler);
-
-    return () => {
-      removeOnKeyDown();
-      removeOnCellClick();
-    };
-  }, []);
-}
-
-function subscribeToDOMEvents<T>() {
-  const { getState } = useInfiniteTable<T>();
-
-  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {
-    getState().keyDown(event);
-  }, []);
-
-  return { onKeyDown };
-}
-
-export function useDOMEventHandlers<T>() {
-  handleDOMEvents<T>();
-  return subscribeToDOMEvents<T>();
-}

package/src/components/InfiniteTable/eventHandlers/keyboardNavigation.ts

@@ -1,232 +0,0 @@
-import { clamp } from '../../utils/clamp';
-import { InfiniteTableKeyboardEventHandlerContext } from './eventHandlerTypes';
-
-export function handleRowNavigation<T>(
-  options: InfiniteTableKeyboardEventHandlerContext<T>,
-  event: {
-    key: string;
-  },
-) {
-  const { getState, getDataSourceState, actions, api } = options;
-  const { key } = event;
-  const dataArray = getDataSourceState().dataArray;
-  const arrLength = dataArray.length;
-  const state = getState();
-
-  const { brain } = state;
-  let { activeRowIndex } = state;
-
-  if (activeRowIndex == null) {
-    return false;
-  }
-
-  const {
-    start: [startRow],
-    end: [endRow],
-  } = brain.getRenderRange();
-
-  const renderRowCount = endRow - startRow - 1;
-
-  const min = 0;
-  const max = arrLength - 1;
-  const KeyToFunction = {
-    ArrowDown: () => {
-      activeRowIndex = clamp(activeRowIndex! + 1, min, max);
-    },
-    ArrowUp: () => {
-      activeRowIndex = clamp(activeRowIndex! - 1, min, max);
-    },
-    ArrowLeft: () => {
-      const rowInfo = dataArray[activeRowIndex!];
-      if (rowInfo && rowInfo.isGroupRow) {
-        return api.collapseGroupRow(rowInfo.groupKeys);
-      }
-      return false;
-    },
-    ArrowRight: () => {
-      const rowInfo = dataArray[activeRowIndex!];
-      if (rowInfo && rowInfo.isGroupRow) {
-        return api.expandGroupRow(rowInfo.groupKeys);
-      }
-      return false;
-    },
-    Enter: () => {
-      const rowInfo = dataArray[activeRowIndex!];
-      if (rowInfo && rowInfo.isGroupRow) {
-        return api.toggleGroupRow(rowInfo.groupKeys);
-      }
-      return false;
-    },
-    PageDown: () => {
-      activeRowIndex = Math.min(
-        activeRowIndex! + renderRowCount,
-        arrLength - 1,
-      );
-    },
-    PageUp: () => {
-      activeRowIndex = Math.max(activeRowIndex! - renderRowCount, min);
-    },
-    End: () => {
-      activeRowIndex = max;
-    },
-    Home: () => {
-      activeRowIndex = min;
-    },
-  };
-
-  const Fn = KeyToFunction[key as keyof typeof KeyToFunction];
-
-  if (!Fn) {
-    return false;
-  }
-
-  Fn();
-
-  actions.activeRowIndex = activeRowIndex;
-
-  return true;
-}
-
-export function handleCellNavigation<T>(
-  options: InfiniteTableKeyboardEventHandlerContext<T>,
-  event: { key: string; shiftKey: boolean },
-) {
-  const {
-    api,
-
-    getState,
-    getComputed,
-    getDataSourceState,
-    actions,
-  } = options;
-  const { key, shiftKey } = event;
-
-  const dataArray = getDataSourceState().dataArray;
-  const state = getState();
-  const { activeCellIndex, brain } = state;
-  if (!activeCellIndex) {
-    return false;
-  }
-
-  let [rowIndex, colIndex] = activeCellIndex;
-
-  const {
-    start: [startRow, startCol],
-    end: [endRow, endCol],
-  } = brain.getRenderRange();
-
-  const renderRowCount = endRow - startRow - 1;
-  const renderColCount = endCol - startCol - 1;
-
-  const maxRow = getDataSourceState().dataArray.length - 1;
-  const maxCol = getComputed().computedVisibleColumns.length - 1;
-
-  const minRow = 0;
-  const minCol = 0;
-
-  rowIndex = clamp(rowIndex, 0, maxRow);
-  colIndex = clamp(colIndex, 0, maxCol);
-
-  actions.activeCellIndex = [rowIndex, colIndex];
-
-  const KeyToFunction = {
-    ArrowDown: () => {
-      rowIndex = clamp(rowIndex + 1, minRow, maxRow);
-    },
-    ArrowUp: () => {
-      rowIndex = clamp(rowIndex - 1, minRow, maxRow);
-    },
-    ArrowLeft: () => {
-      colIndex = clamp(colIndex - 1, minCol, maxCol);
-    },
-    ArrowRight: () => {
-      colIndex = clamp(colIndex + 1, minCol, maxCol);
-    },
-    Enter: () => {
-      const rowInfo = dataArray[rowIndex];
-      if (rowInfo && rowInfo.isGroupRow) {
-        return api.toggleGroupRow(rowInfo.groupKeys);
-      }
-      return false;
-    },
-    PageDown: () => {
-      if (!shiftKey) {
-        rowIndex = Math.min(rowIndex + renderRowCount, maxRow);
-      } else {
-        colIndex = Math.min(colIndex + renderColCount, maxCol);
-      }
-    },
-    PageUp: () => {
-      if (!shiftKey) {
-        rowIndex = Math.max(rowIndex - renderRowCount, minRow);
-      } else {
-        colIndex = Math.max(colIndex - renderColCount, minCol);
-      }
-    },
-    End: () => {
-      if (!shiftKey) {
-        rowIndex = maxRow;
-      } else {
-        colIndex = maxCol;
-      }
-    },
-    Home: () => {
-      if (!shiftKey) {
-        rowIndex = minRow;
-      } else {
-        colIndex = minCol;
-      }
-    },
-  };
-  const Fn = KeyToFunction[key as keyof typeof KeyToFunction];
-
-  if (!Fn) {
-    return false;
-  }
-
-  Fn();
-
-  actions.activeCellIndex = [rowIndex, colIndex];
-
-  return true;
-}
-
-const validKeys: Record<string, boolean> = {
-  ArrowUp: true,
-  ArrowDown: true,
-  ArrowLeft: true,
-  ArrowRight: true,
-  PageUp: true,
-  PageDown: true,
-  Home: true,
-  End: true,
-  Enter: true,
-  ' ': true,
-};
-
-export function handleKeyboardNavigation<T>(
-  options: InfiniteTableKeyboardEventHandlerContext<T>,
-  event: {
-    key: string;
-    shiftKey: boolean;
-  },
-) {
-  const { key } = event;
-  const { getState } = options;
-  const state = getState();
-
-  const { activeRowIndex, activeCellIndex, keyboardNavigation } = state;
-
-  if (!validKeys[key]) {
-    return false;
-  }
-  if (activeRowIndex != null && keyboardNavigation === 'row') {
-    return handleRowNavigation(options, event);
-  }
-
-  if (activeCellIndex != null && keyboardNavigation === 'cell') {
-    return handleCellNavigation(options, event);
-  }
-
-  return false;
-}

package/src/components/InfiniteTable/eventHandlers/keyboardSelection.ts

@@ -1,110 +0,0 @@
-import { RowSelectionState } from '../../DataSource';
-import { InfiniteTableEventHandlerAbstractContext } from './eventHandlerTypes';
-import { updateRowSelectionOnCellClick } from './onCellClick';
-
-const validKeys: Record<string, boolean> = {
-  Enter: true,
-  ' ': true,
-  a: true,
-};
-
-export function handleKeyboardSelection<T>(
-  context: InfiniteTableEventHandlerAbstractContext<T>,
-  keyboardEvent: {
-    key: string;
-    metaKey: boolean;
-    ctrlKey: boolean;
-    shiftKey: boolean;
-    preventDefault: VoidFunction;
-  },
-) {
-  const {
-    getState,
-    getDataSourceState,
-    dataSourceActions,
-    api: imperativeApi,
-    cloneRowSelection,
-  } = context;
-  const { key, ctrlKey, metaKey } = keyboardEvent;
-
-  if (!validKeys[key]) {
-    return false;
-  }
-
-  const state = getState();
-  const dataSourceState = getDataSourceState();
-
-  const {
-    activeRowIndex,
-    activeCellIndex,
-    keyboardNavigation,
-    keyboardSelection,
-  } = state;
-
-  const { selectionMode, groupBy, rowSelection } = dataSourceState;
-
-  if (keyboardSelection === false) {
-    return false;
-  }
-
-  const rowIndex =
-    keyboardNavigation === 'row' && activeRowIndex != null
-      ? activeRowIndex
-      : keyboardNavigation === 'cell' && activeCellIndex != null
-      ? activeCellIndex[0]
-      : null;
-
-  const rowInfo = rowIndex != null ? dataSourceState.dataArray[rowIndex] : null;
-
-  if (!rowInfo || rowIndex == null) {
-    return false;
-  }
-
-  if (selectionMode === 'single-row' && key === ' ') {
-    imperativeApi.selectionApi.toggleRowSelection(rowInfo.id);
-    return true;
-  }
-
-  if (selectionMode !== 'multi-row') {
-    return false;
-  }
-
-  if (key === 'a' && (ctrlKey || metaKey)) {
-    const rowSelectionState = cloneRowSelection(
-      rowSelection as RowSelectionState<T>,
-    );
-
-    rowSelectionState.selectAll();
-
-    dataSourceActions.rowSelection = rowSelectionState;
-    return true;
-  }
-
-  if (key === ' ') {
-    if (groupBy.length) {
-      if (rowInfo.isGroupRow && rowInfo.groupKeys) {
-        imperativeApi.selectionApi.toggleGroupRowSelection(rowInfo.groupKeys);
-      } else {
-        imperativeApi.selectionApi.toggleRowSelection(rowInfo.id);
-      }
-      return true;
-    } else {
-      // no grouping, but space should be treated like a mouse click
-
-      const event = { ...keyboardEvent };
-      const { renderSelectionCheckBox } = context.getComputed();
-
-      // if we have a selection checkbox column, then we wont allow shift be used with the space key
-      if (renderSelectionCheckBox) {
-        // event.shiftKey = false;
-        event.metaKey = false;
-        // but rather make the selection only additive
-        event.ctrlKey = true;
-      }
-
-      return updateRowSelectionOnCellClick({ ...context, rowIndex }, event);
-    }
-  }
-
-  return false;
-}

package/src/components/InfiniteTable/eventHandlers/onCellClick.ts

@@ -1,94 +0,0 @@
-import { RowSelectionState } from '../../DataSource/RowSelectionState';
-
-import {
-  InfiniteTableCellClickEventHandlerContext,
-  InfiniteTableEventHandlerAbstractContext,
-  InfiniteTableKeyboardEventHandlerContext,
-} from './eventHandlerTypes';
-
-export function onCellClick<T>(
-  context: InfiniteTableCellClickEventHandlerContext<T> &
-    InfiniteTableKeyboardEventHandlerContext<T>,
-  event: {
-    key: string;
-    metaKey: boolean;
-    ctrlKey: boolean;
-    shiftKey: boolean;
-    preventDefault: VoidFunction;
-  },
-) {
-  updateRowSelectionOnCellClick(context, event);
-}
-
-export function updateRowSelectionOnCellClick<T>(
-  context: InfiniteTableEventHandlerAbstractContext<T> & {
-    rowIndex: number;
-  },
-
-  event: {
-    key: string;
-    metaKey: boolean;
-    ctrlKey: boolean;
-    shiftKey: boolean;
-    preventDefault: VoidFunction;
-  },
-) {
-  const {
-    rowIndex,
-    getDataSourceState,
-    getComputed,
-    dataSourceActions,
-    api,
-    cloneRowSelection,
-  } = context;
-
-  const { multiRowSelector, renderSelectionCheckBox } = getComputed();
-  const dataSourceState = getDataSourceState();
-
-  const { selectionMode, groupBy, dataArray } = dataSourceState;
-
-  if (groupBy.length) {
-    return false;
-  }
-
-  if (selectionMode === 'multi-row') {
-    if (renderSelectionCheckBox && !event.key) {
-      // we should not click-select when we have a checkbox column
-      // but we only do this if there is no key
-      // as key could  == ' ', and in this case we want
-      // to let the selection logic happen, as it's the same function
-      // but used by the keyboard selection
-      return false;
-    }
-    let { rowSelection: rowSelectionState } = dataSourceState;
-    // clone the row selection
-    rowSelectionState = cloneRowSelection(
-      rowSelectionState as RowSelectionState<T>,
-    );
-
-    multiRowSelector.rowSelectionState = rowSelectionState;
-
-    if (rowSelectionState && typeof rowSelectionState === 'object') {
-      if (event.shiftKey) {
-        multiRowSelector.multiSelectClick(rowIndex);
-      } else if (event.metaKey || event.ctrlKey) {
-        multiRowSelector.singleAddClick(rowIndex);
-      } else {
-        multiRowSelector.resetClick(rowIndex);
-      }
-
-      // so we can give actions a new instance of rowSelection
-      dataSourceActions.rowSelection = rowSelectionState;
-
-      return true;
-    }
-  } else if (selectionMode === 'single-row') {
-    const id = dataArray[rowIndex].id;
-    if (event.metaKey || event.ctrlKey) {
-      api.selectionApi.toggleRowSelection(id);
-    } else {
-      api.selectionApi.selectRow(id);
-    }
-  }
-  return false;
-}

package/src/components/InfiniteTable/eventHandlers/onKeyDown.ts

@@ -1,25 +0,0 @@
-import type { KeyboardEvent } from 'react';
-import { handleKeyboardNavigation } from './keyboardNavigation';
-import { InfiniteTableKeyboardEventHandlerContext } from './eventHandlerTypes';
-import { handleKeyboardSelection } from './keyboardSelection';
-import { cloneRowSelection } from '../api/getSelectionApi';
-
-export function onKeyDown<T>(
-  context: InfiniteTableKeyboardEventHandlerContext<T>,
-  event: KeyboardEvent<Element>,
-) {
-  const keyboardHandlerContext: InfiniteTableKeyboardEventHandlerContext<T> = {
-    ...context,
-    cloneRowSelection: (rowSelection) => {
-      return cloneRowSelection<T>(rowSelection, context.getDataSourceState);
-    },
-  };
-
-  if (handleKeyboardSelection(keyboardHandlerContext, event)) {
-    event.preventDefault();
-  }
-
-  if (handleKeyboardNavigation(keyboardHandlerContext, event)) {
-    event.preventDefault();
-  }
-}

package/src/components/InfiniteTable/hooks/adjustColumnOrderForAllColumns.ts

@@ -1,70 +0,0 @@
-import { moveXatY } from '../utils/moveXatY';
-
-export default function adjustColumnOrderForAllColumns(options: {
-  newColumnOrder: string[];
-  visibleColumnOrder: string[];
-  existingColumnOrder: string[];
-  dragColumnId: string;
-}) {
-  const {
-    newColumnOrder,
-    visibleColumnOrder,
-    existingColumnOrder,
-    dragColumnId: dragColumnId,
-  } = options;
-
-  if (visibleColumnOrder.length !== newColumnOrder.length) {
-    console.warn(
-      'new column order cannot contain less columns than the visible column order',
-    );
-    return newColumnOrder;
-  }
-  // const newIndexes = newColumnOrder.reduce(getIndexes, {});
-  // const allIndexes = allColumnIds.reduce(getIndexes, {});
-
-  const dragIndex = visibleColumnOrder.indexOf(dragColumnId);
-  const dropIndex = newColumnOrder.indexOf(dragColumnId);
-
-  if (dragIndex === dropIndex) {
-    return existingColumnOrder;
-  }
-  if (dropIndex > dragIndex) {
-    // it's moved to the right
-
-    // in the new column order, get the item that is before the dropped column id
-    // and then find the index of that column in the existing column order
-    // and move the movedColumnId after that index
-    const indexInNewOrder = newColumnOrder.indexOf(dragColumnId);
-    const prevColIdInNewOrder = newColumnOrder[indexInNewOrder - 1];
-
-    const prevColIndexInExiting =
-      existingColumnOrder.indexOf(prevColIdInNewOrder);
-    const indexInExisting = existingColumnOrder.indexOf(dragColumnId);
-
-    return moveXatY(
-      existingColumnOrder,
-      indexInExisting,
-      prevColIndexInExiting,
-    );
-  } else {
-    // it's moved to the left
-
-    // in the new column order, get the item that is after the dropped column id
-    // and then find the index of that column in the existing column order
-    // and move the movedColumnId before that index
-
-    const indexInNewOrder = newColumnOrder.indexOf(dragColumnId);
-    const nextColIdInNewOrder = newColumnOrder[indexInNewOrder + 1];
-
-    const nextColIndexInExiting =
-      existingColumnOrder.indexOf(nextColIdInNewOrder);
-    const indexInExisting = existingColumnOrder.indexOf(dragColumnId);
-
-    return moveXatY(
-      existingColumnOrder,
-      indexInExisting,
-      nextColIndexInExiting,
-    );
-  }
-  return newColumnOrder;
-}