diff --git a/packages/sdk/src/components/grid/InteractionLayer.tsx b/packages/sdk/src/components/grid/InteractionLayer.tsx index 3cb5e50d0..19fda4f3e 100644 --- a/packages/sdk/src/components/grid/InteractionLayer.tsx +++ b/packages/sdk/src/components/grid/InteractionLayer.tsx @@ -791,6 +791,7 @@ export const InteractionLayerBase: ForwardRefRenderFunction< getCellContent={getCellContent} real2RowIndex={real2RowIndex} scrollToItem={scrollToItem} + scrollBy={scrollBy} /> ); diff --git a/packages/sdk/src/components/grid/components/editor/EditorContainer.tsx b/packages/sdk/src/components/grid/components/editor/EditorContainer.tsx index 59f82997d..956eb7ee6 100644 --- a/packages/sdk/src/components/grid/components/editor/EditorContainer.tsx +++ b/packages/sdk/src/components/grid/components/editor/EditorContainer.tsx @@ -36,6 +36,7 @@ export interface IEditorContainerProps | 'onDelete' | 'onRowAppend' | 'onRowExpand' + | 'scrollBy' > { isEditing?: boolean; scrollState: IScrollState; @@ -97,6 +98,7 @@ export const EditorContainerBase: ForwardRefRenderFunction< setSelection, real2RowIndex, getCellContent, + scrollBy, } = props; const { scrollLeft, scrollTop } = scrollState; const { rowIndex, realRowIndex, columnIndex } = useMemo(() => { @@ -148,6 +150,7 @@ export const EditorContainerBase: ForwardRefRenderFunction< setActiveCell, setSelection, scrollToItem, + scrollBy, }); const editorStyle = useMemo( diff --git a/packages/sdk/src/components/grid/hooks/useKeyboardSelection.ts b/packages/sdk/src/components/grid/hooks/useKeyboardSelection.ts index a3427aaed..73c1a10a5 100644 --- a/packages/sdk/src/components/grid/hooks/useKeyboardSelection.ts +++ b/packages/sdk/src/components/grid/hooks/useKeyboardSelection.ts @@ -32,6 +32,7 @@ export const useKeyboardSelection = (props: ISelectionKeyboardProps) => { onDelete, onRowExpand, editorRef, + scrollBy, } = props; const { pureRowCount, columnCount } = coordInstance; @@ -143,6 +144,17 @@ export const useKeyboardSelection = (props: ISelectionKeyboardProps) => { } ); + useHotkeys( + ['PageUp', 'PageDown'], + () => { + const delta = coordInstance.containerHeight - coordInstance.rowInitSize - 1; + scrollBy(0, isHotkeyPressed('PageUp') ? -delta : delta); + }, + { + enabled: Boolean(activeCell && !isEditing), + enableOnFormTags: ['input', 'select', 'textarea'], + } + ); useHotkeys( 'mod+a', () => {