perf: 抽象群组输入框状态逻辑

web/src/components/Panel/group/TextPanel.tsx

@@ -12,20 +12,14 @@ import {
 } from 'tailchat-shared';
 import { GroupPanelWrapper } from './Wrapper';
 
-interface TextPanelProps {
+/**
-  groupId: string;
+ * 聊天输入框显示状态管理
-  panelId: string;
+ */
-}
+function useChatInputInfo(groupId: string) {
-export const TextPanel: React.FC<TextPanelProps> = React.memo(
-  ({ groupId, panelId }) => {
-    const groupMembers = useGroupMemberInfos(groupId);
-    const panelInfo = useGroupPanelInfo(groupId, panelId);
   const userId = useUserId();
   const muteUntil = useGroupMemberMute(groupId, userId ?? '');
 
-    const [placeholder, setPlaceholder] = useState<string | undefined>(
+  const [placeholder, setPlaceholder] = useState<string | undefined>(undefined);
-      undefined
-    );
   const updatePlaceholder = useCallback(() => {
     if (muteUntil) {
       setPlaceholder(
@@ -50,6 +44,22 @@ export const TextPanel: React.FC<TextPanelProps> = React.memo(
     updatePlaceholder();
   }, [muteUntil]);
 
+  return {
+    disabled: Boolean(muteUntil),
+    placeholder,
+  };
+}
+
+interface TextPanelProps {
+  groupId: string;
+  panelId: string;
+}
+export const TextPanel: React.FC<TextPanelProps> = React.memo(
+  ({ groupId, panelId }) => {
+    const groupMembers = useGroupMemberInfos(groupId);
+    const panelInfo = useGroupPanelInfo(groupId, panelId);
+    const { disabled, placeholder } = useChatInputInfo(groupId);
+
     if (panelInfo === undefined) {
       return null;
     }
@@ -61,7 +71,7 @@ export const TextPanel: React.FC<TextPanelProps> = React.memo(
             id: m._id,
             display: m.nickname,
           }))}
-          disabled={Boolean(muteUntil)}
+          disabled={disabled}
           placeholder={placeholder}
         >
           <ChatBox converseId={panelId} isGroup={true} groupId={groupId} />