fix(design): Table locale & BatchOperationBar keys should related row…

…Selection (#591) * fix(Table): locale * fix: BatchOperationBar keys should related rowSelection & Add the missing api * demo(Table): Add default selectedRowKeys * fix: Add default locale * chore: add test
oceanbase · May 23, 2024 · 12a834c · 12a834c
1 parent 69ceca3
commit 12a834c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git 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(
+      <TableTest
+        rowSelection={{
+          selectedRowKeys: ['1', '2'],
+        }}
+      />
+    );
+    // 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(<TableTest />);
     // pagination.showTotal

diff --git 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<any[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>(['4', '5']);
   const dataSource = [
     {
       key: '1',

diff --git 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<T> extends AntTableProps<T> {
   columns?: ColumnsType<T>;
+  cancelText?: string;
+  collapseText?: string;
+  openText?: string;
   hiddenCancelBtn?: boolean;
   toolOptionsRender?: (selectedRowKeys, selectedRows) => ReactNode[];
   toolAlertRender?: false | ((selectedRowKeys, selectedRows) => ReactNode);
@@ -45,6 +49,9 @@ function Table<T>(props: TableProps<T>, ref: React.Ref<Reference>) {
     toolAlertRender,
     toolOptionsRender,
     toolSelectedContent,
+    cancelText,
+    collapseText,
+    openText,
     expandable,
     hiddenCancelBtn = false,
     prefixCls: customizePrefixCls,
@@ -53,15 +60,18 @@ function Table<T>(props: TableProps<T>, ref: React.Ref<Reference>) {
   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<T>(props: TableProps<T>, ref: React.Ref<Reference>) {
   );
 
   const [openPopover, setOpenPopover] = useState<boolean>(false);
-  const [currentSelectedRowKeys, setCurrentSelectedRowKeys] = useState<any[]>();
+  const [currentSelectedRowKeys, setCurrentSelectedRowKeys] = useMergedState([], {
+    value: rowSelection?.selectedRowKeys,
+    defaultValue: rowSelection?.defaultSelectedRowKeys,
+  });
+
   const [currentSelectedRows, setCurrentSelectedRows] = useState<any[]>([]);
   const [currentSelectedInfo, setCurrentSelectedInfo] = useState<any>({});
 
@@ -157,7 +171,9 @@ function Table<T>(props: TableProps<T>, ref: React.Ref<Reference>) {
                 <span>{batchOperationBar?.object}</span>
               </span>
             )}
-            {!hiddenCancelBtn && <a onClick={handleOptionsCancel}>{batchOperationBar?.cancel}</a>}
+            {!hiddenCancelBtn && (
+              <a onClick={handleOptionsCancel}>{cancelText ?? batchOperationBar?.cancel}</a>
+            )}
             {toolSelectedContent && (
               <Popover
                 placement="top"
@@ -167,7 +183,9 @@ function Table<T>(props: TableProps<T>, ref: React.Ref<Reference>) {
                 open={openPopover}
               >
                 <a onClick={() => setOpenPopover(!openPopover)}>
-                  {openPopover ? batchOperationBar?.collapse : batchOperationBar?.open}
+                  {openPopover
+                    ? collapseText ?? batchOperationBar?.collapse
+                    : openText ?? batchOperationBar?.open}
                 </a>
               </Popover>
             )}