From 9d3aef0e37edddd0dd872b1d93598695206cf12c Mon Sep 17 00:00:00 2001
From: Ashish Baravaliya <vier.institute35@gmail.com>
Date: Tue, 23 Apr 2024 15:11:08 -0400
Subject: [PATCH 1/2] feat: Select rows by pressing and dragging cursor over
 checkboxes

---
 src/components/BrowserRow/BrowserRow.react.js | 10 +++++-
 src/dashboard/Data/Browser/Browser.react.js   | 31 +++++++++++++++++++
 .../Data/Browser/BrowserTable.react.js        |  9 ++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index 6d3085a1b8..fc32426d30 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/src/components/BrowserRow/BrowserRow.react.js
@@ -42,6 +42,9 @@ export default class BrowserRow extends Component {
       setContextMenu,
       onFilterChange,
       markRequiredFieldRow,
+      onMouseDownRowCheckBox,
+      onMouseUpRowCheckBox,
+      onMouseOverRowCheckBox,
     } = this.props;
     const attributes = obj.attributes;
     let requiredCols = [];
@@ -62,11 +65,16 @@ export default class BrowserRow extends Component {
     }
     return (
       <div className={styles.tableRow} style={{ minWidth: rowWidth }}>
-        <span className={styles.checkCell}>
+        <span
+          className={styles.checkCell}
+          onMouseUp={onMouseUpRowCheckBox}
+          onMouseOver={() => onMouseOverRowCheckBox(obj.id)}
+        >
           <input
             type="checkbox"
             checked={selection['*'] || selection[obj.id]}
             onChange={e => selectRow(obj.id, e.target.checked)}
+            onMouseDown={(e) => onMouseDownRowCheckBox(e.target.checked)}
           />
         </span>
         {order.map(({ name, width, visible }, j) => {
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index ad5ec9238b..9f461a69d8 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -98,6 +98,9 @@ class Browser extends DashboardView {
       currentUser: Parse.User.current(),
 
       processedScripts: 0,
+
+      rowCheckboxDragging: false,
+      draggedRowSelection: false,
     };
 
     this.addLocation = this.addLocation.bind(this);
@@ -163,6 +166,9 @@ class Browser extends DashboardView {
     this.abortEditCloneRow = this.abortEditCloneRow.bind(this);
     this.cancelPendingEditRows = this.cancelPendingEditRows.bind(this);
     this.redirectToFirstClass = this.redirectToFirstClass.bind(this);
+    this.onMouseDownRowCheckBox = this.onMouseDownRowCheckBox.bind(this);
+    this.onMouseUpRowCheckBox = this.onMouseUpRowCheckBox.bind(this);
+    this.onMouseOverRowCheckBox = this.onMouseOverRowCheckBox.bind(this);
 
     this.dataBrowserRef = React.createRef();
 
@@ -189,10 +195,12 @@ class Browser extends DashboardView {
 
   componentDidMount() {
     this.addLocation(this.props.params.appId);
+    window.addEventListener('mouseup', this.onMouseUpRowCheckBox);
   }
 
   componentWillUnmount() {
     this.removeLocation();
+    window.removeEventListener('mouseup', this.onMouseUpRowCheckBox);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
@@ -1788,6 +1796,26 @@ class Browser extends DashboardView {
     this.setState({ showPointerKeyDialog: false });
   }
 
+  onMouseDownRowCheckBox(checked) {
+    this.setState({
+      rowCheckboxDragging: true, 
+      draggedRowSelection: !checked
+    });
+  }
+
+  onMouseUpRowCheckBox() {
+    this.setState({
+      rowCheckboxDragging: false,
+      draggedRowSelection: false
+    })
+  }
+
+  onMouseOverRowCheckBox(id) {
+    if (this.state.rowCheckboxDragging) {
+      this.selectRow(id, this.state.draggedRowSelection);
+    }
+  }
+
   renderContent() {
     let browser = null;
     let className = this.props.params.className;
@@ -1907,6 +1935,9 @@ class Browser extends DashboardView {
             onAddRowWithModal={this.addRowWithModal}
             onAddClass={this.showCreateClass}
             showNote={this.showNote}
+            onMouseDownRowCheckBox={this.onMouseDownRowCheckBox}
+            onMouseUpRowCheckBox={this.onMouseUpRowCheckBox}
+            onMouseOverRowCheckBox={this.onMouseOverRowCheckBox}
           />
         );
       }
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 27b1d97707..95cd313cc7 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -170,6 +170,9 @@ export default class BrowserTable extends React.Component {
                     scripts={this.context.scripts}
                     selectedCells={this.props.selectedCells}
                     handleCellClick={this.props.handleCellClick}
+                    onMouseDownRowCheckBox={this.props.onMouseDownRowCheckBox}
+                    onMouseUpRowCheckBox={this.props.onMouseUpRowCheckBox}
+                    onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
                   />
                   <Button
                     value="Clone"
@@ -240,6 +243,9 @@ export default class BrowserTable extends React.Component {
               scripts={this.context.scripts}
               selectedCells={this.props.selectedCells}
               handleCellClick={this.props.handleCellClick}
+              onMouseDownRowCheckBox={this.props.onMouseDownRowCheckBox}
+              onMouseUpRowCheckBox={this.props.onMouseUpRowCheckBox}
+              onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
             />
             <Button
               value="Add"
@@ -318,6 +324,9 @@ export default class BrowserTable extends React.Component {
             scripts={this.context.scripts}
             selectedCells={this.props.selectedCells}
             handleCellClick={this.props.handleCellClick}
+            onMouseDownRowCheckBox={this.props.onMouseDownRowCheckBox}
+            onMouseUpRowCheckBox={this.props.onMouseUpRowCheckBox}
+            onMouseOverRowCheckBox={this.props.onMouseOverRowCheckBox}
           />
         );
       }

From 520763fb1499f03e3d1293e7261efa4bab2ae648 Mon Sep 17 00:00:00 2001
From: Ashish Baravaliya <vier.institute35@gmail.com>
Date: Tue, 23 Apr 2024 15:25:54 -0400
Subject: [PATCH 2/2] fix: lint issues

---
 src/dashboard/Data/Browser/Browser.react.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 9f461a69d8..b2cb40a0cf 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -1798,16 +1798,16 @@ class Browser extends DashboardView {
 
   onMouseDownRowCheckBox(checked) {
     this.setState({
-      rowCheckboxDragging: true, 
-      draggedRowSelection: !checked
+      rowCheckboxDragging: true,
+      draggedRowSelection: !checked,
     });
   }
 
   onMouseUpRowCheckBox() {
     this.setState({
       rowCheckboxDragging: false,
-      draggedRowSelection: false
-    })
+      draggedRowSelection: false,
+    });
   }
 
   onMouseOverRowCheckBox(id) {