mirror of https://github.com/msgbyte/tailchat
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.
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { GroupPanelType, isValidStr, useGroupInfo } from 'tailchat-shared';
|
|
import { useParams } from 'react-router';
|
|
import { GroupHeader } from './GroupHeader';
|
|
import { GroupSection } from '@/components/GroupSection';
|
|
import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
|
|
import { SidebarItem } from './SidebarItem';
|
|
|
|
interface GroupParams {
|
|
groupId: string;
|
|
}
|
|
|
|
/**
|
|
* 群组面板侧边栏组件
|
|
*/
|
|
export const Sidebar: React.FC = React.memo(() => {
|
|
const { groupId } = useParams<GroupParams>();
|
|
const groupInfo = useGroupInfo(groupId);
|
|
const groupPanels = groupInfo?.panels ?? [];
|
|
|
|
return (
|
|
<CommonSidebarWrapper data-tc-role="sidebar-group">
|
|
<GroupHeader groupId={groupId} />
|
|
|
|
<div className="p-2 space-y-1 overflow-auto">
|
|
{groupPanels
|
|
.filter((panel) => !isValidStr(panel.parentId))
|
|
.map((panel) =>
|
|
panel.type === GroupPanelType.GROUP ? (
|
|
<GroupSection key={panel.id} header={panel.name}>
|
|
{groupPanels
|
|
.filter((sub) => sub.parentId === panel.id)
|
|
.map((sub) => (
|
|
<SidebarItem key={sub.id} groupId={groupId} panel={sub} />
|
|
))}
|
|
</GroupSection>
|
|
) : (
|
|
<SidebarItem key={panel.id} groupId={groupId} panel={panel} />
|
|
)
|
|
)}
|
|
</div>
|
|
</CommonSidebarWrapper>
|
|
);
|
|
});
|
|
Sidebar.displayName = 'Sidebar';
|