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

Add search bar to theme overview

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-04-24 01:32:19 +02:00
parent 6252c4e888
commit 7c4c17d15c
6 changed files with 161 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

40
UI/Base/FilteredCombine.ts Normal file
View file

@ -0,0 +1,40 @@
import BaseUIElement from "../BaseUIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {VariableUiElement} from "./VariableUIElement";
import Combine from "./Combine";
import Locale from "../i18n/Locale";
import {Utils} from "../../Utils";
export default class FilteredCombine extends VariableUiElement {
/**
* Only shows item matching the search
* If predicate of an item is undefined, it will be filtered out as soon as a non-null or non-empty search term is given
* @param entries
* @param searchedValue
* @param options
*/
constructor(entries: {
element: BaseUIElement | string,
predicate?: (s: string) => boolean
}[],
searchedValue: UIEventSource<string>,
options?: {
onEmpty?: BaseUIElement | string,
innerClasses: string
}
) {
entries = Utils.NoNull(entries)
super(searchedValue.map(searchTerm => {
if(searchTerm === undefined || searchTerm === ""){
return new Combine(entries.map(e => e.element)).SetClass(options?.innerClasses ?? "")
}
const kept = entries.filter(entry => entry?.predicate !== undefined && entry.predicate(searchTerm))
if (kept.length === 0) {
return options?.onEmpty
}
return new Combine(kept.map(entry => entry.element)).SetClass(options?.innerClasses ?? "")
}, [Locale.language]))
}
}

18
UI/Base/SubtleButton.ts
View file

@ -13,14 +13,18 @@ import Loading from "./Loading";
export class SubtleButton extends UIElement {
private readonly imageUrl: string | BaseUIElement;
private readonly message: string | BaseUIElement;
private readonly linkTo: { url: string | UIEventSource<string>; newTab?: boolean };
private readonly options: { url?: string | UIEventSource<string>; newTab?: boolean ; imgSize?: string};
constructor(imageUrl: string | BaseUIElement, message: string | BaseUIElement, linkTo: { url: string | UIEventSource<string>, newTab?: boolean } = undefined) {
constructor(imageUrl: string | BaseUIElement, message: string | BaseUIElement, options: {
url?: string | UIEventSource<string>,
newTab?: boolean,
imgSize?: "h-11 w-11" | string
} = undefined) {
super();
this.imageUrl = imageUrl;
this.message = message;
this.linkTo = linkTo;
this.options = options;
}
protected InnerRender(): string | BaseUIElement {
@ -34,7 +38,7 @@ export class SubtleButton extends UIElement {
} else {
img = this.imageUrl;
}
const image = new Combine([img?.SetClass("block flex items-center justify-center h-11 w-11 flex-shrink0 mr-4")])
const image = new Combine([img?.SetClass("block flex items-center justify-center "+(this.options?.imgSize ?? "h-11 w-11")+" flex-shrink0 mr-4")])
.SetClass("flex-shrink-0");
message?.SetClass("block overflow-ellipsis no-images")
@ -44,7 +48,7 @@ export class SubtleButton extends UIElement {
message
]).SetClass("flex group w-full")
if (this.linkTo == undefined) {
if (this.options?.url == undefined) {
this.SetClass(classes)
return button
}
@ -52,8 +56,8 @@ export class SubtleButton extends UIElement {
return new Link(
button,
this.linkTo.url,
this.linkTo.newTab ?? false
this.options.url,
this.options.newTab ?? false
).SetClass(classes)
}