Better double click handling

juanlao7 · Jan 19, 2021 · 21fe4cb · 21fe4cb
1 parent e82d792
commit 21fe4cb
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/client/apps/remolacha.Files/src/Files.tsx b/client/apps/remolacha.Files/src/Files.tsx
@@ -254,7 +254,9 @@ export class Files extends React.Component<FilesProps, FilesState> {
         this.setState(newState);
     }
 
-    private onRowDoubleClick(rowIndex : number, e : React.MouseEvent<HTMLTableRowElement, MouseEvent>) {
+    private onRowDoubleMouseDown(rowIndex : number, e : React.MouseEvent<HTMLTableRowElement, MouseEvent>) {
+        e.preventDefault();     // To avoid text selection.
+
         if (this.state.elements[rowIndex].type == 'd') {
             const [parts, separator] = this.splitPath(this.state.currentPath);
 
@@ -423,7 +425,7 @@ export class Files extends React.Component<FilesProps, FilesState> {
                     rowKey={(rowIndex : number) => this.state.elements[rowIndex].name}
                     rowSelected={(rowIndex : number) => this.state.selected.has(this.state.elements[rowIndex].name)}
                     onRowMouseDown={(rowIndex : number, e : React.MouseEvent<HTMLTableRowElement, MouseEvent>) => this.onRowMouseDown(rowIndex, e)}
-                    onRowDoubleClick={(rowIndex : number, e : React.MouseEvent<HTMLTableRowElement, MouseEvent>) => this.onRowDoubleClick(rowIndex, e)}
+                    onRowDoubleMouseDown={(rowIndex : number, e : React.MouseEvent<HTMLTableRowElement, MouseEvent>) => this.onRowDoubleMouseDown(rowIndex, e)}
                     ref={(x : any) => this.dataTable = x}
                 />
 

diff --git a/client/remolacha/DataTable.tsx b/client/remolacha/DataTable.tsx
@@ -25,6 +25,7 @@ interface DataTableProps {
     rowSelected? : (rowIndex : number) => boolean;
     onRowMouseDown? : (rowIndex : number, event : React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
     onRowClick? : (rowIndex : number, event : React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
+    onRowDoubleMouseDown? : (rowIndex : number, event : React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
     onRowDoubleClick? : (rowIndex : number, event : React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
 }
 
@@ -34,13 +35,19 @@ interface DataTableState {
 }
 
 export class DataTable extends React.Component<DataTableProps, DataTableState> {
+    private static readonly DOUBLE_MOUSE_DOWN_THRESHOLD = 400;
+
     private originalToSortedIndex : Map<number, number>;
     private sortedToOriginalIndex : Map<number, number>;
+    private lastMouseDownTimestamp : number;
+    private lastMouseDownRowIndex : number;
 
     constructor(props : DataTableProps) {
         super(props);
         this.originalToSortedIndex = null;
         this.sortedToOriginalIndex = null;
+        this.lastMouseDownTimestamp = 0;
+        this.lastMouseDownRowIndex = -1;
 
         this.state = {
             orderBy: this.props.defaultOrderBy,
@@ -141,6 +148,22 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
         this.setState(newState);
     }
 
+    private onRowMouseDown(rowIndex : number, event : React.MouseEvent<HTMLTableRowElement, MouseEvent>) {
+        if (this.props.onRowMouseDown) {
+            this.props.onRowMouseDown(rowIndex, event);
+        }
+
+        const now = Date.now();
+
+        if (this.props.onRowDoubleMouseDown && this.lastMouseDownRowIndex == rowIndex && now - this.lastMouseDownTimestamp < DataTable.DOUBLE_MOUSE_DOWN_THRESHOLD) {
+            this.props.onRowDoubleMouseDown(rowIndex, event);
+            this.lastMouseDownRowIndex = -1;
+        }
+
+        this.lastMouseDownTimestamp = now;
+        this.lastMouseDownRowIndex = rowIndex;
+    }
+
     render() {
         return (
             <TableContainer className={this.props.className}>
@@ -172,7 +195,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
                             key={(this.props.rowKey) ? this.props.rowKey(originalIndex) : null}
                             selected={(this.props.rowSelected) ? this.props.rowSelected(originalIndex) : false}
                             hover
-                            onMouseDown={e => this.props.onRowMouseDown && this.props.onRowMouseDown(originalIndex, e)}
+                            onMouseDown={e => this.onRowMouseDown(originalIndex, e)}
                             onClick={e => this.props.onRowClick && this.props.onRowClick(originalIndex, e)}
                             onDoubleClick={e => this.props.onRowDoubleClick && this.props.onRowDoubleClick(originalIndex, e)}
                         >