fix(contentlayout): scroll calculation (#458)

* fix(contentlayout): use props scroll when isExist and calc scroll when props scroll is undefined

* feat(contentlayout): support scroll.y defaultValue and cover by otherProps.scroll

* fix(contentlayout): add table size judge and use React.forwardRef

Author: LuckyFBB

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)'
+        );
+    });
 });

src/contentLayout/components.tsx

@@ -16,27 +16,34 @@ 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'] = otherProps?.scroll ? { ...otherProps.scroll } : {};
-    scroll.y = `calc(${height} - ${lineHeight}px)`;
 
-    return <Table {...otherProps} scroll={scroll} />;
+    const scroll: TableProps<any>['scroll'] = {
+        y: `calc(${height} - ${lineHeight}px)`,
+        ...otherProps.scroll,
+    };
+
+    return <Table {...otherProps} size={size} className={className} scroll={scroll} />;
 };
 
 interface HeaderProps extends ContentLayoutChildProps {
     style?: React.CSSProperties;
     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>
+        );
+    }
+);

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,
                     })
                 );