TypeScript Panel.addWidget方法代碼示例

 return new Promise<void>(resolve => {
   if (chunk.length === 1 && !(chunk[0].added || chunk[0].deleted)) {
     this.addWidget(new CellDiffWidget(
       chunk[0], rendermime, model.mimetype));
   } else {
     let chunkPanel = new Panel();
     chunkPanel.addClass(CHUNK_PANEL_CLASS);
     let addedPanel = new Panel();
     addedPanel.addClass(ADDED_CHUNK_PANEL_CLASS);
     let removedPanel = new Panel();
     removedPanel.addClass(REMOVED_CHUNK_PANEL_CLASS);
     for (let cell of chunk) {
       let target = cell.deleted ? removedPanel : addedPanel;
       target.addWidget(new CellDiffWidget(cell, rendermime, model.mimetype));
     }
     chunkPanel.addWidget(addedPanel);
     chunkPanel.addWidget(removedPanel);
     this.addWidget(chunkPanel);
   }
   // This limits us to drawing 60 cells per second, which shouldn't
   // be a problem...
   requestAnimationFrame(() => {
     resolve();
   });
 });

  /**
   * Create a dialog panel instance.
   *
   * @param options - The dialog setup options.
   */
  constructor(options: Dialog.IOptions={}) {
    super();
    this.addClass('jp-Dialog');
    options = Private.handleOptions(options);
    let renderer = options.renderer;

    this._host = options.host;
    this._defaultButton = options.defaultButton;
    this._buttons = options.buttons;
    this._buttonNodes = toArray(map(this._buttons, button => {
      return renderer.createButtonNode(button);
    }));
    this._primary = (
      options.primaryElement || this._buttonNodes[this._defaultButton]
    );

    let layout = this.layout = new PanelLayout();
    let content = new Panel();
    content.addClass('jp-Dialog-content');
    layout.addWidget(content);

    let header = renderer.createHeader(options.title);
    let body = renderer.createBody(options.body);
    let footer = renderer.createFooter(this._buttonNodes);
    content.addWidget(header);
    content.addWidget(body);
    content.addWidget(footer);
  }

 it('should add a widget to the end of the panel', () => {
   let panel = new Panel();
   let widget = new Widget();
   panel.addWidget(new Widget());
   panel.addWidget(widget);
   expect(panel.widgets[1]).to.equal(widget);
 });

  constructor(inner: Widget, headerTitle?: string, collapsed?: boolean) {
    super();
    this.addClass(COLLAPSIBLE_CLASS);
    this.inner = inner;
    let constructor = this.constructor as typeof CollapsiblePanel;
    let header = constructor.createHeader(headerTitle);
    this.header = header;
    this.button = header.node.getElementsByClassName(
      COLLAPSIBLE_HEADER_ICON)[0] as HTMLElement;
    header.node.onclick = this.toggleCollapsed.bind(this);
    this.addWidget(header);
    this.container = new Panel();
    this.container.addClass(COLLAPSIBLE_CONTAINER);
    this.slider = new Panel();
    this.slider.addClass(COLLAPSIBLE_SLIDER);
    this.slider.addWidget(inner);
    this.container.addWidget(this.slider);
    this.addWidget(this.container);

    this.slider.addClass(
      collapsed === true ?
      COLLAPSIBLE_CLOSED :
      COLLAPSIBLE_OPEN);
    this.button.classList.add(
      collapsed === true ?
      COLLAPSIBLE_HEADER_ICON_CLOSED :
      COLLAPSIBLE_HEADER_ICON_OPEN);
  }

/**
 * Show the diff as represented by the base notebook and a list of diff entries
 */
function showDiff(data: {base: nbformat.INotebookContent, diff: IDiffEntry[]}): Promise<void> {


  let rendermime = new RenderMimeRegistry({
    initialFactories: rendererFactories,
    sanitizer: defaultSanitizer,
  });

  let nbdModel = new NotebookDiffModel(data.base, data.diff);
  let nbdWidget = new NotebookDiffWidget(nbdModel, rendermime);

  let root = document.getElementById('nbdime-root');
  if (!root) {
    throw new Error('Missing root element "nbidme-root"');
  }
  root.innerHTML = '';
  let panel = new Panel();
  panel.id = 'main';
  Widget.attach(panel, root);
  panel.addWidget(nbdWidget);
  let work = nbdWidget.init();
  work.then(() => {
    window.onresize = () => { panel.update(); };
  });
  diffWidget = nbdWidget;
  return work;
}

  /**
   * Create a dialog panel instance.
   *
   * @param options - The dialog setup options.
   *
   * @param resolve - The function that resolves the dialog promise.
   *
   * @param reject - The function that rejects the dialog promise.
   *
   * #### Notes
   * Currently the dialog resolves with `cancelButton` rather than
   * rejecting the dialog promise.
   */
  constructor(options: IDialogOptions, resolve: (value: IButtonItem) => void, reject?: (error: any) => void) {
    super();

    if (!(options.body instanceof Widget)) {
      throw 'A widget dialog can only be created with a widget as its body.';
    }

    this.resolve = resolve;
    this.reject = reject;

    // Create the dialog nodes (except for the buttons).
    let content = new Panel();
    let header = new Widget({node: document.createElement('div')});
    let body = new Panel();
    let footer = new Widget({node: document.createElement('div')});
    let title = document.createElement('span');
    this.addClass(DIALOG_CLASS);
    if (options.dialogClass) {
      this.addClass(options.dialogClass);
    }
    content.addClass(CONTENT_CLASS);
    header.addClass(HEADER_CLASS);
    body.addClass(BODY_CLASS);
    footer.addClass(FOOTER_CLASS);
    title.className = TITLE_CLASS;
    this.addWidget(content);
    content.addWidget(header);
    content.addWidget(body);
    content.addWidget(footer);
    header.node.appendChild(title);

    // Populate the nodes.
    title.textContent = options.title || '';
    let child = options.body as Widget;
    child.addClass(BODY_CONTENT_CLASS);
    body.addWidget(child);
    this._buttons = options.buttons.slice();
    this._buttonNodes = options.buttons.map(createButton);
    this._buttonNodes.map(buttonNode => {
      footer.node.appendChild(buttonNode);
    });
    let primary = options.primary || this.lastButtonNode;
    if (typeof primary === 'number') {
      primary = this._buttonNodes[primary];
    }
    this._primary = primary as HTMLElement;
  }

 protected onError(error: ServerConnection.NetworkError | ServerConnection.ResponseError): void {
   if (this.isDisposed) {
     return;
   }
   let widget = new Widget();
   widget.node.innerHTML = `Failed to fetch diff: ${error.message}`;
   this.scroller.addWidget(widget);
 }

    return this.create_child_view(model).then((view: widgets.DOMWidgetView) => {
      this.restorePreviewContent();

      this.content.layout && this.content.addWidget(view.pWidget);

      this.updateHiddenContainer();
      this.renderPreview();

      return view;
    }).catch(widgets.reject('Could not add child view to box', true));