You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.5 KiB
46 lines
1.5 KiB
import { ArrowPathIcon } from '@heroicons/react/24/outline';
|
|
import { useRouter } from 'next/router';
|
|
import PR from 'pulltorefreshjs';
|
|
import { useEffect } from 'react';
|
|
import ReactDOMServer from 'react-dom/server';
|
|
|
|
const PullToRefresh = () => {
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
PR.init({
|
|
mainElement: '#pull-to-refresh',
|
|
onRefresh() {
|
|
router.reload();
|
|
},
|
|
iconArrow: ReactDOMServer.renderToString(
|
|
<div className="p-2">
|
|
<ArrowPathIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
|
|
</div>
|
|
),
|
|
iconRefreshing: ReactDOMServer.renderToString(
|
|
<div
|
|
className="animate-spin p-2"
|
|
style={{ animationDirection: 'reverse' }}
|
|
>
|
|
<ArrowPathIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
|
|
</div>
|
|
),
|
|
instructionsPullToRefresh: ReactDOMServer.renderToString(<div />),
|
|
instructionsReleaseToRefresh: ReactDOMServer.renderToString(<div />),
|
|
instructionsRefreshing: ReactDOMServer.renderToString(<div />),
|
|
distReload: 60,
|
|
distIgnore: 15,
|
|
shouldPullToRefresh: () =>
|
|
!window.scrollY && document.body.style.overflow !== 'hidden',
|
|
});
|
|
return () => {
|
|
PR.destroyAll();
|
|
};
|
|
}, [router]);
|
|
|
|
return <div id="pull-to-refresh"></div>;
|
|
};
|
|
|
|
export default PullToRefresh;
|