TypeScript h.span方法代碼示例

  /**
   * 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 bodyheader = h.span({
      className: LANDING_BODY_HEADER_CLASS
    }, this.model.headerText);

    let header = h.div({ className: LANDING_HEADER_CLASS},
      logo,
      subtitle,
      tour
    );

    let body = h.div({ className: LANDING_BODY_CLASS },
      activitiesList
    );

    let headercontainer = h.div({className: LANDING_HEADER_CONTAINER_CLASS},
      header
    );

    let bodycontainer = h.div({ className: LANDING_BODY_CONTAINER_CLASS},
      body
    );

    let landing = h.div({ className: LANDING_WRAPPER_CLASS },
      headercontainer,
      bodyheader,
      bodycontainer
    );
    return landing;
  }

 it('should render the delta from the previous rendering', () => {
   let host = document.createElement('div');
   let children = [h.a(), h.span(), h.img()];
   VirtualDOM.render(children, host);
   let first = host.children[0];
   let last = host.children[2];
   expect(first.nodeName.toLowerCase()).to.equal('a');
   expect(last.nodeName.toLowerCase()).to.equal('img');
   children = [children[0], h.div(), children[1]];
   VirtualDOM.render(children, host);
   expect(host.children[0]).to.equal(first);
   expect(host.children[2]).to.not.equal(last);
   expect(host.children[2].nodeName.toLowerCase()).to.equal('span');
 });

  /**
   * 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);
  }

    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 style descendant nodes for the given tag', () => {
   let vnode = h.div({}, [h.span(), h.div({}, h.span())]);
   let node = VirtualDOM.realize(vnode);
   Styling.styleNodeByTag(node, 'span');
   expect(node.querySelectorAll('.jp-mod-styled').length).to.equal(2);
 });