Add support for filtering branch menu

Author: kgryte

src/components/NewBranchDialog.tsx

@@ -16,6 +16,10 @@ import {
   closeButtonClass,
   contentWrapperClass,
   createButtonClass,
+  filterClass,
+  filterClearClass,
+  filterInputClass,
+  filterWrapperClass,
   listItemBoldTitleClass,
   listItemClass,
   listItemContentClass,
@@ -69,6 +73,11 @@ export interface INewBranchDialogState {
    */
   base: string;
 
+  /**
+   * Menu filter.
+   */
+  filter: string;
+
   /**
    * Current branch name.
    */
@@ -102,6 +111,7 @@ export class NewBranchDialog extends React.Component<
     this.state = {
       name: '',
       base: repo ? this.props.model.currentBranch.name : '',
+      filter: '',
       current: repo ? this.props.model.currentBranch.name : '',
       branches: repo ? this.props.model.branches : []
     };
@@ -150,6 +160,27 @@ export class NewBranchDialog extends React.Component<
             title="Enter a branch name"
           />
           <p>Create branch based on...</p>
+          <div className={filterWrapperClass}>
+            <div className={filterClass}>
+              <input
+                className={filterInputClass}
+                type="text"
+                onChange={this._onFilterChange}
+                value={this.state.filter}
+                placeholder="Filter"
+                title="Filter branch menu"
+              />
+              {this.state.filter ? (
+                <button className={filterClearClass}>
+                  <ClearIcon
+                    titleAccess="Clear the current filter"
+                    fontSize="small"
+                    onClick={this._resetFilter}
+                  />
+                </button>
+              ) : null}
+            </div>
+          </div>
           <div className={listWrapperClass}>
             <List disablePadding>{this._renderItems()}</List>
           </div>
@@ -210,6 +241,10 @@ export class NewBranchDialog extends React.Component<
    * @returns fragment
    */
   private _renderItem(branch: Git.IBranch, idx: number) {
+    // Perform a "simple" filter... (TODO: consider implementing fuzzy filtering)
+    if (this.state.filter && !branch.name.includes(this.state.filter)) {
+      return null;
+    }
     const isBase = branch.name === this.state.base;
     const isCurr = branch.name === this.state.current;
 
@@ -277,6 +312,26 @@ export class NewBranchDialog extends React.Component<
     });
   }
 
+  /**
+   * Callback invoked upon a change to the menu filter.
+   *
+   * @param event - event object
+   */
+  private _onFilterChange = (event: any): void => {
+    this.setState({
+      filter: event.target.value
+    });
+  };
+
+  /**
+   * Callback invoked to reset the menu filter.
+   */
+  private _resetFilter = (): void => {
+    this.setState({
+      filter: ''
+    });
+  };
+
   /**
    * Returns a callback which is invoked upon clicking a branch name.
    *

src/style/NewBranchDialog.ts

@@ -2,6 +2,7 @@ import { style } from 'typestyle';
 
 export const branchDialogClass = style({
   width: '400px',
+  height: '460px',
 
   borderRadius: '3px!important'
 });
@@ -47,7 +48,7 @@ export const contentWrapperClass = style({
 
   $nest: {
     '> p': {
-      marginBottom: '10px'
+      marginBottom: '7px'
     }
   }
 });
@@ -79,10 +80,88 @@ export const nameInputClass = style({
   }
 });
 
+export const filterWrapperClass = style({
+  padding: 0,
+  paddingBottom: '4px'
+});
+
+export const filterClass = style({
+  boxSizing: 'border-box',
+  display: 'inline-block',
+  position: 'relative',
+
+  width: '100%',
+
+  marginRight: '11px',
+
+  fontSize: 'var(--jp-ui-font-size1)'
+});
+
+export const filterInputClass = style({
+  boxSizing: 'border-box',
+
+  width: '100%',
+  height: '2em',
+
+  /* top | right | bottom | left */
+  padding: '1px 18px 2px 7px',
+
+  color: 'var(--jp-ui-font-color0)',
+  fontSize: 'var(--jp-ui-font-size1)',
+  fontWeight: 300,
+
+  backgroundColor: 'var(--jp-layout-color1)',
+
+  border: 'var(--jp-border-width) solid var(--jp-border-color2)',
+  borderRadius: '3px',
+
+  $nest: {
+    '&:active': {
+      border: 'var(--jp-border-width) solid var(--jp-brand-color1)'
+    },
+    '&:focus': {
+      border: 'var(--jp-border-width) solid var(--jp-brand-color1)'
+    }
+  }
+});
+
+export const filterClearClass = style({
+  position: 'absolute',
+  right: '5px',
+  top: '0.6em',
+
+  height: '1.1em',
+  width: '1.1em',
+
+  padding: 0,
+
+  backgroundColor: 'var(--jp-inverse-layout-color4)',
+
+  border: 'none',
+  borderRadius: '50%',
+
+  $nest: {
+    svg: {
+      width: '0.5em!important',
+      height: '0.5em!important',
+
+      fill: 'var(--jp-ui-inverse-font-color0)'
+    },
+    '&:hover': {
+      backgroundColor: 'var(--jp-inverse-layout-color3)'
+    },
+    '&:active': {
+      backgroundColor: 'var(--jp-inverse-layout-color2)'
+    }
+  }
+});
+
 export const listWrapperClass = style({
+  boxSizing: 'border-box',
   display: 'block',
+
   width: '100%',
-  maxHeight: '400px',
+  height: '200px',
 
   border: 'var(--jp-border-width) solid var(--jp-border-color2)',
   borderRadius: '3px',