Added ESC key binding (#1695)

* added ESC key binding for new row * added more conditions for cancellling editing rows * updated cancelling editing condition
parse-community · May 10, 2021 · 909ff92 · 909ff92
1 parent 457a17d
commit 909ff92
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
@@ -121,6 +121,7 @@ class Browser extends DashboardView {
     this.closeEditRowDialog = this.closeEditRowDialog.bind(this);
     this.handleShowAcl = this.handleShowAcl.bind(this);
     this.onDialogToggle = this.onDialogToggle.bind(this);
+    this.abortAddRow = this.abortAddRow.bind(this);
   }
 
   componentWillMount() {
@@ -294,6 +295,14 @@ class Browser extends DashboardView {
     }
   }
 
+  abortAddRow(){
+    if(this.state.newObject){
+      this.setState({
+        newObject: null
+      });
+    }
+  }
+
   addRowWithModal() {
     this.addRow();
     this.selectRow(undefined, true);
@@ -1025,6 +1034,7 @@ class Browser extends DashboardView {
             onCloneSelectedRows={this.showCloneSelectedRowsDialog}
             onEditSelectedRow={this.showEditRowDialog}
             onEditPermissions={this.onDialogToggle}
+            onAbortAddRow={this.abortAddRow}
 
             columns={columns}
             className={className}

diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -138,6 +138,29 @@ export default class DataBrowser extends React.Component {
     if (this.props.disableKeyControls) {
       return;
     }
+    if (
+      this.state.editing &&
+      this.state.current &&
+      this.state.current.row === -1 &&
+      this.props.newObject
+    ) {
+      // if user is editing new row and want to cancel editing cell
+      if (e.keyCode === 27) {
+        this.setState({
+          editing: false
+        });
+        e.preventDefault();
+      }
+      return;
+    }
+    if(!this.state.editing && this.props.newObject){
+      // if user is not editing any row but there's new row
+      if(e.keyCode === 27){
+        this.props.onAbortAddRow();
+        e.preventDefault();
+      }
+      return;
+    }
     if (this.state.editing) {
       switch (e.keyCode) {
         case 27: // ESC