Merge branch 'main' of github.com:utopia-os/utopia-ui into questlog

This commit is contained in:
Anton Tranelis 2024-07-31 09:24:36 +02:00
commit 4f92c5b4b4
5 changed files with 18 additions and 16 deletions

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "utopia-ui", "name": "utopia-ui",
"version": "3.0.0-alpha.248", "version": "3.0.0-alpha.249",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "utopia-ui", "name": "utopia-ui",
"version": "3.0.0-alpha.248", "version": "3.0.0-alpha.249",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@heroicons/react": "^2.0.17", "@heroicons/react": "^2.0.17",

View File

@ -1,6 +1,6 @@
{ {
"name": "utopia-ui", "name": "utopia-ui",
"version": "3.0.0-alpha.248", "version": "3.0.0-alpha.249",
"description": "Reuseable React Components to build mapping apps for real life communities and networks", "description": "Reuseable React Components to build mapping apps for real life communities and networks",
"repository": "https://github.com/utopia-os/utopia-ui", "repository": "https://github.com/utopia-os/utopia-ui",
"homepage:": "https://utopia-os.org/", "homepage:": "https://utopia-os.org/",

View File

@ -45,7 +45,6 @@ export const Autocomplete = ({ inputProps, suggestions, onSelected, pushFiltered
} }
const handleKeyDown = (event) => { const handleKeyDown = (event) => {
event.preventDefault();
switch (event.key) { switch (event.key) {
case 'ArrowDown': case 'ArrowDown':
heighlightedSuggestion < filteredSuggestions.length-1 && setHeighlightedSuggestion(current => current +1) heighlightedSuggestion < filteredSuggestions.length-1 && setHeighlightedSuggestion(current => current +1)
@ -68,7 +67,7 @@ export const Autocomplete = ({ inputProps, suggestions, onSelected, pushFiltered
return ( return (
<div> <div>
<input ref={inputRef} {...inputProps} type="text" onChange={(e) => handleChange(e)} tabindex="-1" onKeyDown={handleKeyDown}/> <input ref={inputRef} {...inputProps} type="text" onChange={(e) => handleChange(e)} tabIndex="-1" onKeyDown={handleKeyDown}/>
<ul className={`tw-absolute tw-z-[4000] ${filteredSuggestions.length>0 && 'tw-bg-base-100 tw-rounded-xl tw-p-2'}`}> <ul className={`tw-absolute tw-z-[4000] ${filteredSuggestions.length>0 && 'tw-bg-base-100 tw-rounded-xl tw-p-2'}`}>
{filteredSuggestions.map((suggestion, index) => ( {filteredSuggestions.map((suggestion, index) => (
<li key={index} onClick={() => handleSuggestionClick(suggestion)}><TagView heighlight={index == heighlightedSuggestion} tag={suggestion}></TagView></li> <li key={index} onClick={() => handleSuggestionClick(suggestion)}><TagView heighlight={index == heighlightedSuggestion} tag={suggestion}></TagView></li>

View File

@ -24,10 +24,12 @@ const filterTags = useFilterTags()
useEffect(() => { useEffect(() => {
let params = new URLSearchParams(location.search); let params = new URLSearchParams(location.search);
let urlTags = params.get("tags")?.split(","); let urlTags = params.get("tags")
if(urlTags?.some(ut => !filterTags.find(ft => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))||filterTags?.some(ft => !urlTags?.find(ut => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))) let decodedTags = urlTags ? decodeURIComponent(urlTags) : "";
let decodedTagsArray = decodedTags.split(";");
if(decodedTagsArray?.some(ut => !filterTags.find(ft => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))||filterTags?.some(ft => !decodedTagsArray?.find(ut => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase())))
{resetFilterTags() {resetFilterTags()
urlTags?.map(urlTag => { decodedTagsArray?.map(urlTag => {
const tag = tags.find(t => t.name.toLocaleLowerCase() === urlTag.toLocaleLowerCase()) const tag = tags.find(t => t.name.toLocaleLowerCase() === urlTag.toLocaleLowerCase())
tag && addFilterTag(tag) tag && addFilterTag(tag)
});} });}

View File

@ -127,12 +127,13 @@ function useFilterManager(initialTags: Tag[]): {
const [searchPhrase, searchPhraseSet] = React.useState<string>(""); const [searchPhrase, searchPhraseSet] = React.useState<string>("");
const addFilterTag = (tag: Tag) => { const addFilterTag = useCallback((tag: Tag) => {
let params = new URLSearchParams(location.search);
let urlTags = params.get("tags")
let decodedTags = urlTags ? decodeURIComponent(urlTags) : "";
let params = new URLSearchParams(window.location.search); if(!decodedTags?.includes(tag.name))
let urlTags = params.get("tags"); params.set("tags", `${urlTags ? urlTags : ""}${urlTags? ';' : ''}${tag.name}`)
if(!urlTags?.includes(tag.name))
params.set("tags", `${urlTags ? urlTags : ""}${urlTags? ',' : ''}${tag.name}`)
if(windowDimensions.width < 786 && location.pathname.split("/").length > 2) navigate("/" + `${params ? `?${params}` : ""}`); if(windowDimensions.width < 786 && location.pathname.split("/").length > 2) navigate("/" + `${params ? `?${params}` : ""}`);
else navigate(location.pathname + `${params ? `?${params}` : ""}`); else navigate(location.pathname + `${params ? `?${params}` : ""}`);
@ -144,14 +145,14 @@ function useFilterManager(initialTags: Tag[]): {
tag, tag,
}); });
}; }, []);
const removeFilterTag = useCallback((name: string) => { const removeFilterTag = useCallback((name: string) => {
let params = new URLSearchParams(window.location.search); let params = new URLSearchParams(window.location.search);
let urlTags = params.get("tags"); let urlTags = params.get("tags");
let newUrlTags = ""; let newUrlTags = "";
let tags = urlTags?.split(","); let tags = urlTags?.split(";");
if(tags?.length==0 && urlTags?.length && urlTags?.length > 0) tags[0]=urlTags; if(tags?.length==0 && urlTags?.length && urlTags?.length > 0) tags[0]=urlTags;
tags?.map(urlTag => { tags?.map(urlTag => {
if(!(urlTag.toLocaleLowerCase() === name.toLocaleLowerCase())) if(!(urlTag.toLocaleLowerCase() === name.toLocaleLowerCase()))