Tristan Yang
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import clsx from "clsx";
|
|
|
|
import { triggerScrollHeight } from "./MessageFeed";
|
|
|
|
type Props = {
|
|
count: number;
|
|
queryKey: string;
|
|
};
|
|
// linear-gradient(135deg,_#3C8CE7_0%,_#00EAFF_100%)
|
|
const NewMessageBottomTip = ({ count, queryKey }: Props) => {
|
|
const [visible, setVisible] = useState(false);
|
|
const { t } = useTranslation("chat");
|
|
useEffect(() => {
|
|
const container = document.querySelector(queryKey) as HTMLElement;
|
|
if (container) {
|
|
const { scrollHeight, scrollTop, offsetHeight } = container;
|
|
const deltaNum = scrollHeight - scrollTop - offsetHeight;
|
|
const showTheTip = deltaNum > triggerScrollHeight && count > 0;
|
|
console.log("show the tip", showTheTip);
|
|
setVisible(showTheTip);
|
|
}
|
|
}, [queryKey, count]);
|
|
const handleMarkRead = () => {
|
|
const container = document.querySelector(queryKey) as HTMLElement;
|
|
if (container) {
|
|
// scroll to bottom
|
|
container.scrollTop = container.scrollHeight;
|
|
setVisible(false);
|
|
}
|
|
};
|
|
return (
|
|
<aside
|
|
className={clsx(
|
|
`sticky top-0
|
|
justify-between text-xs
|
|
w-[95%] rounded-b-lg px-3 py-1 text-white z-10
|
|
bg-gradient-to-tl from-[#3C8CE7] to-[#00EAFF]`,
|
|
visible ? "flex" : "hidden"
|
|
)}
|
|
>
|
|
<span> {t("new_msg", { num: count })}</span>
|
|
<button onClick={handleMarkRead}>{t("mark_read")}</button>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default NewMessageBottomTip;
|