Merge pull request #17 from easyops-cn/steve/table-style

fix(): sync table style with v2

Author: qiaofengxi

bricks/advanced/docs/eo-next-table.md

@@ -434,20 +434,15 @@
       - action: console.log
   properties:
     expandable:
-      columnWidth: 100px
       rowExpandable: <% DATA.rowData.key % 2 === 0 %>
-      expandIconBrick:
-        useBrick:
-          brick: eo-link
-          properties:
-            disabled: "<% !DATA.expandable %>"
-            textContent: "<% DATA.expanded ? '点击收起' : '点击展开' %>"
       expandedRowBrick:
         useBrick:
           brick: eo-next-table
           properties:
+            scrollConfig: false
             pagination: false
             bordered: true
+            rowKey: title
             columns:
               - dataIndex: title
                 key: title
@@ -459,21 +454,9 @@
                 key: operator
                 title: 操作
                 useBrick:
-                  - brick: div
-                    properties:
-                      style:
-                        display: flex
-                        gap: 4px
-                    children:
-                      - brick: eo-button
-                        properties:
-                          type: link
-                          textContent: 操作
-                        events:
-                          click:
-                            - action: message.info
-                              args:
-                                - <% `id:${DATA.rowData.id}` %>
+                  brick: eo-link
+                  properties:
+                    textContent: 操作
             dataSource:
               list: <% DATA.rowData.info %>
     pagination:
@@ -524,7 +507,7 @@
         - key: 3
           name: Sam
           age: 28
-          address: Guangzhou
+          address: Shenzhen
         - key: 4
           name: Bob
           age: 35
@@ -536,7 +519,7 @@
         - key: 6
           name: Sophia
           age: 20
-          address: Shanghai
+          address: Nanjing
         - key: 7
           name: Charlotte
           age: 33
@@ -548,7 +531,7 @@
         - key: 9
           name: Noah
           age: 38
-          address: Hainan
+          address: Wuhan
         - key: 10
           name: William
           age: 16

bricks/advanced/package.json

@@ -35,8 +35,8 @@
     "postpublish": "mv package.json.bak package.json"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.22.0",
-    "@ant-design/icons": "^5.5.1",
+    "@ant-design/cssinjs": "^1.22.1",
+    "@ant-design/icons": "^5.5.2",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
@@ -51,7 +51,7 @@
     "@react-pdf-viewer/core": "^3.12.0",
     "@react-pdf-viewer/default-layout": "^3.12.0",
     "@react-pdf-viewer/page-navigation": "^3.12.0",
-    "antd": "^5.22.1",
+    "antd": "^5.23.2",
     "classnames": "^2.3.2",
     "html2canvas": "^1.4.1",
     "immutability-helper": "^3.1.1",

bricks/advanced/src/next-table/Table.tsx

@@ -22,9 +22,12 @@ import { StyleProvider, createCache } from "@ant-design/cssinjs";
 import { useCurrentTheme } from "@next-core/react-runtime";
 import { RowSelectMethod, type SortOrder } from "antd/es/table/interface.js";
 import type { TableProps } from "antd/es/table";
+import { DownOutlined, RightOutlined } from "@ant-design/icons";
+import type { RenderExpandIconProps } from "rc-table/lib/interface.js";
 import { i18n } from "@next-core/i18n";
 import { useTranslation, initializeReactI18n } from "@next-core/i18n/react";
 import { Trans } from "react-i18next";
+import classNames from "classnames";
 import { K, NS, locales } from "./i18n.js";
 import {
   DEFAULT_PAGE,
@@ -297,7 +300,7 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
                 data={data}
               />
             ) : (
-              <>{col.title}</>
+              <>{col.title as string}</>
             );
           },
           onCell(record: RecordType) {
@@ -413,9 +416,22 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
             : theme.defaultAlgorithm,
         components: {
           Table: {
-            headerBorderRadius: 0,
+            headerBorderRadius:
+              "var(--eo-next-table-header-border-radius)" as unknown as number,
             headerSplitColor: "none",
-            ...(bordered ? { borderColor: "#f0f0f0" } : {}),
+            headerBg: "var(--antd-table-header-bg)",
+            headerSortActiveBg: "var(--antd-table-header-sort-active-bg)",
+            headerSortHoverBg: "var(--antd-table-header-sort-active-bg)",
+            bodySortBg: "var(--antd-table-header-overwrite-sort-td-active-bg)",
+            // cellPaddingBlock: 11,
+            // cellPaddingInline: 12,
+            // cellPaddingBlockMD: 8,
+            // cellPaddingInlineMD: 12,
+            // cellPaddingBlockSM: 4,
+            // cellPaddingInlineSM: 12,
+            ...(bordered
+              ? { borderColor: "var(--theme-gray-border-color)" }
+              : {}),
           },
         },
       }}
@@ -462,6 +478,10 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
                       total: dataSource?.total,
                       current: page,
                       pageSize: pageSize,
