Merge pull request #557 from oceanbase/zhuyue-dev

fix(ui): LightFilter style in ProTable should work

packages/design/src/table/index.tsx

@@ -11,7 +11,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import ConfigProvider from '../config-provider';
 import Typography from '../typography';
 import enUS from '../locale/en-US';
-import useStyle, { genTableStyle } from './style';
+import useStyle from './style';
 import type { AnyObject } from '../_util/type';
 import useDefaultPagination from './hooks/useDefaultPagination';
 
@@ -246,6 +246,6 @@ export default Object.assign(ForwardTable, {
   Column: AntTable.Column,
   ColumnGroup: AntTable.ColumnGroup,
   Summary: AntTable.Summary as typeof Summary,
-  genTableStyle,
+  useStyle,
   useDefaultPagination,
 });

packages/ui/src/ProTable/demo/basic.tsx

@@ -30,7 +30,14 @@ const App: React.FC = () => {
     });
   }
 
-  return <ProTable columns={columns} dataSource={dataSource} />;
+  return (
+    <ProTable
+      headerTitle="高级表格"
+      cardBordered={true}
+      columns={columns}
+      dataSource={dataSource}
+    />
+  );
 };
 
 export default App;

packages/ui/src/ProTable/demo/light-filter.tsx

@@ -0,0 +1,43 @@
+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 (
+    <ProTable
+      headerTitle="高级表格"
+      search={{ filterType: 'light' }}
+      columns={columns}
+      dataSource={dataSource}
+    />
+  );
+};
+
+export default App;

packages/ui/src/ProTable/index.md

@@ -13,6 +13,8 @@ nav:
 
 <code src="./demo/basic.tsx" title="基本"></code>
 
+<code src="./demo/light-filter.tsx" title="轻量筛选"></code>
+
 ## API
 
 | 参数        | 说明     | 类型                           | 默认值  | 版本 |

packages/ui/src/ProTable/index.tsx

@@ -3,6 +3,7 @@ import { ProTable as AntProTable } from '@ant-design/pro-components';
 import type { ProTableProps } from '@ant-design/pro-components';
 import classNames from 'classnames';
 import { ConfigProvider, Table } from '@oceanbase/design';
+import useLightFilterStyle from '../LightFilter/style';
 import useStyle from './style';
 
 export { ProTableProps };
@@ -15,26 +16,38 @@ const ProTable: typeof AntProTable = ({
   ...restProps
 }) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+
+  // customize Table style
+  const tablePrefixCls = getPrefixCls('table', customizePrefixCls);
+  const { wrapSSR: tableWrapSSR } = Table.useStyle(tablePrefixCls);
+  const pagination = Table.useDefaultPagination(customPagination);
+
+  // customize LightFilter style
+  const lightFilterPrefixCls = getPrefixCls('pro-form-light-filter', customizePrefixCls);
+  const { wrapSSR: lightFilterWrapSSR } = useLightFilterStyle(lightFilterPrefixCls);
+
   const prefixCls = getPrefixCls('pro-table', customizePrefixCls);
   const { wrapSSR } = useStyle(prefixCls);
   const proTableCls = classNames(className);
 
-  const pagination = Table.useDefaultPagination(customPagination);
-
-  return wrapSSR(
-    <AntProTable
-      // default size change to `large`
-      defaultSize="large"
-      pagination={pagination}
-      form={{
-        // query form should remove required mark
-        requiredMark: false,
-        ...form,
-      }}
-      prefixCls={customizePrefixCls}
-      className={proTableCls}
-      {...restProps}
-    />
+  return tableWrapSSR(
+    lightFilterWrapSSR(
+      wrapSSR(
+        <AntProTable
+          // default size change to `large`
+          defaultSize="large"
+          pagination={pagination}
+          form={{
+            // query form should remove required mark
+            requiredMark: false,
+            ...form,
+          }}
+          prefixCls={customizePrefixCls}
+          className={proTableCls}
+          {...restProps}
+        />
+      )
+    )
   );
 };
 

packages/ui/src/ProTable/style/index.ts

@@ -1,5 +1,4 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import { Table } from '@oceanbase/design';
 import type { GenerateStyle } from '@oceanbase/design/es/theme';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 import type { OBToken } from '../../_util/genComponentStyleHook';
@@ -10,13 +9,7 @@ export const genProTableStyle: GenerateStyle<OBToken> = (token: OBToken): CSSObj
 
 export default (prefixCls: string) => {
   const useStyle = genComponentStyleHook('ProTable', token => {
-    return [
-      Table.genTableStyle({
-        ...token,
-        componentCls: `${token.antCls}-table`,
-      } as any),
-      genProTableStyle(token as OBToken),
-    ];
+    return [genProTableStyle(token as OBToken)];
   });
   return useStyle(prefixCls);
 };