From e2f2fca04de22b60619a6c64a4c7d42c1ca65c24 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 10 Aug 2021 21:02:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=9D=A2=E6=9D=BF=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=A0=91=E5=BD=A2=E7=BB=93=E6=9E=84=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/modals/GroupDetail/Panel.tsx   | 72 +++++++++++++++++++
 .../components/modals/GroupDetail/index.tsx   |  6 ++
 2 files changed, 78 insertions(+)
 create mode 100644 web/src/components/modals/GroupDetail/Panel.tsx

diff --git a/web/src/components/modals/GroupDetail/Panel.tsx b/web/src/components/modals/GroupDetail/Panel.tsx
new file mode 100644
index 00000000..f66b7599
--- /dev/null
+++ b/web/src/components/modals/GroupDetail/Panel.tsx
@@ -0,0 +1,72 @@
+import React, { useCallback, useMemo } from 'react';
+import {
+  GroupPanelType,
+  useGroupInfo,
+  GroupPanel as GroupPanelInfo,
+} from 'tailchat-shared';
+import { Tree } from 'antd';
+import type { NodeDragEventParams } from 'rc-tree/lib/contextTypes';
+import type { DataNode, EventDataNode } from 'antd/lib/tree';
+import type { Key } from 'rc-tree/lib/interface';
+
+/**
+ * 将一维的面板列表构筑成立体的数组
+ */
+function buildTreeDataWithGroupPanel(
+  groupPanels: GroupPanelInfo[]
+): DataNode[] {
+  return groupPanels
+    .filter((panel) => panel.type === GroupPanelType.GROUP)
+    .map<DataNode>((section) => ({
+      key: section.id,
+      title: section.name,
+      isLeaf: false,
+      children: groupPanels
+        .filter((panel) => panel.parentId === section.id)
+        .map<DataNode>((panel) => ({
+          key: panel.id,
+          title: panel.name,
+          isLeaf: true,
+        })),
+    }));
+}
+
+export const GroupPanel: React.FC<{
+  groupId: string;
+}> = React.memo((props) => {
+  const groupId = props.groupId;
+  const groupInfo = useGroupInfo(groupId);
+  const groupPanels = groupInfo?.panels ?? [];
+
+  const handleDrop = useCallback(
+    (
+      info: NodeDragEventParams & {
+        dragNode: EventDataNode;
+        dragNodesKeys: Key[];
+        dropPosition: number;
+        dropToGap: boolean;
+      }
+    ) => {
+      // TODO
+      console.log(info);
+    },
+    []
+  );
+
+  const treeData: DataNode[] = useMemo(
+    () => buildTreeDataWithGroupPanel(groupPanels),
+    [groupPanels]
+  );
+
+  return (
+    <div>
+      <Tree
+        treeData={treeData}
+        defaultExpandAll={true}
+        draggable={true}
+        onDrop={handleDrop}
+      />
+    </div>
+  );
+});
+GroupPanel.displayName = 'GroupPanel';
diff --git a/web/src/components/modals/GroupDetail/index.tsx b/web/src/components/modals/GroupDetail/index.tsx
index 10fd32d1..c10aac2a 100644
--- a/web/src/components/modals/GroupDetail/index.tsx
+++ b/web/src/components/modals/GroupDetail/index.tsx
@@ -2,6 +2,7 @@ import { FullModal } from '@/components/FullModal';
 import { SidebarView, SidebarViewMenuType } from '@/components/SidebarView';
 import React, { useCallback, useMemo } from 'react';
 import { t } from 'tailchat-shared';
+import { GroupPanel } from './Panel';
 import { GroupSummary } from './Summary';
 
 interface SettingsViewProps {
@@ -29,6 +30,11 @@ export const GroupDetail: React.FC<SettingsViewProps> = React.memo((props) => {
             title: t('概述'),
             content: <GroupSummary groupId={props.groupId} />,
           },
+          {
+            type: 'item',
+            title: t('面板'),
+            content: <GroupPanel groupId={props.groupId} />,
+          },
         ],
       },
     ],