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

Working sandbox

cin - - Load All Authors

File last commit:

r96:a316cfea8bb1 v1.3


                r99:908c1ce6ce6d

v1.3

Download file

             MyWidget.tsx
        
                    69 lines
            
             | 1.8 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
    
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
            
      }

      @djclass

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

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

          title = "";

          @prototype()

          counter = 0;

          render() {

        cin
    
refactoring, adding scope to rendering methods

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

        cin
    
Converted to subproject djx, removed dojo-typings

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

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

        cin
    
refactoring, adding scope to rendering methods

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

        cin
    
Converted to subproject djx, removed dojo-typings

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

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

                  </Frame>

              </div>;

          }

        cin
    
temp commit, working on @on() decorator

              r72
            
          postCreate() {

              super.postCreate();

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

          }

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          _onSubmit(e: Event) {

          }

          _onIncClick(e: MouseEvent) {

        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 });

          }

          _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
    
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")

          protected _onClick(event: MouseEvent | KeyboardEvent) {

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


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

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

		@prototype()
		counter = 0;

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

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

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

cin Converted to subproject djx, removed dojo-typings	r65	_onSubmit(e: Event) {
		}

		_onIncClick(e: MouseEvent) {
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 });
		}

		_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 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")
		protected _onClick(event: MouseEvent \| KeyboardEvent) {
cin temp commit, working on @on() decorator	r72
		}
cin implemented @on("event-name") decorator for event handlers	r73	}