Browse Source

支持标题修改

visuddhinanda 2 years ago
parent
commit
e804407643
1 changed files with 29 additions and 2 deletions
  1. 29 2
      dashboard/src/components/article/ArticleDrawer.tsx

+ 29 - 2
dashboard/src/components/article/ArticleDrawer.tsx

@@ -1,8 +1,10 @@
-import { Button, Drawer, Space } from "antd";
+import { Button, Drawer, Space, Typography } from "antd";
 import React, { useEffect, useState } from "react";
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { Link } from "react-router-dom";
 
 
 import Article, { ArticleMode, ArticleType } from "./Article";
 import Article, { ArticleMode, ArticleType } from "./Article";
+import { IArticleDataResponse } from "../api/Article";
+const { Text } = Typography;
 
 
 interface IWidget {
 interface IWidget {
   trigger?: React.ReactNode;
   trigger?: React.ReactNode;
@@ -16,6 +18,8 @@ interface IWidget {
   mode?: ArticleMode;
   mode?: ArticleMode;
   open?: boolean;
   open?: boolean;
   onClose?: Function;
   onClose?: Function;
+  onTitleChange?: Function;
+  onArticleEdit?: Function;
 }
 }
 
 
 const ArticleDrawerWidget = ({
 const ArticleDrawerWidget = ({
@@ -30,9 +34,13 @@ const ArticleDrawerWidget = ({
   mode,
   mode,
   open,
   open,
   onClose,
   onClose,
+  onTitleChange,
+  onArticleEdit,
 }: IWidget) => {
 }: IWidget) => {
   const [openDrawer, setOpenDrawer] = useState(open);
   const [openDrawer, setOpenDrawer] = useState(open);
+  const [drawerTitle, setDrawerTitle] = useState(title);
   useEffect(() => setOpenDrawer(open), [open]);
   useEffect(() => setOpenDrawer(open), [open]);
+  useEffect(() => setDrawerTitle(title), [title]);
   const showDrawer = () => {
   const showDrawer = () => {
     setOpenDrawer(true);
     setOpenDrawer(true);
   };
   };
@@ -60,7 +68,20 @@ const ArticleDrawerWidget = ({
     <>
     <>
       <span onClick={() => showDrawer()}>{trigger}</span>
       <span onClick={() => showDrawer()}>{trigger}</span>
       <Drawer
       <Drawer
-        title={title}
+        title={
+          <Text
+            editable={{
+              onChange: (value: string) => {
+                setDrawerTitle(value);
+                if (typeof onTitleChange !== "undefined") {
+                  onTitleChange(value);
+                }
+              },
+            }}
+          >
+            {drawerTitle}
+          </Text>
+        }
         width={1000}
         width={1000}
         placement="right"
         placement="right"
         onClose={onDrawerClose}
         onClose={onDrawerClose}
@@ -85,6 +106,12 @@ const ArticleDrawerWidget = ({
           channelId={channelId}
           channelId={channelId}
           articleId={articleId}
           articleId={articleId}
           mode={mode}
           mode={mode}
+          onArticleEdit={(value: IArticleDataResponse) => {
+            setDrawerTitle(value.title_text);
+            if (typeof onArticleEdit !== "undefined") {
+              onArticleEdit(value);
+            }
+          }}
         />
         />
       </Drawer>
       </Drawer>
     </>
     </>