fix(design): Table default empty should work

oceanbase · Jul 10, 2024 · f789023 · f789023
1 parent 85833a4
commit f789023
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 2 deletions.
diff --git a/packages/design/src/table/__tests__/__snapshots__/index.test.tsx.snap b/packages/design/src/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -437,6 +437,123 @@ exports[`Table > ConfigProvider pagination should work 1`] = `
 </div>
 `;
 
+exports[`Table > default empty should work 1`] = `
+<div
+  class="ant-table-wrapper"
+>
+  <div
+    class="ant-spin-nested-loading"
+  >
+    <div
+      class="ant-spin-container"
+    >
+      <div
+        class="ant-table ant-table-empty"
+      >
+        <div
+          class="ant-table-container"
+        >
+          <div
+            class="ant-table-content"
+          >
+            <table
+              style="table-layout: auto;"
+            >
+              <colgroup />
+              <thead
+                class="ant-table-thead"
+              >
+                <tr>
+                  <th
+                    class="ant-table-cell"
+                    scope="col"
+                  >
+                    Name
+                  </th>
+                  <th
+                    class="ant-table-cell"
+                    scope="col"
+                  >
+                    Age
+                  </th>
+                  <th
+                    class="ant-table-cell"
+                    scope="col"
+                  >
+                    Address
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="ant-table-tbody"
+              >
+                <tr
+                  class="ant-table-placeholder"
+                >
+                  <td
+                    class="ant-table-cell"
+                    colspan="3"
+                  >
+                    <div
+                      class="ant-empty ant-empty-normal"
+                    >
+                      <div
+                        class="ant-empty-image"
+                      >
+                        <svg
+                          height="41"
+                          viewBox="0 0 64 41"
+                          width="64"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <title>
+                            Simple Empty
+                          </title>
+                          <g
+                            fill="none"
+                            fill-rule="evenodd"
+                            transform="translate(0 1)"
+                          >
+                            <ellipse
+                              cx="32"
+                              cy="33"
+                              fill="#f5f5f5"
+                              rx="32"
+                              ry="7"
+                            />
+                            <g
+                              fill-rule="nonzero"
+                              stroke="#d9d9d9"
+                            >
+                              <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>
+                          </g>
+                        </svg>
+                      </div>
+                      <div
+                        class="ant-empty-description"
+                      >
+                        No data
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Table > default pagination should work 1`] = `
 <div
   class="ant-table-wrapper"

diff --git a/packages/design/src/table/__tests__/index.test.tsx b/packages/design/src/table/__tests__/index.test.tsx
@@ -83,6 +83,13 @@ describe('Table', () => {
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
+  it('default empty should work', () => {
+    const { container, asFragment } = render(<TableTest dataSource={[]} />);
+    expect(container.querySelector('.ant-empty-image')).toBeTruthy();
+    expect(container.querySelector('.ant-empty-description')).toBeTruthy();
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+
   it('ConfigProvider pagination should work', () => {
     const { container, asFragment } = render(
       <ConfigProvider

diff --git a/packages/design/src/table/index.tsx b/packages/design/src/table/index.tsx
@@ -62,8 +62,6 @@ function Table<T>(props: TableProps<T>, ref: React.Ref<Reference>) {
 
   const { getPrefixCls, locale, table } = useContext(ConfigProvider.ConfigContext);
   const { batchOperationBar, ...restLocale } = {
-    ...enUS.Table,
-    ...locale?.Table,
     ...customLocale,
     batchOperationBar: {
       ...enUS.Table?.batchOperationBar,