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

Merge with v1.3

cin - - Load All Authors

File last commit:

r102:c65ea2350b1a v1.3


                r104:15c829aa08a2

v1.3.0 default

Download file

             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
            
      }

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