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 (
-
+ onMouseOverRowCheckBox(obj.id)}
+ >
selectRow(obj.id, e.target.checked)}
+ onMouseDown={(e) => onMouseDownRowCheckBox(e.target.checked)}
/>
{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 b380268742..bfe014c123 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) {
@@ -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}
/>
);
}
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}
/>
);
}