feat(flat-component): add MoremMenu component to storybook (#637)

netless-io · May 18, 2021 · 9d8258e · 9d8258e
1 parent 6903937
commit 9d8258e
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 15 deletions.
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx 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
diff --git 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
@@ -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,24 +157,24 @@ 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>
                     )}
                 </div>
                 {renderPeriodicRoomTable()}
             </div>
             <RemoveRoomModal
-                cancelModalVisible={cancelModalVisible}
+                cancelModalVisible={confirmRemovePeriodicRoomVisible}
                 isCreator={isCreator}
-                onCancel={() => showCancelModal(false)}
+                onCancel={() => setConfirmRemovePeriodicRoomVisible(false)}
                 onCancelRoom={onCancelRoom}
                 isPeriodicDetailsPage={true}
             />