Match-id-56a1ac16ba7fc8bbbb7b37d9ff7b62600e952ae7

libs/extension/src/components/ComponentInfo.tsx

@@ -0,0 +1,108 @@
+import styles from './ComponentsInfo.less';
+import Eye from '../svgs/Eye';
+import Debug from '../svgs/Debug';
+import Copy from '../svgs/Copy';
+import Arrow from '../svgs/Arrow';
+import { useState } from 'horizon';
+
+type IComponentInfo = {
+  name: string;
+  attrs: {
+    props?: IAttr[];
+    context?: IAttr[];
+    state?: IAttr[];
+    hooks?: IAttr[];
+  }
+};
+
+type IAttr = {
+  name: string;
+  type: string;
+  value: string | boolean;
+  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);
+    });
+    if (newSet.has(index)) {
+      newSet.delete(index);
+    } else {
+      newSet.add(index);
+    }
+    setCollapsedNode(newSet);
+  }
+
+  const showAttr = [];
+  let currentIndentation = null;
+  attr.forEach((item, index) => {
+    const indentation = item.indentation;
+    if (currentIndentation !== null) {
+      if (indentation > currentIndentation) {
+        return;
+      } else {
+        currentIndentation = null;
+      }
+    }
+    const nextItem = attr[index + 1];
+    const hasChild = nextItem ? nextItem.indentation - item.indentation > 0 : false;
+    const isCollapsed = collapsedNode.has(index);
+    showAttr.push(
+      <div style={{ paddingLeft: item.indentation * 10 }} key={index} onClick={() => (handleCollapse(index))}>
+        <span className={styles.attrArrow}>{hasChild && <Arrow director={isCollapsed ? 'right' : 'down'} />}</span>
+        <span className={styles.attrName}>{`${item.name}`}</span>
+        {' :'}
+        <span className={styles.attrValue}>{item.value}</span>
+      </div>
+    );
+    if (isCollapsed) {
+      currentIndentation = indentation;
+    }
+  });
+
+  return (
+    <div className={styles.attrContainer}>
+      <div className={styles.attrHead}>
+        <span className={styles.attrType}>{name}</span>
+        <span className={styles.attrCopy}>
+          <Copy />
+        </span>
+      </div>
+      <div className={styles.attrDetail}>
+        {showAttr}
+      </div>
+    </div>
+  )
+}
+
+export default function ComponentInfo({ name, attrs }: 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>
+      </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} />}
+        <div className={styles.renderInfo}>
+          rendered by
+        </div>
+      </div>
+    </div>
+  )
+}

libs/extension/src/components/ComponentsInfo.less

@@ -0,0 +1,91 @@
+@import 'assets.less';
+
+.infoContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+
+  .componentInfoHead {
+    flex: 0 0 @top-height;
+    display: flex;
+    align-items: center;
+    border-bottom: @divider-style;
+
+    .name {
+      flex: 1 1 0;
+      padding: 0 1rem 0 1rem;
+    }
+
+    .eye {
+      flex: 0 0 1rem;
+      padding-right: 1rem;
+    }
+
+    .debug {
+      flex: 0 0 1rem;
+      padding-right: 1rem;
+    }
+  }
+
+
+  .componentInfoMain {
+    overflow-y: auto;
+
+    :last-child {
+      border-bottom: unset;
+    }
+
+    :first-child {
+      padding: unset;
+    }
+
+    >div {
+      border-bottom: @divider-style;
+      padding: 0.5rem
+    }
+
+    .attrContainer {
+      flex: 0 0;
+
+      .attrHead {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0.5rem 0.5rem 0 0.5rem;
+
+        .attrType {
+          flex: 1 1 0;
+        }
+
+
+        .attrCopy {
+          flex: 0 0 1rem;
+          padding-right: 1rem;
+        }
+      }
+
+
+      .attrDetail {
+        padding-bottom: 0.5rem;
+        .attrArrow {
+          color: @arrow-color;
+          width: 12px;
+          display: inline-block;
+        }
+
+        .attrName {
+          color: @attr-name-color;
+        }
+
+        .attrValue {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .renderInfo {
+      flex: 1 1 0;
+    }
+  }
+}