|
|
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";
|
|
|
|
|
|
const Counter = ({ children }: { children: unknown[] }) => <span>Counter: {children}</span>;
|
|
|
|
|
|
@djclass
|
|
|
export default class MainWidget extends djbase(DjxWidgetBase) {
|
|
|
|
|
|
titleNode?: HTMLHeadingElement;
|
|
|
|
|
|
progressBar?: ProgressBar;
|
|
|
|
|
|
count = 0;
|
|
|
|
|
|
showCounter = false;
|
|
|
|
|
|
counterNode?: HTMLInputElement;
|
|
|
|
|
|
paused = false;
|
|
|
|
|
|
render() {
|
|
|
|
|
|
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)
|
|
|
),
|
|
|
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 readonly _onPauseClick = () => {
|
|
|
this.set("paused", !this.paused);
|
|
|
};
|
|
|
|
|
|
private readonly _onToggleCounterClick = () => {
|
|
|
this.set("showCounter", !this.showCounter);
|
|
|
};
|
|
|
}
|
|
|
|
