react-infinite-scroll-component 6.1.0 → 6.1.1

package/.github/workflows/publish.yml

@@ -1,21 +1,33 @@
-name: publish on release
+name: Publish on Release
 
-on: [release]
+on:
+  release:
+    types: [published]
 
 jobs:
-  build:
+  publish:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
-      - name: install dependencies
-        run: yarn
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'yarn'
+          registry-url: 'https://registry.npmjs.org'
 
-      - name: npm publish
-        run: |
-          npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
-          npm publish || true
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Publish to npm
         env:
-          CI: true
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+        run: npm publish --access public || true

package/.github/workflows/push.yml

@@ -1,30 +1,50 @@
-name: react-infinite-scroll-component
+name: CI
 
-on: [push]
+on:
+  push:
+    branches: ['**']
+  pull_request:
 
 jobs:
   test:
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [16.x, 18.x, 20.x]
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
-      - name: install dependencies
-        run: yarn
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
 
-      - name: lint
+      - name: Lint
         run: yarn lint
 
-      - name: prettier
+      - name: Prettier check
         run: yarn prettier:check
 
-      - name: unit tests
-        run: yarn test
-
-      - name: ts type checks
+      - name: Type check
         run: yarn ts-check
 
-      - uses: codecov/codecov-action@v1.0.3
+      - name: Unit tests
+        run: yarn test --coverage --runInBand
+
+      - name: Build package
+        run: yarn build
+
+      - name: Upload coverage to Codecov
+        if: matrix.node-version == '20.x'
+        uses: codecov/codecov-action@v4
         with:
-          token: ${{secrets.CODECOV_TOKEN}}
-          file: ./coverage/lcov.info
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/lcov.info
+          flags: unittests
+          fail_ci_if_error: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-infinite-scroll-component",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "An Infinite Scroll component in react.",
   "source": "src/index.tsx",
   "main": "dist/index.js",

package/dist/stories/InfiniteScrollWithHeight.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export default class App extends React.Component {
-    state: {
-        items: unknown[];
-        hasMore: boolean;
-    };
-    fetchMoreData: () => void;
-    render(): JSX.Element;
-}

package/dist/stories/PullDownToRefreshInfScroll.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export default class App extends React.Component {
-    state: {
-        items: unknown[];
-    };
-    fetchMoreData: () => void;
-    render(): JSX.Element;
-}

package/dist/stories/ScrollableTargetInfScroll.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export default class App extends React.Component {
-    state: {
-        items: unknown[];
-    };
-    fetchMoreData: () => void;
-    render(): JSX.Element;
-}

package/dist/stories/ScrolleableTop.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export default class App extends React.Component {
-    state: {
-        items: unknown[];
-    };
-    fetchMoreData: () => void;
-    render(): JSX.Element;
-}

package/dist/stories/WindowInfiniteScrollComponent.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-declare type State = {
-    data: number[];
-};
-export default class WindowInfiniteScrollComponent extends React.Component<{}, State> {
-    state: {
-        data: any[];
-    };
-    next: () => void;
-    render(): JSX.Element;
-}
-export {};

package/dist/stories/stories.d.ts

@@ -1 +0,0 @@
-export {};

package/src/stories/InfiniteScrollWithHeight.tsx

@@ -1,60 +0,0 @@
-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'));

package/src/stories/PullDownToRefreshInfScroll.tsx

@@ -1,59 +0,0 @@
-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'));

package/src/stories/ScrollableTargetInfScroll.tsx

@@ -1,52 +0,0 @@
-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'));

package/src/stories/ScrolleableTop.tsx

@@ -1,62 +0,0 @@
-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 on top</h1>
-        <hr />
-        <div
-          id="scrollableDiv"
-          style={{
-            height: 300,
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column-reverse',
-          }}
-        >
-          <InfiniteScroll
-            dataLength={this.state.items.length}
-            next={this.fetchMoreData}
-            style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.
-            inverse={true}
-            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'));

package/src/stories/WindowInfiniteScrollComponent.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import InfiniteScroll from '../index';
-type State = {
-  data: number[];
-};
-export default class WindowInfiniteScrollComponent extends React.Component<
-  {},
-  State
-> {
-  state = {
-    data: new Array(100).fill(1),
-  };
-
-  next = () => {
-    setTimeout(() => {
-      const newData = [...this.state.data, new Array(100).fill(1)];
-      this.setState({ data: newData });
-    }, 2000);
-  };
-  render() {
-    return (
-      <>
-        <InfiniteScroll
-          hasMore={true}
-          next={this.next}
-          loader={<h1>Loading...</h1>}
-          dataLength={this.state.data.length}
-        >
-          {this.state.data.map((_, i) => (
-            <div
-              key={i}
-              style={{ height: 30, margin: 4, border: '1px solid hotpink' }}
-            >
-              #{i + 1} row
-            </div>
-          ))}
-        </InfiniteScroll>
-      </>
-    );
-  }
-}

package/src/stories/stories.tsx

@@ -1,34 +0,0 @@
-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';
-import ScrolleableTop from './ScrolleableTop';
-
-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 },
-  }
-);
-
-stories.add('InfiniteScrollTop', () => <ScrolleableTop />, {
-  info: { inline: true },
-});