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

added whenRendered() method to wait for pending oprations to complete

cin - - Load All Authors

File last commit:

r116:aac297dda27d v1.6.0 default


                r118:e07418577cbc

v1.6.1 default

Download file

             MainWidget.tsx
        
                    73 lines
            
             | 2.3 KiB
            
                | text/x-typescript
            
             |
                TypeScriptLexer
            
             / playground / src / main / ts / view / MainWidget.tsx
          
                    History
                
                 |
                  Source
                 | Raw
                 |Copy content
                 |Copy permalink

        cin
    
Working on WatchForRendition

              r107
            
      import { djbase, djclass } from "@implab/djx/declare";

      import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";

        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
      import { bind, createElement, prop, watch, watchFor } from "@implab/djx/tsx";

      import MainModel from "../model/MainModel";

        cin
    
added reduce() and next() methods to observable...

              r116
            
      import { Observable } from "@implab/djx/observable";

      import { OrderedUpdate } from "@implab/djx/store";

        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
      import { Appointment } from "../model/Appointment";

      import { LocalDate } from "@js-joda/core";

        cin
    
Working on WatchForRendition

              r107
            
      import Button = require("dijit/form/Button");

        cin
    
linting

              r109
            
        cin
    
Working on WatchForRendition

              r107
            
      @djclass

      export default class MainWidget extends djbase(DjxWidgetBase) {

        cin
    
added reduce() and next() methods to observable...

              r116
            
          appointments?: Observable<OrderedUpdate<Appointment>>;

        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
          model: MainModel;

        cin
    
Working on WatchForRendition

              r107
            
        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
          dateTo?: LocalDate;

        cin
    
Working on WatchForRendition

              r107
            
        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
          dateFrom?: LocalDate;

        cin
    
Working on WatchForRendition

              r107
            
        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
          constructor(opts?: Partial<MainWidget> & ThisType<MainWidget>, srcNode?: string | Node) {

              super(opts, srcNode);

        cin
    
Working on WatchForRendition

              r107
            
        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
              const model = this.model = new MainModel();

              this.own(model);

              model.subscribe({ next: x => this.set(x) });

          }

        cin
    
Working on WatchForRendition

              r107
            
          render() {

              return <div className="tundra">

        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
                  <h2 ref={bind("innerHTML", prop(this, "title"))} />

                  {watch(prop(this, "appointments"), items => items &&

                      <ul>

                          {watchFor(items, ({ id, title, getMembers }) =>

                              <li>{title}

                                  <ul>

                                      {watchFor(getMembers(), ({ role, name, position }) =>

                                          <li className={role}>{name}({position})</li>

                                      )}

                                  </ul>

                                  <div>

                                      <Button onClick={() => this._onAddMemberClick(id)}>Add member</Button>

                                  </div>

                              </li>

                          )}

                      </ul>

                  )}

                  <div>

                      <Button onClick={this._onAddAppointmentClick}>Add new appointment</Button>

                  </div>

        cin
    
Working on WatchForRendition

              r107
            
              </div>;

          }

        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
          load() {

              this.model.load();

        cin
    
Working on WatchForRendition

              r107
            
          }

        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
          private readonly _onAddMemberClick = (appointmentId: string) => {

              this.model.addMember(appointmentId, {

                  email: "some-mail",

                  name: "Member Name",

                  position: "Member position",

                  role: "participant"

              });

        cin
    
linting

              r109
            
          };

        cin
    
Working on WatchForRendition

              r107
            
        cin
    
corrected tear down logic handling in observables. Added support for observable query results

              r110
            
          private readonly _onAddAppointmentClick = () => {

              this.model.addAppointment("Appointment", new Date, 30);

        cin
    
linting

              r109
            
          };

        cin
    
Working on WatchForRendition

              r107
            
      }

	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 on WatchForRendition	r107	import { djbase, djclass } from "@implab/djx/declare";
		import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
cin corrected tear down logic handling in observables. Added support for observable query results	r110	import { bind, createElement, prop, watch, watchFor } from "@implab/djx/tsx";
		import MainModel from "../model/MainModel";
cin added reduce() and next() methods to observable...	r116	import { Observable } from "@implab/djx/observable";
		import { OrderedUpdate } from "@implab/djx/store";
cin corrected tear down logic handling in observables. Added support for observable query results	r110	import { Appointment } from "../model/Appointment";
		import { LocalDate } from "@js-joda/core";
cin Working on WatchForRendition	r107	import Button = require("dijit/form/Button");
cin linting	r109
cin Working on WatchForRendition	r107	@djclass
		export default class MainWidget extends djbase(DjxWidgetBase) {

cin added reduce() and next() methods to observable...	r116	appointments?: Observable<OrderedUpdate<Appointment>>;
cin corrected tear down logic handling in observables. Added support for observable query results	r110
		model: MainModel;
cin Working on WatchForRendition	r107
cin corrected tear down logic handling in observables. Added support for observable query results	r110	dateTo?: LocalDate;
cin Working on WatchForRendition	r107
cin corrected tear down logic handling in observables. Added support for observable query results	r110	dateFrom?: LocalDate;
cin Working on WatchForRendition	r107
cin corrected tear down logic handling in observables. Added support for observable query results	r110	constructor(opts?: Partial<MainWidget> & ThisType<MainWidget>, srcNode?: string \| Node) {
		super(opts, srcNode);
cin Working on WatchForRendition	r107
cin corrected tear down logic handling in observables. Added support for observable query results	r110	const model = this.model = new MainModel();
		this.own(model);
		model.subscribe({ next: x => this.set(x) });
		}
cin Working on WatchForRendition	r107

		render() {

		return <div className="tundra">
cin corrected tear down logic handling in observables. Added support for observable query results	r110	<h2 ref={bind("innerHTML", prop(this, "title"))} />
		{watch(prop(this, "appointments"), items => items &&
		<ul>
		{watchFor(items, ({ id, title, getMembers }) =>
		<li>{title}
		<ul>
		{watchFor(getMembers(), ({ role, name, position }) =>
		<li className={role}>{name}({position})</li>
		)}
		</ul>
		<div>
		<Button onClick={() => this._onAddMemberClick(id)}>Add member</Button>
		</div>
		</li>
		)}
		</ul>
		)}
		<div>
		<Button onClick={this._onAddAppointmentClick}>Add new appointment</Button>
		</div>
cin Working on WatchForRendition	r107	</div>;
		}

cin corrected tear down logic handling in observables. Added support for observable query results	r110	load() {
		this.model.load();
cin Working on WatchForRendition	r107	}

cin corrected tear down logic handling in observables. Added support for observable query results	r110	private readonly _onAddMemberClick = (appointmentId: string) => {
		this.model.addMember(appointmentId, {
		email: "some-mail",
		name: "Member Name",
		position: "Member position",
		role: "participant"
		});
cin linting	r109	};
cin Working on WatchForRendition	r107
cin corrected tear down logic handling in observables. Added support for observable query results	r110	private readonly _onAddAppointmentClick = () => {
		this.model.addAppointment("Appointment", new Date, 30);
cin linting	r109	};
cin Working on WatchForRendition	r107	}