Просмотр исходного кода

在返回按钮后添加标题

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

+ 48 - 18
dashboard/src/components/discussion/Discussion.tsx

@@ -4,36 +4,53 @@ import { ArrowLeftOutlined } from "@ant-design/icons";
 import DiscussionTopic from "./DiscussionTopic";
 import DiscussionListCard, { TResType } from "./DiscussionListCard";
 import { IComment } from "./DiscussionItem";
-import { useAppSelector } from "../../hooks";
-import {
-  countChange,
-  IShowDiscussion,
-  message,
-  show,
-  showAnchor,
-} from "../../reducers/discussion";
-import { Button } from "antd";
+
+import { countChange } from "../../reducers/discussion";
+import { Button, Space, Typography } from "antd";
 import store from "../../store";
 
+const { Text } = Typography;
+
 export interface IAnswerCount {
   id: string;
   count: number;
 }
+export type TDiscussionType = "qa" | "discussion" | "help" | "comment";
 
 interface IWidget {
   resId?: string;
-  resType: TResType;
+  resType?: TResType;
+  showTopicId?: string;
   focus?: string;
+  type?: TDiscussionType;
+  onTopicReady?: Function;
 }
 
-const DiscussionWidget = ({ resId, resType, focus }: IWidget) => {
+const DiscussionWidget = ({
+  resId,
+  resType,
+  showTopicId,
+  focus,
+  type = "discussion",
+  onTopicReady,
+}: IWidget) => {
   const [childrenDrawer, setChildrenDrawer] = useState(false);
   const [topicId, setTopicId] = useState<string>();
   const [topic, setTopic] = useState<IComment>();
   const [answerCount, setAnswerCount] = useState<IAnswerCount>();
-  const [currTopic, setCurrTopic] = useState<IComment>();
+  const [topicTitle, setTopicTitle] = useState<string>();
+
+  useEffect(() => {
+    if (showTopicId) {
+      setChildrenDrawer(true);
+      setTopicId(showTopicId);
+    } else {
+      setChildrenDrawer(false);
+    }
+  }, [showTopicId]);
 
   const showChildrenDrawer = (comment: IComment) => {
+    console.debug("discussion comment", comment);
     setChildrenDrawer(true);
     if (comment.id) {
       setTopicId(comment.id);
@@ -48,31 +65,44 @@ const DiscussionWidget = ({ resId, resType, focus }: IWidget) => {
     <>
       {childrenDrawer ? (
         <div>
-          <Button
-            shape="circle"
-            icon={<ArrowLeftOutlined />}
-            onClick={() => setChildrenDrawer(false)}
-          />
+          <Space>
+            <Button
+              shape="circle"
+              icon={<ArrowLeftOutlined />}
+              onClick={() => setChildrenDrawer(false)}
+            />
+            <Text strong style={{ fontSize: 16 }}>
+              {topic ? topic.title : topicTitle}
+            </Text>
+          </Space>
           <DiscussionTopic
             resType={resType}
             topicId={topicId}
             topic={topic}
             focus={focus}
+            hideTitle
             onItemCountChange={(count: number, parent: string) => {
               setAnswerCount({ id: parent, count: count });
             }}
             onTopicReady={(value: IComment) => {
-              setCurrTopic(value);
+              setTopicTitle(value.title);
+              if (typeof onTopicReady !== "undefined") {
+                onTopicReady(value);
+              }
             }}
             onTopicDelete={() => {
               setChildrenDrawer(false);
             }}
+            onConvert={(value: TDiscussionType) => {
+              setChildrenDrawer(false);
+            }}
           />
         </div>
       ) : (
         <DiscussionListCard
           resId={resId}
           resType={resType}
+          type={type}
           onSelect={(
             e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
             comment: IComment