diff --git a/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts b/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts index bd409dc263a..de3aaca6155 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts @@ -1,4 +1,6 @@ import { useCallback, useEffect, useRef } from 'react'; +import { actions } from 'react-table'; +import { getLeafHeaders } from '../util/index.js'; const CELL_DATA_ATTRIBUTES = ['visibleColumnIndex', 'columnIndex', 'rowIndex', 'visibleRowIndex']; @@ -322,6 +324,41 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties ]; }; +function getPayload(e, column) { + e.preventDefault(); + e.stopPropagation(); + const clientX = e.target.getBoundingClientRect().x + e.target.getBoundingClientRect().width; + const columnId = column.id; + const columnWidth = column.totalWidth; + const headersToResize = getLeafHeaders(column); + const headerIdWidths = headersToResize.map((d) => [d.id, d.totalWidth]); + return { clientX, columnId, columnWidth, headerIdWidths }; +} + +const setHeaderProps = (headerProps, { instance: { dispatch }, column }) => { + // resize col with keyboard + const handleKeyDown = (e) => { + if (e.nativeEvent.shiftKey) { + if (e.key === 'ArrowRight') { + const payload = getPayload(e, column); + dispatch({ type: actions.columnStartResizing, ...payload }); + dispatch({ type: actions.columnResizing, clientX: payload.clientX + 16 }); + dispatch({ type: actions.columnDoneResizing }); + return; + } + if (e.key === 'ArrowLeft') { + const payload = getPayload(e, column); + dispatch({ type: actions.columnStartResizing, ...payload }); + dispatch({ type: actions.columnResizing, clientX: payload.clientX - 16 }); + dispatch({ type: actions.columnDoneResizing }); + return; + } + } + }; + return [headerProps, { onKeyDown: handleKeyDown }]; +}; + export const useKeyboardNavigation = (hooks) => { hooks.getTableProps.push(useGetTableProps); + hooks.getHeaderProps.push(setHeaderProps); }; diff --git a/packages/main/src/components/AnalyticalTable/util/index.ts b/packages/main/src/components/AnalyticalTable/util/index.ts index cb143ddf695..8ce7bee2ec4 100644 --- a/packages/main/src/components/AnalyticalTable/util/index.ts +++ b/packages/main/src/components/AnalyticalTable/util/index.ts @@ -156,3 +156,16 @@ export function getSubRowsByString(subRowsKey, row) { return subRowsKey.split('.').reduce((acc, cur) => acc?.[cur], row); } } + +// copied from https://github.com/TanStack/table/blob/06703a56890122cedf1b2fa4b82982999537774e/src/plugin-hooks/useResizeColumns.js#L286-L296 (22. Aug 2023) +export function getLeafHeaders(header) { + const leafHeaders = []; + const recurseHeader = (header) => { + if (header.columns && header.columns.length) { + header.columns.map(recurseHeader); + } + leafHeaders.push(header); + }; + recurseHeader(header); + return leafHeaders; +}