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