Qortal/qortal-mobile
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-mobile.git synced 2025-04-24 11:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

prevent menu if user scrolls

Browse Source
This commit is contained in:
PhilReact 2025-04-01 01:07:27 +03:00
parent 481542baf6
commit 77ad4c78be
1 changed files with 124 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
src/components/GlobalTouchMenu.tsx
View File

@ -6,118 +6,139 @@ import { lastEnteredGroupIdAtom } from '../atoms/global';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
const CustomStyledMenu = styled(Menu)(({ theme }) => ({ const CustomStyledMenu = styled(Menu)(({ theme }) => ({
'& .MuiPaper-root': { '& .MuiPaper-root': {
backgroundColor: '#f9f9f9', backgroundColor: '#f9f9f9',
borderRadius: '12px', borderRadius: '12px',
padding: theme.spacing(1), padding: theme.spacing(1),
boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)', boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
}, },
'& .MuiMenuItem-root': { '& .MuiMenuItem-root': {
fontSize: '14px', fontSize: '14px',
color: '#444', color: '#444',
transition: '0.3s background-color', transition: '0.3s background-color',
'&:hover': { '&:hover': {
backgroundColor: '#f0f0f0', backgroundColor: '#f0f0f0',
},
}, },
},
})); }));
export const GlobalTouchMenu = () => { export const GlobalTouchMenu = () => {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const tapCount = useRef(0); const [menuPosition, setMenuPosition] = useState(null);
const lastTapTime = useRef(0); const [lastEnteredGroupId] = useRecoilState(lastEnteredGroupIdAtom);
const [menuPosition, setMenuPosition] = useState(null);
const [lastEnteredGroupId] = useRecoilState(lastEnteredGroupIdAtom)
// Refs for tap tracking and scroll detection
const tapCount = useRef(0);
const lastTapTime = useRef(0);
const touchStartY = useRef(0);
const touchMoved = useRef(false);
useEffect(() => { useEffect(() => {
const handleTouchStart = (event) => { const handleTouchStart = (event) => {
const currentTime = new Date().getTime(); // Reset scroll flag and store the starting Y position
const tapGap = currentTime - lastTapTime.current; touchMoved.current = false;
const { clientX, clientY } = event.touches[0]; touchStartY.current = event.touches[0].clientY;
if (tapGap < 400) { const currentTime = new Date().getTime();
tapCount.current += 1; const tapGap = currentTime - lastTapTime.current;
} else { const { clientX, clientY } = event.touches[0];
tapCount.current = 1; // Reset if too much time has passed
}
lastTapTime.current = currentTime; if (tapGap < 400) {
tapCount.current += 1;
} else {
tapCount.current = 1; // Reset if too much time has passed
}
lastTapTime.current = currentTime;
if (tapCount.current === 3) { if (tapCount.current === 3 && !touchMoved.current) {
setMenuPosition({ setMenuPosition({ top: clientY, left: clientX });
top: clientY, setMenuOpen(true);
left: clientX, tapCount.current = 0; // Reset after activation
}); }
setMenuOpen(true);
tapCount.current = 0; // Reset after activation
}
};
document.addEventListener('touchstart', handleTouchStart);
return () => {
document.removeEventListener('touchstart', handleTouchStart);
};
}, []);
const handleClose = () => {
setMenuOpen(false);
}; };
return ( const handleTouchMove = (event) => {
<CustomStyledMenu const currentY = event.touches[0].clientY;
open={menuOpen} // If the vertical movement exceeds 10px, consider it a scroll
anchorReference="anchorPosition" if (Math.abs(currentY - touchStartY.current) > 10) {
anchorPosition={menuPosition ? { top: menuPosition?.top, left: menuPosition?.left } : undefined} touchMoved.current = true;
> }
<MenuItem onClick={handleClose}> };
<Box sx={{
display: 'flex',
alignItems: 'center',
gap: '10px'
}}>
<CloseIcon />
<Typography variant="inherit">Close Menu</Typography>
</Box>
</MenuItem> const handleTouchEnd = () => {
<Divider /> // You can optionally reset tapCount here if needed
<MenuItem onClick={()=> { };
executeEvent('open-apps-mode', {})
handleClose() document.addEventListener('touchstart', handleTouchStart);
}}> document.addEventListener('touchmove', handleTouchMove);
<Typography variant="inherit">Apps</Typography> document.addEventListener('touchend', handleTouchEnd);
</MenuItem>
<MenuItem onClick={()=> { return () => {
executeEvent("openGroupMessage", { document.removeEventListener('touchstart', handleTouchStart);
from: lastEnteredGroupId , document.removeEventListener('touchmove', handleTouchMove);
}); document.removeEventListener('touchend', handleTouchEnd);
handleClose() };
}}> }, []);
<Typography variant="inherit">Group Chat</Typography>
</MenuItem> const handleClose = () => {
<MenuItem onClick={()=> { setMenuOpen(false);
executeEvent('openUserLookupDrawer', { };
addressOrName: ""
}) return (
handleClose() <CustomStyledMenu
}}> open={menuOpen}
<Typography variant="inherit">User Lookup</Typography> anchorReference="anchorPosition"
</MenuItem> anchorPosition={
<MenuItem onClick={()=> { menuPosition ? { top: menuPosition.top, left: menuPosition.left } : undefined
executeEvent('openUserProfile',{}) }
handleClose() >
}}> <MenuItem onClick={handleClose}>
<Typography variant="inherit">My Account</Typography> <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
</MenuItem> <CloseIcon />
<MenuItem onClick={()=> { <Typography variant="inherit">Close Menu</Typography>
executeEvent('openWalletsApp', {}) </Box>
handleClose() </MenuItem>
}}> <Divider />
<Typography variant="inherit">Wallets</Typography> <MenuItem
</MenuItem> onClick={() => {
</CustomStyledMenu> executeEvent('open-apps-mode', {});
); handleClose();
}}
>
<Typography variant="inherit">Apps</Typography>
</MenuItem>
<MenuItem
onClick={() => {
executeEvent('openGroupMessage', { from: lastEnteredGroupId });
handleClose();
}}
>
<Typography variant="inherit">Group Chat</Typography>
</MenuItem>
<MenuItem
onClick={() => {
executeEvent('openUserLookupDrawer', { addressOrName: '' });
handleClose();
}}
>
<Typography variant="inherit">User Lookup</Typography>
</MenuItem>
<MenuItem
onClick={() => {
executeEvent('openUserProfile', {});
handleClose();
}}
>
<Typography variant="inherit">My Account</Typography>
</MenuItem>
<MenuItem
onClick={() => {
executeEvent('openWalletsApp', {});
handleClose();
}}
>
<Typography variant="inherit">Wallets</Typography>
</MenuItem>
</CustomStyledMenu>
);
}; };