+                      showSizeChanger: {
+                        showSearch: false,
+                        variant: "borderless",
+                      },
                       showTotal: (total: number) => {
                         return (
                           <div className="pagination-wrapper">
@@ -558,12 +578,14 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
                           : true;
                       },
                       expandedRowRender: expandConfig.expandedRowBrick?.useBrick
-                        ? (record, index, indent, expanded) => {
+                        ? (record, index, indent /* , expanded */) => {
                             const data = {
                               rowData: record,
                               index,
                               indent,
-                              expanded,
+                              // Do not pass `expanded`, it changes every time the row is toggled,
+                              // thus the brick will be re-rendered every time as well.
+                              // expanded,
                             };
                             return (
                               <CacheUseBrickItem
@@ -597,7 +619,7 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
                               </span>
                             );
                           }
-                        : undefined,
+                        : DefaultExpandIcon,
                       onExpand: (expanded, record) => {
                         onRowExpand?.({ expanded, record });
                       },
@@ -662,3 +684,18 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
     </ConfigProvider>
   );
 });
+
+function DefaultExpandIcon({
+  expanded,
+  expandable,
+  onExpand,
+  record,
+}: RenderExpandIconProps<RecordType>) {
+  const IconComponent = expanded ? DownOutlined : RightOutlined;
+  return (
+    <IconComponent
+      className={classNames("expand-icon", { invisible: !expandable })}
+      onClick={(e) => expandable && onExpand(record, e)}
+    />
+  );
+}

bricks/advanced/src/next-table/host-context.css

@@ -1,20 +1,22 @@
 :root {
   --eo-table-head-cell-padding: 14px 12px;
-  --eo-table-body-cell-padding: 12px 12px;
+  --eo-table-body-cell-padding: 11px 12px;
 }
 
 html[data-ui="v8-2"] {
-  --eo-table-head-cell-padding: 8px 12px;
+  --eo-table-head-cell-padding: 9px 12px;
 
   eo-next-table[size="large"] {
-    --eo-table-body-cell-padding: 10px 12px;
+    --eo-table-body-cell-padding: 11px 12px;
   }
 
   eo-next-table[size="middle"] {
+    --eo-table-head-cell-padding: 7px 12px;
     --eo-table-body-cell-padding: 8px 12px;
   }
 
   eo-next-table[size="small"] {
+    --eo-table-head-cell-padding: 3px 12px;
     --eo-table-body-cell-padding: 4px 12px;
   }
 }

bricks/advanced/src/next-table/index.spec.tsx

@@ -1188,10 +1188,10 @@ describe("rowSelection", () => {
           // Not including halfChecked
           keys: [
             ...treeDataSource.list[0].student
-              .filter((v, i) => i !== 0)
+              .filter((_v, i) => i !== 0)
               .map((v) => v.key),
           ],
-          rows: [...treeDataSource.list[0].student.filter((v, i) => i !== 0)],
+          rows: [...treeDataSource.list[0].student.filter((_v, i) => i !== 0)],
           info: {
             type: "single",
           },
@@ -1286,15 +1286,19 @@ describe("expandable", () => {
 
     await act(async () => {
       fireEvent.click(
-        element.shadowRoot?.querySelectorAll(".expand-icon")[1] as Element
+        element.shadowRoot?.querySelectorAll(
+          ".expand-icon:not(.invisible)"
+        )[1] as Element
       );
     });
     expect(onRowExpand).not.toBeCalled();
     expect(onExpandedRowsChange).not.toBeCalled();
 
     await act(async () => {
       fireEvent.click(
-        element.shadowRoot?.querySelectorAll(".expand-icon")[0] as Element
+        element.shadowRoot?.querySelectorAll(
+          ".expand-icon:not(.invisible)"
+        )[0] as Element
       );
     });
     expect(
@@ -1318,7 +1322,9 @@ describe("expandable", () => {
 
     await act(async () => {
       fireEvent.click(
-        element.shadowRoot?.querySelectorAll(".expand-icon")[0] as Element
+        element.shadowRoot?.querySelectorAll(
+          ".expand-icon:not(.invisible)"
+        )[0] as Element
       );
     });
     expect(onRowExpand).lastCalledWith(
@@ -1366,7 +1372,7 @@ describe("expandable", () => {
     await act(async () => {
       fireEvent.click(
         element.shadowRoot?.querySelectorAll(
-          ".ant-table-row-expand-icon:not(.ant-table-row-expand-icon-spaced)"
+          ".expand-icon:not(.invisible)"
         )[1] as Element
       );
     });
@@ -1390,7 +1396,7 @@ describe("expandable", () => {
     await act(async () => {
       fireEvent.click(
         element.shadowRoot?.querySelectorAll(
-          ".ant-table-row-expand-icon:not(.ant-table-row-expand-icon-spaced)"
+          ".expand-icon:not(.invisible)"
         )[2] as Element
       );
     });
@@ -1452,7 +1458,7 @@ describe("expandable", () => {
     await act(async () => {
       fireEvent.click(
         element.shadowRoot?.querySelectorAll(
-          ".ant-table-row-expand-icon:not(.ant-table-row-expand-icon-spaced)"
+          ".expand-icon:not(.invisible)"
         )[1] as Element
       );
     });
@@ -1545,7 +1551,7 @@ describe("draggable", () => {
 });
 
 describe("define cell brick", () => {
-  const columns = new Array(3).fill(null).map((d, key) => ({
+  const columns = new Array(3).fill(null).map((_d, key) => ({
     dataIndex: key,
     key,
     title: key,

bricks/advanced/src/next-table/index.tsx

@@ -182,6 +182,7 @@ class EoNextTable extends ReactNextElement {
   /**
    * 是否显示边框
    */
+  @property({ type: Boolean })
   accessor bordered: boolean | undefined;
 
   /**