From 0a1a96c6773455883fcb69ed46791261f10ed08c Mon Sep 17 00:00:00 2001
From: CooperHash <2597905281@qq.com>
Date: Sun, 7 Apr 2024 11:38:48 +0800
Subject: [PATCH] feat: support lazy expand

---
 src/Body/BodyRow.tsx     |  1 +
 src/Body/ExpandedRow.tsx | 15 +++++++++++++--
 src/Table.tsx            |  1 +
 src/hooks/useResolve.ts  | 21 +++++++++++++++++++++
 4 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useResolve.ts

diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
index 8cee145b..faa2fefc 100644
--- a/src/Body/BodyRow.tsx
+++ b/src/Body/BodyRow.tsx
@@ -199,6 +199,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         cellComponent={cellComponent}
         colSpan={flattenColumns.length}
         isEmpty={false}
+        data={record}
       >
         {expandContent}
       </ExpandedRow>
diff --git a/src/Body/ExpandedRow.tsx b/src/Body/ExpandedRow.tsx
index 22cb4032..7fa8ba54 100644
--- a/src/Body/ExpandedRow.tsx
+++ b/src/Body/ExpandedRow.tsx
@@ -4,6 +4,7 @@ import Cell from '../Cell';
 import TableContext from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
 import type { CustomizeComponent } from '../interface';
+import useResolve from '../hooks/useResolve';
 
 export interface ExpandedRowProps {
   prefixCls: string;
@@ -14,6 +15,7 @@ export interface ExpandedRowProps {
   children: React.ReactNode;
   colSpan: number;
   isEmpty: boolean;
+  data?: any;
 }
 
 function ExpandedRow(props: ExpandedRowProps) {
@@ -30,8 +32,11 @@ function ExpandedRow(props: ExpandedRowProps) {
     expanded,
     colSpan,
     isEmpty,
+    data,
   } = props;
 
+  const { data: LazyData, resolve } = useResolve(data.load);
+
   const { scrollbarSize, fixHeader, fixColumn, componentWidth, horizonScroll } = useContext(
     TableContext,
     ['scrollbarSize', 'fixHeader', 'fixColumn', 'componentWidth', 'horizonScroll'],
@@ -60,11 +65,17 @@ function ExpandedRow(props: ExpandedRowProps) {
     <Component
       className={className}
       style={{
-        display: expanded ? null : 'none',
+        display: data.hasChildren
+          ? expanded && resolve
+            ? null
+            : 'none'
+          : expanded
+            ? null
+            : 'none',
       }}
     >
       <Cell component={cellComponent} prefixCls={prefixCls} colSpan={colSpan}>
-        {contentNode}
+        {data.hasChildren ? LazyData : contentNode}
       </Cell>
     </Component>
   );
diff --git a/src/Table.tsx b/src/Table.tsx
index 6476e727..2d961d83 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -103,6 +103,7 @@ export interface TableProps<RecordType = any>
   expandable?: ExpandableConfig<RecordType>;
   indentSize?: number;
   rowClassName?: string | RowClassName<RecordType>;
+  load?: (data: any) => void;
 
   // Additional Part
   footer?: PanelRender<RecordType>;
diff --git a/src/hooks/useResolve.ts b/src/hooks/useResolve.ts
new file mode 100644
index 00000000..be0adffe
--- /dev/null
+++ b/src/hooks/useResolve.ts
@@ -0,0 +1,21 @@
+import { useState, useEffect, useCallback } from 'react';
+
+function useResolve(loadFunction) {
+  const [data, setData] = useState(null);
+  const [resolve, setResolve] = useState(false);
+
+  const stableLoadFunction = useCallback(loadFunction, []);
+
+  useEffect(() => {
+    if (stableLoadFunction) {
+      stableLoadFunction().then(result => {
+        setData(result);
+        setResolve(true);
+      });
+    }
+  }, [stableLoadFunction]);
+
+  return { data, resolve };
+}
+
+export default useResolve;