qbs-react-grid 1.0.38 → 1.0.40

package/es/Pagination.js

@@ -4,7 +4,9 @@ var PageIndex = function PageIndex(_ref) {
   var currentIndex = _ref.currentIndex,
     handleFirst = _ref.handleFirst,
     pageCount = _ref.pageCount;
+  console.log(currentIndex, 'insdie subfunction');
   var renderPageNumbers = function renderPageNumbers() {
+    console.log(currentIndex, 'insdie last function');
     var pageNumbers = [];
 
     // Add ellipsis if necessary
@@ -71,6 +73,9 @@ var Pagination = function Pagination(_ref2) {
     setCurrenIndex(value);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(value, currentIndex);
   };
+  useEffect(function () {
+    setCurrenIndex(currentIndex);
+  }, [currentPage]);
   useEffect(function () {
     var calculatedPageCount = Math.ceil(total / rowsPerPageState);
     setPageCount(calculatedPageCount);
@@ -83,6 +88,7 @@ var Pagination = function Pagination(_ref2) {
     setCurrenIndex(currentIndex + 1);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(currentIndex + 1, currentIndex);
   };
+  console.log(currentIndex, 'outside  function');
   return /*#__PURE__*/React.createElement("div", {
     className: 'qbs-table-custom-pagination',
     style: {
@@ -132,6 +138,7 @@ var Pagination = function Pagination(_ref2) {
   }))), /*#__PURE__*/React.createElement("div", {
     className: "block-container"
   }, /*#__PURE__*/React.createElement(PageIndex, {
+    key: currentIndex,
     currentIndex: currentIndex,
     handleFirst: handleFirst,
     pageCount: pageCount

package/es/qbsTable/QbsTable.js

@@ -9,9 +9,9 @@ import Table from '../Table';
 import { ActionCell, CheckCell, CustomTableCell, ExpandCell } from './CustomTableCell';
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
+import debounce from './utilities/debounce';
 import { SettingsIcon } from './utilities/icons';
 import '../../dist/css/qbs-react-grid.css';
-import debounce from './utilities/debounce';
 var CHECKBOX_LINE_HEIGHT = '36px';
 var COLUMN_WIDTH = 250;
 var QbsTable = function QbsTable(_ref) {
@@ -105,8 +105,9 @@ var QbsTable = function QbsTable(_ref) {
     var keys = event.target.checked ? data.map(function (item) {
       return item.id;
     }) : [];
-    setCheckedKeys(keys);
-    handleChecked(keys);
+    var updatedKeys = [].concat(checkedKeys, keys);
+    setCheckedKeys(updatedKeys);
+    handleChecked(updatedKeys);
   }, [data]);
   var handleCheck = useCallback(function (event) {
     var value = event.target.value;
@@ -364,8 +365,8 @@ var QbsTable = function QbsTable(_ref) {
     onChange: handleCheckAll,
     id: "checkbox-all",
     className: "qbs-table-checkbox-input " + classes.tableCheckBoxClass,
-    checked: data.every(function (item) {
-      return checkedKeys.includes(item.id);
+    checked: (data === null || data === void 0 ? void 0 : data.length) > 0 && data.every(function (item) {
+      return checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.includes(item.id);
     })
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: "checkbox-all"
@@ -402,7 +403,7 @@ var QbsTable = function QbsTable(_ref) {
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
     dataTheme: dataTheme
-  }))), /*#__PURE__*/React.createElement("div", null, pagination && /*#__PURE__*/React.createElement(Pagination, {
+  }))), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
     paginationProps: paginationProps
   }))));
 };

package/lib/Pagination.js

@@ -10,7 +10,9 @@ var PageIndex = function PageIndex(_ref) {
   var currentIndex = _ref.currentIndex,
     handleFirst = _ref.handleFirst,
     pageCount = _ref.pageCount;
+  console.log(currentIndex, 'insdie subfunction');
   var renderPageNumbers = function renderPageNumbers() {
+    console.log(currentIndex, 'insdie last function');
     var pageNumbers = [];
 
     // Add ellipsis if necessary
@@ -77,6 +79,9 @@ var Pagination = function Pagination(_ref2) {
     setCurrenIndex(value);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(value, currentIndex);
   };
+  (0, _react.useEffect)(function () {
+    setCurrenIndex(currentIndex);
+  }, [currentPage]);
   (0, _react.useEffect)(function () {
     var calculatedPageCount = Math.ceil(total / rowsPerPageState);
     setPageCount(calculatedPageCount);
@@ -89,6 +94,7 @@ var Pagination = function Pagination(_ref2) {
     setCurrenIndex(currentIndex + 1);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(currentIndex + 1, currentIndex);
   };
+  console.log(currentIndex, 'outside  function');
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: 'qbs-table-custom-pagination',
     style: {
@@ -138,6 +144,7 @@ var Pagination = function Pagination(_ref2) {
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "block-container"
   }, /*#__PURE__*/_react["default"].createElement(PageIndex, {
+    key: currentIndex,
     currentIndex: currentIndex,
     handleFirst: handleFirst,
     pageCount: pageCount

package/lib/qbsTable/QbsTable.js

@@ -14,9 +14,9 @@ var _Table = _interopRequireDefault(require("../Table"));
 var _CustomTableCell = require("./CustomTableCell");
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _ColumShowHide = _interopRequireDefault(require("./utilities/ColumShowHide"));
+var _debounce = _interopRequireDefault(require("./utilities/debounce"));
 var _icons = require("./utilities/icons");
 require("../../dist/css/qbs-react-grid.css");
-var _debounce = _interopRequireDefault(require("./utilities/debounce"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CHECKBOX_LINE_HEIGHT = '36px';
@@ -112,8 +112,9 @@ var QbsTable = function QbsTable(_ref) {
     var keys = event.target.checked ? data.map(function (item) {
       return item.id;
     }) : [];
-    setCheckedKeys(keys);
-    handleChecked(keys);
+    var updatedKeys = [].concat(checkedKeys, keys);
+    setCheckedKeys(updatedKeys);
+    handleChecked(updatedKeys);
   }, [data]);
   var handleCheck = (0, _react.useCallback)(function (event) {
     var value = event.target.value;
@@ -371,8 +372,8 @@ var QbsTable = function QbsTable(_ref) {
     onChange: handleCheckAll,
     id: "checkbox-all",
     className: "qbs-table-checkbox-input " + classes.tableCheckBoxClass,
-    checked: data.every(function (item) {
-      return checkedKeys.includes(item.id);
+    checked: (data === null || data === void 0 ? void 0 : data.length) > 0 && data.every(function (item) {
+      return checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.includes(item.id);
     })
   }), /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "checkbox-all"
@@ -409,7 +410,7 @@ var QbsTable = function QbsTable(_ref) {
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
     dataTheme: dataTheme
-  }))), /*#__PURE__*/_react["default"].createElement("div", null, pagination && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
+  }))), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
     paginationProps: paginationProps
   }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/Pagination.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useEffect, useState } from 'react';
+
 import { getRowDisplayRange } from './qbsTable/utilities/tablecalc';
 
 type PageProps = {
@@ -13,7 +14,10 @@ type PageProps = {
   };
 };
 const PageIndex = ({ currentIndex, handleFirst, pageCount }) => {
+  console.log(currentIndex, 'insdie subfunction');
   const renderPageNumbers = () => {
+    console.log(currentIndex, 'insdie last function');
+
     const pageNumbers: any = [];
 
     // Add ellipsis if necessary
@@ -84,6 +88,9 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
     setCurrenIndex(value);
     onPagination?.(value, currentIndex);
   };
+  useEffect(() => {
+    setCurrenIndex(currentIndex);
+  }, [currentPage]);
 
   useEffect(() => {
     const calculatedPageCount = Math.ceil(total / rowsPerPageState);
@@ -98,6 +105,8 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
     setCurrenIndex(currentIndex + 1);
     onPagination?.(currentIndex + 1, currentIndex);
   };
+  console.log(currentIndex, 'outside  function');
+
   return (
     <div
       className={'qbs-table-custom-pagination'}
@@ -154,7 +163,12 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
           </svg>
         </button>
         <div className="block-container">
-          <PageIndex currentIndex={currentIndex} handleFirst={handleFirst} pageCount={pageCount} />
+          <PageIndex
+            key={currentIndex}
+            currentIndex={currentIndex}
+            handleFirst={handleFirst}
+            pageCount={pageCount}
+          />
         </div>
         <button
           className="qbs-table-icon-container"

package/src/qbsTable/QbsTable.tsx

@@ -10,10 +10,10 @@ import { QbsColumnProps, QbsTableProps } from './commontypes';
 import { ActionCell, CheckCell, CustomTableCell, ExpandCell } from './CustomTableCell';
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
+import debounce from './utilities/debounce';
 import { SettingsIcon } from './utilities/icons';
 
 import '../../dist/css/qbs-react-grid.css';
-import debounce from './utilities/debounce';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 const COLUMN_WIDTH = 250;
@@ -89,8 +89,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const handleCheckAll = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const keys = event.target.checked ? data.map(item => item.id) : [];
-      setCheckedKeys(keys);
-      handleChecked(keys);
+      const updatedKeys = [...checkedKeys, ...keys];
+      setCheckedKeys(updatedKeys);
+      handleChecked(updatedKeys);
     },
     [data]
   );
@@ -389,7 +390,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     onChange={handleCheckAll}
                     id={`checkbox-all`}
                     className={`qbs-table-checkbox-input ${classes.tableCheckBoxClass}`}
-                    checked={data.every(item => checkedKeys.includes(item.id))}
+                    checked={data?.length > 0 && data.every(item => checkedKeys?.includes(item.id))}
                   />
                   <label htmlFor={`checkbox-all`}>
                     <svg
@@ -443,7 +444,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
             </Column>
           )}
         </Table>
-        <div>{pagination && <Pagination paginationProps={paginationProps} />}</div>
+        <div>
+          {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
+        </div>
       </div>
     </div>
   );