Merge pull request streamich#35 from streamich/infinite-scroll

Infinite scroll

Author: streamich

.storybook/webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const {compilerOptions} = require('../tsconfig.json');
 
 const SRC_PATH = path.join(__dirname, '../src');
 
@@ -10,7 +11,14 @@ module.exports = {
         loader: 'ts-loader',
         include: [
           SRC_PATH,
-        ]
+        ],
+        options: {
+          transpileOnly: true, // use transpileOnly mode to speed-up compilation
+          compilerOptions: {
+            ...compilerOptions,
+            declaration: false,
+          },
+        },
       }
     ]
   },

README.md

@@ -2,7 +2,7 @@
 
 # libreact
 
-[![][npm-badge]][npm-url] [![][travis-badge]][travis-url] [![React Universal Interface](https://img.shields.io/badge/React-Universal%20Interface-green.svg)](https://github.com/streamich/react-universal-interface) [![Backers on Open Collective](https://opencollective.com/libreact/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/libreact/sponsors/badge.svg)](#sponsors) 
+[![][npm-badge]][npm-url] [![][travis-badge]][travis-url] [![React Universal Interface](https://img.shields.io/badge/React-Universal%20Interface-green.svg)](https://github.com/streamich/react-universal-interface) [![Backers on Open Collective](https://opencollective.com/libreact/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/libreact/sponsors/badge.svg)](#sponsors)
 
 React standard library—must-have toolbox for any React project.
 
@@ -90,6 +90,7 @@ const MyComponent = mock();
      - [`<Slider>`](./docs/en/Slider.md)
      - [`<DropArea>`](./docs/en/DropArea.md)
      - [`<Group>`](./docs/en/Group.md)
+     - [`<InfiniteScroll>`](./docs/en/InfiniteScroll.md)
      - [`<OutsideClick>`](./docs/en/OutsideClick.md)
      - [`<Ripple>`](./docs/en/Ripple.md) and [`withRipple()`](./docs/en/Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Img>`](./docs/en/Img.md)

docs/en/InfiniteScroll.md

@@ -0,0 +1,27 @@
+# `<InfiniteScroll>`
+
+Fires `loadMore` prop when end of content becomes visible.
+
+
+## Usage
+
+```jsx
+import {InfiniteScroll} from 'libreact/lib/InfiniteScroll';
+
+<InfiniteScroll
+  hasMore={true || false}
+  cursor={cursor}
+  loadMore={() => {/* ... */}}
+>
+  {items}
+</InfiniteScroll>
+```
+
+
+## Props
+
+- `loadMore` &mdash; required, function that is called when user scrolls to the bottom of the component.
+- `cursor` &mdash; required, unique identifier of current page, `loadMore` is called only once for each adjacent unique value of `cursor`.
+- `hasMore` &mdash; optional, boolean, whether there are more items to load, if set to `false`, `loadMore` will not be called.
+- `sentinel` &mdash; optional, React element to render at the bottom of the component, when this element becomes visible it triggers `loadMore` function, defaults to empty `<div>` pixel.
+- `margin` &mdash; optional, number, invisible margin before `sentinel` when to already call `loadMore` before `sentinel` is visible, defaults to `100`.

docs/en/README.md

@@ -56,6 +56,7 @@
      - [`<Slider>`](./Slider.md)
      - [`<DropArea>`](./DropArea.md)
      - [`<Group>`](./Group.md)
+     - [`<InfiniteScroll>`](./InfiniteScroll.md)
      - [`<OutsideClick>`](./OutsideClick.md)
      - [`<Ripple>`](./Ripple.md) and [`withRipple()`](./Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Img>`](./Img.md)

docs/en/SUMMARY.md

@@ -69,6 +69,7 @@
   * [Ripple](Ripple.md)
   * [Img](Img.md)
   * [Group](Group.md)
+  * [InfiniteScroll](InfiniteScroll.md)
   * [WidthQuery](WidthQuery.md)
   * [View](View.md)
   * [WindowWidthQuery](WindowWidthQuery.md)

src/InfiniteScroll/__story__/story.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {InfiniteScroll} from '..';
+import ShowDocs from '../../ShowDocs';
+
+const h = React.createElement;
+
+const Block = () => {
+  return <div style={{
+    width: 100,
+    height: 100,
+    margin: 20,
+    background: 'red',
+  }}></div>
+};
+
+class Demo 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 (
+      <InfiniteScroll hasMore={this.state.cursor < 5} loadMore={this.load} cursor={this.state.cursor}>
+        {this.state.items}
+      </InfiniteScroll>
+    );
+  }
+}
+
+storiesOf('UI/InfiniteScroll', module)
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/InfiniteScroll.md')}))
+  .add('Example', () => <Demo />)

src/InfiniteScroll/index.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {ViewportScrollSensor} from '../ViewportScrollSensor';
+
+const h = React.createElement;
+const defaultSentinel = h('div', {style: {width: 1, height: 1}});
+
+export interface InfiniteScrollProps {
+  cursor?: number | string;
+  sentinel?: React.ReactElement<any>;
+  hasMore?: boolean;
+  margin?: number;
+  loadMore: () => void;
+}
+
+export interface InfiniteScrollState {
+}
+
+export class InfiniteScroll extends React.Component<InfiniteScrollProps, InfiniteScrollProps> {
+  static defaultProps = {
+    sentinel: defaultSentinel,
+    hasMore: true,
+    margin: 100,
+  };
+
+  lastLoadMoreCursor: number | string | null = null;
+
+  onViewportChange = ({visible}) => {
+    if (visible) {
+      if (this.lastLoadMoreCursor !== this.props.cursor) {
+        this.lastLoadMoreCursor = this.props.cursor;
+        this.props.loadMore();
+      }
+    }
+  };
+
+  render () {
+    const {props} = this;
+    const {children, hasMore, sentinel, margin} = props;
+    return h(React.Fragment, null,
+      children,
+      hasMore &&
+        h(ViewportScrollSensor, {margin: [0, 0, margin, 0], onChange: this.onViewportChange}, sentinel),
+    );
+  }
+}

src/ViewportObserverSensor/__story__/story.tsx

@@ -8,16 +8,16 @@ import StoryViewportSensorConf from './StoryViewportSensorConf';
 
 storiesOf('Sensors/ViewportSensor/ViewportObserverSensor', module)
   .add('Basic example', () =>
-    <StoryViewportSensorBasic sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorBasic sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Horizontal', () =>
-    <StoryViewportSensorHorizontal sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorHorizontal sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 0%', () =>
-    <StoryViewportSensorConf threshold={0} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0} sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 25%', () =>
-    <StoryViewportSensorConf threshold={0.25} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0.25} sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 75%', () =>
-    <StoryViewportSensorConf threshold={0.75} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0.75} sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 100%', () =>
-    <StoryViewportSensorConf threshold={1} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={1} sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 100%, margin 100px', () =>
     <StoryViewportSensorConf threshold={1} margin={[100, 100, 100, -100]} sensor={ViewportObserverSensor} onChange={action('onChange')} />);

