fix(antdsite): calc footer's height dynamicly.

YvesCoding · Aug 20, 2019 · 4b64768 · 4b64768
1 parent 4e0fb10
commit 4b64768
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/packages/antdsite/src/default-theme/layout/footer.tsx b/packages/antdsite/src/default-theme/layout/footer.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable react/jsx-one-expression-per-line */
 import React from 'react';
 class Footer extends React.Component<{
-  footeText: string;
+  footerText: string;
 }> {
   render() {
-    const { footeText } = this.props;
+    const { footerText } = this.props;
 
     return (
       <footer id="footer">
         <div
           className="bottom-bar"
           dangerouslySetInnerHTML={{
-            __html: footeText
+            __html: footerText
           }}
         ></div>
       </footer>

diff --git a/packages/antdsite/src/default-theme/layout/layout.tsx b/packages/antdsite/src/default-theme/layout/layout.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import '../assets/style';
 import Header from 'antdsite-header';
-import Footer from 'antdsite-footer';
 import { BackTop } from 'antd';
 import MainContent from 'antdsite-main-content';
 import { PageContext } from 'antdsite';
@@ -24,9 +23,7 @@ export default class Layout extends React.Component<LayoutProps, LayoutState> {
   render() {
     const { currentLocaleWebConfig: webConfig, slug, isWebsiteHome } = this.context;
     const { showBackToTop } = webConfig.themeConfig;
-    const { locales, footer: footerText } = webConfig;
-
-    const footer = footerText ? <Footer footeText={footerText} ref="footer" /> : null;
+    const { locales } = webConfig;
 
     return (
       <div
@@ -35,7 +32,7 @@ export default class Layout extends React.Component<LayoutProps, LayoutState> {
           'index-page-wrapper'}`}
       >
         <Header {...this.props} />
-        <MainContent {...this.props} isWebsiteHome={isWebsiteHome} footer={footer} />
+        <MainContent {...this.props} isWebsiteHome={isWebsiteHome} />
         {showBackToTop ? <BackTop /> : null}
       </div>
     );

diff --git a/packages/antdsite/src/default-theme/layout/main-content.tsx b/packages/antdsite/src/default-theme/layout/main-content.tsx
@@ -5,6 +5,8 @@ import HomePage from 'antdsite-home';
 import LeftMenu from '../components/menu';
 import Content from '../components/content';
 import PrevAndNext from '../components/prevAndNext';
+import Footer from 'antdsite-footer';
+import ReactDom from 'react-dom';
 
 export interface MainContentProps {
   isMobile: boolean;
@@ -39,12 +41,22 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
     this.setContentHeight();
   }
 
+  getFooterHeight = () => {
+    const footer = this.refs.footer;
+    if (!footer) return 0;
+
+    const footerNode = ReactDom.findDOMNode(footer) as HTMLDivElement;
+    return footerNode.offsetHeight;
+  };
+
   setContentHeight = () => {
     const { prev, next } = this.state;
-    // header and footer height is 64px and
-    // prev and next section height is 73px,
+    // calc content's min-height
+    // header's height is 64px and
+    // prev and next button's height is 73px,
     // we should also add main-wrapper's paddingTop: 40opx
-    const resetHeight = (this.props.footer ? 128 : 64) + 40 + (prev || next ? 73 : 0);
+    const resetHeight =
+      (this.refs.footer ? this.getFooterHeight() + 64 : 64) + 40 + (prev || next ? 73 : 0);
 
     this.setState({
       contentHeight: `calc(100vh - ${resetHeight}px)`
@@ -59,9 +71,13 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
   };
 
   render() {
-    const { isMobile, footer, isWebsiteHome } = this.props;
+    const { isMobile, isWebsiteHome } = this.props;
     const { prev, next, contentHeight } = this.state;
-    const { currentPageSidebarItems: menuList, slug } = this.context;
+    const {
+      currentPageSidebarItems: menuList,
+      slug,
+      webConfig: { footer: footerText }
+    } = this.context;
     const enableMenu = !!(menuList && menuList.length);
 
     return (
@@ -97,7 +113,7 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
             )}
           </div>
           <PrevAndNext prev={prev} next={next} />
-          {footer}
+          {footerText ? <Footer footerText={footerText} ref="footer" /> : null}
         </Col>
       </Row>
     );