Merge pull request #1657 from visuddhinanda/agile

修复目录无法展开

dashboard/src/components/article/PaliTextToc.tsx

@@ -46,9 +46,10 @@ const PaliTextTocWidget = ({ book, para, channel, onSelect }: IWidget) => {
 
   return (
     <TocTree
+      randomKey={false}
       treeData={tocList}
-      expandedKeys={expandedKeys}
       selectedKeys={selectedKeys}
+      expandedKeys={expandedKeys}
       onSelect={(selectedKeys: Key[]) => {
         if (typeof onSelect !== "undefined") {
           onSelect(selectedKeys);

dashboard/src/components/article/TocTree.tsx

@@ -23,13 +23,14 @@ export interface TreeNodeData {
 
 function tocGetTreeData(
   listData: ListNodeData[],
-  active = ""
+  active = "",
+  randomKey = true
 ): [TreeNodeData[] | undefined, IIdMap[]] {
   let treeData: TreeNodeData[] = [];
   let tocActivePath: TreeNodeData[] = [];
   let treeParents = [];
   let rootNode: TreeNodeData = {
-    key: randomString(),
+    key: randomKey ? randomString() : "0",
     id: "0",
     title: "root",
     level: 0,
@@ -43,7 +44,7 @@ function tocGetTreeData(
   for (let index = 0; index < listData.length; index++) {
     const element = listData[index];
     let newNode: TreeNodeData = {
-      key: randomString(),
+      key: randomKey ? randomString() : element.key,
       id: element.key,
       title: element.title,
       level: element.level,
@@ -104,11 +105,13 @@ interface IWidgetTocTree {
   treeData?: ListNodeData[];
   expandedKeys?: Key[];
   selectedKeys?: Key[];
+  randomKey?: boolean;
   onSelect?: Function;
 }
 
 const TocTreeWidget = ({
   treeData,
+  randomKey = true,
   expandedKeys,
   selectedKeys,
   onSelect,
@@ -120,23 +123,29 @@ const TocTreeWidget = ({
 
   useEffect(() => {
     if (treeData && treeData.length > 0) {
-      const [data, idMap] = tocGetTreeData(treeData);
+      const [data, idMap] = tocGetTreeData(treeData, "", randomKey);
       setTree(data);
       setKeyIdMap(idMap);
-      console.log("create tree", treeData.length);
+      console.log(" tree data", data);
     } else {
       setTree([]);
     }
   }, [treeData]);
 
-  useEffect(() => setSelected(selectedKeys), [selectedKeys]);
-  useEffect(() => setExpanded(expandedKeys), [expandedKeys]);
+  useEffect(() => {
+    setSelected(selectedKeys);
+  }, [selectedKeys]);
+
+  useEffect(() => {
+    setExpanded(expandedKeys);
+  }, [expandedKeys]);
 
+  console.log("selected", selected);
   return (
     <Tree
       treeData={tree}
-      expandedKeys={expanded}
       selectedKeys={selected}
+      expandedKeys={expanded}
       autoExpandParent
       onExpand={(expandedKeys: Key[]) => {
         setExpanded(expandedKeys);

dashboard/src/components/studio/LeftSider.tsx

@@ -202,16 +202,23 @@ const LeftSiderWidget = ({ selectedKeys = "" }: IWidgetHeadBar) => {
 
   return (
     <Affix offsetTop={0}>
-      <Sider width={200} breakpoint="lg" className="site-layout-background">
-        <Menu
-          theme="light"
-          onClick={onClick}
-          defaultSelectedKeys={[selectedKeys]}
-          defaultOpenKeys={["basic", "advance", "collaboration"]}
-          mode="inline"
-          items={items}
-        />
-      </Sider>
+      <div
+        style={{
+          height: "100vh",
+          overflowY: "scroll",
+        }}
+      >
+        <Sider width={200} breakpoint="lg" className="site-layout-background">
+          <Menu
+            theme="light"
+            onClick={onClick}
+            defaultSelectedKeys={[selectedKeys]}
+            defaultOpenKeys={["basic", "advance", "collaboration"]}
+            mode="inline"
+            items={items}
+          />
+        </Sider>
+      </div>
     </Affix>
   );
 };

dashboard/src/pages/studio/article/edit.tsx

@@ -63,12 +63,21 @@ const Widget = () => {
         }}
       >
         <Affix offsetTop={0}>
-          <Article
-            active={true}
-            type={"article"}
-            articleId={parent}
-            mode="read"
-          />
+          <div
+            style={{
+              height: "100vh",
+              overflowY: "scroll",
+              paddingLeft: "0.5em",
+              paddingRight: "0.5em",
+            }}
+          >
+            <Article
+              active={true}
+              type={"article"}
+              articleId={parent}
+              mode="read"
+            />
+          </div>
         </Affix>
       </div>
     </div>