Attach more events for Affix display

This commit is contained in:
afc163 2017-08-17 11:45:46 +08:00
parent fe3af14273
commit 01d4acb7a9

View File

@ -73,6 +73,18 @@ export default class Affix extends React.Component<AffixProps, any> {
fixedNode: HTMLElement; fixedNode: HTMLElement;
}; };
events = [
'resize',
'scroll',
'touchstart',
'touchmove',
'touchend',
'pageshow',
'load',
];
eventHandlers = {};
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -190,7 +202,7 @@ export default class Affix extends React.Component<AffixProps, any> {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.target !== nextProps.target) { if (this.props.target !== nextProps.target) {
this.clearScrollEventListeners(); this.clearEventListeners();
this.setTargetEventListeners(nextProps.target); this.setTargetEventListeners(nextProps.target);
// Mock Event object. // Mock Event object.
@ -199,7 +211,7 @@ export default class Affix extends React.Component<AffixProps, any> {
} }
componentWillUnmount() { componentWillUnmount() {
this.clearScrollEventListeners(); this.clearEventListeners();
clearTimeout(this.timeout); clearTimeout(this.timeout);
(this.updatePosition as any).cancel(); (this.updatePosition as any).cancel();
} }
@ -209,15 +221,18 @@ export default class Affix extends React.Component<AffixProps, any> {
if (!target) { if (!target) {
return; return;
} }
this.clearScrollEventListeners(); this.clearEventListeners();
this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition);
this.resizeEvent = addEventListener(target, 'resize', this.updatePosition); this.events.forEach(eventName => {
this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
});
} }
clearScrollEventListeners() { clearEventListeners() {
['scrollEvent', 'resizeEvent'].forEach((name) => { this.events.forEach(eventName => {
if (this[name]) { const handler = this.eventHandlers[eventName];
this[name].remove(); if (handler && handler.remove) {
handler.remove();
} }
}); });
} }