##// END OF EJS Templates
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.

File last commit:

r134:f139e2153e0d v1.9.0-rc1 default
r134:f139e2153e0d v1.9.0-rc1 default
Show More
Form.tsx
134 lines | 3.9 KiB | text/x-typescript | TypeScriptLexer
cin
added form/Form widget and form/_FormMixin, this is a rewritten version of the corresponding dojo classed....
r134
import { djbase, djclass } from "../declare";
import { attach, createElement } from "../tsx";
import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
import _FormMixin from "./_FormMixin";
/** This widget represents a document section containing interactive controls
* for submitting information.
*/
@djclass
export default class Form<T extends object> extends djbase(DjxWidgetBase, _FormMixin) {
/** Name of form for scripting. */
name?: string;
/** The URL that processes the form submission. */
action?: string;
/** The HTTP method to submit the form with. */
method?: "POST" | "GET" | "DIALOG";
/** If the value of the method attribute is post, enctype is the MIME type
* of the form submission.
*/
enctype?: string;
/** Comma-separated content types the server accepts.
*
* @deprecated This attribute has been deprecated and should not be used.
* Instead, use the accept attribute on <input type=file> elements.
*/
accept?: string;
/** Space-separated character encodings the server accepts. The browser
* uses them in the order in which they are listed.
*/
"accept-charset"?: string;
/** Indicates where to display the response after submitting the form. It
* is a name/keyword for a browsing context (for example, tab, window, or
* iframe).
*/
target?: string;
/** Indicates whether input elements can by default have their values
* automatically completed by the browser. `autocomplete` attributes on form
* elements override it on `<form>`.
*/
autocomplete?: "off" | "on";
/** This Boolean attribute indicates that the form shouldn't be validated
* when submitted. If this attribute is not set the form is validated, it
* can be overridden by a `formnovalidate` attribute on a `<button>`,
* `<input type="submit">`, or `<input type="image">` element belonging to
* the form.
*/
novalidate?: boolean;
value?: T;
containerNode?: HTMLFormElement;
_resetting = false;
constructor(opts?: Partial<Form<T>>, srcRef?: string | Node) {
super(opts, srcRef);
}
render() {
return <form onreset={this._onReset} onsubmit={this._onSubmit} ref={attach(this, "containerNode")}>
</form>;
}
postCreate() {
super.postCreate();
this.watch("value", (_prop, _oldValue, newValue) => this.onValueChange(newValue));
}
private readonly _onReset = (evt: Event) => {
if (!this._resetting) {
// re-dispatch event to replace default reset behavior
try {
this._resetting = true;
evt.preventDefault();
if(this.containerNode?.dispatchEvent(new Event(evt.type, evt)))
super.reset();
} finally {
this._resetting = false;
}
} else {
this.onReset(evt);
}
};
private readonly _onSubmit = (evt: SubmitEvent) => {
if(!this.novalidate && !this.validate()) {
evt.preventDefault();
evt.stopPropagation();
} else {
this.onSubmit(evt);
}
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onSubmit(evt: Event) {
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onReset(evt: Event) {
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onValueChange(value?: T) {
}
/** Resets the form. */
reset() {
if (!this.containerNode)
throw new Error("Can't reset the destroyed form");
this.containerNode.reset();
}
/** Programmatically submits form, no additional events emitted
* or checks made.
*/
submit() {
if (!this.containerNode)
throw new Error("Can't submit the destroyed form");
this.containerNode.submit();
}
}