Simeon Radivoev
3750e9ed8f
feat: Updated romm API version feat: Updated es-de rules feat: Added tabs to game details refactor: returned to global query definitions to help with typescript performance
36 lines
No EOL
1.3 KiB
TypeScript
36 lines
No EOL
1.3 KiB
TypeScript
import { setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
|
|
import { FOCUS_KEYS } from "../scripts/types";
|
|
import { useIntersectionObserver } from "usehooks-ts";
|
|
import { FrontEndId } from "@/shared/constants";
|
|
|
|
export default function LoadMoreButton (data: { isFetching: boolean; lastId?: FrontEndId; } & FocusParams & InteractParams)
|
|
{
|
|
const handleAction = (e?: Event) =>
|
|
{
|
|
data.onAction?.(e);
|
|
if (data.lastId && focused)
|
|
setFocus(FOCUS_KEYS.GAME_CARD(data.lastId));
|
|
};
|
|
|
|
const { ref, focusKey, focused } = useFocusable({
|
|
focusKey: 'load-more-btn',
|
|
onFocus: (_l, _p, details) => data.onFocus?.(focusKey, ref.current, details),
|
|
onEnterPress: handleAction
|
|
});
|
|
|
|
const { ref: intersct } = useIntersectionObserver({
|
|
onChange: (isIntersecting, entry) =>
|
|
{
|
|
if (isIntersecting)
|
|
{
|
|
handleAction();
|
|
}
|
|
}
|
|
});
|
|
|
|
return <div ref={(r) =>
|
|
{
|
|
ref.current = r;
|
|
intersct(r);
|
|
}} className='flex bg-base-100 game-card focusable focusable-accent focusable-hover text-2xl justify-center items-center cursor-pointer' onClick={e => handleAction(e.nativeEvent)} id='load-more-btn'>{data.isFetching ? <span className="loading loading-spinner loading-xl"></span> : "Load More"}</div>;
|
|
} |