checkboxes in simple staging now have correct appearance

telamonian · telamonian · commit a0f34233d18f · 2019-11-12T03:11:41.000-05:00
stil don't actually do anything
diff --git a/src/components/FileItemSimple.tsx b/src/components/FileItemSimple.tsx
@@ -2,14 +2,15 @@ import { Dialog, showDialog } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import * as React from 'react';
 import { classes } from 'typestyle';
-import { GitExtension } from '../model';
+import { BranchMarker, GitExtension } from '../model';
 import {
   fileButtonStyle,
   fileGitButtonStyle,
   fileIconStyle,
   fileLabelStyle,
   fileStyle
 } from '../style/FileItemStyle';
+import { gitMarkBoxStyle } from '../style/FileItemSimpleStyle';
 import {
   changeStageButtonStyle,
   diffFileButtonStyle,
@@ -21,19 +22,51 @@ import { isDiffSupported } from './diff/Diff';
 import { openDiffView } from './diff/DiffWidget';
 import { ISpecialRef } from './diff/model';
 
+export interface IGitMarkBoxProps {
+  fname: string;
+  stage: string;
+  marker: BranchMarker;
+}
+
+export class GitMarkBox extends React.Component<IGitMarkBoxProps> {
+  constructor(props: IGitMarkBoxProps) {
+    super(props);
+
+    this._onClick = this._onClick.bind(this);
+  }
+
+  protected _onClick(event: React.ChangeEvent<HTMLInputElement>) {
+    this.props.marker.toggle(this.props.fname);
+    console.log(this.props.marker);
+    this.forceUpdate();
+  }
+
+  render() {
+    // idempotent, will only run once per file
+    this.props.marker.add(this.props.fname, this.props.stage !== 'untracked');
+
+    return (
+      <input
+        name="gitMark"
+        className={gitMarkBoxStyle}
+        type="checkbox"
+        checked={this.props.marker.get(this.props.fname)}
+        onChange={this._onClick}
+      />
+    );
+  }
+}
+
 export interface IFileItemSimpleProps {
   file: Git.IStatusFileResult;
   stage: string;
+  marker: BranchMarker;
   model: GitExtension;
   discardFile: (file: string) => Promise<void>;
   renderMime: IRenderMimeRegistry;
 }
 
-export class FileItemSimple extends React.Component<IFileItemSimpleProps, {}> {
-  constructor(props: IFileItemSimpleProps) {
-    super(props);
-  }
-
+export class FileItemSimple extends React.Component<IFileItemSimpleProps> {
   getDiffFileIconClass() {
     return classes(
       fileButtonStyle,
@@ -73,6 +106,11 @@ export class FileItemSimple extends React.Component<IFileItemSimpleProps, {}> {
   render() {
     return (
       <li className={fileStyle}>
+        <GitMarkBox
+          marker={this.props.marker}
+          stage={this.props.stage}
+          fname={this.props.file.to}
+        />
         <span
           className={classes(
             fileIconStyle,
@@ -93,7 +131,7 @@ export class FileItemSimple extends React.Component<IFileItemSimpleProps, {}> {
         >
           {this.props.file.to}
         </span>
-        {this.props.stage === 'Changed' && (
+        {this.props.stage === 'unstaged' && (
           <React.Fragment>
             <button
               className={`jp-Git-button ${this.getDiscardFileIconClass()}`}
@@ -106,7 +144,7 @@ export class FileItemSimple extends React.Component<IFileItemSimpleProps, {}> {
               this.diffButton({ specialRef: 'WORKING' })}
           </React.Fragment>
         )}
-        {this.props.stage === 'Staged' &&
+        {this.props.stage === 'staged' &&
           isDiffSupported(this.props.file.to) &&
           this.diffButton({ specialRef: 'INDEX' })}
       </li>
diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
@@ -484,12 +484,16 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
       />
     );
 
-    const allFilesExcludingUnmodified = () =>
-      this.props.untrackedFiles.concat(
+    const allFilesExcludingUnmodified = () => {
+      let files = this.props.untrackedFiles.concat(
         this.props.unstagedFiles,
         this.props.stagedFiles
       );
 
+      files.sort((a, b) => a.to.localeCompare(b.to));
+      return files;
+    };
+
     return (
       <div onContextMenu={event => event.preventDefault()}>
         <CommitBox
@@ -501,6 +505,10 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
             <GitStageSimple
               heading={'Changed'}
               files={allFilesExcludingUnmodified()}
+              marker={this.props.model.getMarker(
+                this.props.model.pathRepository,
+                ''
+              )}
               model={this.props.model}
               discardAllFiles={this.discardAllChanges}
               discardFile={this.discardChanges}
diff --git a/src/components/GitPanel.tsx b/src/components/GitPanel.tsx
@@ -1,13 +1,14 @@
 import { ISettingRegistry } from '@jupyterlab/coreutils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import * as React from 'react';
-import { GitExtension, BranchMarker } from '../model';
+import { GitExtension } from '../model';
 import {
   findRepoButtonStyle,
   panelContainerStyle,
   panelWarningStyle
 } from '../style/GitPanelStyle';
 import { Git } from '../tokens';
+import { decodeStage } from '../utils';
 import { BranchHeader } from './BranchHeader';
 import { FileList } from './FileList';
 import { HistorySideBar } from './HistorySideBar';
@@ -28,8 +29,6 @@ export interface IGitSessionNodeState {
   untrackedFiles: Git.IStatusFileResult[];
   hasChangedFiles: boolean;
 
-  marker: BranchMarker;
-
   isHistoryVisible: boolean;
 }
 
@@ -57,7 +56,6 @@ export class GitPanel extends React.Component<
       stagedFiles: [],
       unstagedFiles: [],
       untrackedFiles: [],
-      marker: null,
       isHistoryVisible: false
     };
 
@@ -99,14 +97,15 @@ export class GitPanel extends React.Component<
         }
       }
 
+      this.props.model.getMarker(
+        this.props.model.pathRepository,
+        currentBranch
+      );
+
       this.setState({
         branches: branchData.branches,
         currentBranch: currentBranch,
-        upstreamBranch: upstreamBranch,
-        marker: this.props.model.getMarker(
-          this.props.model.pathRepository,
-          currentBranch
-        )
+        upstreamBranch: upstreamBranch
       });
     }
   };
@@ -138,32 +137,26 @@ export class GitPanel extends React.Component<
       let statusFiles = this.props.model.status;
       if (statusFiles.length > 0) {
         for (let i = 0; i < statusFiles.length; i++) {
+          const file = statusFiles[i];
+          const { x, y } = file;
+          const stage = decodeStage(x, y);
+
           // If file has been changed
-          if (statusFiles[i].x !== '?' && statusFiles[i].x !== '!') {
+          if (x !== '?' && x !== '!') {
             changedFiles++;
           }
+
           // If file is untracked
-          if (statusFiles[i].x === '?' && statusFiles[i].y === '?') {
-            untrackedFiles.push(statusFiles[i]);
-          } else {
-            // If file is staged
-            if (statusFiles[i].x !== ' ' && statusFiles[i].y !== 'D') {
-              stagedFiles.push(statusFiles[i]);
-            }
-            // If file is unstaged but tracked
-            if (statusFiles[i].y !== ' ') {
-              unstagedFiles.push(statusFiles[i]);
-            }
+          if (stage === 'untracked') {
+            untrackedFiles.push(file);
+          } else if (stage === 'unstaged') {
+            unstagedFiles.push(file);
+          } else if (stage === 'staged') {
+            stagedFiles.push(file);
           }
         }
       }
 
-      this.state.marker.addMarked(
-        ...stagedFiles.map(x => x.to),
-        ...unstagedFiles.map(x => x.to)
-      );
-      this.state.marker.addUnmarked(...untrackedFiles.map(x => x.to));
-
       this.setState({
         stagedFiles: stagedFiles,
         unstagedFiles: unstagedFiles,
diff --git a/src/components/GitStageSimple.tsx b/src/components/GitStageSimple.tsx
@@ -2,7 +2,7 @@ import { Dialog, showDialog } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import * as React from 'react';
 import { classes } from 'typestyle';
-import { GitExtension } from '../model';
+import { BranchMarker, GitExtension } from '../model';
 import {
   changeStageButtonStyle,
   discardFileButtonStyle,
@@ -12,10 +12,12 @@ import {
 } from '../style/GitStageStyle';
 import { Git } from '../tokens';
 import { FileItemSimple } from './FileItemSimple';
+import { decodeStage } from '../utils';
 
 export interface IGitStageSimpleProps {
   heading: string;
   files: Git.IStatusFileResult[];
+  marker: BranchMarker;
   model: GitExtension;
   discardAllFiles: () => Promise<void>;
   discardFile: (file: string) => Promise<void>;
@@ -80,7 +82,8 @@ export class GitStageSimple extends React.Component<IGitStageSimpleProps> {
                 <FileItemSimple
                   key={fileIndex}
                   file={file}
-                  stage={this.props.heading}
+                  stage={decodeStage(file.x, file.y)}
+                  marker={this.props.marker}
                   model={this.props.model}
                   discardFile={this.props.discardFile}
                   renderMime={this.props.renderMime}
diff --git a/src/model.ts b/src/model.ts
@@ -879,17 +879,21 @@ export class BranchMarker {
   }
 
   addMarked(...fnames: string[]) {
-    for (let fname in fnames) {
+    for (let fname of fnames) {
       this.add(fname, true);
     }
   }
 
   addUnmarked(...fnames: string[]) {
-    for (let fname in fnames) {
+    for (let fname of fnames) {
       this.add(fname, false);
     }
   }
 
+  get(fname: string) {
+    return this._marks[fname];
+  }
+
   mark(fname: string) {
     this._marks[fname] = true;
   }
diff --git a/src/style/FileItemSimpleStyle.ts b/src/style/FileItemSimpleStyle.ts
@@ -0,0 +1,9 @@
+import { style } from 'typestyle';
+import { NestedCSSProperties } from 'typestyle/lib/types';
+
+export const gitMarkBoxCss: NestedCSSProperties = {
+  flex: '0 0 auto',
+  margin: 'auto 8px auto 4px'
+};
+
+export const gitMarkBoxStyle = style(gitMarkBoxCss);
diff --git a/src/utils.ts b/src/utils.ts
@@ -31,6 +31,24 @@ export function extractFilename(path: string): string {
   }
 }
 
+export function decodeStage(x: string, y: string) {
+  // If file is untracked
+  if (x === '?' && y === '?') {
+    return 'untracked';
+  } else {
+    // If file is staged
+    if (x !== ' ' && y !== 'D') {
+      return 'staged';
+    }
+    // If file is unstaged but tracked
+    if (y !== ' ') {
+      return 'unstaged';
+    }
+  }
+
+  return undefined;
+}
+
 /** Open a file in the git listing */
 export async function openListedFile(
   typeX: string,

Original file line number	Diff line number	Diff line change
`@@ -879,17 +879,21 @@ export class BranchMarker {`
`879`	`879`	`}`
`880`	`880`
`881`	`881`	`addMarked(...fnames: string[]) {`
`882`		`- for (let fname in fnames) {`
	`882`	`+ for (let fname of fnames) {`
`883`	`883`	`this.add(fname, true);`
`884`	`884`	`}`
`885`	`885`	`}`
`886`	`886`
`887`	`887`	`addUnmarked(...fnames: string[]) {`
`888`		`- for (let fname in fnames) {`
	`888`	`+ for (let fname of fnames) {`
`889`	`889`	`this.add(fname, false);`
`890`	`890`	`}`
`891`	`891`	`}`
`892`	`892`
	`893`	`+ get(fname: string) {`
	`894`	`+ return this._marks[fname];`
	`895`	`+ }`
	`896`	`+`
`893`	`897`	`mark(fname: string) {`
`894`	`898`	`this._marks[fname] = true;`
`895`	`899`	`}`