From 30c4434b4aad5faa7919f5ca8bdffd120223bbed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E9=93=B6=E9=BE=99?=
 <aofong@sunyinlongdeMacBook-Pro.local>
Date: Fri, 29 May 2020 12:12:36 +0800
Subject: [PATCH 1/2] add customNavigate event

---
 src/DataSheet.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/DataSheet.js b/src/DataSheet.js
index 44c8a65..855ca61 100644
--- a/src/DataSheet.js
+++ b/src/DataSheet.js
@@ -257,9 +257,11 @@ export default class DataSheet extends PureComponent {
 
   handleKeyboardCellMovement(e, commit = false) {
     const { start, editing } = this.getState();
-    const { data } = this.props;
+    const { data, customNavigate } = this.props;
     const isEditing = editing && !isEmpty(editing);
     const currentCell = data[start.i] && data[start.i][start.j];
+    let defaultOffset = { i: 1, j: 0 }
+    let jumpRow = false
 
     if (isEditing && !commit) {
       return false;
@@ -274,18 +276,21 @@ export default class DataSheet extends PureComponent {
     }
 
     if (keyCode === TAB_KEY) {
-      this.handleNavigate(e, { i: 0, j: e.shiftKey ? -1 : 1 }, true);
+      defaultOffset = { i: 0, j: e.shiftKey ? -1 : 1 };
+      jumpRow = true;
     } else if (keyCode === RIGHT_KEY) {
-      this.handleNavigate(e, { i: 0, j: 1 });
+      defaultOffset = { i: 0, j: 1 };
     } else if (keyCode === LEFT_KEY) {
-      this.handleNavigate(e, { i: 0, j: -1 });
+      defaultOffset = { i: 0, j: -1 };
     } else if (keyCode === UP_KEY) {
-      this.handleNavigate(e, { i: -1, j: 0 });
+      defaultOffset = { i: -1, j: 0 };
     } else if (keyCode === DOWN_KEY) {
-      this.handleNavigate(e, { i: 1, j: 0 });
+      defaultOffset = { i: 1, j: 0 };
     } else if (commit && keyCode === ENTER_KEY) {
-      this.handleNavigate(e, { i: e.shiftKey ? -1 : 1, j: 0 });
+      defaultOffset = { i: e.shiftKey ? -1 : 1, j: 0 };
     }
+    const [newOffset, newJumpRow] = customNavigate ? customNavigate(currentCell, keyCode, e) || [defaultOffset, jumpRow] : [defaultOffset, jumpRow]
+    this.handleNavigate(e, newOffset, newJumpRow);
   }
 
   handleEdit(value) {
@@ -731,6 +736,7 @@ DataSheet.propTypes = {
   parsePaste: PropTypes.func,
   attributesRenderer: PropTypes.func,
   keyFn: PropTypes.func,
+  customNavigate: PropTypes.func,
 };
 
 DataSheet.defaultProps = {

From f6f3ec2145298ec3db9f819038821f6b443ef9a5 Mon Sep 17 00:00:00 2001
From: aofong <84339706@qq.com>
Date: Fri, 29 May 2020 15:05:50 +0800
Subject: [PATCH 2/2] fix customNavigate

---
 src/DataSheet.js           | 22 ++++++++++++++++++----
 types/react-datasheet.d.ts |  2 ++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/DataSheet.js b/src/DataSheet.js
index 855ca61..f6db667 100644
--- a/src/DataSheet.js
+++ b/src/DataSheet.js
@@ -260,8 +260,8 @@ export default class DataSheet extends PureComponent {
     const { data, customNavigate } = this.props;
     const isEditing = editing && !isEmpty(editing);
     const currentCell = data[start.i] && data[start.i][start.j];
-    let defaultOffset = { i: 1, j: 0 }
-    let jumpRow = false
+    let defaultOffset = { i: 1, j: 0 };
+    let jumpRow = false;
 
     if (isEditing && !commit) {
       return false;
@@ -289,8 +289,22 @@ export default class DataSheet extends PureComponent {
     } else if (commit && keyCode === ENTER_KEY) {
       defaultOffset = { i: e.shiftKey ? -1 : 1, j: 0 };
     }
-    const [newOffset, newJumpRow] = customNavigate ? customNavigate(currentCell, keyCode, e) || [defaultOffset, jumpRow] : [defaultOffset, jumpRow]
-    this.handleNavigate(e, newOffset, newJumpRow);
+    if (
+      [TAB_KEY, RIGHT_KEY, LEFT_KEY, UP_KEY, DOWN_KEY, ENTER_KEY].includes(
+        keyCode,
+      )
+    ) {
+      const [newOffset, newJumpRow] = customNavigate
+        ? customNavigate(currentCell, keyCode, e) || [defaultOffset, jumpRow]
+        : [defaultOffset, jumpRow];
+      if (keyCode === ENTER_KEY) {
+        if (commit) {
+          this.handleNavigate(e, newOffset, newJumpRow);
+        }
+      } else {
+        this.handleNavigate(e, newOffset, newJumpRow);
+      }
+    }
   }
 
   handleEdit(value) {
diff --git a/types/react-datasheet.d.ts b/types/react-datasheet.d.ts
index 0c12617..e65ff21 100644
--- a/types/react-datasheet.d.ts
+++ b/types/react-datasheet.d.ts
@@ -79,6 +79,8 @@ declare namespace ReactDataSheet {
         keyFn?: (row: number) => string | number;
         /** Optional: Function that can decide whether navigating to the indicated cell is possible. */
         isCellNavigable?: (cell: T, row: number, col: number, jumpNext: boolean) => boolean;
+
+        customNavigate?: (cell: T, keyCode: number, e: object) => T[];
     }
 
     /** A function to process the raw clipboard data. It should return an array of arrays of strings. This is useful for when the clipboard may have data with irregular field or line delimiters. If not set, rows will be split with line breaks and cells with tabs. To wire it up pass your function to the parsePaste property of the ReactDataSheet component. */