Merge pull request #37 from streamich/poll-scroll-sensor

feat: 🎸 add polling to scroll sensor and infinite scroll

src/InfiniteScroll/__story__/story.tsx

@@ -51,6 +51,46 @@ class Demo extends React.Component {
   }
 }
 
+class Demo2 extends React.Component {
+  state = {
+    items: [
+      <Block key={0} />,
+      <Block key={1} />,
+      <Block key={2} />,
+      <Block key={3} />,
+      <Block key={4} />,
+    ],
+    cursor: 1,
+  };
+
+  constructor (props) {
+    super(props);
+  }
+
+  load = (cnt = 5) => {
+    console.log('loading for cursor: ' + this.state.cursor);
+    const items = [...this.state.items];
+    for (let i = 0; i < cnt; i++) {
+      items.push(<Block key={items.length} />);
+    }
+    this.setState({
+      items,
+      cursor: this.state.cursor + 1,
+    });
+  };
+
+  render () {
+    return (
+      <div style={{border: '1px solid red', height: 400, width: 300, overflowY: 'scroll'}}>
+        <InfiniteScroll hasMore={this.state.cursor < 5} loadMore={this.load} cursor={this.state.cursor} poll={500}>
+          {this.state.items}
+        </InfiniteScroll>
+      </div>
+    );
+  }
+}
+
 storiesOf('UI/InfiniteScroll', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/InfiniteScroll.md')}))
   .add('Example', () => <Demo />)
+  .add('Example in <div>', () => <Demo2 />)

src/InfiniteScroll/index.ts

@@ -9,6 +9,7 @@ export interface InfiniteScrollProps {
   sentinel?: React.ReactElement<any>;
   hasMore?: boolean;
   margin?: number;
+  poll?: number;
   loadMore: () => void;
 }
 
@@ -35,11 +36,11 @@ export class InfiniteScroll extends React.Component<InfiniteScrollProps, Infinit
 
   render () {
     const {props} = this;
-    const {children, hasMore, sentinel, margin} = props;
+    const {children, hasMore, sentinel, margin, poll} = props;
     return h(React.Fragment, null,
       children,
       hasMore &&
-        h(ViewportScrollSensor, {margin: [0, 0, margin, 0], onChange: this.onViewportChange}, sentinel),
+        h(ViewportScrollSensor, {margin: [0, 0, margin, 0], poll, onChange: this.onViewportChange}, sentinel),
     );
   }
 }

src/ViewportObserverSensor/__story__/StoryViewportSensorConf.tsx

@@ -13,6 +13,7 @@ const StoryViewportSensorConf = ({sensor: Sensor, onChange, threshold, margin=[0
         threshold={threshold}
         margin={margin}
         onChange={onChange}
+        poll={0}
       >{(state) =>
         <div style={{
           width: 300,

src/ViewportScrollSensor/index.ts

@@ -49,6 +49,7 @@ export interface IViewportScrollSensorProps extends IUniversalInterfaceProps<IVi
   margin?: TMargin;
   threshold?: number;
   throttle?: number;
+  poll?: number;
   onChange?: (state: IViewportScrollSensorState) => void;
 }
 
@@ -65,6 +66,7 @@ export class ViewportScrollSensor extends React.Component<IViewportScrollSensorP
 
   mounted: boolean = false;
   el: HTMLElement;
+  pollTimer;
 
   state: IViewportScrollSensorState = {
     visible: false
@@ -81,15 +83,26 @@ export class ViewportScrollSensor extends React.Component<IViewportScrollSensorP
     on(document, 'scroll', this.onScroll);
     on(window, 'resize', this.onScroll);
     this.onScroll();
+    if (this.props.poll) {
+      setTimeout(this.poll, this.props.poll);
+    }
   }
 
   componentWillUnmount () {
     this.mounted = false;
 
+    clearTimeout(this.pollTimer);
     off(document, 'scroll', this.onScroll);
     off(window, 'resize', this.onScroll);
   }
 
+  poll = () => {
+    if (this.mounted) {
+      this.onScroll();
+      setTimeout(this.poll, this.props.poll);
+    }
+  };
+
   onCalculation (visible, rectRoot: TRect, rectEl: TRect, rectIntersection: TRect) {
     if (visible !== this.state.visible) {
       const state = {