2023-02-07 20:04:50 +00:00
|
|
|
import "./ShowMore.css";
|
2023-11-07 12:30:01 +00:00
|
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
import { useInView } from "react-intersection-observer";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
import classNames from "classnames";
|
2023-02-06 21:42:47 +00:00
|
|
|
|
|
|
|
interface ShowMoreProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
text?: string;
|
|
|
|
className?: string;
|
|
|
|
onClick: () => void;
|
2023-02-06 21:42:47 +00:00
|
|
|
}
|
|
|
|
|
2023-02-08 21:10:26 +00:00
|
|
|
const ShowMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
|
2023-02-06 21:42:47 +00:00
|
|
|
return (
|
|
|
|
<div className="show-more-container">
|
2023-11-07 12:30:01 +00:00
|
|
|
<button className={classNames("show-more", className)} onClick={onClick}>
|
|
|
|
{text || <FormattedMessage defaultMessage="Show More" />}
|
2023-02-06 21:42:47 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
);
|
|
|
|
};
|
2023-02-06 21:42:47 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
export default ShowMore;
|
2023-11-07 12:30:01 +00:00
|
|
|
|
|
|
|
export function ShowMoreInView({ text, onClick, className }: ShowMoreProps) {
|
|
|
|
const { ref, inView } = useInView();
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (inView) {
|
|
|
|
onClick();
|
|
|
|
}
|
|
|
|
}, [inView]);
|
|
|
|
|
|
|
|
return <div className={classNames("show-more-container", className)} ref={ref}>
|
|
|
|
{text}
|
|
|
|
</div>
|
|
|
|
}
|