import {UIElement} from "../UIElement"; import {UIEventSource} from "../UIEventSource"; import {InputElement} from "./InputElement"; import {FixedUiElement} from "../Base/FixedUiElement"; export class TextField extends InputElement { private value: UIEventSource; private mappedValue: UIEventSource; /** * Pings and has the value data */ public enterPressed = new UIEventSource(undefined); private _placeholder: UIElement; private _fromString?: (string: string) => T; private _toString: (t: T) => string; constructor(options: { placeholder?: string | UIElement, toString: (t: T) => string, fromString: (string: string) => T, value?: UIEventSource }) { super(undefined); this.value = new UIEventSource(""); this.mappedValue = options?.value ?? new UIEventSource(undefined); // @ts-ignore this._fromString = options.fromString ?? ((str) => (str)) this.value.addCallback((str) => this.mappedValue.setData(options.fromString(str))); this.mappedValue.addCallback((t) => this.value.setData(options.toString(t))); options.placeholder = options.placeholder ?? ""; if (options.placeholder instanceof UIElement) { this._placeholder = options.placeholder } else { this._placeholder = new FixedUiElement(options.placeholder); } this._toString = options.toString ?? ((t) => ("" + t)); 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; } // @ts-ignore field.value = options.toString(t); }) } GetValue(): UIEventSource { return this.mappedValue; } InnerRender(): string { return "
" + "" + "
"; } InnerUpdate(htmlElement: HTMLElement) { const field = document.getElementById('text-' + this.id); if(field === null){ return; } const self = this; field.oninput = () => { // @ts-ignore self.value.setData(field.value); }; field.addEventListener("keyup", function (event) { if (event.key === "Enter") { // @ts-ignore self.enterPressed.setData(field.value); } }); } IsValid(t: T): boolean { if(t === undefined || t === null){ return false; } const result = this._toString(t); return result !== undefined && result !== null; } Clear() { const field = document.getElementById('text-' + this.id); if (field !== undefined) { // @ts-ignore field.value = ""; } } }