@infinite-table/infinite-react 0.4.13 → 0.5.0

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

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

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

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

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

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

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