docs: add throttle demo

debraj1990 · Apr 7, 2016 · 5ca0149 · 5ca0149
1 parent 5a8c08e
commit 5ca0149
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 5 deletions.
diff --git a/examples/app.js b/examples/app.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {Router, Route, hashHistory, Link} from 'react-router';
+import { Router, Route, hashHistory, Link } from 'react-router';
 
 import Decorator from './pages/decorator';
-import Normal from './pages/Normal';
-import Scroll from './pages/Scroll';
-import Overflow from './pages/Overflow';
-import Image from './pages/Image';
+import Normal from './pages/normal';
+import Scroll from './pages/scroll';
+import Overflow from './pages/overflow';
+import Image from './pages/image';
+import Throttle from './pages/throttle';
 
 const Home = () => (
   <ul>
@@ -15,6 +16,7 @@ const Home = () => (
     <li><Link to="/decorator">using with <code>decorator</code></Link></li>
     <li><Link to="/scroll">using with <code>scrollTo</code></Link></li>
     <li><Link to="/overflow">using inside overflow container</Link></li>
+    <li><Link to="/throttle">using <code>throttle</code></Link></li>
   </ul>
 );
 
@@ -26,6 +28,7 @@ const routes = (
     <Route path="/normal" component={Normal} />
     <Route path="/scroll" component={Scroll} />
     <Route path="/overflow" component={Overflow} />
+    <Route path="/throttle" component={Throttle} />
   </Router>
 );
 

diff --git a/examples/index.html b/examples/index.html
@@ -95,6 +95,13 @@
     text-align: center;
     margin: 20px 0;
   }
+  code {
+    background: #eee;
+    padding: 2px 3px;
+    border-radius: 3px;
+    color: #333;
+    text-decoration: none;
+  }
   </style>
 </head>
 <body>

diff --git a/examples/pages/throttle.js b/examples/pages/throttle.js
@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import LazyLoad from '../../src/';
+import Widget from '../components/Widget';
+import Operation from '../components/Operation';
+import {uniqueId} from '../utils';
+
+export default class Throttle extends Component {
+  constructor() {
+    super();
+
+    const id = uniqueId();
+    this.state = {
+      arr: Array(20).fill(0).map((a, index) => {
+        return {
+          uniqueId: id,
+          once: [6, 7].indexOf(index) > -1
+        };
+      })
+    };
+  }
+
+  handleClick() {
+    const id = uniqueId();
+
+    this.setState({
+      arr: this.state.arr.map(el => {
+        return {
+          ...el,
+          uniqueId: id
+        };
+      })
+    });
+  }
+
+  render() {
+    return (
+      <div className="wrapper">
+        <Operation type="throttle" onClickUpdate={::this.handleClick} />
+        <div className="widget-list">
+          {this.state.arr.map((el, index) => {
+            return (
+              <LazyLoad once={el.once} key={index} throttle={200}>
+                <Widget once={el.once} id={el.uniqueId} />
+              </LazyLoad>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+