antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

hide filterControl when height is very small

Browse Source
This commit is contained in:
Anton 2023-09-03 08:33:49 +02:00
parent 40854fa1cf
commit 4826ba951d
2 changed files with 67 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/Components/Map/Subcomponents/FilterControl.tsx
View File

@ -1,33 +1,60 @@
import * as React from 'react'
import { useFilterTags, useRemoveFilterTag, useSetSearchPhrase } from '../hooks/useFilter'
import { useMapEvents } from 'react-leaflet';
import { useState } from 'react';
import useWindowDimensions from '../hooks/useWindowDimension';
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
export const FilterControl = () => {
const windowDimensions = useWindowDimensions();
/**
const [popupOpen, setPopupOpen] = useState<boolean>(false);
useMapEvents({
popupopen: (e) => {
console.log(e);
setPopupOpen(true);
},
popupclose: () => {
setPopupOpen(false);
}
})
*/
const filterTags = useFilterTags();
const removeFilterTag = useRemoveFilterTag();
const setSearchPhrase = useSetSearchPhrase();
return (
<div className='tw-flex tw-flex-col tw-absolute tw-top-4 tw-left-4 tw-z-[699] tw-right-4'>
<input type="text" placeholder="search ..." className="tw-input tw-input-bordered tw-w-full tw-max-w-sm tw-shadow-xl tw-rounded-2xl" onChange={(e) => setSearchPhrase(e.target.value)} />
<div className='tw-flex tw-flex-wrap tw-mt-4'>
{
filterTags.map(tag =>
<div key={tag.id} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mr-2 tw-mb-2' style={{ backgroundColor: tag.color }}>
<div className="tw-card-actions tw-justify-end">
<label className="tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600" onClick={() => (removeFilterTag(tag.id))}>✕</label>
</div><b>#{capitalizeFirstLetter(tag.id)}</b>
</div>
)
}
return (<>
{!(
//popupOpen &&
windowDimensions.height < 500) &&
<div className='tw-flex tw-flex-col tw-absolute tw-top-4 tw-left-4 tw-z-[699] tw-right-4'>
<input type="text" placeholder="search ..." className="tw-input tw-input-bordered tw-w-full tw-max-w-sm tw-shadow-xl tw-rounded-2xl" onChange={(e) => setSearchPhrase(e.target.value)} />
<div className='tw-flex tw-flex-wrap tw-mt-4'>
{
filterTags.map(tag =>
<div key={tag.id} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mr-2 tw-mb-2' style={{ backgroundColor: tag.color }}>
<div className="tw-card-actions tw-justify-end">
<label className="tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600" onClick={() => (removeFilterTag(tag.id))}>✕</label>
</div><b>#{capitalizeFirstLetter(tag.id)}</b>
</div>
)
}
</div>
</div>
</div>
}
</>
)
}

24
src/Components/Map/hooks/useWindowDimension.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useState, useEffect } from 'react';
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}
export default function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowDimensions;
}