From 0a4622420c11aba02a70fc6193b94a40facd334f Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 6 Dec 2017 16:33:05 +0800
Subject: [PATCH] Fix FooterToolbar width

---
 src/components/FooterToolbar/index.less |  1 -
 src/routes/Forms/AdvancedForm.js        | 18 +++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/FooterToolbar/index.less b/src/components/FooterToolbar/index.less
index 5f2d3c92..b6b6399e 100644
--- a/src/components/FooterToolbar/index.less
+++ b/src/components/FooterToolbar/index.less
@@ -11,7 +11,6 @@
   background: #fff;
   border-top: 1px solid @border-color-split;
   padding: 0 24px;
-  transition: all .3s;
   z-index: 9;
 
   &:after {
diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js
index d3106bd6..565c027f 100644
--- a/src/routes/Forms/AdvancedForm.js
+++ b/src/routes/Forms/AdvancedForm.js
@@ -42,6 +42,22 @@ 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})`;
+    if (this.state.width !== width) {
+      this.setState({ width });
+    }
+  }
   render() {
     const { form, dispatch, submitting } = this.props;
     const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form;
@@ -257,7 +273,7 @@ class AdvancedForm extends PureComponent {
             initialValue: tableData,
           })(<TableForm />)}
         </Card>
-        <FooterToolbar>
+        <FooterToolbar style={{ width: this.state.width }}>
           {getErrorInfo()}
           <Button type="primary" onClick={validate} loading={submitting}>
             提交
-- 
GitLab