用NavigateButton替换原来的渲染函数

dashboard/src/components/article/Navigate.tsx

@@ -5,6 +5,8 @@ import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons";
 import { get } from "../../request";
 import { ArticleType } from "./Article";
 import React from "react";
+import NavigateButton from "./NavigateButton";
+import { ITocPathNode } from "../corpus/TocPath";
 
 const { Paragraph, Text } = Typography;
 
@@ -39,9 +41,17 @@ interface INavResponse {
 interface IWidget {
   type?: ArticleType;
   articleId?: string;
+  path?: ITocPathNode[];
   onChange?: Function;
+  onPathChange?: Function;
 }
-const NavigateWidget = ({ type, articleId, onChange }: IWidget) => {
+const NavigateWidget = ({
+  type,
+  articleId,
+  path,
+  onChange,
+  onPathChange,
+}: IWidget) => {
   const [prev, setPrev] = useState<INavButton>();
   const [next, setNext] = useState<INavButton>();
 
@@ -59,48 +69,26 @@ const NavigateWidget = ({ type, articleId, onChange }: IWidget) => {
   }, [articleId, type]);
 
   return (
-    <Paragraph
-      style={{
-        display: "flex",
-        justifyContent: "space-between",
-        backdropFilter: "blur(5px)",
-        backgroundColor: "rgba(200,200,200,0.2)",
-        padding: 4,
+    <NavigateButton
+      prevTitle={prev?.title}
+      nextTitle={next?.title}
+      path={path}
+      onPrev={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        if (typeof onChange !== "undefined" && prev) {
+          onChange(event, prev.id);
+        }
       }}
-    >
-      <Button
-        disabled={typeof prev === "undefined"}
-        size="middle"
-        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-          if (typeof onChange !== "undefined" && prev) {
-            onChange(event, prev.id);
-          }
-        }}
-      >
-        <Space>
-          <DoubleLeftOutlined />
-          <EllipsisMiddle maxWidth={300} suffixCount={7}>
-            {prev?.title}
-          </EllipsisMiddle>
-        </Space>
-      </Button>
-      <Button
-        size="middle"
-        disabled={typeof next === "undefined"}
-        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-          if (typeof onChange !== "undefined" && next) {
-            onChange(event, next.id);
-          }
-        }}
-      >
-        <Space>
-          <EllipsisMiddle maxWidth={300} suffixCount={7}>
-            {next?.title}
-          </EllipsisMiddle>
-          <DoubleRightOutlined />
-        </Space>
-      </Button>
-    </Paragraph>
+      onNext={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        if (typeof onChange !== "undefined" && next) {
+          onChange(event, next.id);
+        }
+      }}
+      onPathChange={(key: string) => {
+        if (typeof onPathChange !== "undefined") {
+          onPathChange(key);
+        }
+      }}
+    />
   );
 };