feat: pageUp/pageDown scrolling support (#1144)

* feat: pageUp/pageDown scrolling support * feat: pageUp/pageDown scrolling support
teableio · Dec 11, 2024 · a5898a5 · a5898a5
1 parent aeb01a7
commit a5898a5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git 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}
       />
     </div>
   );

diff --git 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
@@ -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',
     () => {