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

added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed....

added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed. bind hooks are now specifing 'priority=false' parameter in setters. This will prevent excessive triggering of onChange events.

cin - - Load All Authors

File last commit:

r134:f139e2153e0d v1.9.0-rc1 default


                r134:f139e2153e0d

v1.9.0-rc1 default

Download file

             NewAppointment.tsx
        
                    59 lines
            
             | 2.0 KiB
            
                | text/x-typescript
            
             |
                TypeScriptLexer
            
             / playground / src / main / ts / view / NewAppointment.tsx
          
                    History
                
                 |
                  Source
                 | Raw
                 |Copy content
                 |Copy permalink

        cin
    
added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed....

              r134
            
      import { id as mid } from "module";

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

      import { attach, bind, createElement, prop } from "@implab/djx/tsx";

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

      import Form from "@implab/djx/form/Form";

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

      import { TraceSource } from "@implab/core-amd/log/TraceSource";

      import DateTextBox = require("dijit/form/DateTextBox");

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

      import ValidationTextBox = require("dijit/form/ValidationTextBox");

      const trace = TraceSource.get(mid);

      interface NewAppointmentProps {

          title: string;

          startAt?: Date;

      }

      @djclass

      export default class NewAppointment extends djbase(DjxWidgetBase) {

          value: NewAppointmentProps = {title: "Appointment 1"};

          render() {

              return <section>

                  <Form<NewAppointmentProps> ref={bind("value", prop(this, "value"))}

                      method="DIALOG"

                      onSubmit={this._onSubmit}

                      onReset={this._onReset}

                      onValidStateChange={this._onValidStateChange}

                      onValueChange={this._onValueChange}

                  >

                      <p><label>Title: <ValidationTextBox required name="title"/></label></p>

                      <p><label>Appointment date: <DateTextBox required name="startAt"/></label></p>

                      <footer>

                          <Button type="submit">Send</Button>

                          <Button type="reset">Reset</Button>

                      </footer>

                  </Form>

              </section>;

          }

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

              trace.debug("onSubmit");

          };

          private readonly _onValidStateChange = (isValid?: boolean) => {

              trace.debug("isValid={0}", isValid);

          };

          private readonly _onValueChange = (value: NewAppointmentProps) => {

              trace.debug("valueChange={0}", value);

          };

          private readonly _onReset = (evt: Event) => {

              trace.debug("onReset");

              //evt.preventDefault();

          };

      }

	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 added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed....	r134	import { id as mid } from "module";
		import { djbase, djclass } from "@implab/djx/declare";
		import { attach, bind, createElement, prop } from "@implab/djx/tsx";
		import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
		import Form from "@implab/djx/form/Form";
		import { LocalDateTime } from "@js-joda/core";
		import { TraceSource } from "@implab/core-amd/log/TraceSource";
		import DateTextBox = require("dijit/form/DateTextBox");
		import Button = require("dijit/form/Button");
		import ValidationTextBox = require("dijit/form/ValidationTextBox");

		const trace = TraceSource.get(mid);

		interface NewAppointmentProps {
		title: string;

		startAt?: Date;
		}

		@djclass
		export default class NewAppointment extends djbase(DjxWidgetBase) {
		value: NewAppointmentProps = {title: "Appointment 1"};

		render() {
		return <section>
		<Form<NewAppointmentProps> ref={bind("value", prop(this, "value"))}
		method="DIALOG"
		onSubmit={this._onSubmit}
		onReset={this._onReset}
		onValidStateChange={this._onValidStateChange}
		onValueChange={this._onValueChange}
		>
		<p><label>Title: <ValidationTextBox required name="title"/></label></p>
		<p><label>Appointment date: <DateTextBox required name="startAt"/></label></p>
		<footer>
		<Button type="submit">Send</Button>
		<Button type="reset">Reset</Button>
		</footer>
		</Form>
		</section>;
		}

		private readonly _onSubmit = (evt: Event) => {
		trace.debug("onSubmit");
		};

		private readonly _onValidStateChange = (isValid?: boolean) => {
		trace.debug("isValid={0}", isValid);
		};

		private readonly _onValueChange = (value: NewAppointmentProps) => {
		trace.debug("valueChange={0}", value);
		};

		private readonly _onReset = (evt: Event) => {
		trace.debug("onReset");
		//evt.preventDefault();
		};

		}