From 80e814f21545ac502bf83f675a351ccb03e5a650 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Sun, 10 Nov 2024 22:27:37 +0800
Subject: [PATCH] improve(design): Table empty min-height set to 360px

---
 .../__snapshots__/index.test.tsx.snap         | 95 +++++++++++--------
 packages/design/src/table/demo/empty.tsx      | 40 ++++++++
 packages/design/src/table/index.md            |  2 +
 packages/design/src/table/index.tsx           | 16 +++-
 packages/design/src/table/style/index.ts      | 11 +++
 5 files changed, 125 insertions(+), 39 deletions(-)
 create mode 100644 packages/design/src/table/demo/empty.tsx

diff --git a/packages/design/src/table/__tests__/__snapshots__/index.test.tsx.snap b/packages/design/src/table/__tests__/__snapshots__/index.test.tsx.snap
index d9d7415c2..d741544a0 100644
--- a/packages/design/src/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/design/src/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -495,51 +495,72 @@ exports[`Table > default empty should work 1`] = `
                     colspan="3"
                   >
                     <div
-                      class="ant-empty ant-empty-normal"
+                      class="ant-table-empty-wrapper"
                     >
                       <div
-                        class="ant-empty-image"
+                        class="ant-empty ant-empty ant-empty-small"
                       >
-                        <svg
-                          height="41"
-                          viewBox="0 0 64 41"
-                          width="64"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="ant-empty-image"
                         >
-                          <title>
-                            No data
-                          </title>
-                          <g
-                            fill="none"
-                            fill-rule="evenodd"
-                            transform="translate(0 1)"
+                          <svg
+                            height="56px"
+                            version="1.1"
+                            viewBox="0 0 56 56"
+                            width="56px"
+                            xmlns="http://www.w3.org/2000/svg"
                           >
-                            <ellipse
-                              cx="32"
-                              cy="33"
-                              fill="#f5f5f5"
-                              rx="32"
-                              ry="7"
-                            />
                             <g
-                              fill-rule="nonzero"
-                              stroke="#d9d9d9"
+                              fill="none"
+                              fill-rule="evenodd"
+                              stroke="none"
+                              stroke-width="1"
                             >
-                              <path
-                                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                              />
-                              <path
-                                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                                fill="#fafafa"
-                              />
+                              <g
+                                fill-rule="nonzero"
+                                transform="translate(4.2, 4.2)"
+                              >
+                                <rect
+                                  fill="#CDD5E4"
+                                  height="29.176"
+                                  rx="4.03"
+                                  width="37.121"
+                                  x="5.495"
+                                  y="0"
+                                />
+                                <rect
+                                  fill="#F8F8F8"
+                                  height="1.652"
+                                  rx="0.826"
+                                  width="25.046"
+                                  x="11.452"
+                                  y="5.257"
+                                />
+                                <rect
+                                  fill="#F8F8F8"
+                                  height="1.652"
+                                  rx="0.826"
+                                  width="16.681"
+                                  x="11.452"
+                                  y="10.997"
+                                />
+                                <path
+                                  d="M45.143,48.083 L2.821,48.083 C1.267,48.083 0,46.823 0,45.262 L0,21.028 C0,19.474 1.26,18.207 2.821,18.207 L19.264,18.207 C20.216,18.207 21.098,18.683 21.623,19.481 L23.149,21.798 C23.667,22.589 24.556,23.072 25.508,23.072 L45.15,23.072 C46.704,23.072 47.971,24.332 47.971,25.893 L47.971,45.262 C47.971,46.816 46.711,48.083 45.15,48.083 L45.143,48.083 Z"
+                                  fill="#F3F6FC"
+                                />
+                              </g>
                             </g>
-                          </g>
-                        </svg>
-                      </div>
-                      <div
-                        class="ant-empty-description"
-                      >
-                        No data
+                          </svg>
+                        </div>
+                        <div
+                          class="ant-empty-description"
+                        >
+                          <div
+                            class="ant-empty-description-content"
+                          >
+                            No data
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </td>
diff --git a/packages/design/src/table/demo/empty.tsx b/packages/design/src/table/demo/empty.tsx
new file mode 100644
index 000000000..34308ef93
--- /dev/null
+++ b/packages/design/src/table/demo/empty.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Divider, Table } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: '住址',
+      dataIndex: 'address',
+      key: 'address',
+    },
+  ];
+
+  return (
+    <>
+      <Divider>Empty Table</Divider>
+      <Table columns={columns} dataSource={[]} />
+      <Divider>Nested Empty Table</Divider>
+      <Table
+        columns={columns}
+        expandable={{
+          expandedRowRender: () => <Table columns={columns} dataSource={[]} />,
+          defaultExpandedRowKeys: ['0'],
+        }}
+        dataSource={[{ key: '0', name: '胡彦斌', age: 32, address: `西湖区湖底公园` }]}
+      />
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/table/index.md b/packages/design/src/table/index.md
index 88846780f..e39bd6fa6 100644
--- a/packages/design/src/table/index.md
+++ b/packages/design/src/table/index.md
@@ -42,6 +42,8 @@ nav:
 
 <code src="./demo/card-table.tsx" title="和 Card 组合使用"></code>
 
+<code src="./demo/empty.tsx" title="空状态"></code>
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/design/src/table/index.tsx b/packages/design/src/table/index.tsx
index cd3ffb64a..422545626 100644
--- a/packages/design/src/table/index.tsx
+++ b/packages/design/src/table/index.tsx
@@ -10,6 +10,7 @@ import type { ReactElement, ReactNode } from 'react';
 import React, { useContext, useEffect, useState } from 'react';
 import ConfigProvider from '../config-provider';
 import Typography from '../typography';
+import Empty from '../empty';
 import useStyle from './style';
 import type { AnyObject } from '../_util/type';
 import useDefaultPagination from './hooks/useDefaultPagination';
@@ -61,7 +62,11 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
   const pagination = useDefaultPagination(customPagination);
 
   const { getPrefixCls, locale, table } = useContext(ConfigProvider.ConfigContext);
-  const { batchOperationBar, ...restLocale } = {
+  const {
+    batchOperationBar,
+    emptyText = <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />,
+    ...restLocale
+  } = {
     ...customLocale,
     batchOperationBar: {
       ...enUS.Table?.batchOperationBar,
@@ -206,7 +211,14 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
       ref={ref}
       prefixCls={customizePrefixCls}
       className={tableCls}
-      locale={restLocale}
+      locale={{
+        ...restLocale,
+        emptyText: (
+          <div className={`${prefixCls}-empty-wrapper`}>
+            {typeof emptyText === 'function' ? emptyText() : emptyText}
+          </div>
+        ),
+      }}
       columns={newColumns}
       rowSelection={
         rowSelection
diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts
index 134b083ca..1b9156c9b 100644
--- a/packages/design/src/table/style/index.ts
+++ b/packages/design/src/table/style/index.ts
@@ -82,6 +82,13 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
             borderRadius: borderRadiusLG,
           },
         },
+        // empty wrapper style
+        [`${componentCls}-empty-wrapper`]: {
+          minHeight: 360,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
         // 嵌套子表格样式
         [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
           // 调整嵌套子表格的间距
@@ -100,6 +107,10 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
               borderRadius: borderRadiusLG,
             },
           },
+          // empty wrapper style
+          [`${componentCls}-empty-wrapper`]: {
+            minHeight: 'auto',
+          },
         },
       },
     },