TypeScript h.div方法代碼示例

 it('should update the text of a text node', () => {
   let host = document.createElement('div');
   VirtualDOM.render(h.div('foo'), host);
   let div = host.children[0];
   expect(div.textContent).to.equal('foo');
   VirtualDOM.render(h.div('bar'), host);
   expect(host.children[0]).to.equal(div);
   expect(div.textContent).to.equal('bar');
 });

    execute: () => {

      // Create the header of the about dialog
      let headerLogo = h.div({className: 'jp-About-header-logo'});
      let headerWordmark = h.div({className: 'jp-About-header-wordmark'});
      let release = 'Beta Release Series';
      let versionNumber = `Version ${info.version}`;
      let versionInfo = h.span({className: 'jp-About-version-info'},
        h.span({className: 'jp-About-release'}, release),
        h.span({className: 'jp-About-version'}, versionNumber)
      );
      let title = h.span({className: 'jp-About-header'},
        headerLogo,
        h.div({className: 'jp-About-header-info'},
          headerWordmark,
          versionInfo
        )
      );

      // Create the body of the about dialog
      let jupyterURL = 'https://jupyter.org/about.html';
      let contributorsURL = 'https://github.com/jupyterlab/jupyterlab/graphs/contributors';
      let externalLinks = h.span({className: 'jp-About-externalLinks'},
        h.a({
          href: contributorsURL,
          target: '_blank',
          className: 'jp-Button-flat'
        }, 'CONTRIBUTOR LIST'),
        h.a({
          href: jupyterURL,
          target: '_blank',
          className: 'jp-Button-flat'
        }, 'ABOUT PROJECT JUPYTER')
      );
      let copyright = h.span({
        className: 'jp-About-copyright'
      }, 'Š 2018 Project Jupyter');
      let body = h.div({ className: 'jp-About-body' },
        externalLinks,
        copyright
      );

      showDialog({
        title,
        body,
        buttons: [
          Dialog.createButton({
            label: 'DISMISS',
            className: 'jp-About-button jp-mod-reject jp-mod-styled'
          })
        ]
      });
    }

      it('should connect a node to a command', () => {
        let called = false;
        const command = 'commandlinker:connect-node';
        const commands = new CommandRegistry();
        const linker = new CommandLinker({ commands });
        let node: HTMLElement;
        let vnode: VirtualNode;
        const disposable = commands.addCommand(command, {
          execute: () => {
            called = true;
          }
        });

        vnode = h.div({ dataset: linker.populateVNodeDataset(command, null) });
        node = VirtualDOM.realize(vnode);
        document.body.appendChild(node);

        expect(called).to.equal(false);
        simulate(node, 'click');
        expect(called).to.equal(true);

        document.body.removeChild(node);
        linker.dispose();
        disposable.dispose();
      });

  /**
   * Render the landing plugin to virtual DOM nodes.
   */
  protected render(): VirtualNode {
    let activitiesList: VirtualNode[] = [];
    let activites = this.model.activities;
    for (let activityName of activites) {
      let imgName = activityName[0].replace(' ', '');
      let column =
      h.div({className: LANDING_COLUMN_CLASS},
        h.span({className: LANDING_ICON_CLASS + ` jp-Image${imgName}` ,
                onclick: () => {
                  this._app.commands.execute(activityName[1], void 0);
                }}
        ),
        h.span({className: LANDING_TEXT_CLASS}, activityName[0])
      );
      activitiesList.push(column);
    }

    let logo = h.span({className: JUPYTERLAB_ICON_CLASS + ' ' + LANDING_LOGO_CLASS});
    let subtitle =
    h.span({className: LANDING_SUBTITLE_CLASS},
      this.model.previewMessage
    );
    let tour =
    h.span({className: TOUR_ICON_CLASS,
      onclick: () => {
        this._app.commands.execute(AboutCommandIDs.open, void 0);
      }}
    );
    let header = h.span({
      className: LANDING_HEADER_CLASS
    }, this.model.headerText);
    let body = h.div({className: LANDING_BODY_CLASS}, activitiesList);

    let dialog = h.div({className: LANDING_DIALOG_CLASS},
      logo,
      subtitle,
      tour,
      header,
      body,
      h.div({className: LANDING_CWD_CLASS},
        h.span({className: FOLDER_ICON_CLASS + ' ' + FOLDER_CLASS}),
        h.span({className: LANDING_PATH_CLASS}, this.model.path
        )
      )
    );
    return h.div({ className: LANDING_WRAPPER_CLASS }, dialog);
  }

  /**
   * Render the landing plugin to virtual DOM nodes.
   */
  protected render(): VirtualNode {
    let activitiesList: VirtualNode[] = [];
    let activites = this.model.activities;
    for (let activityName of activites) {
      let name = activityName[0];
      let command = activityName[1];
      let args = activityName[2];
      let imgName = name.replace(' ', '');
      let column = h.div({ className: LANDING_COLUMN_CLASS },
        h.span({
          className: LANDING_ICON_CLASS + ` jp-Image${imgName}` ,
          dataset: this._linker.populateVNodeDataset(command, args)
        }),
        h.span({ className: LANDING_TEXT_CLASS }, name)
      );
      activitiesList.push(column);
    }

    let logo = h.span({
      className: `${JUPYTERLAB_ICON_CLASS} ${LANDING_LOGO_CLASS}`
    });
    let subtitle = h.span(
      {className: LANDING_SUBTITLE_CLASS},
      this.model.previewMessage
    );
    let tour = h.span({
      className: TOUR_ICON_CLASS,
      dataset: this._linker.populateVNodeDataset('about-jupyterlab:open', {})
    });
    let header = h.span({
      className: LANDING_HEADER_CLASS
    }, this.model.headerText);
    let body = h.div({ className: LANDING_BODY_CLASS }, activitiesList);

    let dialog = h.div({ className: LANDING_DIALOG_CLASS },
      logo,
      subtitle,
      tour,
      header,
      body
    );
    return h.div({ className: LANDING_WRAPPER_CLASS }, dialog);
  }

 builder.getStatus().then(response => {
   if (response.status === 'building') {
     return doBuild();
   }
   if (response.status !== 'needed') {
     return;
   }
   let body = h.div(
     h.p(
       'JupyterLab build is suggested:',
       h.br(),
       h.pre(response.message)
     )
   );
   showDialog({
     title: 'Build Recommended',
     body,
     buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'BUILD' })]
   }).then(result => {
     if (result.button.accept) {
       return doBuild();
     }
   });
 });