Merge pull request #17678 from ant-design/affix

fix: Adjust measure logic

components/affix/__tests__/Affix.test.js

@@ -162,29 +162,37 @@ describe('Affix Render', () => {
     });
   });
 
-  it('updatePosition when size changed', () => {
-    document.body.innerHTML = '<div id="mounter" />';
+  describe('updatePosition when size changed', () => {
+    function test(name, index) {
+      it(name, () => {
+        document.body.innerHTML = '<div id="mounter" />';
 
-    const updateCalled = jest.fn();
-    wrapper = mount(<AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />, {
-      attachTo: document.getElementById('mounter'),
-    });
+        const updateCalled = jest.fn();
+        wrapper = mount(<AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />, {
+          attachTo: document.getElementById('mounter'),
+        });
 
-    jest.runAllTimers();
+        jest.runAllTimers();
 
-    movePlaceholder(300);
-    expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
-    jest.runAllTimers();
-    wrapper.update();
+        movePlaceholder(300);
+        expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
+        jest.runAllTimers();
+        wrapper.update();
 
-    // Mock trigger resize
-    updateCalled.mockReset();
-    wrapper
-      .find('ReactResizeObserver')
-      .instance()
-      .onResize();
-    jest.runAllTimers();
+        // Mock trigger resize
+        updateCalled.mockReset();
+        wrapper
+          .find('ReactResizeObserver')
+          .at(index)
+          .instance()
+          .onResize();
+        jest.runAllTimers();
 
-    expect(updateCalled).toHaveBeenCalled();
+        expect(updateCalled).toHaveBeenCalled();
+      });
+    }
+
+    test('inner', 0);
+    test('outer', 1);
   });
 });

components/affix/__tests__/__snapshots__/demo.test.js.snap

@@ -34,6 +34,37 @@ exports[`renders ./components/affix/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/affix/demo/debug.md correctly 1`] = `
+<div
+  style="height:10000px"
+>
+  <div>
+    Top
+  </div>
+  <div>
+    <div
+      class=""
+    >
+      <div
+        style="background:red"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            Affix top
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div>
+    Bottom
+  </div>
+</div>
+`;
+
 exports[`renders ./components/affix/demo/on-change.md correctly 1`] = `
 <div>
   <div

components/affix/demo/debug.md

@@ -0,0 +1,50 @@
+---
+order: 99
+title:
+  zh-CN: 调试
+  en-US: Debug
+only: true
+---
+
+## zh-CN
+
+DEBUG
+
+## en-US
+
+DEBUG
+
+```jsx
+import { Affix, Button } from 'antd';
+
+class Demo extends React.Component {
+  state = {
+    top: 10,
+  };
+
+  render() {
+    return (
+      <div style={{ height: 10000 }}>
+        <div>Top</div>
+        <Affix offsetTop={this.state.top}>
+          <div style={{ background: 'red' }}>
+            <Button
+              type="primary"
+              onClick={() => {
+                this.setState({
+                  top: this.state.top + 10,
+                });
+              }}
+            >
+              Affix top
+            </Button>
+          </div>
+        </Affix>
+        <div>Bottom</div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+```

components/affix/index.tsx

@@ -256,8 +256,8 @@ class Affix extends React.Component<AffixProps, AffixState> {
 
   // =================== Render ===================
   renderAffix = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { affixStyle, placeholderStyle, status } = this.state;
-    const { prefixCls, style, children } = this.props;
+    const { affixStyle, placeholderStyle } = this.state;
+    const { prefixCls, children } = this.props;
     const className = classNames({
       [getPrefixCls('affix', prefixCls)]: affixStyle,
     });
@@ -267,22 +267,26 @@ class Affix extends React.Component<AffixProps, AffixState> {
     if (process.env.NODE_ENV === 'test') {
       props = omit(props, ['onTestUpdatePosition']);
     }
-    const mergedPlaceholderStyle = {
-      ...(status === AffixStatus.None ? placeholderStyle : null),
-      ...style,
-    };
+
     return (
-      <div {...props} style={mergedPlaceholderStyle} ref={this.savePlaceholderNode}>
-        <div className={className} ref={this.saveFixedNode} style={this.state.affixStyle}>
-          <ResizeObserver
-            onResize={() => {
-              this.updatePosition();
-            }}
-          >
-            {children}
-          </ResizeObserver>
+      <ResizeObserver
+        onResize={() => {
+          this.updatePosition();
+        }}
+      >
+        <div {...props} ref={this.savePlaceholderNode}>
+          {affixStyle && <div style={placeholderStyle} aria-hidden="true" />}
+          <div className={className} ref={this.saveFixedNode} style={affixStyle}>
+            <ResizeObserver
+              onResize={() => {
+                this.updatePosition();
+              }}
+            >
+              {children}
+            </ResizeObserver>
+          </div>
         </div>
-      </div>
+      </ResizeObserver>
     );
   };