Merge pull request #948 from oceanbase/dengfuping-dev

improve(ui): ProTable follow Table style in no padding Card
oceanbase · Jan 17, 2025 · 4466cac · 4466cac
2 parents 00f0487 + 9c3461d
commit 4466cac
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 7 deletions.
diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx
@@ -3,10 +3,6 @@ import { css, Global } from '@emotion/react';
 import React from 'react';
 import useSiteToken from '../../../hooks/useSiteToken';
 
-console.log(new TinyColor('#8592AD').getAlpha());
-
-console.log(new TinyColor('#5c6b8a').toRgb());
-
 const GlobalStyle: React.FC = () => {
   const { token } = useSiteToken();
 

diff --git a/packages/ui/src/ProTable/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/ProTable/__tests__/__snapshots__/index.test.tsx.snap
@@ -351,7 +351,7 @@ exports[`ProTable > ConfigProvider pagination should work 1`] = `
     </form>
   </div>
   <div
-    class="ant-pro-card"
+    class="ant-pro-card ant-pro-card-has-title ant-pro-card-no-divider ant-pro-card-no-padding"
   >
     <div
       class="ant-pro-card-body"
@@ -1237,7 +1237,7 @@ exports[`ProTable > default pagination should work 1`] = `
     </form>
   </div>
   <div
-    class="ant-pro-card"
+    class="ant-pro-card ant-pro-card-has-title ant-pro-card-no-divider ant-pro-card-no-padding"
   >
     <div
       class="ant-pro-card-body"
@@ -2195,7 +2195,7 @@ exports[`ProTable > render 1`] = `
     </form>
   </div>
   <div
-    class="ant-pro-card"
+    class="ant-pro-card ant-pro-card-has-title ant-pro-card-no-divider ant-pro-card-no-padding"
   >
     <div
       class="ant-pro-card-body"

diff --git a/packages/ui/src/ProTable/index.tsx b/packages/ui/src/ProTable/index.tsx
@@ -11,11 +11,17 @@ export { ProTableProps };
 
 const ProTable: typeof AntProTable = ({
   form,
+  headerTitle,
+  options,
+  optionsRender,
+  toolbar,
+  toolBarRender,
   expandable,
   rowSelection,
   pagination: customPagination,
   footer,
   locale,
+  cardProps: outerCardProps,
   prefixCls: customizePrefixCls,
   tableClassName,
   className,
@@ -47,6 +53,9 @@ const ProTable: typeof AntProTable = ({
   const { emptyText = <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />, ...restLocale } =
     locale || {};
 
+  const cardProps = typeof outerCardProps === 'boolean' ? {} : outerCardProps;
+  const proCardCls = getPrefixCls('pro-card', customizePrefixCls);
+
   return tableWrapSSR(
     lightFilterWrapSSR(
       wrapSSR(
@@ -58,6 +67,29 @@ const ProTable: typeof AntProTable = ({
             requiredMark: false,
             ...form,
           }}
+          headerTitle={headerTitle}
+          options={options}
+          optionsRender={optionsRender}
+          toolbar={toolbar}
+          toolBarRender={toolBarRender}
+          cardProps={{
+            ...cardProps,
+            className: classNames(
+              {
+                [`${proCardCls}-has-title`]:
+                  !!headerTitle ||
+                  options ||
+                  options === undefined ||
+                  optionsRender ||
+                  toolbar ||
+                  toolBarRender,
+                [`${proCardCls}-no-divider`]: !cardProps?.headerBordered,
+                [`${proCardCls}-no-padding`]: true,
+                [`${proCardCls}-contain-tabs`]: !!cardProps?.tabs,
+              },
+              cardProps?.className
+            ),
+          }}
           expandable={
             expandable
               ? {

diff --git a/packages/ui/src/ProTable/style/index.ts b/packages/ui/src/ProTable/style/index.ts
@@ -1,10 +1,12 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { Card } from '@oceanbase/design';
 import type { GenerateStyle } from '@oceanbase/design/es/theme';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 import type { OBToken } from '../../_util/genComponentStyleHook';
 
 export const genProTableStyle: GenerateStyle<OBToken> = (token: OBToken): CSSObject => {
   const { antCls, componentCls, proComponentsCls } = token;
+  const proCardComponentCls = `${proComponentsCls}-card`;
   return {
     [`${componentCls}`]: {
       [`${proComponentsCls}-query-filter-actions`]: {
@@ -13,6 +15,18 @@ export const genProTableStyle: GenerateStyle<OBToken> = (token: OBToken): CSSObj
           flexDirection: 'row-reverse',
         },
       },
+      [`${proCardComponentCls}${proCardComponentCls}-no-padding`]: {
+        [`${proCardComponentCls}-body`]: {
+          paddingInline: 0,
+          [`${componentCls}-list-toolbar-container`]: {
+            paddingInline: token.paddingLG,
+          },
+        },
+        ...Card.genTableStyle(token.paddingLG, {
+          ...token,
+          componentCls: proCardComponentCls,
+        }),
+      },
     },
   };
 };