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
                
                 |
                  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
    
Testing nested watch, release candidate

              r101
            
      import { createElement, watch } 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
    
Added test widgets to the playground

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

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

              r99
            
          render() {

        cin
    
Testing nested watch, release candidate

              r101
            
              return <div className="tundra">

        cin
    
Added test widgets to the playground

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

        cin
    
Testing nested watch, release candidate

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

        cin
    
Working sandbox

              r99
            
              </div>;

          }

        cin
    
Testing nested watch, release candidate

              r101
            
          postCreate(): void {

              super.postCreate();

              const inc = () => {

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

                  this.defer(inc, 1000);

              }

              inc();

          }

          private _onToggleCounterClick = () => {

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

          }

        cin
    
Working sandbox

              r99
            
      }

	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

cin Working sandbox	r99	import { djbase, djclass } from "@implab/djx/declare";
		import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
cin Testing nested watch, release candidate	r101	import { createElement, watch } 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 Added test widgets to the playground	r100
		const ref = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);
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 Working sandbox	r99	render() {
cin Testing nested watch, release candidate	r101	return <div className="tundra">
cin Added test widgets to the playground	r100	<h2 ref={ref(this, "titleNode")}>Hi!</h2>
cin Testing nested watch, release candidate	r101	<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>
cin Working sandbox	r99	</div>;
		}
cin Testing nested watch, release candidate	r101
		postCreate(): void {
		super.postCreate();

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

		inc();
		}

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