MainWidget.tsx
81 lines
| 2.5 KiB
| text/x-typescript
|
TypeScriptLexer
cin
|
r107 | import { djbase, djclass } from "@implab/djx/declare"; | ||
| import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase"; | ||||
| import { createElement, watch, prop, attach, all, bind, toggleClass } from "@implab/djx/tsx"; | ||||
| import ProgressBar from "./ProgressBar"; | ||||
| import Button = require("dijit/form/Button"); | ||||
| import { interval } from "rxjs"; | ||||
| @djclass | ||||
| export default class MainWidget extends djbase(DjxWidgetBase) { | ||||
| titleNode?: HTMLHeadingElement; | ||||
| progressBar?: ProgressBar; | ||||
| count = 0; | ||||
| showCounter = false; | ||||
| counterNode?: HTMLInputElement; | ||||
| paused = false; | ||||
| render() { | ||||
| const Counter = ({ children }: { children: unknown[] }) => <span>Counter: {children}</span>; | ||||
| return <div className="tundra"> | ||||
| <h2 ref={attach(this, "titleNode")}>Hi!</h2> | ||||
| <section style={{ padding: "10px" }}> | ||||
| {watch(prop(this, "showCounter"), flag => flag && | ||||
| [ | ||||
| <Counter><input ref={all( | ||||
| bind("value", prop(this, "count") | ||||
| .map(x => x/10) | ||||
| .map(String) | ||||
| ), | ||||
| attach(this, "counterNode") | ||||
| )} /> <span>s</span></Counter>, | ||||
| " | ", | ||||
| <span ref={bind("innerHTML", interval(1000))}></span>, | ||||
| " | ", | ||||
| <Button | ||||
| ref={all( | ||||
| bind("label", prop(this, "paused") | ||||
| .map(x => x ? "Unpause" : "Pause") | ||||
| ), | ||||
| toggleClass("paused", prop(this,"paused")) | ||||
| )} | ||||
| onClick={this._onPauseClick} | ||||
| /> | ||||
| ] | ||||
| )} | ||||
| </section> | ||||
| <Button onClick={this._onToggleCounterClick}>Toggle counter</Button> | ||||
| </div>; | ||||
| } | ||||
| postCreate(): void { | ||||
| super.postCreate(); | ||||
| const h = setInterval( | ||||
| () => { | ||||
| this.set("count", this.count + 1); | ||||
| }, | ||||
| 100 | ||||
| ); | ||||
| this.own({ | ||||
| destroy: () => { | ||||
| clearInterval(h); | ||||
| } | ||||
| }); | ||||
| } | ||||
| private _onPauseClick = () => { | ||||
| this.set("paused", !this.paused); | ||||
| } | ||||
| private _onToggleCounterClick = () => { | ||||
| this.set("showCounter", !this.showCounter); | ||||
| } | ||||
| } | ||||