Merge pull request #2008 from visuddhinanda/agile

重绘时更新Affix宽度

dashboard/src/components/article/Navigate.tsx

@@ -1,9 +1,12 @@
-import { Affix, Button, Space, Typography } from "antd";
+import { Button, Space, Typography } from "antd";
 import { useEffect, useState } from "react";
 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;
 
@@ -38,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>();
 
@@ -56,51 +67,28 @@ const NavigateWidget = ({ type, articleId, onChange }: IWidget) => {
       );
     }
   }, [articleId, type]);
+
   return (
-    <Affix offsetBottom={0}>
-      <Paragraph
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          backdropFilter: "blur(5px)",
-          backgroundColor: "rgba(200,200,200,0.2)",
-          padding: 4,
-        }}
-      >
-        <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>
-    </Affix>
+    <NavigateButton
+      prevTitle={prev?.title}
+      nextTitle={next?.title}
+      path={path}
+      onPrev={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        if (typeof onChange !== "undefined" && prev) {
+          onChange(event, prev.id);
+        }
+      }}
+      onNext={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        if (typeof onChange !== "undefined" && next) {
+          onChange(event, next.id);
+        }
+      }}
+      onPathChange={(key: string) => {
+        if (typeof onPathChange !== "undefined") {
+          onPathChange(key);
+        }
+      }}
+    />
   );
 };
 

dashboard/src/components/article/NavigateButton.tsx

@@ -1,6 +1,7 @@
-import { Button, Dropdown, Popover, Space, Typography } from "antd";
+import { Affix, Button, Dropdown, Space, Typography } from "antd";
 import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons";
 import { ITocPathNode } from "../corpus/TocPath";
+import { useRef } from "react";
 
 const { Paragraph, Text } = Typography;
 
@@ -35,61 +36,75 @@ const NavigateButtonWidget = ({
   onPathChange,
 }: IWidget) => {
   const currTitle = path && path.length > 0 ? path[path.length - 1].title : "";
+
+  const affixRef = useRef<any>();
+  affixRef?.current?.updatePosition();
+
   return (
-    <Paragraph style={{ display: "flex", justifyContent: "space-between" }}>
-      <Button
-        disabled={typeof prevTitle === "undefined"}
-        size="large"
-        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-          if (typeof onPrev !== "undefined") {
-            onPrev(event);
-          }
+    <Affix ref={affixRef} offsetBottom={0}>
+      <Paragraph
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          backdropFilter: "blur(5px)",
+          backgroundColor: "rgba(200,200,200,0.2)",
+          padding: 4,
         }}
       >
-        <Space>
-          <DoubleLeftOutlined key="icon" />
-          <EllipsisMiddle maxWidth={300} suffixCount={7} text={prevTitle} />
-        </Space>
-      </Button>
-      <div>
-        <Dropdown
-          placement="top"
-          trigger={["hover"]}
-          menu={{
-            items: path?.map((item, id) => {
-              return { label: item.title, key: item.key ?? item.title };
-            }),
-            onClick: (e) => {
-              console.debug("onPathChange", e.key);
-              if (typeof onPathChange !== "undefined") {
-                onPathChange(e.key);
-              }
-            },
+        <Button
+          size="middle"
+          disabled={typeof prevTitle === "undefined"}
+          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            if (typeof onPrev !== "undefined") {
+              onPrev(event);
+            }
           }}
         >
-          <span>{currTitle}</span>
-        </Dropdown>
-      </div>
-      <Button
-        size="large"
-        disabled={typeof nextTitle === "undefined"}
-        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-          if (typeof onNext !== "undefined") {
-            onNext(event);
-          }
-        }}
-      >
-        <Space>
-          <EllipsisMiddle
-            key="title"
-            maxWidth={300}
-            suffixCount={7}
-            text={nextTitle}
-          />
-          <DoubleRightOutlined key="icon" />
-        </Space>
-      </Button>
-    </Paragraph>
+          <Space>
+            <DoubleLeftOutlined key="icon" />
+            <EllipsisMiddle maxWidth={250} suffixCount={7} text={prevTitle} />
+          </Space>
+        </Button>
+        <div>
+          <Dropdown
+            placement="top"
+            trigger={["hover"]}
+            menu={{
+              items: path?.map((item, id) => {
+                return { label: item.title, key: item.key ?? item.title };
+              }),
+              onClick: (e) => {
+                console.debug("onPathChange", e.key);
+                if (typeof onPathChange !== "undefined") {
+                  onPathChange(e.key);
+                }
+              },
+            }}
+          >
+            <span>{currTitle}</span>
+          </Dropdown>
+        </div>
+        <Button
+          size="middle"
+          disabled={typeof nextTitle === "undefined"}
+          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            if (typeof onNext !== "undefined") {
+              onNext(event);
+            }
+          }}
+        >
+          <Space>
+            <EllipsisMiddle
+              key="title"
+              maxWidth={250}
+              suffixCount={7}
+              text={nextTitle}
+            />
+            <DoubleRightOutlined key="icon" />
+          </Space>
+        </Button>
+      </Paragraph>
+    </Affix>
   );
 };
 

dashboard/src/components/article/TypePali.tsx

@@ -290,6 +290,26 @@ const TypePaliWidget = ({
             <Navigate
               type={type as ArticleType}
               articleId={articleId}
+              path={articleData?.path}
+              onPathChange={(key: string) => {
+                const node = articleData?.path?.find(
+                  (value) => value.title === key
+                );
+                if (node) {
+                  let newType = type;
+                  if (node.level === 0) {
+                    newType = "series";
+                  } else {
+                    newType = "chapter";
+                  }
+                  if (typeof onArticleChange !== "undefined") {
+                    const newArticle = node.key
+                      ? node.key
+                      : `${node.book}-${node.paragraph}`;
+                    onArticleChange(newType, newArticle, "self");
+                  }
+                }
+              }}
               onChange={(
                 event: React.MouseEvent<HTMLElement, MouseEvent>,
                 newId: string