mapcomplete/UI/Base/TextField.ts

59 lines
1.7 KiB
TypeScript
Raw Normal View History

2020-07-01 02:12:33 +02:00
import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource";
2020-07-05 18:59:47 +02:00
import {UIInputElement} from "./UIInputElement";
2020-07-01 02:12:33 +02:00
2020-07-05 18:59:47 +02:00
export class TextField<T> extends UIInputElement<T> {
2020-07-01 02:12:33 +02:00
2020-07-05 18:59:47 +02:00
public value: UIEventSource<string> = new UIEventSource<string>("");
2020-07-01 02:12:33 +02:00
/**
* Pings and has the value data
*/
public enterPressed = new UIEventSource<string>(undefined);
private _placeholder: UIEventSource<string>;
2020-07-05 18:59:47 +02:00
private _mapping: (string) => T;
2020-07-01 02:12:33 +02:00
2020-07-05 18:59:47 +02:00
constructor(placeholder: UIEventSource<string>,
mapping: ((string) => T)) {
2020-07-01 02:12:33 +02:00
super(placeholder);
this._placeholder = placeholder;
2020-07-05 18:59:47 +02:00
this._mapping = mapping;
}
GetValue(): UIEventSource<T> {
return this.value.map(this._mapping);
2020-07-01 02:12:33 +02:00
}
protected InnerRender(): string {
return "<form onSubmit='return false' class='form-text-field'>" +
2020-07-05 18:59:47 +02:00
"<input type='text' placeholder='" + (this._placeholder.data ?? "") + "' id='text-" + this.id + "'>" +
2020-07-01 02:12:33 +02:00
"</form>";
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
const field = document.getElementById('text-' + this.id);
const self = this;
field.oninput = () => {
2020-07-05 18:59:47 +02:00
// @ts-ignore
2020-07-01 02:12:33 +02:00
self.value.setData(field.value);
};
field.addEventListener("keyup", function (event) {
if (event.key === "Enter") {
2020-07-05 18:59:47 +02:00
// @ts-ignore
2020-07-01 02:12:33 +02:00
self.enterPressed.setData(field.value);
}
});
2020-07-05 18:59:47 +02:00
2020-07-01 02:12:33 +02:00
}
Clear() {
const field = document.getElementById('text-' + this.id);
if (field !== undefined) {
2020-07-05 18:59:47 +02:00
// @ts-ignore
2020-07-01 02:12:33 +02:00
field.value = "";
}
}
}