From 9d8258efd830c78990f1bd59139c5b531d6331b9 Mon Sep 17 00:00:00 2001
From: Cheerego7 <48879533+Cheerego7@users.noreply.github.com>
Date: Tue, 18 May 2021 10:16:36 +0800
Subject: [PATCH] feat(flat-component): add MoremMenu component to storybook
 (#637)

---
 .../components/PeriodicRoomPage/MoreMenu.tsx  | 69 +++++++++++++++++++
 .../PeriodicRoomPage/icons/more-menu.svg      | 17 +++++
 .../components/PeriodicRoomPage/index.less    |  8 ++-
 .../src/components/PeriodicRoomPage/index.tsx | 46 +++++++++----
 4 files changed, 125 insertions(+), 15 deletions(-)
 create mode 100644 packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx
 create mode 100644 packages/flat-components/src/components/PeriodicRoomPage/icons/more-menu.svg

diff --git a/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx b/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx
new file mode 100644
index 00000000000..6a9e5c60bff
--- /dev/null
+++ b/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx
@@ -0,0 +1,69 @@
+import moreMenuSVG from "./icons/more-menu.svg";
+
+import React, { useState } from "react";
+import { Dropdown, Menu } from "antd";
+import MenuItem from "antd/lib/menu/MenuItem";
+import { RoomInfo } from "../../types/room";
+import { InviteModal } from "../InviteModal";
+import { RemoveRoomModal } from "../RemoveRoomModal";
+
+export interface MoreMenuProps {
+    room: RoomInfo;
+    userName: string;
+    isCreator: boolean;
+    onCopy: () => void;
+    onRemoveRoom: () => void;
+    jumpToRoomInfoPage: () => void;
+    jumpToModifyRoomPage: () => void;
+}
+
+export const MoreMenu: React.FC<MoreMenuProps> = ({
+    room,
+    userName,
+    isCreator,
+    onCopy,
+    onRemoveRoom,
+    jumpToRoomInfoPage,
+    jumpToModifyRoomPage,
+}) => {
+    const [removeRoomVisible, setRemoveRoomVisible] = useState(false);
+    const [inviteRoomVisible, setInviteRoomVisible] = useState(false);
+
+    return (
+        <Dropdown
+            overlay={() => {
+                return (
+                    <Menu>
+                        <MenuItem onClick={jumpToRoomInfoPage}>房间详情</MenuItem>
+                        {isCreator && (
+                            <>
+                                <MenuItem onClick={jumpToModifyRoomPage}>修改房间</MenuItem>
+                                <MenuItem onClick={() => setRemoveRoomVisible(true)}>
+                                    取消房间
+                                </MenuItem>
+                            </>
+                        )}
+                        <MenuItem onClick={() => setInviteRoomVisible(true)}>复制邀请</MenuItem>
+                        <RemoveRoomModal
+                            cancelModalVisible={removeRoomVisible}
+                            isCreator={isCreator}
+                            onCancel={() => setRemoveRoomVisible(false)}
+                            onCancelRoom={onRemoveRoom}
+                            isPeriodicDetailsPage={false}
+                        />
+                        <InviteModal
+                            visible={inviteRoomVisible}
+                            room={room}
+                            userName={userName}
+                            onCopy={onCopy}
+                            onCancel={() => setInviteRoomVisible(false)}
+                        />
+                    </Menu>
+                );
+            }}
+            trigger={["click"]}
+        >
+            <img src={moreMenuSVG} alt="更多" />
+        </Dropdown>
+    );
+};
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/icons/more-menu.svg b/packages/flat-components/src/components/PeriodicRoomPage/icons/more-menu.svg
new file mode 100644
index 00000000000..bb96ca2beb1
--- /dev/null
+++ b/packages/flat-components/src/components/PeriodicRoomPage/icons/more-menu.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形备份 24</title>
+    <g id="2.1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页-周期性房间详情" transform="translate(-895.000000, -406.000000)" fill="#444E60">
+            <g id="编组-4" transform="translate(361.000000, 144.000000)">
+                <g id="编组-3" transform="translate(0.000000, 174.000000)">
+                    <g id="编组-10" transform="translate(420.000000, 48.000000)">
+                        <g id="编组备份-10" transform="translate(125.000000, 51.000000) rotate(-270.000000) translate(-125.000000, -51.000000) translate(114.000000, 40.000000)">
+                            <path d="M11,14 C11.5522847,14 12,14.4477153 12,15 C12,15.5522847 11.5522847,16 11,16 C10.4477153,16 10,15.5522847 10,15 C10,14.4477153 10.4477153,14 11,14 Z M11,10 C11.5522847,10 12,10.4477153 12,11 C12,11.5522847 11.5522847,12 11,12 C10.4477153,12 10,11.5522847 10,11 C10,10.4477153 10.4477153,10 11,10 Z M11,6 C11.5522847,6 12,6.44771525 12,7 C12,7.55228475 11.5522847,8 11,8 C10.4477153,8 10,7.55228475 10,7 C10,6.44771525 10.4477153,6 11,6 Z" id="形状结合"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.less b/packages/flat-components/src/components/PeriodicRoomPage/index.less
index f7ba39604a4..aa136a3a41d 100644
--- a/packages/flat-components/src/components/PeriodicRoomPage/index.less
+++ b/packages/flat-components/src/components/PeriodicRoomPage/index.less
@@ -58,9 +58,11 @@
     border-bottom: solid 1px #dbe1ea;
 }
 
