Match-id-527aac42c8125a83b35e3ab8d4307eacc69da99a

libs/extension/src/components/ComponentInfo.tsx

@@ -18,7 +18,7 @@ type IComponentInfo = {
   onClickParent: (item: IData) => void;
 };
 
-type IAttr = {
+export type IAttr = {
   name: string;
   type: string;
   value: string | boolean;

libs/extension/src/components/ComponentsInfo.less

@@ -36,13 +36,8 @@
       border-bottom: unset;
     }
 
-    >:first-child {
-      padding: unset;
-    }
-
     >div {
       border-bottom: @divider-style;
-      padding: 0.5rem
     }
 
     .attrContainer {

libs/extension/src/components/ResizeEvent.ts

@@ -60,7 +60,7 @@ export function addResizeListener(element: any, fn: any) {
     observer.data = 'about:blank';
     observer.onload = loadObserver;
     observer.type = 'text/html';
-    observer.__observeElement__ = element;
+    observer['__observeElement__'] = element;
     element.__observer__ = observer;
     element.appendChild(observer);
   } else {

libs/extension/src/components/SizeObserver.tsx

@@ -4,8 +4,8 @@ import { addResizeListener, removeResizeListener } from './ResizeEvent';
 
 export function SizeObserver(props) {
   const { children, ...rest } = props;
-  const containerRef = useRef();
-  const [size, setSize] = useState();
+  const containerRef = useRef<HTMLDivElement>();
+  const [size, setSize] = useState<{width: number, height: number}>();
   const notifyChild = (element) => {
     setSize({
       width: element.offsetWidth,

libs/extension/src/components/VList.tsx

@@ -1,3 +1,5 @@
+// TODO:当前的 item 渲染效果较差，每次滚动所有项在数组中的位置都会发生变更。
+// 建议修改成选项增加减少时，未变更项在原数组中位置不变更
 
 import { useState, useRef, useEffect } from 'horizon';
 import styles from './VList.less';
@@ -30,7 +32,7 @@ export function VList<T extends { id: string }>(props: IProps<T>) {
   } = props;
   const [scrollTop, setScrollTop] = useState(data.indexOf(scrollToItem) * itemHeight);
   const renderInfoRef: { current: renderInfoType<T> } = useRef({ visibleItems: [], skipItemCountBeforeScrollItem: 0 });
-  const containerRef = useRef();
+  const containerRef = useRef<HTMLDivElement>();
   useEffect(() => {
     onRendered(renderInfoRef.current);
   });

libs/extension/src/components/VTree.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'horizon';
 import styles from './VTree.less';
 import Triangle from '../svgs/Triangle';
-import { createRegExp } from './../utils';
+import { createRegExp } from '../utils/regExpUtils';
 import { SizeObserver } from './SizeObserver';
 import { renderInfoType, VList } from './VList';
 
@@ -102,7 +102,7 @@ function VTree(props: {
   onRendered: (renderInfo: renderInfoType<IData>) => void,
   collapsedNodes?: IData[],
   onCollapseNode?: (item: IData[]) => void,
-  selectItem: IData[],
+  selectItem: IData,
   onSelectItem: (item: IData) => void,
 }) {
   const { data, highlightValue, scrollToItem, onRendered, onCollapseNode, onSelectItem } = props;

libs/extension/src/hooks/FilterTree.ts

@@ -13,7 +13,7 @@
 // 找到该节点的缩进值，和index值，在data中向上遍历，通过缩进值判断父节点
 
 import { useState, useRef } from 'horizon';
-import { createRegExp } from '../utils';
+import { createRegExp } from '../utils/regExpUtils';
 
 /**
  * 把节点的父节点从收起节点数组中删除，并返回新的收起节点数组

libs/extension/src/parser/parseAttr.ts

@@ -1,12 +1,8 @@
+import { IAttr } from "../components/ComponentInfo";
 
 // 将状态的值解析成固定格式
 export function parseAttr(rootAttr: any) {
-  const result: {
-    name: string,
-    type: string,
-    value: string,
-    indentation: number
-  }[] = [];
+  const result: IAttr[] = [];
   const indentation = 0;
   const parseSubAttr = (attr: any, parentIndentation: number, attrName: string) => {
     const stateType = typeof attr;