feat(flat-components): add remove history room modal to flat-componen…

…ts (#724)
netless-io · Jun 8, 2021 · 9dbdf9d · 9dbdf9d
1 parent 400e874
commit 9dbdf9d
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 3 deletions.
diff --git a/.../flat-components/src/components/RemoveHistoryRoomModal/RemoveHistoryRoomModal.stories.tsx b/.../flat-components/src/components/RemoveHistoryRoomModal/RemoveHistoryRoomModal.stories.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { RemoveHistoryRoomModal, RemoveHistoryRoomModalProps } from ".";
+
+const storyMeta: Meta = {
+    title: "Components/RemoveHistoryRoomModal",
+    component: RemoveHistoryRoomModal,
+};
+
+export default storyMeta;
+
+export const Overview: Story<RemoveHistoryRoomModalProps> = args => (
+    <div className="vh-75 mw8-ns">
+        <RemoveHistoryRoomModal {...args} />
+    </div>
+);
+Overview.args = {
+    visible: true,
+};
diff --git a/packages/flat-components/src/components/RemoveHistoryRoomModal/index.tsx b/packages/flat-components/src/components/RemoveHistoryRoomModal/index.tsx
@@ -0,0 +1,36 @@
+import "./style.less";
+
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { Button, Modal } from "antd";
+
+export interface RemoveHistoryRoomModalProps {
+    visible: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+    loading: boolean;
+}
+
+export const RemoveHistoryRoomModal = observer<RemoveHistoryRoomModalProps>(
+    function RemoveHistoryRoomModal({ visible, onCancel, onConfirm, loading }) {
+        return (
+            <Modal
+                wrapClassName="remove-history-room-modal-container"
+                title="删除房间记录"
+                visible={visible}
+                onCancel={onCancel}
+                footer={[
+                    <Button key="exit-cancel" onClick={onCancel}>
+                        取消
+                    </Button>,
+                    <Button key="exit-confirm" danger loading={loading} onClick={onConfirm}>
+                        确定
+                    </Button>,
+                ]}
+                destroyOnClose
+            >
+                确定删除当前房间记录？
+            </Modal>
+        );
+    },
+);
diff --git a/packages/flat-components/src/components/RemoveHistoryRoomModal/style.less b/packages/flat-components/src/components/RemoveHistoryRoomModal/style.less
@@ -0,0 +1,13 @@
+.remove-history-room-modal-container {
+    > .ant-modal {
+        > .ant-modal-content {
+            > .ant-modal-header {
+                border-bottom: none;
+            }
+
+            > .ant-modal-footer {
+                border-top: none;
+            }
+        }
+    }
+}
diff --git a/packages/flat-components/src/components/RemoveRoomModal/index.tsx b/packages/flat-components/src/components/RemoveRoomModal/index.tsx
@@ -1,3 +1,5 @@
+import "./style.less";
+
 import { Button, Checkbox, Modal } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -76,6 +78,7 @@ export const RemoveRoomModal: React.FC<RemoveRoomModalProps> = ({
 
     return (
         <Modal
+            wrapClassName="remove-room-modal-container"
             visible={cancelModalVisible}
             title={title}
             onCancel={onCancel}

diff --git a/packages/flat-components/src/components/RemoveRoomModal/style.less b/packages/flat-components/src/components/RemoveRoomModal/style.less
@@ -0,0 +1,13 @@
+.remove-room-modal-container {
+    > .ant-modal {
+        > .ant-modal-content {
+            > .ant-modal-header {
+                border-bottom: none;
+            }
+
+            > .ant-modal-footer {
+                border-top: none;
+            }
+        }
+    }
+}
diff --git a/packages/flat-components/src/index.ts b/packages/flat-components/src/index.ts
@@ -15,6 +15,7 @@ export * from "./components/LoginPage";
 export * from "./components/MainPageLayout";
 export * from "./components/MainPageLayoutHorizontal";
 export * from "./components/PeriodicRoomPage";
+export * from "./components/RemoveHistoryRoomModal";
 export * from "./components/RemoveRoomModal";
 export * from "./components/RoomDetailPage";
 export * from "./components/RoomStatusElement";

diff --git a/web/flat-web/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx b/web/flat-web/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import { isSameDay } from "date-fns";
 import {
     InviteModal,
+    RemoveHistoryRoomModal,
     RemoveRoomModal,
     RoomListAlreadyLoaded,
     RoomListDate,
@@ -15,7 +16,6 @@ import {
 } from "flat-components";
 import { ListRoomsType } from "../../../apiMiddleware/flatServer";
 import { RoomStatus, RoomType } from "../../../apiMiddleware/flatServer/constants";
-// import { RemoveHistoryRoomModal } from "../../../components/Modal/RemoveHistoryRoomModal";
 import { GlobalStoreContext, RoomStoreContext } from "../../../components/StoreProvider";
 import { errorTips } from "../../../components/Tips/ErrorTips";
 import { RoomItem } from "../../../stores/RoomStore";
@@ -191,14 +191,14 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                 />
             )}
             {/* TODO: add removeHistoryLoading to flat-component */}
-            {/* {currentRoom && (
+            {currentRoom && (
                 <RemoveHistoryRoomModal
                     visible={removeHistoryVisible}
                     onConfirm={removeConfirm}
                     onCancel={hideRemoveHistoryModal}
                     loading={removeHistoryLoading}
                 />
-            )} */}
+            )}
         </>
     );