Merge pull request desktop#16114 from desktop/change-list-context-menu-invoking

Invoking Context Menu from ListRow component

Author: tidy-dev

app/src/ui/changes/changed-file.tsx

@@ -15,12 +15,6 @@ interface IChangedFileProps {
   readonly disableSelection: boolean
   readonly checkboxTooltip?: string
   readonly onIncludeChanged: (path: string, include: boolean) => void
-
-  /** Callback called when user right-clicks on an item */
-  readonly onContextMenu: (
-    file: WorkingDirectoryFileChange,
-    event: React.MouseEvent<HTMLDivElement>
-  ) => void
 }
 
 /** a changed file in the working directory for a given repository */
@@ -59,7 +53,7 @@ export class ChangedFile extends React.Component<IChangedFileProps, {}> {
       statusWidth
 
     return (
-      <div className="file" onContextMenu={this.onContextMenu}>
+      <div className="file">
         <TooltippedContent
           tooltip={checkboxTooltip}
           direction={TooltipDirection.EAST}
@@ -92,8 +86,4 @@ export class ChangedFile extends React.Component<IChangedFileProps, {}> {
       </div>
     )
   }
-
-  private onContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
-    this.props.onContextMenu(this.props.file, event)
-  }
 }

app/src/ui/changes/changes-list.tsx

@@ -318,7 +318,6 @@ export class ChangesList extends React.Component<
         file={file}
         include={isPartiallyCommittableSubmodule && include ? null : include}
         key={file.id}
-        onContextMenu={this.onItemContextMenu}
         onIncludeChanged={onIncludeChanged}
         availableWidth={availableWidth}
         disableSelection={disableSelection}
@@ -678,9 +677,12 @@ export class ChangesList extends React.Component<
   }
 
   private onItemContextMenu = (
-    file: WorkingDirectoryFileChange,
+    row: number,
     event: React.MouseEvent<HTMLDivElement>
   ) => {
+    const { workingDirectory } = this.props
+    const file = workingDirectory.files[row]
+
     if (this.props.isCommitting) {
       return
     }
@@ -965,6 +967,7 @@ export class ChangesList extends React.Component<
           onScroll={this.onScroll}
           setScrollTop={this.props.changesListScrollTop}
           onRowKeyDown={this.onRowKeyDown}
+          onRowContextMenu={this.onItemContextMenu}
         />
         {this.renderStashedChanges()}
         {this.renderCommitMessageForm()}

app/src/ui/lib/list/list-row.tsx

@@ -50,6 +50,13 @@ interface IListRowProps {
     e: React.FocusEvent<HTMLDivElement>
   ) => void
 
+  /** Called back for when the context menu is invoked (user right clicks of
+   * uses keyboard shortcuts) */
+  readonly onContextMenu?: (
+    index: number,
+    e: React.MouseEvent<HTMLDivElement>
+  ) => void
+
   /**
    * Whether or not this list row is going to be selectable either through
    * keyboard navigation, pointer clicks, or both. This is used to determine
@@ -102,6 +109,10 @@ export class ListRow extends React.Component<IListRowProps, {}> {
     this.props.onRowBlur?.(this.props.rowIndex, e)
   }
 
+  private onContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
+    this.props.onContextMenu?.(this.props.rowIndex, e)
+  }
+
   public render() {
     const selected = this.props.selected
     const className = classNames(
@@ -139,6 +150,7 @@ export class ListRow extends React.Component<IListRowProps, {}> {
         style={style}
         onFocus={this.onFocus}
         onBlur={this.onBlur}
+        onContextMenu={this.onContextMenu}
       >
         {this.props.children}
       </div>

app/src/ui/lib/list/list.tsx

@@ -189,6 +189,18 @@ interface IListProps {
    */
   readonly onRowMouseDown?: (row: number, event: React.MouseEvent<any>) => void
 
+  /**
+   * A handler called whenever a context menu event is received on the
+   * row container element.
+   *
+   * The context menu is invoked when a user right clicks the row or
+   * uses keyboard shortcut.
+   */
+  readonly onRowContextMenu?: (
+    row: number,
+    event: React.MouseEvent<HTMLDivElement>
+  ) => void
+
   /**
    * A handler called whenever the user drops items on the list to be inserted.
    *
@@ -631,6 +643,13 @@ export class List extends React.Component<IListProps, IListState> {
     }
   }
 
+  private onRowContextMenu = (
+    row: number,
+    e: React.MouseEvent<HTMLDivElement>
+  ) => {
+    this.props.onRowContextMenu?.(row, e)
+  }
+
   private onRowMouseOver = (row: number, event: React.MouseEvent<any>) => {
     if (this.props.selectOnHover && this.canSelectRow(row)) {
       if (!this.props.selectedRows.includes(row)) {
@@ -943,6 +962,7 @@ export class List extends React.Component<IListProps, IListState> {
         onRowMouseOver={this.onRowMouseOver}
         onRowFocus={this.onRowFocus}
         onRowBlur={this.onRowBlur}
+        onContextMenu={this.onRowContextMenu}
         style={params.style}
         tabIndex={tabIndex}
         children={element}