From 7951e095c5238768023ee93c273fc58aaa856dc4 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 31 Jul 2021 19:58:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=82=80=E8=AF=B7=E6=A8=A1?=
 =?UTF-8?q?=E6=80=81=E6=A1=86=E5=85=A5=E5=8F=A3=E4=B8=8E=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/SectionHeader.tsx          |  9 +++++--
 web/src/components/modals/GroupInvite.tsx     | 25 +++++++++++++++----
 .../routes/Main/Content/Group/GroupHeader.tsx | 11 +++-----
 .../Content/Group/useGroupHeaderAction.tsx    | 12 +++++++++
 4 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx

diff --git a/web/src/components/SectionHeader.tsx b/web/src/components/SectionHeader.tsx
index 666e78c3..02c042f3 100644
--- a/web/src/components/SectionHeader.tsx
+++ b/web/src/components/SectionHeader.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Dropdown } from 'antd';
 import { Icon } from '@iconify/react';
+import clsx from 'clsx';
 
 interface SectionHeaderProps {
   menu?: React.ReactElement;
@@ -13,7 +14,6 @@ export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
       <div className="h-12 relative flex items-center px-4 py-0 text-base font-bold flex-shrink-0 thin-line-bottom">
         {React.isValidElement(props.menu) ? (
           <Dropdown
-            visible={visible}
             onVisibleChange={setVisible}
             overlay={props.menu}
             placement="topRight"
@@ -21,7 +21,12 @@ export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
           >
             <div className="cursor-pointer flex flex-1">
               <header className="flex-1 truncate">{props.children}</header>
-              <Icon className="text-2xl" icon="mdi-chevron-down">
+              <Icon
+                className={clsx('text-2xl transition-transform transform', {
+                  'rotate-180': visible,
+                })}
+                icon="mdi-chevron-down"
+              >
                 &#xe60f;
               </Icon>
             </div>
diff --git a/web/src/components/modals/GroupInvite.tsx b/web/src/components/modals/GroupInvite.tsx
index 20c1bb83..68c2b8c0 100644
--- a/web/src/components/modals/GroupInvite.tsx
+++ b/web/src/components/modals/GroupInvite.tsx
@@ -49,15 +49,30 @@ export const GroupInvite: React.FC<GroupInviteProps> = React.memo((props) => {
 
       <Divider>或者创建链接并发送给外部好友</Divider> */}
 
-      <div>创建链接并发送给外部好友</div>
+      <div className="text-gray-400 font-bold text-lg mb-2">
+        创建链接并发送给外部好友
+      </div>
 
       <div>
         {isValidStr(inviteLink) ? (
-          <Typography.Text copyable={true} className="select-text">
-            {inviteLink}
-          </Typography.Text>
+          <div>
+            <Typography.Title
+              className="bg-black bg-opacity-30 px-2 py-1 select-text text-lg rounded border border-black border-opacity-20"
+              level={4}
+              copyable={true}
+            >
+              {inviteLink}
+            </Typography.Title>
+            <p className="text-gray-500 text-sm">该邀请连接将会于7天后过期</p>
+          </div>
         ) : (
-          <Button loading={loading} onClick={handleCreateInviteLink}>
+          <Button
+            block={true}
+            size="large"
+            type="primary"
+            loading={loading}
+            onClick={handleCreateInviteLink}
+          >
             创建链接
           </Button>
         )}
diff --git a/web/src/routes/Main/Content/Group/GroupHeader.tsx b/web/src/routes/Main/Content/Group/GroupHeader.tsx
index 0ea256e5..7ffe1c8b 100644
--- a/web/src/routes/Main/Content/Group/GroupHeader.tsx
+++ b/web/src/routes/Main/Content/Group/GroupHeader.tsx
@@ -4,6 +4,7 @@ import _isNil from 'lodash/isNil';
 // import { useGroupHeaderAction } from './useGroupHeaderAction';
 import { useGroupInfo, useTranslation } from 'tailchat-shared';
 import { SectionHeader } from '@/components/SectionHeader';
+import { useGroupHeaderAction } from './useGroupHeaderAction';
 
 interface GroupHeaderProps {
   groupId: string;
@@ -13,12 +14,7 @@ export const GroupHeader: React.FC<GroupHeaderProps> = React.memo((props) => {
   const groupInfo = useGroupInfo(groupId);
   const { t } = useTranslation();
 
-  // const {
-  //   handleShowGroupInfo,
-  //   handleShowInvite,
-  //   handleCreateGroupPanel,
-  //   handleQuitGroup,
-  // } = useGroupHeaderAction(groupInfo!);
+  const { handleInviteUser } = useGroupHeaderAction(groupId);
 
   if (_isNil(groupInfo)) {
     return null;
@@ -26,11 +22,10 @@ export const GroupHeader: React.FC<GroupHeaderProps> = React.memo((props) => {
 
   const menu = (
     <Menu>
-      {/* TODO */}
       <Menu.Item key="0" onClick={() => console.log('查看详情')}>
         {t('查看详情')}
       </Menu.Item>
-      <Menu.Item key="1" onClick={() => console.log('邀请用户')}>
+      <Menu.Item key="1" onClick={handleInviteUser}>
         {t('邀请用户')}
       </Menu.Item>
     </Menu>
diff --git a/web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx b/web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx
new file mode 100644
index 00000000..f4e13b06
--- /dev/null
+++ b/web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx
@@ -0,0 +1,12 @@
+import { openModal } from '@/components/Modal';
+import { GroupInvite } from '@/components/modals/GroupInvite';
+import React from 'react';
+import { useCallback } from 'react';
+
+export function useGroupHeaderAction(groupId: string) {
+  const handleInviteUser = useCallback(() => {
+    openModal(<GroupInvite groupId={groupId} />);
+  }, [groupId]);
+
+  return { handleInviteUser };
+}