src/ViewportObserverSensor/index.ts

@@ -55,9 +55,12 @@ export class ViewportObserverSensor extends Component<IViewportObserverSensorPro
     const entry = entries[0];
     const {intersectionRatio} = entry;
     const {threshold, onChange} = this.props;
-
+    const noThresholdAndTinyBitIsVisible = !!(!threshold && intersectionRatio);
+    const visibleMoreOrEqualToThreshold = threshold
+      ? intersectionRatio >= threshold
+      : intersectionRatio > threshold;
     const state = {
-      visible: !!((!threshold && intersectionRatio) || (intersectionRatio >= threshold))
+      visible: noThresholdAndTinyBitIsVisible || visibleMoreOrEqualToThreshold,
     };
 
     this.setState(state);

src/ViewportScrollSensor/__story__/story.tsx

@@ -8,16 +8,16 @@ import StoryViewportSensorConf from '../../ViewportObserverSensor/__story__/Stor
 
 storiesOf('Sensors/ViewportSensor/ViewportScrollSensor', module)
   .add('Basic example', () =>
-    <StoryViewportSensorBasic sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorBasic sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Horizontal', () =>
-    <StoryViewportSensorHorizontal sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorHorizontal sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 0%', () =>
-    <StoryViewportSensorConf threshold={0} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0} sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 25%', () =>
-    <StoryViewportSensorConf threshold={0.25} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0.25} sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 75%', () =>
-    <StoryViewportSensorConf threshold={0.75} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0.75} sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 100%', () =>
-    <StoryViewportSensorConf threshold={1} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={1} sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 100%, margin 100px', () =>
     <StoryViewportSensorConf threshold={1} margin={[100, 100, 100, 100]} sensor={ViewportScrollSensor} onChange={action('onChange')} />);

