Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42: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, onClose: () => void,
}; };
const BottomSheet = ({ children, title, show }: Props) => { const BottomSheet = ({ children, title, show, onClose }: Props) => {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [startOffset, setStartOffset] = useState(0); const [startOffset, setStartOffset] = useState(0);
const [offset, setOffset] = useState(0); const [offset, setOffset] = useState(0);
@ -28,7 +28,7 @@ const BottomSheet = ({ children, title, show }: Props) => {
const containerHeight = () => containerRef.current?.offsetHeight ?? 0; const containerHeight = () => containerRef.current?.offsetHeight ?? 0;
const onClose = () => setOffset(containerHeight()); const onCloseRequest = () => setOffset(containerHeight());
const onTouchStart = ({ touches }: React.TouchEvent<HTMLDivElement>) => { const onTouchStart = ({ touches }: React.TouchEvent<HTMLDivElement>) => {
const { clientY } = touches[0]; const { clientY } = touches[0];
@ -54,9 +54,13 @@ const BottomSheet = ({ children, title, show }: Props) => {
show ? open() : close(); show ? open() : close();
}, [show]); }, [show]);
useEffect(() => {
!opened && onClose();
}, [opened]);
return opened && createPortal(( return opened && createPortal((
<div className={styles['bottom-sheet']}> <div className={styles['bottom-sheet']}>
<div className={styles['backdrop']} onClick={onClose} /> <div className={styles['backdrop']} onClick={onCloseRequest} />
<div <div
ref={containerRef} ref={containerRef}
className={classNames(styles['container'], { [styles['dragging']]: startOffset }, 'animation-slide-up')} className={classNames(styles['container'], { [styles['dragging']]: startOffset }, 'animation-slide-up')}
@ -72,7 +76,7 @@ const BottomSheet = ({ children, title, show }: Props) => {
{title} {title}
</div> </div>
</div> </div>
<div className={styles['content']} onClick={onClose}> <div className={styles['content']} onClick={onCloseRequest}>
{children} {children}
</div> </div>
</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 detailsTitle = useMemo(() => toDayMonth(selected), [selected, toDayMonth]);
const onDetailsClose = () => {
setSelected(null);
};
return ( return (
<MainNavBars className={styles['calendar']} route={'calendar'}> <MainNavBars className={styles['calendar']} route={'calendar'}>
{ {
@ -54,7 +58,7 @@ const Calendar = ({ urlParams }: Props) => {
profile={profile} profile={profile}
onChange={setSelected} onChange={setSelected}
/> />
<BottomSheet title={detailsTitle} show={selected}> <BottomSheet title={detailsTitle} show={selected} onClose={onDetailsClose}>
<Details <Details
selected={selected} selected={selected}
items={calendar.items} items={calendar.items}