From 5903fdb19fb7c3f8be9dc2eff146bfc15cb086cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=84=9A=E9=81=93?= <tingzhao.ytz@antfin.com>
Date: Fri, 15 Jun 2018 17:53:08 +0800
Subject: [PATCH] fix: Affix does not refix on offset prop changes

---
 components/affix/__tests__/Affix.test.js | 15 ++++++++
 components/affix/demo/basic.md           | 48 +++++++++++++++++++-----
 components/affix/index.tsx               |  6 +++
 3 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js
index 2ddf1e5c3d..f2737259ab 100644
--- a/components/affix/__tests__/Affix.test.js
+++ b/components/affix/__tests__/Affix.test.js
@@ -100,4 +100,19 @@ describe('Affix Render', () => {
     scrollTo(0);
     expect(wrapper.instance().affix.state.affixStyle).not.toBe(null);
   });
+
+  it('updatePosition when offsetTop changed', () => {
+    document.body.innerHTML = '<div id="mounter" />';
+
+    wrapper = mount(<AffixMounter offsetTop={0} />, { attachTo: document.getElementById('mounter') });
+    jest.runAllTimers();
+
+    scrollTo(100);
+    expect(wrapper.instance().affix.state.affixStyle.top).toBe(0);
+    wrapper.setProps({
+      offsetTop: 10,
+    });
+    jest.runAllTimers();
+    expect(wrapper.instance().affix.state.affixStyle.top).toBe(10);
+  });
 });
diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
index 59c8605560..c1c45ce5fa 100644
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -16,16 +16,46 @@ The simplest usage.
 ````jsx
 import { Affix, Button } from 'antd';
 
+class Demo extends React.Component {
+  state = {
+    top: 10,
+    bottom: 10,
+  }
+  render() {
+    return (
+      <div>
+        <Affix offsetTop={this.state.top}>
+          <Button
+            type="primary"
+            onClick={() => {
+              this.setState({
+                top: this.state.top + 10,
+              });
+            }}
+          >
+            Affix top
+          </Button>
+        </Affix>
+        <br />
+        <Affix offsetBottom={this.state.bottom}>
+          <Button
+            type="primary"
+            onClick={() => {
+              this.setState({
+                bottom: this.state.bottom + 10,
+              });
+            }}
+          >
+            Affix bottom
+          </Button>
+        </Affix>
+      </div>
+    );
+  }
+}
+
 ReactDOM.render(
-  <div>
-    <Affix>
-      <Button type="primary">Affix top</Button>
-    </Affix>
-    <br />
-    <Affix offsetBottom={0}>
-      <Button type="primary">Affix bottom</Button>
-    </Affix>
-  </div>,
+  <Demo />,
   mountNode
 );
 ````
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 0882ee3d87..4f102caf56 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -233,6 +233,12 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
       // Mock Event object.
       this.updatePosition({});
     }
+    if (
+      this.props.offsetTop !== nextProps.offsetTop ||
+      this.props.offsetBottom !== nextProps.offsetBottom
+    ) {
+      this.updatePosition({});
+    }
   }
 
   componentWillUnmount() {