mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Add placeholder for Affix, close #1987

Browse Source
This commit is contained in:
afc163 2016-07-11 14:52:21 +08:00
parent 7c595797c0
commit 1f82c573bf
1 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/affix/index.jsx
View File

@ -48,11 +48,15 @@ export default class Affix extends React.Component {
super(props);
this.state = {
affixStyle: null,
placeholderStyle: null,
};
}
setAffixStyle(affixStyle) {
setAffixStyle(e, affixStyle) {
const originalAffixStyle = this.state.affixStyle;
if (e.type === 'scroll' && originalAffixStyle && affixStyle) {
return;
}
if (shallowequal(affixStyle, originalAffixStyle)) {
return;
}
@ -65,7 +69,18 @@ export default class Affix extends React.Component {
});
}
handleScroll = () => {
setPlaceholderStyle(e, placeholderStyle) {
const originalPlaceholderStyle = this.state.placeholderStyle;
if (e.type === 'resize') {
return;
}
if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
return;
}
this.setState({ placeholderStyle });
}
handleScroll = (e) => {
let { offsetTop, offsetBottom, offset } = this.props;
// Backwards support
@ -88,23 +103,32 @@ export default class Affix extends React.Component {
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
// Fixed Top
this.setAffixStyle({
this.setAffixStyle(e, {
position: 'fixed',
top: offsetTop,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
});
this.setPlaceholderStyle(e, {
width: ReactDOM.findDOMNode(this).offsetWidth,
height: ReactDOM.findDOMNode(this).offsetHeight,
});
} else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
offsetMode.bottom) {
// Fixed Bottom
this.setAffixStyle({
this.setAffixStyle(e, {
position: 'fixed',
bottom: offsetBottom,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
});
this.setPlaceholderStyle(e, {
width: ReactDOM.findDOMNode(this).offsetWidth,
height: ReactDOM.findDOMNode(this).offsetHeight,
});
} else {
this.setAffixStyle(null);
this.setAffixStyle(e, null);
this.setPlaceholderStyle(e, null);
}
}
@ -133,7 +157,7 @@ export default class Affix extends React.Component {
delete props.offsetBottom;
return (
<div {...props}>
<div {...props} style={this.state.placeholderStyle}>
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
{this.props.children}
</div>