You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailchat/client/web/src/routes/Main/Content/Group/TextPanelItem.tsx

47 lines
1.2 KiB
TypeScript

import { GroupPanelItem } from '@/components/GroupPanelItem';
import React, { useMemo } from 'react';
import {
GroupPanel,
useGroupTextPanelUnread,
useUserNotifyMute,
} from 'tailchat-shared';
import { useGroupPanelExtraBadge } from './utils';
interface GroupTextPanelItemProps {
groupId: string;
panel: GroupPanel;
icon: React.ReactNode;
}
/**
* 相比一般的面板项增加了未读提示
*/
export const GroupTextPanelItem: React.FC<GroupTextPanelItemProps> = React.memo(
(props) => {
const { groupId, panel } = props;
const panelId = panel.id;
const hasUnread = useGroupTextPanelUnread(panelId);
const extraBadge = useGroupPanelExtraBadge(groupId, panelId);
const { checkIsMuted } = useUserNotifyMute();
const isMuted = useMemo(
() => checkIsMuted(panelId, groupId),
[groupId, panelId]
);
return (
<GroupPanelItem
name={panel.name}
icon={props.icon}
to={`/main/group/${groupId}/${panel.id}`}
dimmed={isMuted}
badge={hasUnread}
badgeProps={{
status: isMuted ? 'default' : 'error',
}}
extraBadge={extraBadge}
/>
);
}
);
GroupTextPanelItem.displayName = 'GroupTextPanelItem';