Add interval mode

Author: compulim

README.md

@@ -41,14 +41,14 @@ export default props =>
 
 | Name | Type | Description |
 | - | - | - |
-| `atBottom` | Boolean | `true` if the panel is currently near bottom (see `threshold`) |
-| `atEnd` | Boolean | `true` if the panel is currently near the end (see `mode` and `threshold` |
-| `atTop` | Boolean | `true` if the panel is currently near top (see `threshold`) |
-| `mode` | String | `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top |
-| `scrollToBottom` | Function | Call to scroll panel to bottom |
-| `scrollToEnd` | Function | Call to scroll panel to end |
-| `scrollToTop` | Function | Call to scroll panel to top |
-| `threshold` | Number | Threshold in pixels to consider the panel is near top/bottom, read-only and only set thru `props` |
+| `atBottom` | `boolean` | `true` if the panel is currently near bottom (see `threshold`) |
+| `atEnd` | `boolean` | `true` if the panel is currently near the end (see `mode` and `threshold` |
+| `atTop` | `boolean` | `true` if the panel is currently near top (see `threshold`) |
+| `mode` | `string` | `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top |
+| `scrollToBottom` | `function` | Call to scroll panel to bottom |
+| `scrollToEnd` | `function` | Call to scroll panel to end |
+| `scrollToTop` | `function` | Call to scroll panel to top |
+| `threshold` | `number` | Threshold in pixels to consider the panel is near top/bottom, read-only and only set thru `props` |
 
 # Contributions
 

package-lock.json

@@ -4,10 +4,13 @@
   "homepage": "/react-scroll-to-bottom",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.6",
     "component": "^1.0.0",
+    "glamor": "^2.20.40",
     "lorem-ipsum": "^1.0.4",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-interval": "^2.0.2",
     "react-scripts": "1.1.4"
   },
   "scripts": {

packages/playground/package.json

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-
 import { css } from 'glamor';
+import Interval from 'react-interval';
 import loremIpsum from 'lorem-ipsum';
+import React from 'react';
 import ScrollToBottom from 'component';
 
 const FADE_IN_ANIMATION = css.keyframes({
@@ -51,15 +51,18 @@ const SCROLL_VIEW_PADDING_CSS = css({
   }
 });
 
-class App extends Component {
+class App extends React.Component {
   constructor(props) {
     super(props);
 
     this.handleAdd1 = this.handleAdd.bind(this, 1);
     this.handleAdd10 = this.handleAdd.bind(this, 10);
     this.handleClear = this.handleClear.bind(this);
+    this.handleIntervalCallback = this.handleIntervalCallback.bind(this);
+    this.handleIntervalEnabledChange = this.handleIntervalEnabledChange.bind(this);
 
     this.state = {
+      intervalEnabled: false,
       paragraphs: []
     };
   }
@@ -78,7 +81,15 @@ class App extends Component {
   }
 
   handleClear() {
-    this.setState(state => ({ paragraphs: [] }));
+    this.setState(() => ({ paragraphs: [] }));
+  }
+
+  handleIntervalCallback() {
+    this.handleAdd(1);
+  }
+
+  handleIntervalEnabledChange({ target: { checked: intervalEnabled } }) {
+    this.setState(() => ({ intervalEnabled }));
   }
 
   render() {
@@ -94,6 +105,16 @@ class App extends Component {
           <li>
             <button onClick={ this.handleClear }>Clear</button>
           </li>
+          <li>
+            <label>
+              <input
+                checked={ this.state.intervalEnabled }
+                onChange={ this.handleIntervalEnabledChange }
+                type="checkbox"
+              />
+              Add one every second
+            </label>
+          </li>
         </ul>
         <div className="panes">
           <ScrollToBottom className={ SCROLL_VIEW_CSS + '' }>
@@ -107,6 +128,13 @@ class App extends Component {
             </div>
           </ScrollToBottom>
         </div>
+        { this.state.intervalEnabled &&
+          <Interval
+            callback={ this.handleIntervalCallback }
+            enabled={ true }
+            timeout={ 1000 }
+          />
+        }
       </div>
     );
   }