From 2b1dd38b95772dd0140204146d0eb1b521f68dd7 Mon Sep 17 00:00:00 2001 From: Pasq G Date: Sun, 15 Dec 2024 15:29:55 +0100 Subject: [PATCH] Abans d'actualitzar a Router v7 --- imports/ui/BarraNav/UserStat.jsx | 30 ++++++++++++++------- imports/ui/Usuaris.jsx | 3 --- imports/ui/hooks.jsx | 46 ++++++++++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 13 deletions(-) create mode 100644 imports/ui/hooks.jsx diff --git a/imports/ui/BarraNav/UserStat.jsx b/imports/ui/BarraNav/UserStat.jsx index 52d8070..4607af5 100644 --- a/imports/ui/BarraNav/UserStat.jsx +++ b/imports/ui/BarraNav/UserStat.jsx @@ -10,6 +10,7 @@ import { Roles } from 'meteor/roles'; // import { groupBy } from 'lodash'; //import Radium from 'radium'; +import { useLongTap } from '../hooks'; const IndicadorMissatges = ({notif}) => { @@ -31,6 +32,10 @@ const UserStat = ({esAdministrador, setEsAdministrador}) => { // const [esAdministrador, setEsAdministrador] = useState(false); + const { onPointerDown, onPointerUp, onPointerCancel, onPointerOut } = useLongTap(() => { + alert('Long tap detected!'); + }); + const u = useTracker("user", async () => await Meteor.userAsync()); const userId = Meteor.userId(); @@ -80,21 +85,26 @@ const UserStat = ({esAdministrador, setEsAdministrador}) => { fontWeight: `bold`, display: `inline-block` }} - onMouseEnter={ev => { - setMostraMenu(true); - }} + // onMouseEnter={ev => { + // setMostraMenu(true); + // }} - // title="Logout" + // // title="Logout" - onClick={ev => { - ev.stopPropagation(); - ev.preventDefault(); + // onClick={ev => { + // ev.stopPropagation(); + // ev.preventDefault(); - // console.log("u: ", u); + // // console.log("u: ", u); - navigate(`/${u.username}`); + // navigate(`/${u.username}`); - }} + // }} + + onPointerDown={onPointerDown} + onPointerUp={onPointerUp} + onPointerCancel={onPointerCancel} + onPointerOut={onPointerOut} > { (u && esAdministrador) &&
{ diff --git a/imports/ui/hooks.jsx b/imports/ui/hooks.jsx new file mode 100644 index 0000000..f6753f9 --- /dev/null +++ b/imports/ui/hooks.jsx @@ -0,0 +1,46 @@ +import { useState, useEffect } from 'react'; + +const useLongTap = (onLongTap, duration = 500) => { + const [isPressing, setIsPressing] = useState(false); + const [startTime, setStartTime] = useState(null); + + useEffect(() => { + if (isPressing && startTime) { + const elapsedTime = performance.now() - startTime; + if (elapsedTime >= duration) { + onLongTap(); + setIsPressing(false); + setStartTime(null); + } + } + }, [isPressing, startTime, onLongTap, duration]); + + const handlePointerDown = (event) => { + setIsPressing(true); + setStartTime(performance.now()); + }; + + const handlePointerUp = () => { + setIsPressing(false); + setStartTime(null); + }; + + const handlePointerCancel = () => { + setIsPressing(false); + setStartTime(null); + }; + + const handlePointerOut = () => { + setIsPressing(false); + setStartTime(null); + }; + + return { + onPointerDown: handlePointerDown, + onPointerUp: handlePointerUp, + onPointerCancel: handlePointerCancel, + onPointerOut: handlePointerOut, + }; +}; + +export { useLongTap };