@spothero/ui 15.5.3 → 15.5.5

package/backlog/v1/components/Table/Table.js

@@ -271,7 +271,9 @@ var Table = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       var _this$props3 = this.props,
           onPageChange = _this$props3.onPageChange,
-          onSortChange = _this$props3.onSortChange;
+          onSortChange = _this$props3.onSortChange,
+          totalDataRowCount = _this$props3.totalDataRowCount,
+          pageSize = _this$props3.pageSize;
       var previousCurrentPage = prevState.currentPage,
           previousSortOrder = prevState.sortOrder,
           previousSortDataKey = prevState.sortDataKey;
@@ -281,6 +283,12 @@ var Table = /*#__PURE__*/function (_Component) {
           sortOrder = _this$state4.sortOrder,
           sortDataKey = _this$state4.sortDataKey;
 
+      if (totalDataRowCount !== prevProps.totalDataRowCount || pageSize !== prevProps.pageSize) {
+        this.setState({
+          totalPages: Math.ceil(totalDataRowCount / pageSize)
+        });
+      }
+
       if (previousCurrentPage !== currentPage && onPageChange) {
         onPageChange({
           totalPages: totalPages,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.5.3",
+  "version": "15.5.5",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
@@ -163,4 +163,4 @@
     "react-redux": ">=7.0.0",
     "redux": ">=4.0.0"
   }
-}
+}

package/styles/v1/components/Table/Table.jsx

@@ -147,7 +147,7 @@ export default class Table extends Component {
     }
 
     componentDidUpdate(prevProps, prevState) {
-        const {onPageChange, onSortChange} = this.props;
+        const {onPageChange, onSortChange, totalDataRowCount, pageSize} = this.props;
         const {
             currentPage: previousCurrentPage,
             sortOrder: previousSortOrder,
@@ -155,6 +155,12 @@ export default class Table extends Component {
         } = prevState;
         const {totalPages, currentPage, sortOrder, sortDataKey} = this.state;
 
+        if (totalDataRowCount !== prevProps.totalDataRowCount || pageSize !== prevProps.pageSize) {
+            this.setState({
+                totalPages: Math.ceil(totalDataRowCount / pageSize)
+            })
+        }
+
         if (previousCurrentPage !== currentPage && onPageChange) {
             onPageChange({
                 totalPages,

package/styles/v1/components/Table/stories/Methods.stories.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 
 import Table from '../Table';
 import TableSortType from '../TableSortType';
@@ -54,6 +54,41 @@ export const Pagination = () => {
     );
 };
 
+export const AsyncPagination = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [data, setData] = useState(PAGE_1_DATA);
+    const [totalDataRowCount, setTotalDataRowCount] = useState(0);
+
+    const onPageChange = pages => {
+        if (window.onPageChange) {
+            window.onPageChange(pages);
+        }
+
+        setCurrentPage(pages.currentPage);
+        setData(pages.currentPage === 1 ? PAGE_1_DATA : PAGE_2_DATA);
+    };
+
+    useEffect(() => {
+        setTimeout(() => {
+            setTotalDataRowCount(TableData.length);
+        }, 500);
+    }, [])
+
+    return (
+        <Table
+            data={data}
+            headers={headers}
+            pageSize={PAGE_SIZE}
+            currentPage={currentPage}
+            className="AvengersTable"
+            onPageChange={onPageChange}
+            totalDataRowCount={totalDataRowCount}
+        />
+    );
+};
+
+
+
 export const WithSortableHeaders = () => {
     const [{sortBy, sortOrder, sortDataKey}, setState] = useState({
         sortBy: ['-lastName'],