Hotfix: fix text input in radio buttons

This commit is contained in:
Pieter Vander Vennet 2020-09-30 22:48:58 +02:00
parent 4cce18f818
commit 611d46187c
7 changed files with 88 additions and 11 deletions

View file

@ -23,7 +23,7 @@ export class State {
// The singleton of the global state // The singleton of the global state
public static state: State; public static state: State;
public static vNumber = "0.0.9"; public static vNumber = "0.0.9a";
// The user journey states thresholds when a new feature gets unlocked // The user journey states thresholds when a new feature gets unlocked
public static userJourney = { public static userJourney = {

View file

@ -16,6 +16,10 @@ export class FixedInputElement<T> extends InputElement<T> {
this._comparator = comparator ?? ((t0, t1) => t0 == t1); this._comparator = comparator ?? ((t0, t1) => t0 == t1);
this.value = new UIEventSource<T>(value); this.value = new UIEventSource<T>(value);
this.rendering = typeof (rendering) === 'string' ? new FixedUiElement(rendering) : rendering; this.rendering = typeof (rendering) === 'string' ? new FixedUiElement(rendering) : rendering;
const self = this;
this.onClick(() => {
self.IsSelected.setData(true)
})
} }
GetValue(): UIEventSource<T> { GetValue(): UIEventSource<T> {
@ -32,7 +36,6 @@ export class FixedInputElement<T> extends InputElement<T> {
protected InnerUpdate(htmlElement: HTMLElement) { protected InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement); super.InnerUpdate(htmlElement);
const self = this; const self = this;
htmlElement.addEventListener("mouseenter", () => self.IsSelected.setData(true));
htmlElement.addEventListener("mouseout", () => self.IsSelected.setData(false)) htmlElement.addEventListener("mouseout", () => self.IsSelected.setData(false))
} }

View file

@ -35,7 +35,9 @@ export default class InputElementMap<T, X> extends InputElement<X> {
}), extraSources, x => { }), extraSources, x => {
return fromX(x); return fromX(x);
}); });
}w this._value.addCallback(console.log)
this.IsSelected.addCallback(s => console.log("Is selected?", s))
}
GetValue(): UIEventSource<X> { GetValue(): UIEventSource<X> {
return this._value; return this._value;

View file

@ -38,6 +38,11 @@ export class RadioButton<T> extends InputElement<T> {
elements[i]?.onClick(() => { elements[i]?.onClick(() => {
self._selectedElementIndex.setData(i); self._selectedElementIndex.setData(i);
}); });
elements[i].IsSelected.addCallback(isSelected => {
if (isSelected) {
self._selectedElementIndex.setData(i);
}
})
} }
} }

View file

@ -228,7 +228,9 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
elements.push(freeformElement); elements.push(freeformElement);
} }
if (options.multiAnswer) { if (!options.multiAnswer) {
return new RadioButton(elements, false);
} else {
const possibleTags = elements.map(el => el.GetValue().data); const possibleTags = elements.map(el => el.GetValue().data);
const checkBoxes = new CheckBoxes(elements); const checkBoxes = new CheckBoxes(elements);
@ -282,7 +284,6 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
return inputEl; return inputEl;
} }
return new RadioButton(elements, false);
} }
@ -360,7 +361,7 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
} }
return ValidatedTextField.Mapped(pickString, toString, { return ValidatedTextField.Mapped(pickString, toString, {
placeholder: this._freeform.placeholder, placeholder: freeform.placeholder,
type: type, type: type,
isValid: (str) => (str.length <= 255), isValid: (str) => (str.length <= 255),
textArea: isTextArea, textArea: isTextArea,

View file

@ -71,7 +71,6 @@ body {
.invalid { .invalid {
box-shadow: 0 0 10px #ff5353; box-shadow: 0 0 10px #ff5353;
display: block;
height: min-content; height: min-content;
} }

71
test.ts
View file

@ -1,3 +1,70 @@
import {Basemap} from "./Logic/Leaflet/Basemap"; import {RadioButton} from "./UI/Input/RadioButton";
import {FixedInputElement} from "./UI/Input/FixedInputElement";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import ValidatedTextField from "./UI/Input/ValidatedTextField";
import {And, Tag, TagsFilter} from "./Logic/Tags";
console.log(Basemap.ProvidedLayer("Stamen.Toner"))
const type = "string";
if(ValidatedTextField.AllTypes[type] === undefined){
console.error("Type:",type, ValidatedTextField.AllTypes)
throw "Unkown type: "+type;
}
const freeform = {
key: "x",
extraTags: undefined,
placeholder: "Placeholder"
}
const pickString =
(string: any) => {
if (string === "" || string === undefined) {
return undefined;
}
const tag = new Tag(freeform.key, string);
if (freeform.extraTags === undefined) {
return tag;
}
return new And([
tag,
freeform.extraTags
]
);
};
const toString = (tag) => {
if (tag instanceof And) {
for (const subtag of tag.and) {
if (subtag instanceof Tag && subtag.key === freeform.key) {
return subtag.value;
}
}
return undefined;
} else if (tag instanceof Tag) {
return tag.value
}
return undefined;
}
const tf = ValidatedTextField.Mapped(pickString, toString, {
placeholder: freeform.placeholder,
type: type,
isValid: (str) => (str.length <= 255),
textArea: false,
country: "be"
})
const rb = new RadioButton([
new FixedInputElement("Value A", new Tag("x","a")),
tf
]);
rb.AttachTo('maindiv');
new VariableUiElement(rb.GetValue().map((tf:TagsFilter) => tf.asHumanString(false, false))).AttachTo('extradiv')