Support multi-selection in file lists

src/components/FileItem.tsx

@@ -3,6 +3,9 @@ import * as React from 'react';
 import { classes } from 'typestyle';
 import { GitExtension } from '../model';
 import {
+  checkboxLabelContainerStyle,
+  checkboxLabelLastContainerStyle,
+  checkboxLabelStyle,
   fileChangedLabelBrandStyle,
   fileChangedLabelInfoStyle,
   fileChangedLabelStyle,
@@ -12,6 +15,7 @@ import {
   selectedFileChangedLabelStyle,
   selectedFileStyle
 } from '../style/FileItemStyle';
+import { fileLabelStyle } from '../style/FilePathStyle';
 import { Git } from '../tokens';
 import { FilePath } from './FilePath';
 
@@ -44,20 +48,16 @@ interface IGitMarkBoxProps {
    * File status
    */
   stage: Git.Status;
+  /**
+   * Whether the checkbox is checked
+   */
+  checked: boolean;
 }
 
 /**
  * Render the selection box in simple mode
  */
 class GitMarkBox extends React.PureComponent<IGitMarkBoxProps> {
-  protected _onClick = (): void => {
-    // toggle will emit a markChanged signal
-    this.props.model.toggleMark(this.props.fname);
-
-    // needed if markChanged doesn't force an update of a parent
-    this.forceUpdate();
-  };
-
   protected _onDoubleClick = (
     event: React.MouseEvent<HTMLInputElement>
   ): void => {
@@ -76,8 +76,7 @@ class GitMarkBox extends React.PureComponent<IGitMarkBoxProps> {
         name="gitMark"
         className={gitMarkBoxStyle}
         type="checkbox"
-        checked={this.props.model.getMark(this.props.fname)}
-        onChange={this._onClick}
+        checked={this.props.checked}
         onDoubleClick={this._onDoubleClick}
       />
     );
@@ -117,9 +116,12 @@ export interface IFileItemProps {
    */
   selected?: boolean;
   /**
-   * Callback to select the file
+   * Callback to select file(s)
    */
-  selectFile?: (file: Git.IStatusFile | null) => void;
+  setSelection?: (
+    file: Git.IStatusFile,
+    options?: { singleton?: boolean; group?: boolean }
+  ) => void;
   /**
    * Optional style class
    */
@@ -132,12 +134,40 @@ export interface IFileItemProps {
    * The application language translator.
    */
   trans: TranslationBundle;
+  /**
+   * Callback to implement shift-click for simple staging
+   */
+  markUntilFile?: (file: Git.IStatusFile) => void;
+  /**
+   * whether the GitMarkBox is checked
+   */
+  checked?: boolean;
 }
 
 export class FileItem extends React.PureComponent<IFileItemProps> {
   constructor(props: IFileItemProps) {
     super(props);
   }
+
+  protected _onClick = (event: React.MouseEvent<HTMLInputElement>): void => {
+    if (this.props.markBox) {
+      if (event.shiftKey) {
+        this.props.markUntilFile(this.props.file);
+      } else {
+        this.props.model.toggleMark(this.props.file.to);
+        this.props.setSelection(this.props.file, { singleton: true });
+      }
+    } else {
+      if (event.ctrlKey || event.metaKey) {
+        this.props.setSelection(this.props.file);
+      } else if (event.shiftKey) {
+        this.props.setSelection(this.props.file, { group: true });
+      } else {
+        this.props.setSelection(this.props.file, { singleton: true });
+      }
+    }
+  };
+
   protected _getFileChangedLabel(change: keyof typeof STATUS_CODES): string {
     return STATUS_CODES[change] || 'Unmodified';
   }
@@ -190,11 +220,10 @@ export class FileItem extends React.PureComponent<IFileItemProps> {
 
     return (
       <div
+        data-test-selected={this.props.selected}
+        data-test-checked={this.props.checked}
         className={this._getFileClass()}
-        onClick={
-          this.props.selectFile &&
-          (() => this.props.selectFile(this.props.file))
-        }
+        onClick={this._onClick}
         onContextMenu={
           this.props.contextMenu &&
           (event => {
@@ -205,29 +234,36 @@ export class FileItem extends React.PureComponent<IFileItemProps> {
         style={this.props.style}
         title={this.props.trans.__(`%1 • ${status}`, this.props.file.to)}
       >
-        {this.props.markBox && (
-          <GitMarkBox
-            fname={this.props.file.to}
-            stage={this.props.file.status}
-            model={this.props.model}
-          />
-        )}
-        <FilePath
-          filepath={this.props.file.to}
-          filetype={this.props.file.type}
-        />
-        {this.props.actions}
-        <span
-          className={this._getFileChangedLabelClass(
-            this.props.file.status === 'unmerged' ? '!' : this.props.file.y
-          )}
-        >
-          {this.props.file.status === 'unmerged'
-            ? '!'
-            : this.props.file.y === '?'
-            ? 'U'
-            : status_code}
-        </span>
+        <div className={checkboxLabelContainerStyle}>
+          <div className={checkboxLabelStyle + ' ' + fileLabelStyle}>
+            {this.props.markBox && (
+              <GitMarkBox
+                fname={this.props.file.to}
+                stage={this.props.file.status}
+                model={this.props.model}
+                checked={this.props.checked}
+              />
+            )}
+            <FilePath
+              filepath={this.props.file.to}
+              filetype={this.props.file.type}
+            />
+          </div>
+          <div className={checkboxLabelLastContainerStyle}>
+            {this.props.actions}
+            <span
+              className={this._getFileChangedLabelClass(
+                this.props.file.status === 'unmerged' ? '!' : this.props.file.y
+              )}
+            >
+              {this.props.file.status === 'unmerged'
+                ? '!'
+                : this.props.file.y === '?'
+                ? 'U'
+                : status_code}
+            </span>
+          </div>
+        </div>
       </div>
     );
   }