implab/implabjs-djx Files · djx/src/test/ts/view/MyWidget.tsx

added pipe method to observable

cin - - Load All Authors

File last commit:

r109:4a375b9c654a default


                r114:e9a9ed6d7647

v1.5.0 default

Download file

             MyWidget.tsx
        
                    86 lines
            
             | 2.2 KiB
            
                | text/x-typescript
            
             |
                TypeScriptLexer
            
             / djx / src / test / ts / view / MyWidget.tsx
          
                    History
                
                 |
                  Source
                 | Raw
                 |Copy content
                 |Copy permalink

        cin
    
Converted to subproject djx, removed dojo-typings

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

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

        cin
    
fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase

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

        cin
    
linting

              r109
            
      import { argumentNotNull } from "@implab/core-amd/safe";

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      interface MyWidgetAttrs {

          title: string;

          counter: number;

      }

      interface MyWidgetEvents {

        cin
    
Switched to @implab/dojo-typings

              r71
            
          "count-inc": Event & {

              detail: number;

          };

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
        cin
    
Switched to @implab/dojo-typings

              r71
            
          "count-dec": Event & {

              detail: number;

          };

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      }

        cin
    
linting

              r109
            
      interface FrameProps {

          ref?: JSX.Ref<HTMLDivElement>;

          children?: unknown[];

      }

      const Frame = ({children, ref}: FrameProps) => <div ref={ref} >{children}</div>;

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      @djclass

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

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

          title = "";

        cin
    
linting

              r108
            
          @prototype(0)

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          counter = 0;

        cin
    
linting

              r109
            
          frameNode?: HTMLDivElement;

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          render() {

        cin
    
linting

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

        cin
    
Converted to subproject djx, removed dojo-typings

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

        cin
    
linting

              r109
            
                  <Frame ref={this._setFrameElement}>

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

        cin
    
Converted to subproject djx, removed dojo-typings

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

                  </Frame>

              </div>;

          }

        cin
    
linting

              r109
            
          private readonly _setFrameElement = (node?: HTMLDivElement) => {

              this.frameNode = node;

          };

        cin
    
temp commit, working on @on() decorator

              r72
            
          postCreate() {

              super.postCreate();

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

          }

        cin
    
linting

              r109
            
          private readonly _onSubmit = (evt: Event) => {

              argumentNotNull(evt, "evt");

          };

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
        cin
    
linting

              r109
            
          private readonly _onIncClick = (evt: MouseEvent) => {

              argumentNotNull(evt, "evt");

        cin
    
temp commit, working on @on() decorator

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

        cin
    
Switched to @implab/dojo-typings

              r71
            
        cin
    
Converted to subproject djx, removed dojo-typings

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

        cin
    
linting

              r109
            
          };

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          _onDecClick() {

        cin
    
Switched to @implab/dojo-typings

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

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          }

        cin
    
temp commit, working on @on() decorator

              r72
            
          @on("count-inc")

        cin
    
minor code cleanups

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

        cin
    
linting

              r109
            
              argumentNotNull(evt, "evt");

        cin
    
implemented @on("event-name") decorator for event handlers

              r73
            
          }

        cin
    
@on decorator registers handlers directry on domNode, added support to multiple events in one decorator...

              r85
            
          @on("click", "keydown")

        cin
    
linting

              r109
            
          protected _onClick(evt: MouseEvent | KeyboardEvent) {

              argumentNotNull(evt, "evt");

        cin
    
temp commit, working on @on() decorator

              r72
            
          }

        cin
    
implemented @on("event-name") decorator for event handlers

              r73
            
      }

	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 Converted to subproject djx, removed dojo-typings	r65	import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";

		import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
cin fixed cyclic module references tsx/traits, tsx/FunctionRendition, tsx/RenditionBase	r89	import { createElement, on } from "../tsx";
cin linting	r109	import { argumentNotNull } from "@implab/core-amd/safe";
cin Converted to subproject djx, removed dojo-typings	r65
		interface MyWidgetAttrs {
		title: string;

		counter: number;
		}

		interface MyWidgetEvents {
cin Switched to @implab/dojo-typings	r71	"count-inc": Event & {
		detail: number;
		};
cin Converted to subproject djx, removed dojo-typings	r65
cin Switched to @implab/dojo-typings	r71	"count-dec": Event & {
		detail: number;
		};
cin Converted to subproject djx, removed dojo-typings	r65	}

cin linting	r109	interface FrameProps {
		ref?: JSX.Ref<HTMLDivElement>;
		children?: unknown[];
		}

		const Frame = ({children, ref}: FrameProps) => <div ref={ref} >{children}</div>;
cin Converted to subproject djx, removed dojo-typings	r65
		@djclass
		export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {

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

cin linting	r108	@prototype(0)
cin Converted to subproject djx, removed dojo-typings	r65	counter = 0;

cin linting	r109	frameNode?: HTMLDivElement;

cin Converted to subproject djx, removed dojo-typings	r65	render() {
cin linting	r109
		return <div className="myWidget" onsubmit={this._onSubmit} tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >
cin Converted to subproject djx, removed dojo-typings	r65	<h1 data-dojo-attach-point="titleNode"></h1>
cin linting	r109	<Frame ref={this._setFrameElement}>
		<span class="up-button" onclick={this._onIncClick}>[+]</span>
cin Converted to subproject djx, removed dojo-typings	r65	<span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
		</Frame>
		</div>;
		}

cin linting	r109	private readonly _setFrameElement = (node?: HTMLDivElement) => {
		this.frameNode = node;
		};

cin temp commit, working on @on() decorator	r72	postCreate() {
		super.postCreate();

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

cin linting	r109	private readonly _onSubmit = (evt: Event) => {
		argumentNotNull(evt, "evt");
		};
cin Converted to subproject djx, removed dojo-typings	r65
cin linting	r109	private readonly _onIncClick = (evt: MouseEvent) => {
		argumentNotNull(evt, "evt");

cin temp commit, working on @on() decorator	r72	this.set("counter", this.counter + 1);
cin Switched to @implab/dojo-typings	r71
cin Converted to subproject djx, removed dojo-typings	r65	this.emit("count-inc", { bubbles: false });
cin linting	r109	};
cin Converted to subproject djx, removed dojo-typings	r65
		_onDecClick() {
cin Switched to @implab/dojo-typings	r71	this.emit("count-dec", { bubbles: false, detail: this.counter });
cin Converted to subproject djx, removed dojo-typings	r65	}
cin temp commit, working on @on() decorator	r72
		@on("count-inc")
cin minor code cleanups	r93	private _onCounterInc(evt: Event & { detail: number; x?: number; }) {
cin linting	r109	argumentNotNull(evt, "evt");
cin implemented @on("event-name") decorator for event handlers	r73	}

cin @on decorator registers handlers directry on domNode, added support to multiple events in one decorator...	r85	@on("click", "keydown")
cin linting	r109	protected _onClick(evt: MouseEvent \| KeyboardEvent) {
		argumentNotNull(evt, "evt");
cin temp commit, working on @on() decorator	r72	}
cin implemented @on("event-name") decorator for event handlers	r73	}