Match-id-76e847694efa871d9b2bb281012e3ba581f963f8

libs/extension/src/components/ComponentInfo.tsx

@@ -22,24 +22,29 @@ type IAttr = {
   indentation: number;
 }
 
-function ComponentAttr({ name, attr }: { name: string, attr: IAttr[] }) {
-  const [collapsedNode, setCollapsedNode] = useState(new Set());
-  const handleCollapse = (index: number) => {
-    const newSet = new Set<number>();
-    collapsedNode.forEach(value => {
-      newSet.add(value);
+function collapseAllNodes(attrs: IAttr[]) {
+  return attrs.filter((item, index) => {
+    const nextItem = attrs[index + 1];
+    return nextItem ? nextItem.indentation - item.indentation > 0 : false;
   });
-    if (newSet.has(index)) {
-      newSet.delete(index);
-    } else {
-      newSet.add(index);
 }
-    setCollapsedNode(newSet);
+
+function ComponentAttr({ name, attrs }: { name: string, attrs: IAttr[] }) {
+  const [collapsedNode, setCollapsedNode] = useState(collapseAllNodes(attrs));
+  const handleCollapse = (item: IAttr) => {
+    const nodes = [...collapsedNode];
+    const i = nodes.indexOf(item);
+    if (i === -1) {
+      nodes.push(item);
+    } else {
+      nodes.splice(i, 1);
+    }
+    setCollapsedNode(nodes);
   };
 
   const showAttr = [];
   let currentIndentation = null;
-  attr.forEach((item, index) => {
+  attrs.forEach((item, index) => {
     const indentation = item.indentation;
     if (currentIndentation !== null) {
       if (indentation > currentIndentation) {
@@ -48,11 +53,11 @@ function ComponentAttr({ name, attr }: { name: string, attr: IAttr[] }) {
         currentIndentation = null;
       }
     }
-    const nextItem = attr[index + 1];
+    const nextItem = attrs[index + 1];
     const hasChild = nextItem ? nextItem.indentation - item.indentation > 0 : false;
-    const isCollapsed = collapsedNode.has(index);
+    const isCollapsed = collapsedNode.includes(item);
     showAttr.push(
-      <div style={{ paddingLeft: item.indentation * 10 }} key={index} onClick={() => (handleCollapse(index))}>
+      <div style={{ paddingLeft: item.indentation * 10 }} key={index} onClick={() => (handleCollapse(item))}>
         <span className={styles.attrArrow}>{hasChild && <Triangle director={isCollapsed ? 'right' : 'down'} />}</span>
         <span className={styles.attrName}>{`${item.name}`}</span>
         {' :'}
@@ -95,10 +100,10 @@ export default function ComponentInfo({ name, attrs }: IComponentInfo) {
         </span>
       </div>
       <div className={styles.componentInfoMain}>
-        {context && <ComponentAttr name={'context'} attr={context} />}
-        {props && <ComponentAttr name={'props'} attr={props} />}
-        {state && <ComponentAttr name={'state'} attr={state} />}
-        {hooks && <ComponentAttr name={'hook'} attr={hooks} />}
+        {context && <ComponentAttr name={'context'} attrs={context} />}
+        {props && <ComponentAttr name={'props'} attrs={props} />}
+        {state && <ComponentAttr name={'state'} attrs={state} />}
+        {hooks && <ComponentAttr name={'hook'} attrs={hooks} />}
         <div className={styles.renderInfo}>
           rendered by
         </div>

libs/extension/src/components/FilterTree.ts

@@ -27,7 +27,7 @@ function expandItemParent(item: BaseType, data: BaseType[], collapsedNodes: Base
   const index = data.indexOf(item);
   let currentIndentation = item.indentation;
   // 不对原始数据进行修改
-  const newcollapsedNodes = [...collapsedNodes];
+  const newCollapsedNodes = [...collapsedNodes];
   for (let i = index - 1; i >= 0; i--) {
     const lastData = data[i];
     const lastIndentation = lastData.indentation;
@@ -35,13 +35,13 @@ function expandItemParent(item: BaseType, data: BaseType[], collapsedNodes: Base
     if (lastIndentation < currentIndentation) {
       // 更新缩进值，只找父节点的父节点，避免修改父节点的兄弟节点的展开状态
       currentIndentation = lastIndentation;
-      const cIndex = newcollapsedNodes.indexOf(lastData);
+      const cIndex = newCollapsedNodes.indexOf(lastData);
       if (cIndex !== -1) {
-        newcollapsedNodes.splice(cIndex, 1);
+        newCollapsedNodes.splice(cIndex, 1);
       }
     }
   }
-  return newcollapsedNodes;
+  return newCollapsedNodes;
 }
 
 type BaseType = {