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

Testing nested watch, release candidate

cin - - Load All Authors

File last commit:

r101:bb6b1db1b430 v1.3


                r101:bb6b1db1b430

v1.3

Download file

             MainWidget.tsx
        
                    49 lines
            
             | 1.4 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 } from "@implab/djx/tsx";

      import ProgressBar from "./ProgressBar";

      import Button = require("dijit/form/Button");

      const ref = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);

      @djclass

      export default class MainWidget extends djbase(DjxWidgetBase) {

          titleNode?: HTMLHeadingElement;

          progressBar?: ProgressBar;

          count = 0;

          showCounter = false;

          render() {

              return <div className="tundra">

                  <h2 ref={ref(this, "titleNode")}>Hi!</h2>

                  <ProgressBar ref={ref(this, "progressBar")} />

                  {watch(this, "showCounter", flag => flag &&

                      <section style={{padding: "10px"}}>

                          <label>

                              Counter: {watch(this, "count", v => [<span>{v}</span>, " ", <span>sec</span>])}

                          </label>

                      </section>

                  )}

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

              </div>;

          }

          postCreate(): void {

              super.postCreate();

              const inc = () => {

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

                  this.defer(inc, 1000);

              }

              inc();

          }

          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 } from "@implab/djx/tsx";
				import ProgressBar from "./ProgressBar";
				import Button = require("dijit/form/Button");

				const ref = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);

				@djclass
				export default class MainWidget extends djbase(DjxWidgetBase) {

				titleNode?: HTMLHeadingElement;

				progressBar?: ProgressBar;

				count = 0;

				showCounter = false;

				render() {
				return <div className="tundra">
				<h2 ref={ref(this, "titleNode")}>Hi!</h2>
				<ProgressBar ref={ref(this, "progressBar")} />
				{watch(this, "showCounter", flag => flag &&
				<section style={{padding: "10px"}}>
				<label>
				Counter: {watch(this, "count", v => [<span>{v}</span>, " ", <span>sec</span>])}
				</label>
				</section>
				)}
				<Button onClick={this._onToggleCounterClick}>Toggle counter</Button>
				</div>;
				}

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

				const inc = () => {
				this.set("count", this.count + 1);
				this.defer(inc, 1000);
				}

				inc();
				}

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