MyWidget.tsx
46 lines
| 1.2 KiB
| text/x-typescript
|
TypeScriptLexer
cin
|
r30 | import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare"; | ||
|
cin
|
r28 | |||
| import { DjxWidgetBase } from "../tsx/DjxWidgetBase"; | ||||
| import { createElement } from "../tsx"; | ||||
|
cin
|
r30 | interface MyWidgetAttrs { | ||
| title: string; | ||||
| counter: number; | ||||
| } | ||||
| interface MyWidgetEvents { | ||||
| "count-inc": Event; | ||||
| "count-dec": Event; | ||||
| } | ||||
|
cin
|
r28 | |||
| @djclass | ||||
|
cin
|
r30 | export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) { | ||
|
cin
|
r28 | |||
|
cin
|
r34 | @bind({ node: "titleNode", type: "innerHTML" }) | ||
|
cin
|
r28 | title = ""; | ||
| @prototype() | ||||
| counter = 0; | ||||
| render() { | ||||
|
cin
|
r34 | const Frame = (props: any) => <div>{props.children}</div>; | ||
|
cin
|
r41 | return <div className="myWidget" tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} > | ||
|
cin
|
r28 | <h1 data-dojo-attach-point="titleNode"></h1> | ||
|
cin
|
r34 | <Frame> | ||
| <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span> | ||||
|
cin
|
r41 | <span class="down-button" onclick={() => this._onDecClick()}>[-]</span> | ||
|
cin
|
r34 | </Frame> | ||
|
cin
|
r28 | </div>; | ||
| } | ||||
|
cin
|
r34 | _onIncClick(e: MouseEvent) { | ||
| this.emit("count-inc", { bubbles: false }); | ||||
|
cin
|
r30 | } | ||
| _onDecClick() { | ||||
|
cin
|
r34 | this.emit("count-dec", { bubbles: false }); | ||
|
cin
|
r30 | } | ||
|
cin
|
r28 | } | ||