From b1b4d74866cc448fc297f68aea0e0f0b0f5e1597 Mon Sep 17 00:00:00 2001 From: Andrei Zhaleznichenka Date: Fri, 28 Jul 2023 15:24:17 +0200 Subject: [PATCH] remove rows and column args --- .../grid-navigation-custom.page.tsx | 2 - src/table/grid-navigation/interfaces.ts | 2 - .../grid-navigation/use-grid-navigation.ts | 38 +++---------------- 3 files changed, 6 insertions(+), 36 deletions(-) diff --git a/pages/table-fragments/grid-navigation-custom.page.tsx b/pages/table-fragments/grid-navigation-custom.page.tsx index ad29ef535d..1d2e071dde 100644 --- a/pages/table-fragments/grid-navigation-custom.page.tsx +++ b/pages/table-fragments/grid-navigation-custom.page.tsx @@ -82,8 +82,6 @@ export default function Page() { const gridNavigationApi = useGridNavigation({ tableRole: 'grid', getContainer: () => tableContainerRef.current, - rows: items.length, - columns: columnDefinitions.length, pageSize, }); diff --git a/src/table/grid-navigation/interfaces.ts b/src/table/grid-navigation/interfaces.ts index b5c2295933..b08a301279 100644 --- a/src/table/grid-navigation/interfaces.ts +++ b/src/table/grid-navigation/interfaces.ts @@ -5,8 +5,6 @@ import { TableRole } from '../table-role'; export interface GridNavigationProps { tableRole: TableRole; - rows: number; - columns: number; pageSize: number; getContainer: () => null | HTMLElement; } diff --git a/src/table/grid-navigation/use-grid-navigation.ts b/src/table/grid-navigation/use-grid-navigation.ts index 23b52c0b79..559b7715cc 100644 --- a/src/table/grid-navigation/use-grid-navigation.ts +++ b/src/table/grid-navigation/use-grid-navigation.ts @@ -5,13 +5,7 @@ import { useEffect, useMemo } from 'react'; import { findFocusinCell } from './utils'; import { FocusedCell, GridNavigationAPI, GridNavigationProps } from './interfaces'; -export function useGridNavigation({ - tableRole, - rows, - columns, - pageSize, - getContainer, -}: GridNavigationProps): GridNavigationAPI { +export function useGridNavigation({ tableRole, pageSize, getContainer }: GridNavigationProps): GridNavigationAPI { const model = useMemo(() => new GridNavigationModel(), []); // Initialize the model with the table container assuming it is mounted synchronously and only once. @@ -32,16 +26,14 @@ export function useGridNavigation({ // TODO: handle the case when rows and columns stay unchanged by the focused item disappears (e.g. it is replaced by another item) // Notify the model of the props change. The focus might need to move when the focused cell is no longer available. useEffect(() => { - model.update({ rows, columns, pageSize }); - }, [model, rows, columns, pageSize]); + model.update({ pageSize }); + }, [model, pageSize]); return model; } class GridNavigationModel { // Props - private _rows = 0; - private _columns = 0; private _pageSize = 0; private _container: null | HTMLElement = null; @@ -62,9 +54,7 @@ class GridNavigationModel { this.container.removeEventListener('keydown', this.onKeydown); } - public update({ rows, columns, pageSize }: { rows: number; columns: number; pageSize: number }) { - this._rows = rows; - this._columns = columns; + public update({ pageSize }: { pageSize: number }) { this._pageSize = pageSize; // TODO: validate state } @@ -74,14 +64,6 @@ class GridNavigationModel { throw new Error(`focusCell({ rowIndex: ${rowIndex}, colIndex: ${colIndex} }) is not implemented.`); }; - private get rows() { - return this._rows; - } - - private get columns() { - return this._columns; - } - private get pageSize() { return this._pageSize; } @@ -93,26 +75,18 @@ class GridNavigationModel { return this._container; } - // TODO: is this helper still needed? - private updateFocusedCell(cell: null | FocusedCell) { - if (this.focusedCell?.element === cell?.element) { - return; - } - this.focusedCell = cell; - } - private onFocusin = (event: FocusEvent) => { const cell = findFocusinCell(event); if (!cell) { return; } - this.updateFocusedCell(cell); + this.focusedCell = cell; console.log('FOCUS IN', cell.rowIndex, cell.colIndex, cell.element); }; private onFocusout = () => { - this.updateFocusedCell(null); + this.focusedCell = null; }; private onKeydown = () => {