##// END OF EJS Templates
implab » implabjs-djx
RSS
`Subscribable` is made compatible with rxjs, added map, filter and scan...
`Subscribable` is made compatible with rxjs, added map, filter and scan methods to observables. `watch` can accept either stateful object and a property name to observe or the subscribable value. added ref attribute to the markup elements and widgets. `bind`, `tooggleClass` and `attach` methods can be passed to `ref` attribute in the markup to interact with elemnts and widgets.
cin - - Load All Authors

File last commit:

r102:c65ea2350b1a v1.3
r102:c65ea2350b1a v1.3
Show More
MainWidget.tsx
82 lines | 2.5 KiB | text/x-typescript | TypeScriptLexer
/ playground / src / main / ts / MainWidget.tsx
History | Source | Raw |Copy content |Copy permalink
cin
Working sandbox
 r99 import { djbase, djclass } from "@implab/djx/declare";
import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
cin
`Subscribable` is made compatible with rxjs, added map, filter and scan...
 r102 import { createElement, watch, prop, attach, all, bind, toggleClass } from "@implab/djx/tsx";
cin
Added test widgets to the playground
 r100 import ProgressBar from "./ProgressBar";
cin
Testing nested watch, release candidate
 r101 import Button = require("dijit/form/Button");
cin
`Subscribable` is made compatible with rxjs, added map, filter and scan...
 r102 import { interval } from "rxjs";
cin
Working sandbox
 r99
@djclass
export default class MainWidget extends djbase(DjxWidgetBase) {
cin
Added test widgets to the playground
 r100
titleNode?: HTMLHeadingElement;
progressBar?: ProgressBar;
cin
Testing nested watch, release candidate
 r101 count = 0;
showCounter = false;
cin
`Subscribable` is made compatible with rxjs, added map, filter and scan...
 r102 counterNode?: HTMLInputElement;
paused = false;
cin
Working sandbox
 r99 render() {
cin
`Subscribable` is made compatible with rxjs, added map, filter and scan...
 r102 const Counter = ({ children }: { children: unknown[] }) => <span>Counter: {children}</span>;
cin
Testing nested watch, release candidate
 r101 return <div className="tundra">
cin
`Subscribable` is made compatible with rxjs, added map, filter and scan...
 r102 <h2 ref={attach(this, "titleNode")}>Hi!</h2>
<ProgressBar ref={attach(this, "progressBar")} />
<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>ms</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>
cin
Testing nested watch, release candidate
 r101 <Button onClick={this._onToggleCounterClick}>Toggle counter</Button>
cin
Working sandbox
 r99 </div>;
}
cin
Testing nested watch, release candidate
 r101
postCreate(): void {
super.postCreate();
cin
`Subscribable` is made compatible with rxjs, added map, filter and scan...
 r102 const h = setInterval(
() => {
this.set("count", this.count + 1);
},
10
);
this.own({
destroy: () => {
clearInterval(h);
}
});
}
cin
Testing nested watch, release candidate
 r101
cin
`Subscribable` is made compatible with rxjs, added map, filter and scan...
 r102 private _onPauseClick = () => {
this.set("paused", !this.paused);
cin
Testing nested watch, release candidate
 r101 }
private _onToggleCounterClick = () => {
this.set("showCounter", !this.showCounter);
}
cin
Working sandbox
 r99 }