working on passing classes in

Author: gwincr11

packages/nbdime/src/diff/widget/linked-cells.ts

@@ -1,10 +1,35 @@
 import { Panel, Widget } from "@lumino/widgets";
 import type { CellDiffWidget } from "./";
+import { LabIcon }  from "@jupyterlab/ui-components";
 
 import foldDown from "./fold-down.svg";
 import foldUp from "./fold-up.svg";
 import fold from "./fold.svg";
 
+export const foldDownIcon = new LabIcon({
+  name: "nbdime:fold-down",
+  svgstr: foldDown
+});
+
+export const foldUpIcon = new LabIcon({
+  name: "nbdime:fold-up",
+  svgstr: foldUp
+});
+
+export const foldIcon = new LabIcon({
+  name: "nbdime:fold",
+  svgstr: fold
+});
+
+export interface ILinkedListCell {
+  next: () => ILinkedListCell | null;
+  prev: () => ILinkedListCell | null;
+  displayed: () => boolean;
+  lazy: boolean;
+  expandUp: () => void;
+  expandDown: () => void;
+}
+
 class LinkedListCell extends Panel {
   _next: LinkedListCell | LazyDisplayLinkedListCell | null;
   _prev: LinkedListCell | LazyDisplayLinkedListCell | null;
@@ -159,19 +184,15 @@ class LazyDisplayLinkedListCell extends LinkedListCell {
     const button = document.createElement("a");
     button.title = `Expand ${direction}`;
     button.setAttribute("aria-label", `Expand ${direction}`);
-    button.innerHTML = this.buttonSvg(direction);
-    if (direction === "Up") {
-      button.innerHTML = foldUp;
-    } else if (direction === "Down") {
-      button.innerHTML = foldDown;
-    } else {
-      button.innerHTML = fold;
-    }
+    let icon = this.buttonSvg(direction);
+    icon.element({
+      container: button,
+    })
     this.expandButtonDisplayed = true;
     return button;
   }
 
-  buttonSvg(direction: "Up" | "Down" | "Fold"): string {
+  buttonSvg(direction: "Up" | "Down" | "Fold"): LabIcon {
     if (direction === "Up") {
       return foldUp;
     } else if (direction === "Down") {

packages/nbdime/src/diff/widget/notebook.ts

@@ -5,7 +5,7 @@
 import { Panel } from "@lumino/widgets";
 
 import { IRenderMimeRegistry } from "@jupyterlab/rendermime";
-import { LazyDisplayLinkedListCell, LinkedListCell } from "./linked-cells";
+import { ILinkedListCell, LazyDisplayLinkedListCell, LinkedListCell } from "./linked-cells";
 import { CellDiffWidget } from "./cell";
 import {
   CHUNK_PANEL_CLASS,
@@ -23,12 +23,19 @@ const NBDIFF_CLASS = "jp-Notebook-diff";
  * NotebookDiffWidget
  */
 export class NotebookDiffWidget extends Panel {
-  constructor(model: NotebookDiffModel, rendermime: IRenderMimeRegistry) {
+  constructor(
+    model: NotebookDiffModel,
+    rendermime: IRenderMimeRegistry,
+    displayedCellWrapper: ILinkedListCell = LinkedListCell,
+    lazyDisplayWrapper: ILinkedListCell = LazyDisplayLinkedListCell
+  ) {
     super();
     this._model = model;
     this._rendermime = rendermime;
     this.addClass(NBDIFF_CLASS);
     this.previousCell = null;
+    this.displayedCellWrapper = displayedCellWrapper;
+    this.lazyDisplayWrapper = lazyDisplayWrapper;
   }
 
   /**
@@ -136,4 +143,6 @@ export class NotebookDiffWidget extends Panel {
   private _model: NotebookDiffModel;
   private _rendermime: IRenderMimeRegistry;
   private previousCell: LinkedListCell | null;
+  private displayedCellWrapper: LinkedListCell;
+  private lazyDisplayWrapper: LazyDisplayLinkedListCell;
 }