Skip to content

Commit fe73c91

Browse files
committed
fix: 🐛 call .laodMore() on multiple short pages
1 parent de64a11 commit fe73c91

File tree

2 files changed

+51
-17
lines changed

2 files changed

+51
-17
lines changed

src/InfiniteScroll/__story__/story.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ import ShowDocs from '../../ShowDocs';
55

66
const h = React.createElement;
77

8-
const Block = () => {
8+
const Block = ({height = 100}) => {
99
return <div style={{
1010
width: 100,
11-
height: 100,
11+
height,
1212
margin: 20,
1313
background: 'red',
1414
}}></div>
1515
};
1616

17-
class Demo extends React.Component {
17+
class Demo extends React.Component<any> {
1818
state = {
1919
items: [
20-
<Block key={0} />,
21-
<Block key={1} />,
22-
<Block key={2} />,
23-
<Block key={3} />,
24-
<Block key={4} />,
20+
<Block key={0} height={this.props.height || 100} />,
21+
<Block key={1} height={this.props.height || 100} />,
22+
<Block key={2} height={this.props.height || 100} />,
23+
<Block key={3} height={this.props.height || 100} />,
24+
<Block key={4} height={this.props.height || 100} />,
2525
],
2626
cursor: 1,
2727
};
@@ -34,7 +34,7 @@ class Demo extends React.Component {
3434
console.log('loading for cursor: ' + this.state.cursor);
3535
const items = [...this.state.items];
3636
for (let i = 0; i < cnt; i++) {
37-
items.push(<Block key={items.length} />);
37+
items.push(<Block key={items.length} height={this.props.height || 100} />);
3838
}
3939
this.setState({
4040
items,
@@ -82,7 +82,7 @@ class Demo2 extends React.Component {
8282
render () {
8383
return (
8484
<div style={{border: '1px solid red', height: 400, width: 300, overflowY: 'scroll'}}>
85-
<InfiniteScroll hasMore={this.state.cursor < 5} loadMore={this.load} cursor={this.state.cursor} poll={500}>
85+
<InfiniteScroll hasMore={this.state.cursor < 5} loadMore={this.load} cursor={this.state.cursor} interval={500}>
8686
{this.state.items}
8787
</InfiniteScroll>
8888
</div>
@@ -93,4 +93,5 @@ class Demo2 extends React.Component {
9393
storiesOf('UI/InfiniteScroll', module)
9494
.add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/InfiniteScroll.md')}))
9595
.add('Example', () => <Demo />)
96+
.add('Example (short pages)', () => <Demo height={30} />)
9697
.add('Example in <div>', () => <Demo2 />)

src/InfiniteScroll/index.ts

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ const h = React.createElement;
55
const defaultSentinel = h('div', {style: {width: 1, height: 1}});
66

77
export interface InfiniteScrollProps {
8+
interval?: number;
89
cursor?: number | string;
910
sentinel?: React.ReactElement<any>;
1011
hasMore?: boolean;
1112
margin?: number;
12-
poll?: number;
1313
loadMore: () => void;
1414
}
1515

@@ -18,29 +18,62 @@ export interface InfiniteScrollState {
1818

1919
export class InfiniteScroll extends React.Component<InfiniteScrollProps, InfiniteScrollProps> {
2020
static defaultProps = {
21+
interval: 1e3,
2122
sentinel: defaultSentinel,
2223
hasMore: true,
2324
margin: 100,
2425
};
2526

27+
sentinelVisible = false;
2628
lastLoadMoreCursor: number | string | null = null;
29+
timer: any;
30+
mounted: boolean = true;
31+
32+
componentWillUnmount() {
33+
this.mounted = false;
34+
this.stopTimer();
35+
}
36+
37+
startTimer() {
38+
if (this.props.interval) {
39+
this.timer = setTimeout(() => {
40+
if (!this.mounted) return;
41+
if (!this.props.hasMore) return;
42+
if (!this.sentinelVisible) return;
43+
this.loadMore();
44+
this.startTimer();
45+
}, this.props.interval);
46+
}
47+
}
48+
49+
stopTimer() {
50+
clearTimeout(this.timer);
51+
}
2752

2853
onViewportChange = ({visible}) => {
54+
this.sentinelVisible = !!visible;
2955
if (visible) {
30-
if (this.lastLoadMoreCursor !== this.props.cursor) {
31-
this.lastLoadMoreCursor = this.props.cursor;
32-
this.props.loadMore();
33-
}
56+
this.loadMore();
57+
this.startTimer();
58+
} else {
59+
this.stopTimer();
3460
}
3561
};
3662

63+
loadMore() {
64+
if (this.lastLoadMoreCursor !== this.props.cursor) {
65+
this.lastLoadMoreCursor = this.props.cursor;
66+
this.props.loadMore();
67+
}
68+
}
69+
3770
render () {
3871
const {props} = this;
39-
const {children, hasMore, sentinel, margin, poll} = props;
72+
const {children, hasMore, sentinel, margin, interval} = props;
4073
return h(React.Fragment, null,
4174
children,
4275
hasMore &&
43-
h(ViewportScrollSensor, {margin: [0, 0, margin, 0], poll, onChange: this.onViewportChange}, sentinel),
76+
h(ViewportScrollSensor, {margin: [0, 0, margin, 0], poll: interval, onChange: this.onViewportChange}, sentinel),
4477
);
4578
}
4679
}

0 commit comments

Comments
 (0)