implab/implabjs-djx Files · playground/src/main/ts/MainWidget.tsx

`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

Download file

             MainWidget.tsx
        
                    82 lines
            
             | 2.5 KiB
            
                | text/x-typescript
            
             |
                TypeScriptLexer
            
             / playground / src / main / ts / MainWidget.tsx
          
                    History
                
                 |
                  Annotation
                 | Raw
                 |Copy content
                 |Copy permalink

      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>

                  <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>

                  <Button onClick={this._onToggleCounterClick}>Toggle counter</Button>

              </div>;

          }

          postCreate(): void {

              super.postCreate();

              const h = setInterval(

                  () => {

                      this.set("count", this.count + 1);

                  },

                  10

              );

              this.own({

                  destroy: () => {

                      clearInterval(h);

                  }

              });

          }

          private _onPauseClick = () => {

              this.set("paused", !this.paused);

          }

          private _onToggleCounterClick = () => {

              this.set("showCounter", !this.showCounter);

          }

      }

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages

				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>
				<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>
				<Button onClick={this._onToggleCounterClick}>Toggle counter</Button>
				</div>;
				}

				postCreate(): void {
				super.postCreate();

				const h = setInterval(
				() => {
				this.set("count", this.count + 1);
				},
				10
				);
				this.own({
				destroy: () => {
				clearInterval(h);
				}
				});
				}

				private _onPauseClick = () => {
				this.set("paused", !this.paused);
				}

				private _onToggleCounterClick = () => {
				this.set("showCounter", !this.showCounter);
				}
				}