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.
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { Select } from 'antd';
|
|
import { GroupPanelType, t, useGroupPanels } from 'tailchat-shared';
|
|
import { useGroupIdContext } from '@/context/GroupIdContext';
|
|
|
|
const { Option } = Select;
|
|
|
|
interface GroupPanelSelectorProps {
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
groupId?: string;
|
|
panelType?: GroupPanelType;
|
|
}
|
|
|
|
/**
|
|
* 群组面板选择器
|
|
*/
|
|
export const GroupPanelSelector: React.FC<GroupPanelSelectorProps> = React.memo(
|
|
(props) => {
|
|
const contextGroupId = useGroupIdContext();
|
|
const groupId = props.groupId ?? contextGroupId;
|
|
const panelType = props.panelType ?? GroupPanelType.TEXT;
|
|
const panels = useGroupPanels(groupId);
|
|
|
|
const filteredPanels = useMemo(
|
|
() => panels.filter((panel) => panel.type === panelType),
|
|
[panels, panelType]
|
|
);
|
|
|
|
return (
|
|
<Select
|
|
className={props.className}
|
|
style={props.style}
|
|
placeholder={t('请选择面板')}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
>
|
|
{filteredPanels.map((p) => (
|
|
<Option key={p.id} value={p.id}>
|
|
{p.name}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
);
|
|
}
|
|
);
|
|
GroupPanelSelector.displayName = 'GroupPanelSelector';
|