forked from MapComplete/MapComplete
Reformat all files with prettier
This commit is contained in:
parent
e22d189376
commit
b541d3eab4
382 changed files with 50893 additions and 35566 deletions
|
|
@ -1,82 +1,79 @@
|
|||
import {InputElement} from "./InputElement";
|
||||
import {Store, UIEventSource} from "../../Logic/UIEventSource";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
import {Translation} from "../i18n/Translation";
|
||||
import Locale from "../i18n/Locale";
|
||||
|
||||
import { InputElement } from "./InputElement"
|
||||
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
import { Translation } from "../i18n/Translation"
|
||||
import Locale from "../i18n/Locale"
|
||||
|
||||
interface TextFieldOptions {
|
||||
placeholder?: string | Store<string> | Translation,
|
||||
value?: UIEventSource<string>,
|
||||
htmlType?: "area" | "text" | "time" | string,
|
||||
inputMode?: string,
|
||||
label?: BaseUIElement,
|
||||
textAreaRows?: number,
|
||||
inputStyle?: string,
|
||||
placeholder?: string | Store<string> | Translation
|
||||
value?: UIEventSource<string>
|
||||
htmlType?: "area" | "text" | "time" | string
|
||||
inputMode?: string
|
||||
label?: BaseUIElement
|
||||
textAreaRows?: number
|
||||
inputStyle?: string
|
||||
isValid?: (s: string) => boolean
|
||||
}
|
||||
|
||||
export class TextField extends InputElement<string> {
|
||||
public readonly enterPressed = new UIEventSource<string>(undefined);
|
||||
private readonly value: UIEventSource<string>;
|
||||
private _actualField : HTMLElement
|
||||
private readonly _isValid: (s: string) => boolean;
|
||||
private readonly _rawValue: UIEventSource<string>
|
||||
private _isFocused = false;
|
||||
private readonly _options : TextFieldOptions;
|
||||
|
||||
public readonly enterPressed = new UIEventSource<string>(undefined)
|
||||
private readonly value: UIEventSource<string>
|
||||
private _actualField: HTMLElement
|
||||
private readonly _isValid: (s: string) => boolean
|
||||
private readonly _rawValue: UIEventSource<string>
|
||||
private _isFocused = false
|
||||
private readonly _options: TextFieldOptions
|
||||
|
||||
constructor(options?: TextFieldOptions) {
|
||||
super();
|
||||
super()
|
||||
this._options = options ?? {}
|
||||
options = options ?? {};
|
||||
this.value = options?.value ?? new UIEventSource<string>(undefined);
|
||||
options = options ?? {}
|
||||
this.value = options?.value ?? new UIEventSource<string>(undefined)
|
||||
this._rawValue = new UIEventSource<string>("")
|
||||
this._isValid = options.isValid ?? (_ => true);
|
||||
this._isValid = options.isValid ?? ((_) => true)
|
||||
}
|
||||
|
||||
private static SetCursorPosition(textfield: HTMLElement, i: number) {
|
||||
if (textfield === undefined || textfield === null) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (i === -1) {
|
||||
// @ts-ignore
|
||||
i = textfield.value.length;
|
||||
i = textfield.value.length
|
||||
}
|
||||
textfield.focus();
|
||||
textfield.focus()
|
||||
// @ts-ignore
|
||||
textfield.setSelectionRange(i, i);
|
||||
|
||||
textfield.setSelectionRange(i, i)
|
||||
}
|
||||
|
||||
GetValue(): UIEventSource<string> {
|
||||
return this.value;
|
||||
return this.value
|
||||
}
|
||||
|
||||
GetRawValue(): UIEventSource<string>{
|
||||
|
||||
GetRawValue(): UIEventSource<string> {
|
||||
return this._rawValue
|
||||
}
|
||||
|
||||
|
||||
IsValid(t: string): boolean {
|
||||
if (t === undefined || t === null) {
|
||||
return false
|
||||
}
|
||||
return this._isValid(t);
|
||||
return this._isValid(t)
|
||||
}
|
||||
|
||||
private static test(){
|
||||
private static test() {
|
||||
const placeholder = new UIEventSource<string>("placeholder")
|
||||
const tf = new TextField({
|
||||
placeholder
|
||||
placeholder,
|
||||
})
|
||||
const html = <HTMLInputElement> tf.InnerConstructElement().children[0];
|
||||
const html = <HTMLInputElement>tf.InnerConstructElement().children[0]
|
||||
html.placeholder // => 'placeholder'
|
||||
placeholder.setData("another piece of text")
|
||||
html.placeholder// => "another piece of text"
|
||||
html.placeholder // => "another piece of text"
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* // should update placeholders dynamically
|
||||
* const placeholder = new UIEventSource<string>("placeholder")
|
||||
* const tf = new TextField({
|
||||
|
|
@ -86,7 +83,7 @@ export class TextField extends InputElement<string> {
|
|||
* html.placeholder // => 'placeholder'
|
||||
* placeholder.setData("another piece of text")
|
||||
* html.placeholder// => "another piece of text"
|
||||
*
|
||||
*
|
||||
* // should update translated placeholders dynamically
|
||||
* const placeholder = new Translation({nl: "Nederlands", en: "English"})
|
||||
* Locale.language.setData("nl");
|
||||
|
|
@ -99,26 +96,32 @@ export class TextField extends InputElement<string> {
|
|||
* html.placeholder // => 'English'
|
||||
*/
|
||||
protected InnerConstructElement(): HTMLElement {
|
||||
const options = this._options;
|
||||
const self = this;
|
||||
const options = this._options
|
||||
const self = this
|
||||
let placeholderStore: Store<string>
|
||||
let placeholder : string = "";
|
||||
if(options.placeholder){
|
||||
if(typeof options.placeholder === "string"){
|
||||
placeholder = options.placeholder;
|
||||
placeholderStore = undefined;
|
||||
}else {
|
||||
if ((options.placeholder instanceof Store) && options.placeholder["data"] !== undefined) {
|
||||
placeholderStore = options.placeholder;
|
||||
} else if ((options.placeholder instanceof Translation) && options.placeholder["translations"] !== undefined) {
|
||||
placeholderStore = <Store<string>>Locale.language.map(l => (<Translation>options.placeholder).textFor(l))
|
||||
let placeholder: string = ""
|
||||
if (options.placeholder) {
|
||||
if (typeof options.placeholder === "string") {
|
||||
placeholder = options.placeholder
|
||||
placeholderStore = undefined
|
||||
} else {
|
||||
if (
|
||||
options.placeholder instanceof Store &&
|
||||
options.placeholder["data"] !== undefined
|
||||
) {
|
||||
placeholderStore = options.placeholder
|
||||
} else if (
|
||||
options.placeholder instanceof Translation &&
|
||||
options.placeholder["translations"] !== undefined
|
||||
) {
|
||||
placeholderStore = <Store<string>>(
|
||||
Locale.language.map((l) => (<Translation>options.placeholder).textFor(l))
|
||||
)
|
||||
}
|
||||
placeholder = placeholderStore?.data ?? placeholder ?? "";
|
||||
placeholder = placeholderStore?.data ?? placeholder ?? ""
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.SetClass("form-text-field")
|
||||
let inputEl: HTMLElement
|
||||
if (options.htmlType === "area") {
|
||||
|
|
@ -128,9 +131,9 @@ export class TextField extends InputElement<string> {
|
|||
el.rows = options.textAreaRows
|
||||
el.cols = 50
|
||||
el.style.width = "100%"
|
||||
inputEl = el;
|
||||
if(placeholderStore){
|
||||
placeholderStore.addCallbackAndRunD(placeholder => el.placeholder = placeholder)
|
||||
inputEl = el
|
||||
if (placeholderStore) {
|
||||
placeholderStore.addCallbackAndRunD((placeholder) => (el.placeholder = placeholder))
|
||||
}
|
||||
} else {
|
||||
const el = document.createElement("input")
|
||||
|
|
@ -139,86 +142,81 @@ export class TextField extends InputElement<string> {
|
|||
el.placeholder = placeholder
|
||||
el.style.cssText = options.inputStyle ?? "width: 100%;"
|
||||
inputEl = el
|
||||
if(placeholderStore){
|
||||
placeholderStore.addCallbackAndRunD(placeholder => el.placeholder = placeholder)
|
||||
if (placeholderStore) {
|
||||
placeholderStore.addCallbackAndRunD((placeholder) => (el.placeholder = placeholder))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const form = document.createElement("form")
|
||||
form.appendChild(inputEl)
|
||||
form.onsubmit = () => false;
|
||||
form.onsubmit = () => false
|
||||
|
||||
if (options.label) {
|
||||
form.appendChild(options.label.ConstructElement())
|
||||
}
|
||||
|
||||
const field = inputEl
|
||||
|
||||
const field = inputEl;
|
||||
|
||||
this.value.addCallbackAndRunD(value => {
|
||||
this.value.addCallbackAndRunD((value) => {
|
||||
// We leave the textfield as is in the case of undefined or null (handled by addCallbackAndRunD) - make sure we do not erase it!
|
||||
field["value"] = value;
|
||||
field["value"] = value
|
||||
if (self.IsValid(value)) {
|
||||
self.RemoveClass("invalid")
|
||||
} else {
|
||||
self.SetClass("invalid")
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
field.oninput = () => {
|
||||
|
||||
// How much characters are on the right, not including spaces?
|
||||
// @ts-ignore
|
||||
const endDistance = field.value.substring(field.selectionEnd).replace(/ /g, '').length;
|
||||
const endDistance = field.value.substring(field.selectionEnd).replace(/ /g, "").length
|
||||
// @ts-ignore
|
||||
let val: string = field.value;
|
||||
let val: string = field.value
|
||||
self._rawValue.setData(val)
|
||||
if (!self.IsValid(val)) {
|
||||
self.value.setData(undefined);
|
||||
self.value.setData(undefined)
|
||||
} else {
|
||||
self.value.setData(val);
|
||||
self.value.setData(val)
|
||||
}
|
||||
// Setting the value might cause the value to be set again. We keep the distance _to the end_ stable, as phone number formatting might cause the start to change
|
||||
// See https://github.com/pietervdvn/MapComplete/issues/103
|
||||
// We reread the field value - it might have changed!
|
||||
|
||||
// @ts-ignore
|
||||
val = field.value;
|
||||
let newCursorPos = val.length - endDistance;
|
||||
while (newCursorPos >= 0 &&
|
||||
val = field.value
|
||||
let newCursorPos = val.length - endDistance
|
||||
while (
|
||||
newCursorPos >= 0 &&
|
||||
// We count the number of _actual_ characters (non-space characters) on the right of the new value
|
||||
// This count should become bigger then the end distance
|
||||
val.substr(newCursorPos).replace(/ /g, '').length < endDistance
|
||||
) {
|
||||
newCursorPos--;
|
||||
val.substr(newCursorPos).replace(/ /g, "").length < endDistance
|
||||
) {
|
||||
newCursorPos--
|
||||
}
|
||||
TextField.SetCursorPosition(field, newCursorPos);
|
||||
};
|
||||
|
||||
TextField.SetCursorPosition(field, newCursorPos)
|
||||
}
|
||||
|
||||
field.addEventListener("keyup", function (event) {
|
||||
if (event.key === "Enter") {
|
||||
// @ts-ignore
|
||||
self.enterPressed.setData(field.value);
|
||||
self.enterPressed.setData(field.value)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
if(this._isFocused){
|
||||
if (this._isFocused) {
|
||||
field.focus()
|
||||
}
|
||||
|
||||
this._actualField = field;
|
||||
return form;
|
||||
this._actualField = field
|
||||
return form
|
||||
}
|
||||
|
||||
public focus() {
|
||||
if(this._actualField === undefined){
|
||||
if (this._actualField === undefined) {
|
||||
this._isFocused = true
|
||||
}else{
|
||||
} else {
|
||||
this._actualField.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue