TypeScript mithril.default函数代码示例

function renderStaging(staging): Child[] {
  const elements: Child[] = [];

  for (const s of staging) {
    const queueFunc = (): void => {
      staging.delete(s);
      taskQueue.queueTask(s);
    };
    const cancelFunc = (): void => {
      staging.delete(s);
    };

    let elms;
    if (s.name === "setParameterValues")
      elms = renderStagingSpv(s, queueFunc, cancelFunc);
    else if (s.name === "download") elms = renderStagingDownload(s);

    const queue = m(
      "button.primary",
      { title: "Queue task", onclick: queueFunc, disabled: s.invalid },
      "Queue"
    );
    const cancel = m(
      "button",
      { title: "Cancel edit", onclick: cancelFunc },
      "Cancel"
    );

    elements.push(m(".staging", elms, m("div.actions", queue, cancel)));
  }
  return elements;
}

function pins(
  { frame, squareNumber }: FramePinState,
  dispatch: (action: FrameAction) => void,
) {
  const frameOptions = {
    key: frame.id,
    onclick() {
      dispatch({ type: "cycle" })
    },
    style: "cursor: pointer;",
    className: frame.id === 10 ? "tenth-frame" : "",
  }

  const standingPins = frame.squares[squareNumber - 1].standingPins
  return m("li", frameOptions, [
    m(".frame-number-container", frame.id),
    m(".score-container", [
      m(".shot-number", squareNumber),
      m(
        ".pins",
        range(0, 10).map(n => {
          const isStanding = standingPins & (1 << n) ? ".isStanding" : ""
          return m(`.pin.pin-${n + 1}${isStanding}`)
        }),
      ),
    ]),
  ])
}

TreeView.view = function (ctrl: ITreeData, args: ITreeDataOptions, components: { header?: Array<Object> }): Object {
  return m('div', [
    m('div', { 'class': CLASS_TREE_HEADER }, (!components || !components.header) ? [] : components.header.map((Component) => {
      return m.component(Component, ctrl)
    })),
    (ctrl.getRootNodes().length > 0) ? TreeView.view.createTreeNodeView(ctrl) : ''
  ])
}

    view: vnode => {
      if (
        !vnode.state["filterList"] ||
        vnode.attrs["filter"] !== vnode.state["filter"]
      ) {
        vnode.state["filterInvalid"] = 0;
        vnode.state["filter"] = vnode.attrs["filter"];
        vnode.state["filterList"] = splitFilter(vnode.attrs["filter"]);
      }

      function onChange(): void {
        vnode.state["filterInvalid"] = 0;
        vnode.state["filterList"] = vnode.state["filterList"].filter(f => f);
        let filter = vnode.state["filterList"].map((f, idx) => {
          try {
            return parseFilter(vnode.attrs["resource"], f);
          } catch (err) {
            vnode.state["filterInvalid"] |= 1 << idx;
          }
          return null;
        });
        vnode.state["filterList"].push("");

        if (!vnode.state["filterInvalid"]) {
          delete vnode.state["filter"];
          if (filter.length === 0) {
            vnode.attrs["onChange"]("");
          } else {
            if (filter.length > 1) filter = ["AND"].concat(filter);
            else filter = filter[0];
            vnode.attrs["onChange"](stringify(filter));
          }
        }
      }

      return m(
        "div.filter",
        [m("b", "Filter")].concat(
          vnode.state["filterList"].map((fltr, idx) => {
            return m("input", {
              type: "text",
              class: `${
                (vnode.state["filterInvalid"] >> idx) & 1 ? "error" : ""
              }`,
              value: fltr,
              onchange: e => {
                vnode.state["filterList"] = vnode.state["filterList"].slice();
                vnode.state["filterList"][idx] = e.target.value.trim();
                onChange();
              },
              oncreate: vn => {
                getAutocomplete(vnode.attrs["resource"]).attach(vn.dom);
              }
            });
          })
        )
      );
    }

 render: () => {
   lastRenderTimestamp = Date.now();
   let p;
   if (state && state.error) p = m(errorPage.component, state);
   else p = m(contextifyComponent(page.component), state);
   fulfill();
   const attrs = {};
   attrs["page"] = pageName;
   return m(layout, attrs, p);
 },

    view: vnode => {
      const active = { [vnode.attrs["page"]]: "active" };

      const tabs = [];
      if (window.authorizer.hasAccess("devices", 1)) {
        tabs.push(
          m(
            "li",
            { class: active["overview"] },
            m("a", { href: "#!/overview" }, "Overview")
          )
        );
      }

      if (window.authorizer.hasAccess("devices", 2)) {
        tabs.push(
          m(
            "li",
            { class: active["devices"] },
            m("a", { href: "#!/devices" }, "Devices")
          )
        );
      }

      if (window.authorizer.hasAccess("faults", 2)) {
        tabs.push(
          m(
            "li",
            { class: active["faults"] },
            m("a", { href: "#!/faults" }, "Faults")
          )
        );
      }

      const adminPages = [
        "presets",
        "provisions",
        "virtualParameters",
        "files"
      ];
      for (const page of adminPages) {
        if (window.authorizer.hasAccess(page, 2)) {
          tabs.push(
            m(
              "li",
              { class: active["admin"] },
              m("a", { href: "#!/admin" }, "Admin")
            )
          );
          break;
        }
      }

      return m("nav", m("ul", tabs));
    }

