Merge pull request #145 from rajatsan/add-stories

Adds stories

Author: ankeetmaini

src/stories/InfiniteScrollWithHeight.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render } from 'react-dom';
+import InfiniteScroll from '../index';
+
+const style = {
+  height: 30,
+  border: '1px solid green',
+  margin: 6,
+  padding: 8,
+};
+
+export default class App extends React.Component {
+  state = {
+    items: Array.from({ length: 20 }),
+    hasMore: true,
+  };
+
+  fetchMoreData = () => {
+    if (this.state.items.length >= 500) {
+      this.setState({ hasMore: false });
+      return;
+    }
+    // a fake async api call like which sends
+    // 20 more records in .5 secs
+    setTimeout(() => {
+      this.setState({
+        items: this.state.items.concat(Array.from({ length: 20 })),
+      });
+    }, 500);
+  };
+
+  render() {
+    return (
+      <div>
+        <h1>demo: Infinite Scroll with fixed height</h1>
+        <hr />
+        <InfiniteScroll
+          dataLength={this.state.items.length}
+          next={this.fetchMoreData}
+          hasMore={this.state.hasMore}
+          loader={<h4>Loading...</h4>}
+          height={400}
+          endMessage={
+            <p style={{ textAlign: 'center' }}>
+              <b>Yay! You have seen it all</b>
+            </p>
+          }
+        >
+          {this.state.items.map((_, index) => (
+            <div style={style} key={index}>
+              div - #{index}
+            </div>
+          ))}
+        </InfiniteScroll>
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById('root'));

src/stories/PullDownToRefreshInfScroll.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from 'react-dom';
+import InfiniteScroll from '../index';
+
+const style = {
+  height: 30,
+  border: '1px solid green',
+  margin: 6,
+  padding: 8,
+};
+
+export default class App extends React.Component {
+  state = {
+    items: Array.from({ length: 20 }),
+  };
+
+  fetchMoreData = () => {
+    // a fake async api call like which sends
+    // 20 more records in 1.5 secs
+    setTimeout(() => {
+      this.setState({
+        items: this.state.items.concat(Array.from({ length: 20 })),
+      });
+    }, 1500);
+  };
+
+  render() {
+    return (
+      <div>
+        <h1>demo: Pull down to refresh</h1>
+        <hr />
+        <InfiniteScroll
+          dataLength={this.state.items.length}
+          next={this.fetchMoreData}
+          hasMore={true}
+          loader={<h4>Loading...</h4>}
+          pullDownToRefresh
+          pullDownToRefreshContent={
+            <h3 style={{ textAlign: 'center' }}>
+              &#8595; Pull down to refresh
+            </h3>
+          }
+          releaseToRefreshContent={
+            <h3 style={{ textAlign: 'center' }}>&#8593; Release to refresh</h3>
+          }
+          refreshFunction={this.fetchMoreData}
+        >
+          {this.state.items.map((_, index) => (
+            <div style={style} key={index}>
+              div - #{index}
+            </div>
+          ))}
+        </InfiniteScroll>
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById('root'));

src/stories/ScrollableTargetInfScroll.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from 'react-dom';
+import InfiniteScroll from '../index';
+
+const style = {
+  height: 30,
+  border: '1px solid green',
+  margin: 6,
+  padding: 8,
+};
+
+export default class App extends React.Component {
+  state = {
+    items: Array.from({ length: 20 }),
+  };
+
+  fetchMoreData = () => {
+    // a fake async api call like which sends
+    // 20 more records in 1.5 secs
+    setTimeout(() => {
+      this.setState({
+        items: this.state.items.concat(Array.from({ length: 20 })),
+      });
+    }, 1500);
+  };
+
+  render() {
+    return (
+      <div>
+        <h1>demo: Infinite Scroll with scrollable target</h1>
+        <hr />
+        <div id="scrollableDiv" style={{ height: 300, overflow: 'auto' }}>
+          <InfiniteScroll
+            dataLength={this.state.items.length}
+            next={this.fetchMoreData}
+            hasMore={true}
+            loader={<h4>Loading...</h4>}
+            scrollableTarget="scrollableDiv"
+          >
+            {this.state.items.map((_, index) => (
+              <div style={style} key={index}>
+                div - #{index}
+              </div>
+            ))}
+          </InfiniteScroll>
+        </div>
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById('root'));

src/stories/stories.tsx

@@ -2,8 +2,27 @@ import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import WindowInf from './WindowInfiniteScrollComponent';
+import PullDownToRefreshInfScroll from './PullDownToRefreshInfScroll';
+import InfiniteScrollWithHeight from './InfiniteScrollWithHeight';
+import ScrollableTargetInfiniteScroll from './ScrollableTargetInfScroll';
 const stories = storiesOf('Components', module);
 
 stories.add('InfiniteScroll', () => <WindowInf />, {
   info: { inline: true },
 });
+
+stories.add('PullDownToRefresh', () => <PullDownToRefreshInfScroll />, {
+  info: { inline: true },
+});
+
+stories.add('InfiniteScrollWithHeight', () => <InfiniteScrollWithHeight />, {
+  info: { inline: true },
+});
+
+stories.add(
+  'ScrollableTargetInfiniteScroll',
+  () => <ScrollableTargetInfiniteScroll />,
+  {
+    info: { inline: true },
+  }
+);