改变风格时不更新路由

dashboard/src/components/corpus/BookTree.tsx

@@ -1,11 +1,9 @@
 import { useState, useEffect } from "react";
 import { DownOutlined } from "@ant-design/icons";
-import { Layout, Space, Tree } from "antd";
+import { Space, Tree } from "antd";
 import { Typography } from "antd";
-import type { TreeProps } from "antd/es/tree";
 
 import { get } from "../../request";
-import { useNavigate } from "react-router-dom";
 import TocStyleSelect from "./TocStyleSelect";
 import { IPaliBookListResponse } from "../api/Corpus";
 import { ITocTree } from "./BookTreeList";
@@ -17,27 +15,22 @@ interface IWidgetBookTree {
   root?: string;
   path?: string[];
   onChange?: Function;
+  onSelect?: Function;
+  onRootChange?: Function;
 }
-const Widget = ({ root = "default", path, onChange }: IWidgetBookTree) => {
-  //Library foot bar
-  //const intl = useIntl(); //i18n
-  const navigate = useNavigate();
-
+const Widget = ({
+  root = "default",
+  path,
+  onChange,
+  onSelect,
+  onRootChange,
+}: IWidgetBookTree) => {
   const [treeData, setTreeData] = useState<ITocTree[]>([]);
 
   useEffect(() => {
     if (typeof root !== "undefined") fetchBookTree(root);
   }, [root]);
 
-  const onSelect: TreeProps["onSelect"] = (selectedKeys, info) => {
-    //let aaa: NewTree = info.node;
-    const node: ITocTree = info.node as unknown as ITocTree;
-    console.log("tree selected", selectedKeys, node.path);
-    if (typeof onChange !== "undefined" && selectedKeys.length > 0) {
-      onChange(selectedKeys[0], node.path);
-    }
-  };
-
   function fetchBookTree(value: string) {
     function treeMap(params: IPaliBookListResponse): ITocTree {
       return {
@@ -63,28 +56,46 @@ const Widget = ({ root = "default", path, onChange }: IWidgetBookTree) => {
       setTreeData(newTree);
     });
   }
-  const handleChange = (value: string) => {
-    console.log(`selected ${value}`);
-    localStorage.setItem("pali_path_root", value);
-    navigate("/palicanon/list/" + value);
-    fetchBookTree(value);
-  };
 
   // TODO
   return (
-    <Layout>
-      <Space>
-        <Text>目录风格</Text>
-        <TocStyleSelect style={root} onChange={handleChange} />
+    <Space direction="vertical" style={{ padding: 10 }}>
+      <Space style={{ display: "flex", justifyContent: "space-between" }}>
+        <Text>目录</Text>
+        <TocStyleSelect
+          style={root}
+          onChange={(value: string) => {
+            console.log(`selected ${value}`);
+            localStorage.setItem("pali_path_root", value);
+            if (typeof onRootChange !== "undefined") {
+              onRootChange(value);
+            }
+            fetchBookTree(value);
+          }}
+        />
       </Space>
       <Tree
         showLine
         switcherIcon={<DownOutlined />}
         defaultExpandedKeys={["sutta"]}
-        onSelect={onSelect}
+        onSelect={(selectedKeys, info) => {
+          //let aaa: NewTree = info.node;
+          const node: ITocTree = info.node as unknown as ITocTree;
+          console.log("tree selected", selectedKeys, node.path);
+          if (typeof onChange !== "undefined") {
+            if (selectedKeys.length > 0) {
+              onChange(selectedKeys[0], node.path);
+            } else {
+              onChange("", []);
+            }
+          }
+          if (typeof onSelect !== "undefined") {
+            onSelect(selectedKeys.length > 0 ? selectedKeys[0] : undefined);
+          }
+        }}
         treeData={treeData}
       />
-    </Layout>
+    </Space>
   );
 };