qbs-react-grid 1.0.38 → 1.0.39

package/es/Pagination.js

@@ -71,6 +71,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);

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;
@@ -365,7 +366,7 @@ var QbsTable = function QbsTable(_ref) {
     id: "checkbox-all",
     className: "qbs-table-checkbox-input " + classes.tableCheckBoxClass,
     checked: data.every(function (item) {
-      return checkedKeys.includes(item.id);
+      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

@@ -77,6 +77,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);

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;
@@ -372,7 +373,7 @@ var QbsTable = function QbsTable(_ref) {
     id: "checkbox-all",
     className: "qbs-table-checkbox-input " + classes.tableCheckBoxClass,
     checked: data.every(function (item) {
-      return checkedKeys.includes(item.id);
+      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.39",
   "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 = {
@@ -84,6 +85,9 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
     setCurrenIndex(value);
     onPagination?.(value, currentIndex);
   };
+  useEffect(() => {
+    setCurrenIndex(currentIndex);
+  }, [currentPage]);
 
   useEffect(() => {
     const calculatedPageCount = Math.ceil(total / rowsPerPageState);

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.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>
   );