midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Styling tweaks and small bug fixes to SearchableMappingSelector

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-07-10 17:48:27 +02:00
parent 4a8a07a10b
commit 734947ae61
1 changed files with 22 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

30
UI/Input/SearchableMappingsSelector.ts
View file

@ -18,6 +18,7 @@ class SelfHidingToggle extends UIElement implements InputElement<boolean> {
public readonly _selected: UIEventSource<boolean> public readonly _selected: UIEventSource<boolean>
public readonly isShown: Store<boolean> = new UIEventSource<boolean>(true); public readonly isShown: Store<boolean> = new UIEventSource<boolean>(true);
public readonly forceSelected: UIEventSource<boolean> public readonly forceSelected: UIEventSource<boolean>
private readonly _squared: boolean;
public constructor( public constructor(
shown: string | BaseUIElement, shown: string | BaseUIElement,
mainTerm: Record<string, string>, mainTerm: Record<string, string>,
@ -25,11 +26,13 @@ class SelfHidingToggle extends UIElement implements InputElement<boolean> {
options?: { options?: {
searchTerms?: Record<string, string[]>, searchTerms?: Record<string, string[]>,
selected?: UIEventSource<boolean>, selected?: UIEventSource<boolean>,
forceSelected?: UIEventSource<boolean> forceSelected?: UIEventSource<boolean>,
squared?: boolean
} }
) { ) {
super(); super();
this._shown = Translations.W(shown); this._shown = Translations.W(shown);
this._squared = options?.squared ?? false;
const searchTerms: Record<string, string[]> = {}; const searchTerms: Record<string, string[]> = {};
for (const lng in options?.searchTerms ?? []) { for (const lng in options?.searchTerms ?? []) {
if (lng === "_context") { if (lng === "_context") {
@ -96,9 +99,19 @@ class SelfHidingToggle extends UIElement implements InputElement<boolean> {
} }
}) })
el.onClick(() => selected.setData(!selected.data)) const forcedSelection = this.forceSelected
el.onClick(() => {
if(forcedSelection.data){
selected.setData(true)
}else{
selected.setData(!selected.data);
}
})
return el.SetClass("border border-black rounded-full p-1 px-4") if(!this._squared){
el.SetClass("rounded-full")
}
return el.SetClass("border border-black p-1 px-4")
} }
} }
@ -164,7 +177,8 @@ export class SearchablePillsSelector<T> extends Combine implements InputElement<
const toggle = new SelfHidingToggle(v.show, v.mainTerm, searchValue, { const toggle = new SelfHidingToggle(v.show, v.mainTerm, searchValue, {
searchTerms: v.searchTerms, searchTerms: v.searchTerms,
selected: vIsSelected selected: vIsSelected,
squared: mode === "select-many"
}) })
@ -177,7 +191,7 @@ export class SearchablePillsSelector<T> extends Combine implements InputElement<
let somethingShown: Store<boolean> let somethingShown: Store<boolean>
if (options.selectIfSingle) { if (options.selectIfSingle) {
let forcedSelection : { value: T, show: SelfHidingToggle }= undefined let forcedSelection : { value: T, show: SelfHidingToggle } = undefined
somethingShown = searchValue.map(_ => { somethingShown = searchValue.map(_ => {
let totalShown = 0; let totalShown = 0;
let lastShownValue: { value: T, show: SelfHidingToggle } let lastShownValue: { value: T, show: SelfHidingToggle }
@ -195,9 +209,9 @@ export class SearchablePillsSelector<T> extends Combine implements InputElement<
forcedSelection = lastShownValue forcedSelection = lastShownValue
} }
} else if (forcedSelection != undefined) { } else if (forcedSelection != undefined) {
this.selectedElements.setData([]) forcedSelection?.show?.forceSelected?.setData(false)
forcedSelection.show.forceSelected.setData(false)
forcedSelection = undefined; forcedSelection = undefined;
this.selectedElements.setData([])
} }
return totalShown > 0 return totalShown > 0
@ -218,7 +232,7 @@ export class SearchablePillsSelector<T> extends Combine implements InputElement<
} }
mappedValues.sort((a, b) => a.mainTerm[lng] < b.mainTerm[lng] ? -1 : 1) mappedValues.sort((a, b) => a.mainTerm[lng] < b.mainTerm[lng] ? -1 : 1)
return new Combine(mappedValues.map(e => e.show)) return new Combine(mappedValues.map(e => e.show))
.SetClass("flex flex-wrap w-full") .SetClass("flex flex-wrap w-full content-start")
.SetClass(options?.searchAreaClass ?? "") .SetClass(options?.searchAreaClass ?? "")
}, [somethingShown, searchValue])) }, [somethingShown, searchValue]))