From 3ab1bdbf3bf545063e17c30c3019c13ad75c1107 Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Tue, 19 Mar 2024 14:04:13 +0800
Subject: [PATCH 1/3] fix(contentlayout): use props scroll when isExist and
 calc scroll when props scroll is undefined

---
 src/contentLayout/components.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/contentLayout/components.tsx b/src/contentLayout/components.tsx
index 0888a6632..d27fa0ec6 100644
--- a/src/contentLayout/components.tsx
+++ b/src/contentLayout/components.tsx
@@ -22,8 +22,10 @@ export const TableLayout = ({ height, ...otherProps }: ITableProps<any>) => {
     if (otherProps.footer) {
         lineHeight = lineHeight * 2;
     }
-    const scroll: TableProps<any>['scroll'] = otherProps?.scroll ? { ...otherProps.scroll } : {};
-    scroll.y = `calc(${height} - ${lineHeight}px)`;
+
+    const scroll: TableProps<any>['scroll'] = otherProps?.scroll
+        ? { ...otherProps.scroll }
+        : { y: `calc(${height} - ${lineHeight}px)` };
 
     return <Table {...otherProps} scroll={scroll} />;
 };

From 2754c289ce6047b485d127ac1de7939884d079f2 Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Fri, 26 Apr 2024 10:31:44 +0800
Subject: [PATCH 2/3] feat(contentlayout): support scroll.y defaultValue and
 cover by otherProps.scroll

---
 src/contentLayout/components.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/contentLayout/components.tsx b/src/contentLayout/components.tsx
index d27fa0ec6..96aeff16f 100644
--- a/src/contentLayout/components.tsx
+++ b/src/contentLayout/components.tsx
@@ -23,9 +23,10 @@ export const TableLayout = ({ height, ...otherProps }: ITableProps<any>) => {
         lineHeight = lineHeight * 2;
     }
 
-    const scroll: TableProps<any>['scroll'] = otherProps?.scroll
-        ? { ...otherProps.scroll }
-        : { y: `calc(${height} - ${lineHeight}px)` };
+    const scroll: TableProps<any>['scroll'] = {
+        y: `calc(${height} - ${lineHeight}px)`,
+        ...otherProps.scroll,
+    };
 
     return <Table {...otherProps} scroll={scroll} />;
 };

From ec00de294783cf444ec6dd1e02e0f0889253ec2b Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Sun, 29 Sep 2024 15:23:39 +0800
Subject: [PATCH 3/3] fix(contentlayout): add table size judge and use
 React.forwardRef

---
 .../__tests__/contentLayout.test.tsx          | 47 +++++++++++++++++++
 src/contentLayout/components.tsx              | 26 +++++-----
 src/contentLayout/index.tsx                   |  2 +
 3 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/src/contentLayout/__tests__/contentLayout.test.tsx b/src/contentLayout/__tests__/contentLayout.test.tsx
index 7032d49b0..5ed3db1db 100644
--- a/src/contentLayout/__tests__/contentLayout.test.tsx
+++ b/src/contentLayout/__tests__/contentLayout.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { Pagination } from 'antd';
 
 import ContentLayout from '..';
 
@@ -50,4 +51,50 @@ describe('test contentLayout', () => {
             '500px'
         );
     });
+    test('should support contentLayout default table height', () => {
+        const { container } = render(
+            <ContentLayout>
+                <ContentLayout.Header>Header</ContentLayout.Header>
+                <ContentLayout.Table
+                    rowKey={'key'}
+                    columns={[
+                        {
+                            title: 'Age',
+                            dataIndex: 'age',
+                            key: 'age',
+                        },
+                    ]}
+                    dataSource={[{ key: 1, age: 19 }]}
+                    footer={() => <Pagination />}
+                />
+            </ContentLayout>
+        );
+        expect(container.querySelector<HTMLDivElement>('.ant-table-body')?.style.maxHeight).toBe(
+            'calc(calc(calc(100vh - 96px) - 0px) - 88px)'
+        );
+    });
+    test('should support contentLayout small table height', () => {
+        const { container } = render(
+            <ContentLayout>
+                <ContentLayout.Header>Header</ContentLayout.Header>
+                <ContentLayout.Table
+                    rowKey={'key'}
+                    size="small"
+                    className="dt-pagination-small"
+                    columns={[
+                        {
+                            title: 'Age',
+                            dataIndex: 'age',
+                            key: 'age',
+                        },
+                    ]}
+                    dataSource={[{ key: 1, age: 19 }]}
+                    footer={() => <Pagination />}
+                />
+            </ContentLayout>
+        );
+        expect(container.querySelector<HTMLDivElement>('.ant-table-body')?.style.maxHeight).toBe(
+            'calc(calc(calc(100vh - 96px) - 0px) - 72px)'
+        );
+    });
 });
diff --git a/src/contentLayout/components.tsx b/src/contentLayout/components.tsx
index 96aeff16f..17eab5ca7 100644
--- a/src/contentLayout/components.tsx
+++ b/src/contentLayout/components.tsx
@@ -16,11 +16,13 @@ type ITableProps<T> = {
 } & TableProps<T> &
     Omit<ContentLayoutChildProps, 'ref'>;
 
-export const TableLayout = ({ height, ...otherProps }: ITableProps<any>) => {
-    let lineHeight = 44;
+export const TableLayout = ({ height, size, className, ...otherProps }: ITableProps<any>) => {
+    let lineHeight = size === 'small' ? 36 : 44;
 
     if (otherProps.footer) {
-        lineHeight = lineHeight * 2;
+        let footerHeight = 44;
+        if (className?.includes('dt-pagination-small')) footerHeight = 36;
+        lineHeight = lineHeight + footerHeight;
     }
 
     const scroll: TableProps<any>['scroll'] = {
@@ -28,7 +30,7 @@ export const TableLayout = ({ height, ...otherProps }: ITableProps<any>) => {
         ...otherProps.scroll,
     };
 
-    return <Table {...otherProps} scroll={scroll} />;
+    return <Table {...otherProps} size={size} className={className} scroll={scroll} />;
 };
 
 interface HeaderProps extends ContentLayoutChildProps {
@@ -36,10 +38,12 @@ interface HeaderProps extends ContentLayoutChildProps {
     className?: string;
 }
 
-export const Header = ({ ref, className, style, children }: HeaderProps) => {
-    return (
-        <div className={classNames(`${NAME}__header`, className)} style={style} ref={ref}>
-            {children}
-        </div>
-    );
-};
+export const Header = React.forwardRef<HTMLDivElement, HeaderProps>(
+    ({ className, style, children }, ref) => {
+        return (
+            <div className={classNames(`${NAME}__header`, className)} style={style} ref={ref}>
+                {children}
+            </div>
+        );
+    }
+);
diff --git a/src/contentLayout/index.tsx b/src/contentLayout/index.tsx
index 049fdf4d2..ad549e3a5 100644
--- a/src/contentLayout/index.tsx
+++ b/src/contentLayout/index.tsx
@@ -28,12 +28,14 @@ const ContentLayout = (props: IProps) => {
         Children.forEach(children, (child) => {
             if (child?.type === Header) {
                 header = cloneElement(child, {
+                    key: 'header',
                     ref: headerRef,
                 });
             }
             if (child?.type === TableLayout) {
                 content.push(
                     cloneElement(child, {
+                        key: 'table',
                         height: contentHeight,
                     })
                 );