Browse Source

支持子菜单

visuddhinanda 2 years ago
parent
commit
5d8a604d56
1 changed files with 22 additions and 3 deletions
  1. 22 3
      dashboard/src/components/corpus/TocPath.tsx

+ 22 - 3
dashboard/src/components/corpus/TocPath.tsx

@@ -1,8 +1,8 @@
 import { useNavigate, useSearchParams } from "react-router-dom";
-import { Breadcrumb, Popover, Tag, Typography } from "antd";
+import { Breadcrumb, MenuProps, Popover, Tag, Typography } from "antd";
 
 import PaliText from "../template/Wbw/PaliText";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { fullUrl } from "../../utils";
 
 export interface ITocPathNode {
@@ -12,6 +12,7 @@ export interface ITocPathNode {
   title: string;
   paliTitle?: string;
   level: number;
+  menu?: MenuProps["items"];
 }
 
 export declare type ELinkType = "none" | "blank" | "self";
@@ -23,6 +24,7 @@ interface IWidgetTocPath {
   channel?: string[];
   style?: React.CSSProperties;
   onChange?: Function;
+  onMenuClick?: Function;
 }
 const TocPathWidget = ({
   data = [],
@@ -31,16 +33,33 @@ const TocPathWidget = ({
   channel,
   style,
   onChange,
+  onMenuClick,
 }: IWidgetTocPath): JSX.Element => {
+  const [currData, setCurrData] = useState(data);
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+
+  console.log("data", data);
+  useEffect(() => setCurrData(data), [data]);
   const fullPath = (
     <Breadcrumb
       style={{ whiteSpace: "nowrap", width: "100%", fontSize: style?.fontSize }}
     >
-      {data.map((item, id) => {
+      {currData.map((item, id) => {
         return (
           <Breadcrumb.Item
+            menu={
+              item.menu
+                ? {
+                    items: item.menu,
+                    onClick: (e) => {
+                      if (typeof onMenuClick !== "undefined") {
+                        onMenuClick(e.key);
+                      }
+                    },
+                  }
+                : undefined
+            }
             onClick={(
               e: React.MouseEvent<
                 HTMLSpanElement | HTMLAnchorElement,