visuddhinanda 2 лет назад
Родитель
Сommit
79bf7c6d68
1 измененных файлов с 24 добавлено и 2 удалено
  1. 24 2
      dashboard/src/components/discussion/DiscussionBox.tsx

+ 24 - 2
dashboard/src/components/discussion/DiscussionBox.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
-import { Divider, Drawer } from "antd";
+import { Button, Divider, Drawer, Space } from "antd";
+import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
+
 import CommentTopic from "./DiscussionTopic";
 import CommentListCard, { TResType } from "./DiscussionListCard";
 import { IComment } from "./DiscussionItem";
@@ -25,7 +27,10 @@ const DiscussionBoxWidget = ({
   const [childrenDrawer, setChildrenDrawer] = useState(false);
   const [topicComment, setTopicComment] = useState<IComment>();
   const [answerCount, setAnswerCount] = useState<IAnswerCount>();
+  const drawerMinWidth = 720;
+  const drawerMaxWidth = 1100;
 
+  const [drawerWidth, setDrawerWidth] = useState(drawerMinWidth);
   const showChildrenDrawer = (
     e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
     comment: IComment
@@ -45,7 +50,24 @@ const DiscussionBoxWidget = ({
       </span>
       <Drawer
         title="Discussion"
-        width={520}
+        extra={
+          <Space>
+            {drawerWidth === drawerMinWidth ? (
+              <Button
+                type="link"
+                icon={<FullscreenOutlined />}
+                onClick={() => setDrawerWidth(drawerMaxWidth)}
+              />
+            ) : (
+              <Button
+                type="link"
+                icon={<FullscreenExitOutlined />}
+                onClick={() => setDrawerWidth(drawerMinWidth)}
+              />
+            )}
+          </Space>
+        }
+        width={drawerWidth}
         onClose={() => {
           setOpen(false);
           if (document.getElementsByTagName("body")[0].hasAttribute("style")) {