页面加载时显示路径

dashboard/src/components/corpus/BookTreeList.tsx

@@ -1,49 +1,88 @@
 import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
-import { List, Breadcrumb, Card, Select, Space } from "antd";
+import { List, Breadcrumb, Card, Row, Col } from "antd";
+import { HomeOutlined } from "@ant-design/icons";
 
 import { PaliToEn } from "../../utils";
 import { get } from "../../request";
 import { IPaliBookListResponse } from "../api/Corpus";
+import TocStyleSelect from "./TocStyleSelect";
 
-const { Option } = Select;
-
+export interface IEventBookTreeOnchange {
+  path: string[];
+  tag: string[];
+}
+export interface ITocTree {
+  title: string;
+  dir: string;
+  key: string;
+  tag: string[];
+  path?: string[];
+  children: ITocTree[];
+}
+interface pathData {
+  to: string;
+  title: string;
+}
 interface IWidgetBookTreeList {
   root?: string;
   path?: string[];
   onChange?: Function;
 }
-export interface IEventBookTreeOnchange {
-  path: string[];
-  tag: string[];
-}
-const Widget = (prop: IWidgetBookTreeList) => {
-  let treeData: NewTree[] = [];
-  let currRoot = prop.root;
-  const defuaultData: NewTree[] = [];
-  const [currData, setCurrData] = useState(defuaultData);
+const Widget = ({ root, path, onChange }: IWidgetBookTreeList) => {
+  console.log("path", path);
+  let currRoot = root;
+  const [tocData, setTocData] = useState<ITocTree[]>([]);
+  const [currData, setCurrData] = useState<ITocTree[]>([]);
+  const [bookPath, setBookPath] = useState<pathData[]>([]);
 
-  const defaultPath: pathData[] = prop.path
-    ? prop.path.map((item) => {
-        return { to: item, title: item };
-      })
-    : [];
-  const [bookPath, setBookPath] = useState(defaultPath);
+  useEffect(() => {
+    const newPath: pathData[] = path
+      ? path.map((item) => {
+          return { to: item, title: item };
+        })
+      : [];
+    setBookPath(newPath);
+    //TODO 找到路径
+    const currPath = getListCurrRoot(tocData, newPath);
+    console.log("curr path", currPath);
+    setCurrData(currPath);
+  }, [path]);
 
   useEffect(() => {
-    if (prop.root) fetchBookTree(prop.root);
-  }, [prop.root]);
+    if (root) {
+      fetchBookTree(root);
+    }
+  }, [root]);
 
-  type NewTree = {
-    title: string;
-    dir: string;
-    key: string;
-    tag: string[];
-    children: NewTree[];
-  };
+  function getListCurrRoot(
+    allTocData: ITocTree[],
+    currPath: pathData[]
+  ): ITocTree[] {
+    let curr: ITocTree[];
+    if (allTocData.length > 0) {
+      curr = allTocData;
+    } else {
+      return [];
+    }
 
+    for (const itPath of currPath) {
+      let isFound = false;
+      for (const itAll of curr) {
+        if (itPath.to === itAll.dir) {
+          curr = itAll.children;
+          isFound = true;
+          break;
+        }
+      }
+      if (!isFound) {
+        return [];
+      }
+    }
+    return curr;
+  }
   function fetchBookTree(category: string) {
-    function treeMap(params: IPaliBookListResponse): NewTree {
+    function treeMap(params: IPaliBookListResponse): ITocTree {
       return {
         title: params.name,
         dir: PaliToEn(params.name),
@@ -57,23 +96,21 @@ const Widget = (prop: IWidgetBookTreeList) => {
 
     get<IPaliBookListResponse[]>(`/v2/palibook/${category}`).then((json) => {
       console.log("ajax", json);
-      treeData = json.map(treeMap);
-      setCurrData(treeData);
+      const treeData = json.map(treeMap);
+      setTocData(treeData);
+      const currPath = getListCurrRoot(treeData, bookPath);
+      console.log("curr path", currPath);
+      setCurrData(currPath);
     });
   }
 
-  interface pathData {
-    to: string;
-    title: string;
-  }
-
   function pushDir(dir: string, title: string, tag: string[]): void {
     const newPath: string =
       bookPath.length > 0 ? bookPath.slice(-1)[0].to + "-" + dir : dir;
     bookPath.push({ to: newPath, title: title });
     setBookPath(bookPath);
-    if (prop.onChange) {
-      prop.onChange({
+    if (typeof onChange !== "undefined") {
+      onChange({
         path: newPath.split("-"),
         tag: tag,
       });
@@ -88,28 +125,29 @@ const Widget = (prop: IWidgetBookTreeList) => {
   // TODO
   return (
     <>
-      <Space>
-        <Select
-          style={{ width: 90 }}
-          defaultValue={prop.root}
-          loading={false}
-          onChange={handleChange}
-        >
-          <Option value="defualt">Defualt</Option>
-          <Option value="cscd">CSCD</Option>
-        </Select>
-        <Breadcrumb>
-          {bookPath.map((item, id) => {
-            return (
-              <Breadcrumb.Item key={id}>
-                <Link to={`/palicanon/list/${currRoot}/${item.to}`}>
-                  {item.title}
-                </Link>
-              </Breadcrumb.Item>
-            );
-          })}
-        </Breadcrumb>
-      </Space>
+      <Row style={{ padding: 10 }}>
+        <Col xs={18} sm={24}>
+          <Breadcrumb>
+            <Breadcrumb.Item>
+              <Link to={`/palicanon/list/${currRoot}`}>
+                <HomeOutlined />
+              </Link>
+            </Breadcrumb.Item>
+            {bookPath.map((item, id) => {
+              return (
+                <Breadcrumb.Item key={id}>
+                  <Link to={`/palicanon/list/${currRoot}/${item.to}`}>
+                    {item.title}
+                  </Link>
+                </Breadcrumb.Item>
+              );
+            })}
+          </Breadcrumb>
+        </Col>
+        <Col xs={6} sm={0} style={{ textAlign: "right" }}>
+          <TocStyleSelect style={root} onChange={handleChange} />
+        </Col>
+      </Row>
       <Card>
         <List
           dataSource={currData}