implab/implabjs-djx Files · djx/src/test/ts/view/MyWidget.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:

r96:a316cfea8bb1 v1.3


                r102:c65ea2350b1a

v1.3

Download file

             MyWidget.tsx
        
                    69 lines
            
             | 1.8 KiB
            
                | text/x-typescript
            
             |
                TypeScriptLexer
            
             / djx / src / test / ts / view / MyWidget.tsx
          
                    History
                
                 |
                  Annotation
                 | Raw
                 |Copy content
                 |Copy permalink

      import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";

      import { DjxWidgetBase } from "../tsx/DjxWidgetBase";

      import { createElement, on } from "../tsx";

      interface MyWidgetAttrs {

          title: string;

          counter: number;

      }

      interface MyWidgetEvents {

          "count-inc": Event & {

              detail: number;

          };

          "count-dec": Event & {

              detail: number;

          };

      }

      @djclass

      export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {

          @bind({ node: "titleNode", type: "innerHTML" })

          title = "";

          @prototype()

          counter = 0;

          render() {

              const Frame = ({children, ref}: {ref: JSX.Ref<HTMLDivElement>, children: any[]}) => <div ref={ref} >{children}</div>;

              return <div className="myWidget" onsubmit={e => this._onSubmit(e)} tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >

                  <h1 data-dojo-attach-point="titleNode"></h1>

                  <Frame ref={ v => {}}>

                      <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>

                      <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>

                  </Frame>

              </div>;

          }

          postCreate() {

              super.postCreate();

              this.on("click", () => {});

          }

          _onSubmit(e: Event) {

          }

          _onIncClick(e: MouseEvent) {

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

              this.emit("count-inc", { bubbles: false });

          }

          _onDecClick() {

              this.emit("count-dec", { bubbles: false, detail: this.counter });

          }

          @on("count-inc")

          private _onCounterInc(evt: Event & { detail: number; x?: number; }) {

          }

          @on("click", "keydown")

          protected _onClick(event: MouseEvent | KeyboardEvent) {

          }

      }

	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, bind, prototype, AbstractConstructor } from "../declare";

				import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
				import { createElement, on } from "../tsx";

				interface MyWidgetAttrs {
				title: string;

				counter: number;
				}

				interface MyWidgetEvents {
				"count-inc": Event & {
				detail: number;
				};

				"count-dec": Event & {
				detail: number;
				};
				}


				@djclass
				export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {

				@bind({ node: "titleNode", type: "innerHTML" })
				title = "";

				@prototype()
				counter = 0;

				render() {
				const Frame = ({children, ref}: {ref: JSX.Ref<HTMLDivElement>, children: any[]}) => <div ref={ref} >{children}</div>;
				return <div className="myWidget" onsubmit={e => this._onSubmit(e)} tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >
				<h1 data-dojo-attach-point="titleNode"></h1>
				<Frame ref={ v => {}}>
				<span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
				<span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
				</Frame>
				</div>;
				}

				postCreate() {
				super.postCreate();

				this.on("click", () => {});
				}

				_onSubmit(e: Event) {
				}

				_onIncClick(e: MouseEvent) {
				this.set("counter", this.counter + 1);

				this.emit("count-inc", { bubbles: false });
				}

				_onDecClick() {
				this.emit("count-dec", { bubbles: false, detail: this.counter });
				}

				@on("count-inc")
				private _onCounterInc(evt: Event & { detail: number; x?: number; }) {
				}

				@on("click", "keydown")
				protected _onClick(event: MouseEvent \| KeyboardEvent) {

				}
				}