Tristan Yang
46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import clsx from 'clsx';
|
|
import { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
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; |