Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(Calendar): deselect day when closing details

Browse source
This commit is contained in:
Tim 2024-10-29 08:54:21 +01:00
parent ea933fe5c3
commit ac01908374
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/common/BottomSheet/BottomSheet.tsx
View file

@ -15,7 +15,7 @@ type Props = {
onClose: () => void,
};
const BottomSheet = ({ children, title, show }: Props) => {
const BottomSheet = ({ children, title, show, onClose }: Props) => {
const containerRef = useRef<HTMLDivElement>(null);
const [startOffset, setStartOffset] = useState(0);
const [offset, setOffset] = useState(0);
@ -28,7 +28,7 @@ const BottomSheet = ({ children, title, show }: Props) => {
const containerHeight = () => containerRef.current?.offsetHeight ?? 0;
const onClose = () => setOffset(containerHeight());
const onCloseRequest = () => setOffset(containerHeight());
const onTouchStart = ({ touches }: React.TouchEvent<HTMLDivElement>) => {
const { clientY } = touches[0];
@ -54,9 +54,13 @@ const BottomSheet = ({ children, title, show }: Props) => {
show ? open() : close();
}, [show]);
useEffect(() => {
!opened && onClose();
}, [opened]);
return opened && createPortal((
<div className={styles['bottom-sheet']}>
<div className={styles['backdrop']} onClick={onClose} />
<div className={styles['backdrop']} onClick={onCloseRequest} />
<div
ref={containerRef}
className={classNames(styles['container'], { [styles['dragging']]: startOffset }, 'animation-slide-up')}
@ -72,7 +76,7 @@ const BottomSheet = ({ children, title, show }: Props) => {
{title}
</div>
</div>
<div className={styles['content']} onClick={onClose}>
<div className={styles['content']} onClick={onCloseRequest}>
{children}
</div>
</div>

6
src/routes/Calendar/Calendar.tsx
View file

@ -26,6 +26,10 @@ const Calendar = ({ urlParams }: Props) => {
const detailsTitle = useMemo(() => toDayMonth(selected), [selected, toDayMonth]);
const onDetailsClose = () => {
setSelected(null);
};
return (
<MainNavBars className={styles['calendar']} route={'calendar'}>
{
@ -54,7 +58,7 @@ const Calendar = ({ urlParams }: Props) => {
profile={profile}
onChange={setSelected}
/>
<BottomSheet title={detailsTitle} show={selected}>
<BottomSheet title={detailsTitle} show={selected} onClose={onDetailsClose}>
<Details
selected={selected}
items={calendar.items}