midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Newlines, textfield sets the cursor position appropriately

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-26 01:10:10 +02:00
parent 984d88d01e
commit 223f6191cd
6 changed files with 10 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
UI/Input/MultiLingualTextFields.ts
View file

@ -6,13 +6,11 @@ export default class MultiLingualTextFields extends InputElement<any> {
private _fields: Map<string, TextField> = new Map<string, TextField>();
private readonly _value: UIEventSource<any>;
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
constructor(languages: UIEventSource<string[]>,
textArea: boolean = false,
value: UIEventSource<Map<string, UIEventSource<string>>> = undefined) {
super(undefined);
this._value = value ?? new UIEventSource({});
this._value.addCallbackAndRun(latestData => {
if (typeof (latestData) === "string") {
console.warn("Refusing string for multilingual input", latestData);

1
UI/Input/MultiTagInput.ts
View file

@ -3,7 +3,6 @@ import TagInput from "./SingleTagInput";
import {MultiInput} from "./MultiInput";
export class MultiTagInput extends MultiInput<string> {
constructor(value: UIEventSource<string[]> = new UIEventSource<string[]>([])) {
super("Add a new tag",

4
UI/Input/RadioButton.ts
View file

@ -11,8 +11,7 @@ export class RadioButton<T> extends InputElement<T> {
private readonly value: UIEventSource<T>;
private readonly _elements: InputElement<T>[]
private readonly _selectFirstAsDefault: boolean;
constructor(elements: InputElement<T>[],
selectFirstAsDefault = true) {
super(undefined);
@ -20,7 +19,6 @@ export class RadioButton<T> extends InputElement<T> {
this._selectFirstAsDefault = selectFirstAsDefault;
const self = this;
this.value =
UIEventSource.flatten(this._selectedElementIndex.map(
(selectedIndex) => {

1
UI/Input/SingleTagInput.ts
View file

@ -22,7 +22,6 @@ export default class SingleTagInput extends InputElement<string> {
constructor(value: UIEventSource<string> = undefined) {
super(undefined);
this._value = value ?? new UIEventSource<string>("");
this.helpMessage = new VariableUiElement(this._value.map(tagDef => {
try {
FromJSON.Tag(tagDef, "");

16
UI/Input/TextField.ts
View file

@ -10,7 +10,7 @@ export class TextField extends InputElement<string> {
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _isArea: boolean;
private readonly _textAreaRows: number;
constructor(options?: {
placeholder?: string | UIElement,
value?: UIEventSource<string>,
@ -52,7 +52,6 @@ export class TextField extends InputElement<string> {
field.value = t;
});
this.dumbMode = false;
this.SetClass("deadbeef")
}
GetValue(): UIEventSource<string> {
@ -72,18 +71,18 @@ export class TextField extends InputElement<string> {
`</form></span>`;
}
Update() {
console.log("Updating TF")
super.Update();
}
InnerUpdate() {
console.log("Inner Updating TF")
const field = document.getElementById("txt-" + this.id);
const self = this;
field.oninput = () => {
// @ts-ignore
var endDistance = field.value.length - field.selectionEnd;
// @ts-ignore
self.value.setData(field.value);
// 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
self.SetCursorPosition(field.value.length - endDistance);
};
if (this.value.data !== undefined && this.value.data !== null) {
@ -105,7 +104,7 @@ export class TextField extends InputElement<string> {
}
public SetCursorPosition(i: number) {
const field = document.getElementById('text-' + this.id);
const field = document.getElementById('txt-' + this.id);
if(field === undefined || field === null){
return;
}
@ -116,6 +115,7 @@ export class TextField extends InputElement<string> {
field.focus();
// @ts-ignore
field.setSelectionRange(i, i);
}
IsValid(t: string): boolean {

2
UI/Input/ValidatedTextField.ts
View file

@ -90,7 +90,7 @@ export default class ValidatedTextField {
return parsePhoneNumberFromString(str, country?.toUpperCase())?.isValid() ?? false
},
(str, country: any) => {
console.log("country formatting", country)
console.log("reformatting phone nuber",str, "for locale", country)
return parsePhoneNumberFromString(str, country?.toUpperCase()).formatInternational()
}
)