Hotfix: fix text input in radio buttons
This commit is contained in:
parent
4cce18f818
commit
611d46187c
7 changed files with 88 additions and 11 deletions
2
State.ts
2
State.ts
|
@ -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 = {
|
||||||
|
|
|
@ -13,9 +13,13 @@ export class FixedInputElement<T> extends InputElement<T> {
|
||||||
value: T,
|
value: T,
|
||||||
comparator: ((t0: T, t1: T) => boolean ) = undefined) {
|
comparator: ((t0: T, t1: T) => boolean ) = undefined) {
|
||||||
super(undefined);
|
super(undefined);
|
||||||
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))
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
@ -264,7 +266,7 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
|
||||||
},
|
},
|
||||||
[freeformElement?.GetValue()]
|
[freeformElement?.GetValue()]
|
||||||
);
|
);
|
||||||
|
|
||||||
freeformElement?.GetValue()?.addCallbackAndRun(value => {
|
freeformElement?.GetValue()?.addCallbackAndRun(value => {
|
||||||
const es = checkBoxes.GetValue();
|
const es = checkBoxes.GetValue();
|
||||||
const i = elements.length - 1;
|
const i = elements.length - 1;
|
||||||
|
@ -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,
|
||||||
|
|
|
@ -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
71
test.ts
|
@ -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')
|
Loading…
Reference in a new issue