diff --git a/packages/design/src/table/__tests__/index.test.tsx b/packages/design/src/table/__tests__/index.test.tsx index 5d5366ec0..991701bb7 100644 --- a/packages/design/src/table/__tests__/index.test.tsx +++ b/packages/design/src/table/__tests__/index.test.tsx @@ -60,6 +60,20 @@ describe('Table', () => { expect(asFragment().firstChild).toMatchSnapshot(); }); + it('row selection should work', () => { + const { container, asFragment } = render( + + ); + // selection column + expect(container.querySelector('.ant-table-selection-column')).toBeTruthy(); + // batch operation bar + expect(container.querySelector('.ant-table-batch-operation-bar')).toBeTruthy(); + }); + it('default pagination should work', () => { const { container, asFragment } = render(); // pagination.showTotal diff --git a/packages/design/src/table/demo/row-selection.tsx b/packages/design/src/table/demo/row-selection.tsx index 67a8b4d26..e42b5e103 100644 --- a/packages/design/src/table/demo/row-selection.tsx +++ b/packages/design/src/table/demo/row-selection.tsx @@ -2,7 +2,7 @@ import { Button, Table } from '@oceanbase/design'; import React, { useState } from 'react'; const App: React.FC = () => { - const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [selectedRowKeys, setSelectedRowKeys] = useState(['4', '5']); const dataSource = [ { key: '1', diff --git a/packages/design/src/table/index.tsx b/packages/design/src/table/index.tsx index 1cb426437..86158e07c 100644 --- a/packages/design/src/table/index.tsx +++ b/packages/design/src/table/index.tsx @@ -10,10 +10,11 @@ import type { ReactElement, ReactNode } from 'react'; import React, { useContext, useEffect, useState } from 'react'; import ConfigProvider from '../config-provider'; import Typography from '../typography'; -import enUS from '../locale/en-US'; import useStyle from './style'; import type { AnyObject } from '../_util/type'; import useDefaultPagination from './hooks/useDefaultPagination'; +import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import enUS from '../locale/en-US'; export * from 'antd/es/table'; @@ -29,6 +30,9 @@ export interface TableLocale extends AntTableLocale { export interface TableProps extends AntTableProps { columns?: ColumnsType; + cancelText?: string; + collapseText?: string; + openText?: string; hiddenCancelBtn?: boolean; toolOptionsRender?: (selectedRowKeys, selectedRows) => ReactNode[]; toolAlertRender?: false | ((selectedRowKeys, selectedRows) => ReactNode); @@ -45,6 +49,9 @@ function Table(props: TableProps, ref: React.Ref) { toolAlertRender, toolOptionsRender, toolSelectedContent, + cancelText, + collapseText, + openText, expandable, hiddenCancelBtn = false, prefixCls: customizePrefixCls, @@ -53,15 +60,18 @@ function Table(props: TableProps, ref: React.Ref) { const extendedContext = useContext(ConfigProvider.ExtendedConfigContext); const pagination = useDefaultPagination(customPagination); + const { getPrefixCls, locale, table } = useContext(ConfigProvider.ConfigContext); const { batchOperationBar, ...restLocale } = { + ...enUS.Table, + ...locale?.Table, ...customLocale, batchOperationBar: { ...enUS.Table?.batchOperationBar, + ...locale?.Table?.batchOperationBar, ...customLocale?.batchOperationBar, }, }; - const { getPrefixCls, table } = useContext(ConfigProvider.ConfigContext); const prefixCls = getPrefixCls('table', customizePrefixCls); const { wrapSSR } = useStyle(prefixCls); const tableCls = classNames( @@ -72,7 +82,11 @@ function Table(props: TableProps, ref: React.Ref) { ); const [openPopover, setOpenPopover] = useState(false); - const [currentSelectedRowKeys, setCurrentSelectedRowKeys] = useState(); + const [currentSelectedRowKeys, setCurrentSelectedRowKeys] = useMergedState([], { + value: rowSelection?.selectedRowKeys, + defaultValue: rowSelection?.defaultSelectedRowKeys, + }); + const [currentSelectedRows, setCurrentSelectedRows] = useState([]); const [currentSelectedInfo, setCurrentSelectedInfo] = useState({}); @@ -157,7 +171,9 @@ function Table(props: TableProps, ref: React.Ref) { {batchOperationBar?.object} )} - {!hiddenCancelBtn && {batchOperationBar?.cancel}} + {!hiddenCancelBtn && ( + {cancelText ?? batchOperationBar?.cancel} + )} {toolSelectedContent && ( (props: TableProps, ref: React.Ref) { open={openPopover} > setOpenPopover(!openPopover)}> - {openPopover ? batchOperationBar?.collapse : batchOperationBar?.open} + {openPopover + ? collapseText ?? batchOperationBar?.collapse + : openText ?? batchOperationBar?.open} )}