moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ScrollTopButton: render null when not visible

This commit is contained in:
Alex Gleason 2023-10-02 11:24:07 -05:00
parent 4e26adb789
commit 2380a0b667
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/scroll-top-button.tsx
View File

@ -1,4 +1,3 @@
import clsx from 'clsx';
import throttle from 'lodash/throttle'; import throttle from 'lodash/throttle';
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { useIntl, MessageDescriptor } from 'react-intl'; import { useIntl, MessageDescriptor } from 'react-intl';
@ -35,10 +34,6 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
const visible = count > 0 && scrolled; const visible = count > 0 && scrolled;
const classes = clsx('fixed left-1/2 top-20 z-50 -translate-x-1/2', {
'hidden': !visible,
});
const getScrollTop = (): number => { const getScrollTop = (): number => {
return (document.scrollingElement || document.documentElement).scrollTop; return (document.scrollingElement || document.documentElement).scrollTop;
}; };
@ -80,8 +75,12 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
maybeUnload(); maybeUnload();
}, [count]); }, [count]);
if (!visible) {
return null;
}
return ( return (
<div className={classes}> <div className='fixed left-1/2 top-20 z-50 -translate-x-1/2'>
<button <button
className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100' className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100'
onClick={handleClick} onClick={handleClick}
@ -91,11 +90,9 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
src={require('@tabler/icons/arrow-bar-to-up.svg')} src={require('@tabler/icons/arrow-bar-to-up.svg')}
/> />
{(count > 0) && ( <Text theme='inherit' size='sm'>
<Text theme='inherit' size='sm'> {intl.formatMessage(message, { count })}
{intl.formatMessage(message, { count })} </Text>
</Text>
)}
</button> </button>
</div> </div>
); );