export const Game = ({ attrs: { player } }: m.Vnode<{ player: GameType }>) => ({
  view() {
    return m("", { key: player.name }, [
      m(".lane-name", player.name),
      m(
        "ul.lane-row.clearfix",
        player.frames.map(frame => m(Frame, { frame, key: frame.id })),
      ),
    ])
  },
})

function renderStagingSpv(task, queueFunc, cancelFunc): Children {
  function keydown(e): void {
    if (e.keyCode === 13) queueFunc();
    else if (e.keyCode === 27) cancelFunc();
    else e.redraw = false;
  }

  let input;
  if (task.parameterValues[0][2] === "xsd:boolean") {
    input = m(
      "select",
      {
        value: task.parameterValues[0][1].toString(),
        onchange: e => {
          e.redraw = false;
          task.parameterValues[0][1] = input.dom.value;
        },
        onkeydown: keydown,
        oncreate: vnode => {
          (vnode.dom as HTMLSelectElement).focus();
        }
      },
      [
        m("option", { value: "true" }, "true"),
        m("option", { value: "false" }, "false")
      ]
    );
  } else {
    input = m("input", {
      type: ["xsd:dateTime", "xsd:int", "xsd:unsignedInt"].includes(
        task.parameterValues[0][2]
      )
        ? "number"
        : "text",
      value: task.parameterValues[0][1],
      oninput: e => {
        e.redraw = false;
        task.parameterValues[0][1] = input.dom.value;
      },
      onkeydown: keydown,
      oncreate: vnode => {
        (vnode.dom as HTMLInputElement).focus();
        (vnode.dom as HTMLInputElement).select();
        // Need to prevent scrolling on focus because
        // we're animating height and using overflow: hidden
        (vnode.dom.parentNode.parentNode as Element).scrollTop = 0;
      }
    });
  }

  return [m("span", "Editing ", mparam(task.parameterValues[0][0])), input];
}

let SearchBarView = function (ctrl) {
  return m('Label', {
    'class': CLASS_TREEVIEW_SEARCH_LABEL
  }, [
      'Filter: ',
      m('input', {
        type: 'text',
        name: 'treeview-search',
        oninput: m.withAttr('value', ctrl.searchTerm),
        value: ctrl.searchTerm()
      })
    ])
}

    view: vnode => {
      let sideMenu, group;

      if (adminPages.includes(vnode.attrs["page"])) {
        group = "admin";
        const attrs = {};
        attrs["page"] = vnode.attrs["page"];
        sideMenu = m(adminMenu, attrs);
      }

      const attrs = {};
      attrs["page"] = group || vnode.attrs["page"];

      return [
        m("#header", [
          m("img.logo", { src: "logo.svg" }),
          m(userMenu),
          m(menu, attrs),
          m(drawerComponent)
        ]),
        m(
          "#content-wrapper",
          sideMenu,
          m("#content", { class: `page-${vnode.attrs["page"]}` }, [
            vnode.children
          ])
        ),
        overlay.render()
      ];
    }