style: area chart

src/components/seal-table/components/row-children.tsx

@@ -3,6 +3,7 @@ import '../styles/row-children.less';
 
 const RowChildren = (props: any) => {
   const { children } = props;
+
   return <div className="row-children">{children}</div>;
 };
 

src/components/seal-table/components/table-row.tsx

@@ -33,6 +33,7 @@ const TableRow: React.FC<
   const [loading, setLoading] = useState(false);
   const pollTimer = useRef<any>(null);
   const chunkRequestRef = useRef<any>(null);
+  const childrenRendered = useRef<any>(null);
 
   const { updateChunkedList } = useUpdateChunkedList(childrenData, {
     setDataList: setChildrenData
@@ -58,6 +59,10 @@ const TableRow: React.FC<
     };
   }, []);
 
+  const renderChildrenData = () => {
+    return renderChildren?.(childrenData);
+  };
+
   const handlePolling = async () => {
     if (pollingChildren) {
       try {
@@ -110,12 +115,12 @@ const TableRow: React.FC<
     setExpanded(!expanded);
     onExpand?.(!expanded, record);
 
+    chunkRequestRef.current?.current?.cancel?.();
     if (pollTimer.current) {
       clearInterval(pollTimer.current);
     }
 
     if (expanded) {
-      chunkRequestRef.current?.current?.cancel?.();
       return;
     }
 
@@ -124,9 +129,6 @@ const TableRow: React.FC<
       pollTimer.current = setInterval(() => {
         handlePolling();
       }, 1000);
-    } else if (watchChildren) {
-      await handleLoadChildren();
-      createChunkRequest();
     } else {
       handleLoadChildren();
     }
@@ -146,6 +148,12 @@ const TableRow: React.FC<
     }
   };
 
+  useEffect(() => {
+    if (childrenData.length) {
+      createChunkRequest();
+    }
+  }, [childrenData]);
+
   const renderRowPrefix = () => {
     if (expandable && rowSelection) {
       return (
@@ -220,11 +228,7 @@ const TableRow: React.FC<
         {expanded && (
           <div className="expanded-row">
             <Spin spinning={loading}>
-              {childrenData.length ? (
-                renderChildren?.(childrenData)
-              ) : (
-                <Empty></Empty>
-              )}
+              {childrenData.length ? renderChildrenData() : <Empty></Empty>}
             </Spin>
           </div>
         )}

src/components/seal-table/index.tsx

@@ -118,7 +118,11 @@ const SealTable: React.FC<SealTableProps> = (props) => {
 
   const renderContent = () => {
     if (!props.dataSource.length) {
-      return <Empty></Empty>;
+      return (
+        <div className="empty-wrapper">
+          <Empty></Empty>
+        </div>
+      );
     }
     return (
       <div className="seal-table-content">

src/components/seal-table/styles/index.less

@@ -74,4 +74,11 @@
     margin-top: 20px;
     min-height: 100px;
   }
+
+  .empty-wrapper {
+    display: flex;
+    min-height: 160px;
+    justify-content: center;
+    align-items: center;
+  }
 }