💄 UI: optimize the style of nested tables (#617)

* 💄 UI: optimize the style of nested tables

* use father

.umirc.js

@@ -20,5 +20,7 @@ export default {
     },
   ],
   hash: true,
-  dynamicImport: {},
+  dynamicImport: {
+    loading: '@ant-design/pro-skeleton',
+  },
 };

docs/example.md

@@ -36,3 +36,7 @@ nav:
 ## 轮询
 
 <code src="./example/pollinga.tsx" />
+
+## 嵌套表格
+
+<code src="./example/nested-table.tsx" />

docs/example/nested-table.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
+
+const valueEnum = {
+  0: 'close',
+  1: 'running',
+  2: 'online',
+  3: 'error',
+};
+
+export interface TableListItem {
+  key: number;
+  name: string;
+  status: string;
+  updatedAt: number;
+  createdAt: number;
+  progress: number;
+  money: number;
+}
+const tableListDataSource: TableListItem[] = [];
+
+for (let i = 0; i < 1; i += 1) {
+  tableListDataSource.push({
+    key: i,
+    name: `TradeCode ${i}`,
+    status: valueEnum[Math.floor(Math.random() * 10) % 4],
+    updatedAt: Date.now() - Math.floor(Math.random() * 1000),
+    createdAt: Date.now() - Math.floor(Math.random() * 2000),
+    money: Math.floor(Math.random() * 2000) * i,
+    progress: Math.ceil(Math.random() * 100) + 1,
+  });
+}
+
+const columns: ProColumns<TableListItem>[] = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    valueType: 'index',
+    width: 80,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    initialValue: 'all',
+    width: 100,
+    filters: true,
+    valueEnum: {
+      all: { text: '全部', status: 'Default' },
+      close: { text: '关闭', status: 'Default' },
+      running: { text: '运行中', status: 'Processing' },
+      online: { text: '已上线', status: 'Success' },
+      error: { text: '异常', status: 'Error' },
+    },
+  },
+  {
+    title: '进度',
+    key: 'progress',
+    dataIndex: 'progress',
+    valueType: (item) => ({
+      type: 'progress',
+      status: item.status !== 'error' ? 'active' : 'exception',
+    }),
+    width: 200,
+  },
+  {
+    title: '更新时间',
+    key: 'since2',
+    width: 120,
+    dataIndex: 'createdAt',
+    valueType: 'date',
+  },
+];
+
+const expandedRowRender = () => {
+  const data = [];
+  for (let i = 0; i < 3; i += 1) {
+    data.push({
+      key: i,
+      date: '2014-12-24 23:12:00',
+      name: 'This is production name',
+      upgradeNum: 'Upgraded: 56',
+    });
+  }
+  return (
+    <ProTable
+      columns={[
+        { title: 'Date', dataIndex: 'date', key: 'date' },
+        { title: 'Name', dataIndex: 'name', key: 'name' },
+        {
+          title: 'Status',
+          key: 'state',
+        },
+        { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
+        {
+          title: 'Action',
+          dataIndex: 'operation',
+          key: 'operation',
+          render: () => [<a>Pause</a>, <a>Stop</a>],
+        },
+      ]}
+      headerTitle={false}
+      search={false}
+      options={false}
+      dataSource={data}
+      pagination={false}
+    />
+  );
+};
+
+export default () => {
+  const [dataSource, setDataSource] = useState<TableListItem[]>([]);
+  useEffect(() => {
+    setDataSource(tableListDataSource);
+  }, []);
+  return (
+    <ProTable<TableListItem>
+      columns={columns}
+      rowKey="key"
+      pagination={{
+        showSizeChanger: true,
+      }}
+      dataSource={dataSource}
+      expandable={{ expandedRowRender }}
+      dateFormatter="string"
+      headerTitle="嵌套表格"
+    />
+  );
+};

package.json

@@ -13,7 +13,7 @@
     "/dist"
   ],
   "scripts": {
-    "build": "father build && webpack",
+    "build": "father-build && webpack",
     "lint": "npm run lint-eslint && npm run lint:style && tsc --noEmit",
     "lint-eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
     "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./**/src ./tests && npm run lint:style",
@@ -23,7 +23,7 @@
     "site": "dumi build && gh-pages -d ./dist",
     "start": "dumi dev",
     "test:coverage": "umi-test --coverage",
-    "test": "npm run lint && father test"
+    "test": "npm run lint && umi-test"
   },
   "husky": {
     "hooks": {
@@ -53,6 +53,7 @@
     "use-merge-value": "^1.0.1"
   },
   "devDependencies": {
+    "@ant-design/pro-skeleton": "^1.0.0-beta.2",
     "@babel/core": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@babel/preset-env": "^7.8.3",
@@ -73,8 +74,8 @@
     "dumi": "^1.0.20",
     "enzyme": "^3.10.0",
     "enzyme-to-json": "^3.4.3",
-    "eslint": "7.3.1",
-    "father": "^2.29.3",
+    "eslint": "^7.3.1",
+    "father-build": "^1.18.1",
     "husky": "^4.2.5",
     "jsdom-global": "^3.0.2",
     "less-loader": "^6.0.0",
@@ -88,6 +89,7 @@
     "umi": "^3.1.2",
     "umi-plugin-githubpages": "^2.0.1",
     "umi-request": "^1.2.15",
+    "umi-test": "^1.9.6",
     "webpack": "^4.43.0",
     "webpack-bundle-analyzer": "^3.7.0",
     "webpack-cli": "^3.3.12"

src/Table.tsx

@@ -571,7 +571,7 @@ const ProTable = <T extends {}, U extends object>(
     pagination: propsPagination,
     actionRef,
     columns: propsColumns = [],
-    toolBarRender = () => [],
+    toolBarRender,
     onLoad,
     onRequestError,
     style,

src/component/toolBar/index.tsx

@@ -170,7 +170,7 @@ const ToolBar = <T, U = {}>({
   };
   return (
     <div className={className}>
-      <div className={`${className}-title`}>{headerTitle}</div>
+      {headerTitle && <div className={`${className}-title`}>{headerTitle}</div>}
       <div className={`${className}-option`}>
         <Space>
           {options && options.search && (

src/index.less

@@ -33,4 +33,15 @@
       font-size: 14px;
     }
   }
+
+  .@{ant-prefix}-table
+    .@{ant-prefix}-table-tbody
+    .@{ant-prefix}-table-wrapper:only-child
+    .@{ant-prefix}-table {
+    margin: 0;
+  }
+
+  .@{ant-prefix}-table.@{ant-prefix}-table-middle .@{pro-table-prefix-cls} {
+    margin: -12px -8px;
+  }
 }