From 611d46187c5a601f61aa70723ee46be2898b2ee3 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 30 Sep 2020 22:48:58 +0200 Subject: [PATCH] Hotfix: fix text input in radio buttons --- State.ts | 2 +- UI/Input/FixedInputElement.ts | 7 +++- UI/Input/InputElementMap.ts | 4 +- UI/Input/RadioButton.ts | 5 +++ UI/TagRendering.ts | 9 +++-- index.css | 1 - test.ts | 71 ++++++++++++++++++++++++++++++++++- 7 files changed, 88 insertions(+), 11 deletions(-) diff --git a/State.ts b/State.ts index 1b001724e..a3f163d60 100644 --- a/State.ts +++ b/State.ts @@ -23,7 +23,7 @@ export class State { // The singleton of the global 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 public static userJourney = { diff --git a/UI/Input/FixedInputElement.ts b/UI/Input/FixedInputElement.ts index 81f0bdf99..bc2424939 100644 --- a/UI/Input/FixedInputElement.ts +++ b/UI/Input/FixedInputElement.ts @@ -13,9 +13,13 @@ export class FixedInputElement extends InputElement { value: T, comparator: ((t0: T, t1: T) => boolean ) = undefined) { super(undefined); - this._comparator = comparator ?? ((t0, t1) => t0 == t1); + this._comparator = comparator ?? ((t0, t1) => t0 == t1); this.value = new UIEventSource(value); this.rendering = typeof (rendering) === 'string' ? new FixedUiElement(rendering) : rendering; + const self = this; + this.onClick(() => { + self.IsSelected.setData(true) + }) } GetValue(): UIEventSource { @@ -32,7 +36,6 @@ export class FixedInputElement extends InputElement { protected InnerUpdate(htmlElement: HTMLElement) { super.InnerUpdate(htmlElement); const self = this; - htmlElement.addEventListener("mouseenter", () => self.IsSelected.setData(true)); htmlElement.addEventListener("mouseout", () => self.IsSelected.setData(false)) } diff --git a/UI/Input/InputElementMap.ts b/UI/Input/InputElementMap.ts index 96d6038fd..d2d3ddb65 100644 --- a/UI/Input/InputElementMap.ts +++ b/UI/Input/InputElementMap.ts @@ -35,7 +35,9 @@ export default class InputElementMap extends InputElement { }), extraSources, x => { return fromX(x); }); - }w + this._value.addCallback(console.log) + this.IsSelected.addCallback(s => console.log("Is selected?", s)) + } GetValue(): UIEventSource { return this._value; diff --git a/UI/Input/RadioButton.ts b/UI/Input/RadioButton.ts index 2f46c2e90..0a706d4c3 100644 --- a/UI/Input/RadioButton.ts +++ b/UI/Input/RadioButton.ts @@ -38,6 +38,11 @@ export class RadioButton extends InputElement { elements[i]?.onClick(() => { self._selectedElementIndex.setData(i); }); + elements[i].IsSelected.addCallback(isSelected => { + if (isSelected) { + self._selectedElementIndex.setData(i); + } + }) } } diff --git a/UI/TagRendering.ts b/UI/TagRendering.ts index 639981c6a..f1a72924c 100644 --- a/UI/TagRendering.ts +++ b/UI/TagRendering.ts @@ -228,7 +228,9 @@ export class TagRendering extends UIElement implements TagDependantUIElement { elements.push(freeformElement); } - if (options.multiAnswer) { + if (!options.multiAnswer) { + return new RadioButton(elements, false); + } else { const possibleTags = elements.map(el => el.GetValue().data); const checkBoxes = new CheckBoxes(elements); @@ -264,7 +266,7 @@ export class TagRendering extends UIElement implements TagDependantUIElement { }, [freeformElement?.GetValue()] ); - + freeformElement?.GetValue()?.addCallbackAndRun(value => { const es = checkBoxes.GetValue(); const i = elements.length - 1; @@ -282,7 +284,6 @@ export class TagRendering extends UIElement implements TagDependantUIElement { return inputEl; } - return new RadioButton(elements, false); } @@ -360,7 +361,7 @@ export class TagRendering extends UIElement implements TagDependantUIElement { } return ValidatedTextField.Mapped(pickString, toString, { - placeholder: this._freeform.placeholder, + placeholder: freeform.placeholder, type: type, isValid: (str) => (str.length <= 255), textArea: isTextArea, diff --git a/index.css b/index.css index c6eb9c3bf..36a5aa463 100644 --- a/index.css +++ b/index.css @@ -71,7 +71,6 @@ body { .invalid { box-shadow: 0 0 10px #ff5353; - display: block; height: min-content; } diff --git a/test.ts b/test.ts index 498aaf25d..d463cadf0 100644 --- a/test.ts +++ b/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")) \ No newline at end of file + +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') \ No newline at end of file