From c294c85bf16e0162298ec16d3d568be1bed65ac1 Mon Sep 17 00:00:00 2001
From: yoyo837 <yoyo837@hotmail.com>
Date: Mon, 23 Jul 2018 11:49:59 +0800
Subject: [PATCH] FooterToolBar width is fixed at 100% when using rc-drawer
 SliderMenu.

---
 src/components/FooterToolbar/index.js | 34 ++++++++++++++++++++++++++-
 src/routes/Forms/AdvancedForm.js      | 24 +------------------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/FooterToolbar/index.js b/src/components/FooterToolbar/index.js
index d5ce75b8..d43f72fb 100644
--- a/src/components/FooterToolbar/index.js
+++ b/src/components/FooterToolbar/index.js
@@ -1,12 +1,44 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './index.less';
 
 export default class FooterToolbar extends Component {
+  static contextTypes = {
+    isMobile: PropTypes.bool,
+  };
+
+  state = {
+    width: undefined,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resizeFooterToolbar);
+    this.resizeFooterToolbar();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeFooterToolbar);
+  }
+
+  resizeFooterToolbar = () => {
+    const sider = document.querySelector('.ant-layout-sider');
+    if (sider == null) {
+      return;
+    }
+    const { isMobile } = this.context;
+    const width = isMobile ? null : `calc(100% - ${sider.style.width})`;
+    const { width: stateWidth } = this.state;
+    if (stateWidth !== width) {
+      this.setState({ width });
+    }
+  };
+
   render() {
     const { children, className, extra, ...restProps } = this.props;
+    const { width } = this.state;
     return (
-      <div className={classNames(className, styles.toolbar)} {...restProps}>
+      <div className={classNames(className, styles.toolbar)} style={{ width }} {...restProps}>
         <div className={styles.left}>{extra}</div>
         <div className={styles.right}>{children}</div>
       </div>
diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js
index 6ab2bfb9..94bc3c54 100644
--- a/src/routes/Forms/AdvancedForm.js
+++ b/src/routes/Forms/AdvancedForm.js
@@ -58,29 +58,7 @@ const tableData = [
 ];
 
 class AdvancedForm extends PureComponent {
-  state = {
-    width: '100%',
-  };
-
-  componentDidMount() {
-    window.addEventListener('resize', this.resizeFooterToolbar);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resizeFooterToolbar);
-  }
-
-  resizeFooterToolbar = () => {
-    const sider = document.querySelectorAll('.ant-layout-sider')[0];
-    const width = `calc(100% - ${sider.style.width})`;
-    const { width: stateWidth } = this.state;
-    if (stateWidth !== width) {
-      this.setState({ width });
-    }
-  };
-
   render() {
-    const { width: stateWidth } = this.state;
     const { form, dispatch, submitting } = this.props;
     const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form;
     const validate = () => {
@@ -289,7 +267,7 @@ class AdvancedForm extends PureComponent {
             initialValue: tableData,
           })(<TableForm />)}
         </Card>
-        <FooterToolbar style={{ width: stateWidth }}>
+        <FooterToolbar>
           {getErrorInfo()}
           <Button type="primary" onClick={validate} loading={submitting}>
             提交
-- 
GitLab