From 769a0ec178c2539444078fe6725753de2014d88b Mon Sep 17 00:00:00 2001 From: dengfuping Date: Mon, 11 Nov 2024 17:55:26 +0800 Subject: [PATCH] improve(ui): ProTable expandable, empty and footer style follow Table --- .../design/src/table/__tests__/index.test.tsx | 5 ++ packages/design/src/table/index.md | 2 +- .../ui/src/ProTable/__tests__/index.test.tsx | 5 ++ packages/ui/src/ProTable/demo/empty.tsx | 26 +++++++++++ packages/ui/src/ProTable/demo/expandable.tsx | 46 +++++++++++++++++++ packages/ui/src/ProTable/index.md | 4 ++ packages/ui/src/ProTable/index.tsx | 34 ++++++++++++-- 7 files changed, 117 insertions(+), 5 deletions(-) create mode 100644 packages/ui/src/ProTable/demo/empty.tsx create mode 100644 packages/ui/src/ProTable/demo/expandable.tsx diff --git a/packages/design/src/table/__tests__/index.test.tsx b/packages/design/src/table/__tests__/index.test.tsx index dda196ae5..91c23a301 100644 --- a/packages/design/src/table/__tests__/index.test.tsx +++ b/packages/design/src/table/__tests__/index.test.tsx @@ -39,6 +39,11 @@ describe('Table', () => { expect(asFragment().firstChild).toMatchSnapshot(); }); + it('render empty', () => { + const { container } = render(); + expect(container.querySelector('.ant-table-empty-wrapper')).toBeTruthy(); + }); + it('hideOnSinglePage should be false by default', () => { const { container, asFragment } = render(); expect(container.querySelector('.ant-pagination')).toBeTruthy(); diff --git a/packages/design/src/table/index.md b/packages/design/src/table/index.md index e39bd6fa6..c5141e238 100644 --- a/packages/design/src/table/index.md +++ b/packages/design/src/table/index.md @@ -51,7 +51,7 @@ nav: | pagination | 分页配置 | ReactNode | {} | - | | cancelText | 选择表格中 取消 按钮文案 | ReactNode | - | - | | collapseText | 选择表格中 收起 按钮文案 | ReactNode | - | - | -| openText | 选择表格中 展开 按钮文案 | ReactNode | - | - | +| openText | 选择表格中 `展开` 按钮文案 | ReactNode | - | - | | hiddenCancelBtn | 选择表格中是否隐藏取消按钮 | boolean | false | - | | locale | Table 默认文案设置，目前包括排序、过滤、空数据文案 | object | [默认值](https://github.com/ant-design/ant-design/blob/6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4/components/locale/zh_CN.tsx#L20-L37) | - | | toolOptionsRender | 渲染工具栏，支持返回一个 dom 数组，会自动增加 margin | (selectedRowKeys, selectedRows) => ReactNode[] | - | - | diff --git a/packages/ui/src/ProTable/__tests__/index.test.tsx b/packages/ui/src/ProTable/__tests__/index.test.tsx index c69670a16..6154c0eb4 100644 --- a/packages/ui/src/ProTable/__tests__/index.test.tsx +++ b/packages/ui/src/ProTable/__tests__/index.test.tsx @@ -51,6 +51,11 @@ describe('ProTable', () => { expect(asFragment().firstChild).toMatchSnapshot(); }); + it('render empty', () => { + const { container } = render(); + expect(container.querySelector('.ant-table-empty-wrapper')).toBeTruthy(); + }); + it('default pagination should work', () => { const { container, asFragment } = render(); // pagination.showTotal diff --git a/packages/ui/src/ProTable/demo/empty.tsx b/packages/ui/src/ProTable/demo/empty.tsx new file mode 100644 index 000000000..2a474ea86 --- /dev/null +++ b/packages/ui/src/ProTable/demo/empty.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { ProTable } from '@oceanbase/ui'; + +const App: React.FC = () => { + const columns = [ + { + title: '姓名', + dataIndex: 'name', + key: 'name', + }, + { + title: '年龄', + dataIndex: 'age', + key: 'age', + }, + { + title: '住址', + dataIndex: 'address', + key: 'address', + }, + ]; + + return ; +}; + +export default App; diff --git a/packages/ui/src/ProTable/demo/expandable.tsx b/packages/ui/src/ProTable/demo/expandable.tsx new file mode 100644 index 000000000..61e4a2cf0 --- /dev/null +++ b/packages/ui/src/ProTable/demo/expandable.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { ProTable } from '@oceanbase/ui'; + +const App: React.FC = () => { + const columns = [ + { + title: '姓名', + dataIndex: 'name', + key: 'name', + }, + { + title: '年龄', + dataIndex: 'age', + key: 'age', + }, + { + title: '住址', + dataIndex: 'address', + key: 'address', + }, + ]; + + const dataSource = []; + for (let i = 1; i < 100; i++) { + dataSource.push({ + key: i, + name: '胡彦斌' + i, + age: 32, + address: `西湖区湖底公园${i}号`, + }); + } + + return ( +

{record.address}

, + }} + /> + ); +}; + +export default App; diff --git a/packages/ui/src/ProTable/index.md b/packages/ui/src/ProTable/index.md index a2aa8dda9..a53391d3a 100644 --- a/packages/ui/src/ProTable/index.md +++ b/packages/ui/src/ProTable/index.md @@ -15,6 +15,10 @@ nav: + + + + ## API | 参数 | 说明 | 类型 | 默认值 | 版本 | diff --git a/packages/ui/src/ProTable/index.tsx b/packages/ui/src/ProTable/index.tsx index 7cc5376d9..804b2dab7 100644 --- a/packages/ui/src/ProTable/index.tsx +++ b/packages/ui/src/ProTable/index.tsx @@ -1,17 +1,22 @@ import React, { useContext } from 'react'; import { ProTable as AntProTable } from '@ant-design/pro-components'; import type { ProTableProps } from '@ant-design/pro-components'; +import { ConfigProvider, Empty, Table } from '@oceanbase/design'; import classNames from 'classnames'; -import { ConfigProvider, Table } from '@oceanbase/design'; +import { isEmpty } from 'lodash'; import useLightFilterStyle from '../LightFilter/style'; import useStyle from './style'; export { ProTableProps }; const ProTable: typeof AntProTable = ({ - pagination: customPagination, form, + expandable, + pagination: customPagination, + footer, + locale, prefixCls: customizePrefixCls, + tableClassName, className, ...restProps }) => { @@ -21,6 +26,13 @@ const ProTable: typeof AntProTable = ({ const tablePrefixCls = getPrefixCls('table', customizePrefixCls); const { wrapSSR: tableWrapSSR } = Table.useStyle(tablePrefixCls); const pagination = Table.useDefaultPagination(customPagination); + const tableCls = classNames( + { + [`${tablePrefixCls}-expandable`]: !isEmpty(expandable), + [`${tablePrefixCls}-has-footer`]: !!footer, + }, + tableClassName + ); // customize LightFilter style const lightFilterPrefixCls = getPrefixCls('pro-form-light-filter', customizePrefixCls); @@ -30,19 +42,33 @@ const ProTable: typeof AntProTable = ({ const { wrapSSR } = useStyle(prefixCls); const proTableCls = classNames(className); + const { emptyText = , ...restLocale } = + locale || {}; + return tableWrapSSR( lightFilterWrapSSR( wrapSSR( + {typeof emptyText === 'function' ? emptyText() : emptyText} + + ), + }} prefixCls={customizePrefixCls} + tableClassName={tableCls} className={proTableCls} {...restProps} />