src/ViewportScrollSensor/index.ts

@@ -1,4 +1,4 @@
-import {Component, cloneElement, SFCElement} from 'react';
+import * as React from 'react';
 import {on, off, noop} from '../util';
 import {throttle} from 'throttle-debounce';
 import renderProp from '../util/renderProp';
@@ -56,19 +56,19 @@ export interface IViewportScrollSensorState {
   visible: boolean;
 }
 
-export class ViewportScrollSensor<TProps extends IViewportScrollSensorProps, TState extends IViewportScrollSensorState> extends Component<TProps, TState> {
+export class ViewportScrollSensor extends React.Component<IViewportScrollSensorProps, IViewportScrollSensorState> {
   static defaultProps = {
     threshold: 0,
     throttle: 50,
     margin: [0, 0, 0, 0]
-  };
+  } as any;
 
   mounted: boolean = false;
   el: HTMLElement;
 
-  state: TState = {
+  state: IViewportScrollSensorState = {
     visible: false
-  } as TState;
+  };
 
   ref = (originalRef) => (el) => {
     this.el = el;
@@ -79,13 +79,15 @@ export class ViewportScrollSensor<TProps extends IViewportScrollSensorProps, TSt
     this.mounted = true;
 
     on(document, 'scroll', this.onScroll);
+    on(window, 'resize', this.onScroll);
     this.onScroll();
   }
 
   componentWillUnmount () {
     this.mounted = false;
 
     off(document, 'scroll', this.onScroll);
+    off(window, 'resize', this.onScroll);
   }
 
   onCalculation (visible, rectRoot: TRect, rectEl: TRect, rectIntersection: TRect) {
@@ -134,7 +136,7 @@ export class ViewportScrollSensor<TProps extends IViewportScrollSensorProps, TSt
       }
     }
 
-    return cloneElement(element, {
+    return React.cloneElement(element, {
       ref: this.ref(element.ref)
     });
   }

src/ViewportSensor/index.ts

@@ -5,11 +5,12 @@ import faccToHoc, {divWrapper} from '../util/faccToHoc';
 
 let Sensor: any = ViewportObserverSensor;
 
-if (!(window as any).IntersectionObserver) {
-  const loader = () => import('../ViewportScrollSensor').then((module) => module.ViewportScrollSensor);
-
-  Sensor = loadable({loader});
-  Sensor.load();
+if (typeof window === 'object') {
+  if (!(window as any).IntersectionObserver) {
+    const loader = () => import('../ViewportScrollSensor').then((module) => module.ViewportScrollSensor);
+    Sensor = loadable({loader});
+    Sensor.load();
+  }
 }
 
 export const ViewportSensor: React.StatelessComponent<IViewportObserverSensorProps> = (props) => {