-.ant-table-tbody > tr > td {
-    color: #7a7b7c;
-    border-bottom: 1px solid transparent;
+.periodic-room-panel-table-container {
+    .ant-table-tbody > tr > td {
+        color: #7a7b7c;
+        border-bottom: 1px solid transparent;
+    }
 }
 
 .periodic-room-panel-month-value {
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
index 6affa0d108f..a8c05b14cb3 100644
--- a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
+++ b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
@@ -9,9 +9,11 @@ import { RoomInfo, RoomStatus, RoomType, Week } from "../../types/room";
 import { getRoomTypeName, getWeekName, getWeekNames } from "../../utils/room";
 import { RoomStatusElement } from "../RoomStatusElement";
 import { RemoveRoomModal } from "../RemoveRoomModal";
+import { MoreMenu } from "./MoreMenu";
 
 export interface PeriodicRoomPanelProps {
     rooms: RoomInfo[];
+    userName: string;
     isCreator: boolean;
     periodicInfo: {
         weeks: Week[];
@@ -20,17 +22,24 @@ export interface PeriodicRoomPanelProps {
         roomCount: number;
     };
     jumpToPeriodicModifyPage: () => void;
+    onCopy: () => void;
     onCancelRoom: () => void;
+    jumpToRoomInfoPage: () => void;
+    jumpToModifyRoomPage: () => void;
 }
 
 export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
     rooms,
-    periodicInfo,
+    userName,
     isCreator,
+    periodicInfo,
     jumpToPeriodicModifyPage,
+    onCopy,
     onCancelRoom,
+    jumpToRoomInfoPage,
+    jumpToModifyRoomPage,
 }) => {
-    const [cancelModalVisible, showCancelModal] = useState(false);
+    const [confirmRemovePeriodicRoomVisible, setConfirmRemovePeriodicRoomVisible] = useState(false);
 
     const yearMonthFormat = formatWithOptions({ locale: zhCN }, "yyyy/MM");
     const dayFormat = formatWithOptions({ locale: zhCN }, "dd");
@@ -76,16 +85,19 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
                         pagination={false}
                     >
                         <Table.Column
+                            align="left"
                             render={(_, room: RoomInfo) =>
                                 dayFormat(room.beginTime || defaultDate) + "日"
                             }
                         />
                         <Table.Column
+                            align="center"
                             render={(_, room: RoomInfo) =>
                                 getWeekName(getDay(room.beginTime || defaultDate))
                             }
                         />
                         <Table.Column
+                            align="center"
                             render={(_, room: RoomInfo) => {
                                 return (
                                     timeSuffixFormat(room.beginTime || defaultDate) +
@@ -95,17 +107,27 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
                             }}
                         />
                         <Table.Column
+                            align="center"
                             render={(_, room: RoomInfo) => {
                                 return <RoomStatusElement room={room} />;
                             }}
                         />
-                        {/* 
-                        // TODO: MoreMenu component
                         <Table.Column
-                        render={(_, room: RoomInfo) => {
-                            return null;
-                        }}
-                    /> */}
+                            align="right"
+                            render={(_, room: RoomInfo) => {
+                                return (
+                                    <MoreMenu
+                                        room={room}
+                                        userName={userName}
+                                        isCreator={isCreator}
+                                        onCopy={onCopy}
+                                        onRemoveRoom={onCancelRoom}
+                                        jumpToRoomInfoPage={jumpToRoomInfoPage}
+                                        jumpToModifyRoomPage={jumpToModifyRoomPage}
+                                    />
+                                );
+                            }}
+                        />
                     </Table>
                 </div>
             ));
@@ -135,14 +157,14 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
                             </Button>
                             <Button
                                 danger
-                                onClick={() => showCancelModal(true)}
+                                onClick={() => setConfirmRemovePeriodicRoomVisible(true)}
                                 disabled={hasRunning}
                             >
                                 取消周期性房间
                             </Button>
                         </>
                     ) : (
-                        <Button danger onClick={() => showCancelModal(true)}>
+                        <Button danger onClick={() => setConfirmRemovePeriodicRoomVisible(true)}>
                             移除周期性房间
                         </Button>
                     )}
@@ -150,9 +172,9 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
                 {renderPeriodicRoomTable()}
             </div>
             <RemoveRoomModal
-                cancelModalVisible={cancelModalVisible}
+                cancelModalVisible={confirmRemovePeriodicRoomVisible}
                 isCreator={isCreator}
-                onCancel={() => showCancelModal(false)}
+                onCancel={() => setConfirmRemovePeriodicRoomVisible(false)}
                 onCancelRoom={onCancelRoom}
                 isPeriodicDetailsPage={true}
             />