feat(contentlayout): rewrite contentLayout to use Content and Footer

Author: LuckyFBB

src/contentLayout/__tests__/contentLayout.test.tsx

@@ -70,7 +70,7 @@ describe('test contentLayout', () => {
             </ContentLayout>
         );
         expect(container.querySelector<HTMLDivElement>('.ant-table-body')?.style.maxHeight).toBe(
-            'calc(calc(calc(100vh - 96px) - 0px) - 88px)'
+            'calc(calc(calc(100vh - 96px) - 0px - 0px) - 88px)'
         );
     });
     test('should support contentLayout small table height', () => {
@@ -94,7 +94,7 @@ describe('test contentLayout', () => {
             </ContentLayout>
         );
         expect(container.querySelector<HTMLDivElement>('.ant-table-body')?.style.maxHeight).toBe(
-            'calc(calc(calc(100vh - 96px) - 0px) - 72px)'
+            'calc(calc(calc(100vh - 96px) - 0px - 0px) - 72px)'
         );
     });
 });

src/contentLayout/components.tsx

@@ -47,3 +47,30 @@ export const Header = React.forwardRef<HTMLDivElement, HeaderProps>(
         );
     }
 );
+
+interface FooterProps extends ContentLayoutChildProps {}
+
+export const Footer = ({ ref, children }: FooterProps) => {
+    return (
+        <div className={`${NAME}__footer`} ref={ref}>
+            {children}
+        </div>
+    );
+};
+
+interface ContentProps extends ContentLayoutChildProps {
+    style?: React.CSSProperties;
+    className?: string;
+    height?: string | number;
+}
+
+export const Content = ({ style = {}, className, height, children }: ContentProps) => {
+    return (
+        <div
+            className={classNames(`${NAME}__content`, className)}
+            style={height ? { ...style, height } : { ...style }}
+        >
+            {children}
+        </div>
+    );
+};

src/contentLayout/index.tsx

@@ -1,12 +1,15 @@
 import React, { Children, cloneElement, useCallback, useMemo, useRef } from 'react';
 import classNames from 'classnames';
 
-import { Header, TableLayout } from './components';
+import { Content, Footer, Header, TableLayout } from './components';
 import './index.scss';
 
 interface IProps {
+    header?: React.ReactElement;
+    content?: React.ReactElement;
+    footer?: React.ReactElement;
     height?: string;
-    children?: React.ReactElement | React.ReactElement[];
+    children?: React.ReactElement[];
     style?: React.CSSProperties;
     className?: string;
 }
@@ -16,34 +19,61 @@ export const NAME = 'dtc-content-layout';
 const ContentLayout = (props: IProps) => {
     const { height = 'calc(100vh - 96px)', style, className, children } = props;
     const headerRef: any = useRef(null);
+    const footerRef: any = useRef(null);
 
     const contentHeight = useMemo(() => {
-        return `calc(${height} - ${headerRef?.current?.clientHeight || 0}px)`;
-    }, [height, headerRef?.current]);
+        return `calc(${height} - ${headerRef?.current?.clientHeight || 0}px - ${
+            footerRef?.current?.clientHeight || 0
+        }px)`;
+    }, [height, headerRef?.current, footerRef?.current]);
 
     const render = useCallback(() => {
-        let header;
-        const content: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] = [];
+        let header = null;
+        let footer = null;
+        const content: React.ReactElement[] = [];
 
-        Children.forEach(children, (child) => {
+        if (props?.content) {
+            content.push(
+                cloneElement(props.content, {
+                    key: 'content-prop',
+                })
+            );
+        }
+
+        Children.forEach(children, (child, index) => {
             if (child?.type === Header) {
                 header = cloneElement(child, {
                     key: 'header',
                     ref: headerRef,
                 });
-            }
-            if (child?.type === TableLayout) {
+            } else if (child?.type === TableLayout) {
+                footer = cloneElement(child, {
+                    key: 'footer-table',
+                    ref: footerRef,
+                    height: contentHeight,
+                });
+            } else if (child?.type === Footer) {
+                footer = cloneElement(child, {
+                    key: 'footer',
+                    ref: footerRef,
+                });
+            } else {
+                const childKey = (child as React.ReactElement)?.key || `content-${index}`;
                 content.push(
-                    cloneElement(child, {
-                        key: 'table',
+                    cloneElement(child as React.ReactElement, {
+                        key: childKey,
                         height: contentHeight,
                     })
                 );
             }
         });
 
-        return [header, ...content];
-    }, [children, contentHeight]);
+        const result: (React.ReactElement | null)[] = [];
+        if (header) result.push(header);
+        result.push(...content);
+        if (footer) result.push(footer);
+        return result;
+    }, [children, contentHeight, props?.content]);
 
     return (
         <div
@@ -59,10 +89,14 @@ type OriginalInterface = typeof ContentLayout;
 interface LayoutInterface extends OriginalInterface {
     Header: typeof Header;
     Table: typeof TableLayout;
+    Footer: typeof Footer;
+    Content: typeof Content;
 }
 
 const LayoutWrapper = ContentLayout;
 (LayoutWrapper as LayoutInterface).Header = Header;
 (LayoutWrapper as LayoutInterface).Table = TableLayout;
+(LayoutWrapper as LayoutInterface).Content = Content;
+(LayoutWrapper as LayoutInterface).Footer = Footer;
 
 export default LayoutWrapper as LayoutInterface;