Match-id-059b810a64127ac4b754b8a924dd931f129dafa2

libs/extension/src/components/ComponentInfo.tsx

@@ -4,6 +4,7 @@ import Debug from '../svgs/Debug';
 import Copy from '../svgs/Copy';
 import Triangle from '../svgs/Triangle';
 import { useState } from 'horizon';
+import { IData } from './VTree';
 
 type IComponentInfo = {
   name: string;
@@ -12,7 +13,9 @@ type IComponentInfo = {
     context?: IAttr[];
     state?: IAttr[];
     hooks?: IAttr[];
-  }
+  };
+  parents: IData[];
+  onClickParent: (item: IData) => void;
 };
 
 type IAttr = {
@@ -84,28 +87,38 @@ function ComponentAttr({ name, attrs }: { name: string, attrs: IAttr[] }) {
   );
 }
 
-export default function ComponentInfo({ name, attrs }: IComponentInfo) {
+export default function ComponentInfo({ name, attrs, parents, onClickParent }: IComponentInfo) {
   const { state, props, context, hooks } = attrs;
   return (
     <div className={styles.infoContainer} >
       <div className={styles.componentInfoHead}>
-        <span className={styles.name}>
-          {name}
-        </span>
-        <span className={styles.eye} >
-          <Eye />
-        </span>
-        <span className={styles.debug}>
-          <Debug />
-        </span>
+        {name && <>
+          <span className={styles.name}>
+            {name}
+          </span>
+          <span className={styles.eye} >
+            <Eye />
+          </span>
+          <span className={styles.debug}>
+            <Debug />
+          </span>
+        </>}
       </div>
       <div className={styles.componentInfoMain}>
         {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 className={styles.parentsInfo}>
+          {name && <div>
+            parents: {
+              parents.map(item => (<button
+              className={styles.parent}
+                onClick={() => (onClickParent(item))}>
+                {item.name}
+              </button>))
+            }
+          </div>}
         </div>
       </div>
     </div>

libs/extension/src/components/ComponentsInfo.less

@@ -32,11 +32,11 @@
   .componentInfoMain {
     overflow-y: auto;
 
-    :last-child {
+    >:last-child {
       border-bottom: unset;
     }
 
-    :first-child {
+    >:first-child {
       padding: unset;
     }
 
@@ -57,15 +57,11 @@
         .attrType {
           flex: 1 1 0;
         }
-
-
         .attrCopy {
           flex: 0 0 1rem;
           padding-right: 1rem;
         }
       }
-
-
       .attrDetail {
         padding-bottom: 0.5rem;
 
@@ -84,9 +80,19 @@
         }
       }
     }
+  }
 
-    .renderInfo {
-      flex: 1 1 0;
+  .parentsInfo {
+    flex: 1 1 0;
+    .parent {
+      display: block;
+      cursor: pointer;
+      text-align: left;
+      color: @component-name-color;
+      width: 100%;
+      &:hover {
+        background-color: @select-color;
+      }
     }
   }
 }

libs/extension/src/components/VTree.tsx

@@ -102,13 +102,20 @@ function VTree(props: {
   onRendered: (renderInfo: renderInfoType<IData>) => void,
   collapsedNodes?: IData[],
   onCollapseNode?: (item: IData[]) => void,
+  selectItem: IData[],
+  onSelectItem: (item: IData) => void,
 }) {
-  const { data, highlightValue, scrollToItem, onRendered, onCollapseNode } = props;
+  const { data, highlightValue, scrollToItem, onRendered, onCollapseNode, onSelectItem } = props;
   const [collapseNode, setCollapseNode] = useState(props.collapsedNodes || []);
-  const [selectItem, setSelectItem] = useState(scrollToItem);
+  const [selectItem, setSelectItem] = useState(props.selectItem);
   useEffect(() => {
     setSelectItem(scrollToItem);
   }, [scrollToItem]);
+  useEffect(() => {
+    if (props.selectItem !== selectItem) {
+      setSelectItem(props.selectItem);
+    }
+  }, [props.selectItem]);
   useEffect(() => {
     setCollapseNode(props.collapsedNodes || []);
   }, [props.collapsedNodes]);
@@ -128,6 +135,9 @@ function VTree(props: {
   };
   const handleClickItem = (item: IData) => {
     setSelectItem(item);
+    if (onSelectItem) {
+      onSelectItem(item);
+    }
   };
 
   let currentCollapseIndentation: null | number = null;
@@ -159,7 +169,7 @@ function VTree(props: {
             width={width}
             height={height}
             itemHeight={18}
-            scrollToItem={scrollToItem}
+            scrollToItem={selectItem}
             filter={filter}
             onRendered={onRendered}
           >

libs/extension/src/panel/App.less

@@ -7,6 +7,12 @@
   font-size: @common-font-size;
 }
 
+button {
+  border: none;
+  background: none;
+  padding: 0;
+}
+
 .left {
   flex: 7;
   display: flex;
@@ -41,10 +47,7 @@
     }
 
     .searchAction {
-      padding: 0;
       flex: 0 0 1rem;
-      border: none;
-      background: none;
       height: 1rem;
       color: @arrow-color;
       &:hover{

libs/extension/src/panel/App.tsx

@@ -34,23 +34,27 @@ const parseVNodeData = (rawData) => {
   return data;
 };
 
+const getParents = (item: IData | null, parsedVNodeData: IData[]) => {
+  const parents: IData[] = [];
+  if (item) {
+    const index = parsedVNodeData.indexOf(item);
+    let indentation = item.indentation;
+    for (let i = index; i >= 0; i--) {
+      const last = parsedVNodeData[i];
+      const lastIndentation = last.indentation;
+      if (lastIndentation < indentation) {
+        parents.push(last);
+        indentation = lastIndentation;
+      }
+    }
+  }
+  return parents;
+};
+
 function App() {
   const [parsedVNodeData, setParsedVNodeData] = useState([]);
-  const [componentInfo, setComponentInfo] = useState({ name: null, attrs: {} });
-
-  useEffect(() => {
-    if (isDev) {
-      const parsedData = parseVNodeData(mockParsedVNodeData);
-      setParsedVNodeData(parsedData);
-      setComponentInfo({
-        name: 'Demo',
-        attrs: {
-          state: parsedMockState,
-          props: parsedMockState,
-        },
-      });
-    }
-  }, []);
+  const [componentAttrs, setComponentAttrs] = useState({});
+  const [selectComp, setSelectComp] = useState(null);
 
   const {
     filterValue,
@@ -65,13 +69,37 @@ function App() {
     setCollapsedNodes,
   } = FilterTree({ data: parsedVNodeData });
 
+  useEffect(() => {
+    if (isDev) {
+      const parsedData = parseVNodeData(mockParsedVNodeData);
+      setParsedVNodeData(parsedData);
+      setComponentAttrs({
+        state: parsedMockState,
+        props: parsedMockState,
+      });
+    }
+  }, []);
+
   const handleSearchChange = (str: string) => {
     setFilterValue(str);
   };
 
+  const handleSelectComp = (item: IData) => {
+    setComponentAttrs({
+      state: parsedMockState,
+      props: parsedMockState,
+    });
+    setSelectComp(item);
+  };
+
+  const handleClickParent = (item: IData) => {
+    setSelectComp(item);
+  };
+
   const onRendered = (info) => {
     setShowItems(info.visibleItems);
   };
+  const parents = getParents(selectComp, parsedVNodeData);
 
   return (
     <div className={styles.app}>
@@ -99,11 +127,17 @@ function App() {
             onRendered={onRendered}
             collapsedNodes={collapsedNodes}
             onCollapseNode={setCollapsedNodes}
-            scrollToItem={currentItem} />
+            scrollToItem={currentItem}
+            selectItem={selectComp}
+            onSelectItem={handleSelectComp} />
         </div>
       </div>
       <div className={styles.right}>
-        <ComponentInfo name={componentInfo.name} attrs={componentInfo.attrs} />
+        <ComponentInfo
+          name={selectComp ? selectComp.name: null}
+          attrs={selectComp ? componentAttrs: {}}
+          parents={parents}
+          onClickParent={handleClickParent} />
       </div>
     </div>
   );