89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import classNames from 'classnames';
|
|
import throttle from 'lodash/throttle';
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { useIntl, MessageDescriptor } from 'react-intl';
|
|
|
|
import Icon from 'soapbox/components/icon';
|
|
import { Text } from 'soapbox/components/ui';
|
|
import { useSettings } from 'soapbox/hooks';
|
|
|
|
interface IScrollTopButton {
|
|
/** Callback when clicked, and also when scrolled to the top. */
|
|
onClick: () => void,
|
|
/** Number of unread items. */
|
|
count: number,
|
|
/** Message to display in the button (should contain a `{count}` value). */
|
|
message: MessageDescriptor,
|
|
/** Distance from the top of the screen (scrolling down) before the button appears. */
|
|
threshold?: number,
|
|
/** Distance from the top of the screen (scrolling up) before the action is triggered. */
|
|
autoloadThreshold?: number,
|
|
}
|
|
|
|
/** Floating new post counter above timelines, clicked to scroll to top. */
|
|
const ScrollTopButton: React.FC<IScrollTopButton> = ({
|
|
onClick,
|
|
count,
|
|
message,
|
|
threshold = 400,
|
|
autoloadThreshold = 50,
|
|
}) => {
|
|
const intl = useIntl();
|
|
const settings = useSettings();
|
|
|
|
const [scrolled, setScrolled] = useState<boolean>(false);
|
|
const autoload = settings.get('autoloadTimelines') === true;
|
|
|
|
const handleScroll = useCallback(throttle(() => {
|
|
const { scrollTop } = (document.scrollingElement || document.documentElement);
|
|
|
|
if (autoload && scrollTop <= autoloadThreshold) {
|
|
onClick();
|
|
}
|
|
|
|
if (scrollTop > threshold) {
|
|
setScrolled(true);
|
|
} else {
|
|
setScrolled(false);
|
|
}
|
|
}, 150, { trailing: true }), [autoload, threshold, autoloadThreshold]);
|
|
|
|
const scrollUp = () => {
|
|
window.scrollTo({ top: 0 });
|
|
};
|
|
|
|
const handleClick: React.MouseEventHandler = () => {
|
|
setTimeout(scrollUp, 10);
|
|
onClick();
|
|
};
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
const visible = count > 0 && scrolled;
|
|
|
|
const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
|
|
'hidden': !visible,
|
|
});
|
|
|
|
return (
|
|
<div className={classes}>
|
|
<a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer whitespace-nowrap' onClick={handleClick}>
|
|
<Icon src={require('@tabler/icons/icons/arrow-bar-to-up.svg')} />
|
|
|
|
{(count > 0) && (
|
|
<Text theme='inherit' size='sm'>
|
|
{intl.formatMessage(message, { count })}
|
|
</Text>
|
|
)}
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ScrollTopButton;
|