mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Improve Affix target demo code style, close #4037

Browse Source
This commit is contained in:
afc163 2016-12-03 16:19:22 +08:00
parent 82902855db
commit c7c886fda6
2 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/affix/demo/target.md
View File

@ -16,36 +16,32 @@ Set a `target` for 'Affix', which is listen to scroll event of target element (d
````jsx
import { Affix, Button } from 'antd';
const Demo = () => {
return (
<div className="view-port">
<div id="scrollable-container">
class Demo extends React.Component {
render() {
return (
<div className="scrollable-container" ref={(node) => { this.container = node; }}>
<div className="background">
<br />
<br />
<br />
<Affix target={() => document.getElementById('scrollable-container')} offsetTop={20}>
<Button type="primary">Fixed at the top of container</Button>
<Affix target={() => this.container}>
<Button type="primary">
Fixed at the top of container
</Button>
</Affix>
</div>
</div>
</div>
);
};
);
}
}
ReactDOM.render(<Demo />, mountNode);
````
<style>
#components-affix-demo-target .view-port {
#components-affix-demo-target .scrollable-container {
height: 100px;
overflow: hidden;
}
#components-affix-demo-target #scrollable-container {
height: 100%;
overflow-y: scroll;
}
#components-affix-demo-target .background {
padding-top: 60px;
height: 300px;
background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
}

10
components/affix/index.tsx
View File

@ -64,6 +64,7 @@ export default class Affix extends React.Component<AffixProps, any> {
scrollEvent: any;
resizeEvent: any;
timeout: any;
refs: {
fixedNode: HTMLElement;
};
@ -172,7 +173,10 @@ export default class Affix extends React.Component<AffixProps, any> {
componentDidMount() {
const target = this.props.target || getDefaultTarget;
this.setTargetEventListeners(target);
// Wait for parent component ref has its value
this.timeout = setTimeout(() => {
this.setTargetEventListeners(target);
});
}
componentWillReceiveProps(nextProps) {
@ -187,10 +191,14 @@ export default class Affix extends React.Component<AffixProps, any> {
componentWillUnmount() {
this.clearScrollEventListeners();
clearTimeout(this.timeout);
}
setTargetEventListeners(getTarget) {
const target = getTarget();
if (!target) {
return;
}
this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition);
this.resizeEvent = addEventListener(target, 'resize', this.updatePosition);
}