Mannivu/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Intermediary

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-20 13:28:45 +02:00
parent 5c9fb293e9
commit dcf5d24002
10 changed files with 140 additions and 608 deletions
Download patch file Download diff file Expand all files Collapse all files

46
UI/Base/TextField.ts
View file

@ -5,33 +5,59 @@ import {UIInputElement} from "./UIInputElement";
export class TextField<T> extends UIInputElement<T> {
public value: UIEventSource<string> = new UIEventSource<string>("");
private value: UIEventSource<string>;
private mappedValue: UIEventSource<T>;
/**
* Pings and has the value data
*/
public enterPressed = new UIEventSource<string>(undefined);
private _placeholder: UIEventSource<string>;
private _mapping: (string) => T;
private _pretext: string;
private _fromString: (string: string) => T;
constructor(placeholder: UIEventSource<string>,
mapping: ((string) => T)) {
super(placeholder);
this._placeholder = placeholder;
this._mapping = mapping;
constructor(options: {
placeholder?: UIEventSource<string>,
toString: (t: T) => string,
fromString: (string: string) => T,
pretext?: string,
value?: UIEventSource<T>
}) {
super(options?.placeholder);
this.value = new UIEventSource<string>("");
this.mappedValue = options?.value ?? new UIEventSource<T>(undefined);
this.value.addCallback((str) => this.mappedValue.setData(options.fromString(str)));
this.mappedValue.addCallback((t) => this.value.setData(options.toString(t)));
this._placeholder = options?.placeholder ?? new UIEventSource<string>("");
this._pretext = options?.pretext ?? "";
const self = this;
this.mappedValue.addCallback((t) => {
if (t === undefined && t === null) {
return;
}
const field = document.getElementById('text-' + this.id);
if (field === undefined && field === null) {
return;
}
field.value = options.toString(t);
})
}
GetValue(): UIEventSource<T> {
return this.value.map(this._mapping);
return this.mappedValue;
}
protected InnerRender(): string {
return "<form onSubmit='return false' class='form-text-field'>" +
return this._pretext + "<form onSubmit='return false' class='form-text-field'>" +
"<input type='text' placeholder='" + (this._placeholder.data ?? "") + "' id='text-" + this.id + "'>" +
"</form>";
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
const field = document.getElementById('text-' + this.id);
const self = this;
field.oninput = () => {