feat: Select rows in data browser by clicking and dragging mouse cursor over checkboxes (#2548)

Author: AshishBarvaliya

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) => {

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) {
@@ -1790,6 +1798,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;
@@ -1909,6 +1937,9 @@ class Browser extends DashboardView {
             onAddRowWithModal={this.addRowWithModal}
             onAddClass={this.showCreateClass}
             showNote={this.showNote}
+            onMouseDownRowCheckBox={this.onMouseDownRowCheckBox}
+            onMouseUpRowCheckBox={this.onMouseUpRowCheckBox}
+            onMouseOverRowCheckBox={this.onMouseOverRowCheckBox}
           />
         );
       }

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}
           />
         );
       }