sk1982/actaeon
2
5
Fork 3
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

fix ticker hover

Browse Source
This commit is contained in:
sk1982 2024-03-18 17:44:04 -04:00
parent cc4dab8419
commit fa1257ec72
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ticker.tsx
View File

@ -26,13 +26,13 @@ export const TickerHoverProvider = ({ children }: TickerHoverProviderProps) => {
export const Ticker = ({ children, hoverOnly, className, noDelay }: TickerProps) => { export const Ticker = ({ children, hoverOnly, className, noDelay }: TickerProps) => {
const outerAnimation = noDelay ? 'animate-[outer-overflow-nodelay_15s_linear_infinite_alternate]' : 'animate-[outer-overflow_15s_linear_infinite_alternate]'; const outerAnimation = noDelay ? 'animate-[outer-overflow-nodelay_10s_linear_infinite_alternate]' : 'animate-[outer-overflow_10s_linear_infinite_alternate]';
const innerAnimation = noDelay ? 'animate-[inner-overflow-nodelay_15s_linear_infinite_alternate]' : 'animate-[inner-overflow_15s_linear_infinite_alternate]'; const innerAnimation = noDelay ? 'animate-[inner-overflow-nodelay_10s_linear_infinite_alternate]' : 'animate-[inner-overflow_10s_linear_infinite_alternate]';
const hoverContext = useContext(TickerHoverContext); const hoverContext = useContext(TickerHoverContext);
const [textHovering, setTextHovering] = useState(false); const [textHovering, setTextHovering] = useState(false);
const hovering = (hoverContext !== null && hoverContext) || textHovering; const hovering = (hoverContext !== null && hoverContext) || textHovering;
const hoverClass = !hoverOnly && hovering ? '[&:hover_*]:[animation-play-state:paused]' : ''; const hoverClass = (!hoverOnly && hovering) ? '[&_*]:[animation-play-state:paused]' : '';
if (hoverOnly && !hovering) if (hoverOnly && !hovering)
return (<div className={`text-nowrap whitespace-nowrap overflow-hidden w-full ${className ?? ''}`} return (<div className={`text-nowrap whitespace-nowrap overflow-hidden w-full ${className ?? ''}`}
@ -40,7 +40,9 @@ export const Ticker = ({ children, hoverOnly, className, noDelay }: TickerProps)
{ children } { children }
</div>); </div>);
return (<div className={`text-nowrap whitespace-nowrap overflow-hidden w-full ${hoverClass} ${className ?? ''}`} onMouseLeave={() => setTextHovering(false)}> return (<div className={`text-nowrap whitespace-nowrap overflow-hidden w-full ${hoverClass} ${className ?? ''}`}
onMouseLeave={() => setTextHovering(false)}
onMouseEnter={() => setTextHovering(true)}>
<div className={`${outerAnimation} ticker max-w-full inline-block`}> <div className={`${outerAnimation} ticker max-w-full inline-block`}>
<div className={`${innerAnimation} ticker inline-block`}> <div className={`${innerAnimation} ticker inline-block`}>
{ children } { children }