qbs-react-grid 1.0.35 → 1.0.37

package/es/qbsTable/QbsTable.js

@@ -98,15 +98,15 @@ var QbsTable = function QbsTable(_ref) {
   useEffect(function () {
     setCheckedKeys(selectedRows);
   }, [selectedRows]);
-  var handleChecked = debounce(function () {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(checkedKeys);
+  var handleChecked = debounce(function (keys) {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(keys);
   }, 500);
   var handleCheckAll = useCallback(function (event) {
     var keys = event.target.checked ? data.map(function (item) {
       return item.id;
     }) : [];
     setCheckedKeys(keys);
-    handleChecked();
+    handleChecked(keys);
   }, [data]);
   var handleCheck = useCallback(function (event) {
     var value = event.target.value;
@@ -114,7 +114,7 @@ var QbsTable = function QbsTable(_ref) {
       return key !== value;
     });
     setCheckedKeys(updatedKeys);
-    handleChecked();
+    handleChecked(updatedKeys);
   }, [checkedKeys]);
   var handleToggle = useCallback(function (columnName) {
     setColumns(function (cols) {
@@ -152,9 +152,9 @@ var QbsTable = function QbsTable(_ref) {
   useEffect(function () {
     handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
   }, [columns, handleColumnToggle]);
-  var handleClear = function handleClear() {
+  var handleClear = function handleClear(_ref2) {
     setCheckedKeys([]);
-    handleChecked();
+    handleChecked([]);
   };
   var toolbarProps = {
     title: title,
@@ -234,23 +234,23 @@ var QbsTable = function QbsTable(_ref) {
     return largestCellLength;
   }
   var columnsRendered = useMemo(function () {
-    return (columns != null ? columns : []).map(function (_ref2) {
-      var title = _ref2.title,
-        field = _ref2.field,
-        resizable = _ref2.resizable,
-        sortable = _ref2.sortable,
-        colWidth = _ref2.colWidth,
-        align = _ref2.align,
-        grouped = _ref2.grouped,
-        groupheader = _ref2.groupheader,
-        fixed = _ref2.fixed,
-        children = _ref2.children,
-        customCell = _ref2.customCell,
-        renderCell = _ref2.renderCell,
-        isVisible = _ref2.isVisible,
-        link = _ref2.link,
-        rowClick = _ref2.rowClick,
-        sortKey = _ref2.sortKey;
+    return (columns != null ? columns : []).map(function (_ref3) {
+      var title = _ref3.title,
+        field = _ref3.field,
+        resizable = _ref3.resizable,
+        sortable = _ref3.sortable,
+        colWidth = _ref3.colWidth,
+        align = _ref3.align,
+        grouped = _ref3.grouped,
+        groupheader = _ref3.groupheader,
+        fixed = _ref3.fixed,
+        children = _ref3.children,
+        customCell = _ref3.customCell,
+        renderCell = _ref3.renderCell,
+        isVisible = _ref3.isVisible,
+        link = _ref3.link,
+        rowClick = _ref3.rowClick,
+        sortKey = _ref3.sortKey;
       return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
         header: groupheader,
         fixed: fixed,
@@ -364,7 +364,9 @@ var QbsTable = function QbsTable(_ref) {
     onChange: handleCheckAll,
     id: "checkbox-all",
     className: "qbs-table-checkbox-input " + classes.tableCheckBoxClass,
-    checked: (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) === data.length
+    checked: data.every(function (item) {
+      return checkedKeys.includes(item.id);
+    })
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: "checkbox-all"
   }, /*#__PURE__*/React.createElement("svg", {

package/lib/qbsTable/QbsTable.js

@@ -105,15 +105,15 @@ var QbsTable = function QbsTable(_ref) {
   (0, _react.useEffect)(function () {
     setCheckedKeys(selectedRows);
   }, [selectedRows]);
-  var handleChecked = (0, _debounce["default"])(function () {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(checkedKeys);
+  var handleChecked = (0, _debounce["default"])(function (keys) {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(keys);
   }, 500);
   var handleCheckAll = (0, _react.useCallback)(function (event) {
     var keys = event.target.checked ? data.map(function (item) {
       return item.id;
     }) : [];
     setCheckedKeys(keys);
-    handleChecked();
+    handleChecked(keys);
   }, [data]);
   var handleCheck = (0, _react.useCallback)(function (event) {
     var value = event.target.value;
@@ -121,7 +121,7 @@ var QbsTable = function QbsTable(_ref) {
       return key !== value;
     });
     setCheckedKeys(updatedKeys);
-    handleChecked();
+    handleChecked(updatedKeys);
   }, [checkedKeys]);
   var handleToggle = (0, _react.useCallback)(function (columnName) {
     setColumns(function (cols) {
@@ -159,9 +159,9 @@ var QbsTable = function QbsTable(_ref) {
   (0, _react.useEffect)(function () {
     handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
   }, [columns, handleColumnToggle]);
-  var handleClear = function handleClear() {
+  var handleClear = function handleClear(_ref2) {
     setCheckedKeys([]);
-    handleChecked();
+    handleChecked([]);
   };
   var toolbarProps = {
     title: title,
@@ -241,23 +241,23 @@ var QbsTable = function QbsTable(_ref) {
     return largestCellLength;
   }
   var columnsRendered = (0, _react.useMemo)(function () {
-    return (columns != null ? columns : []).map(function (_ref2) {
-      var title = _ref2.title,
-        field = _ref2.field,
-        resizable = _ref2.resizable,
-        sortable = _ref2.sortable,
-        colWidth = _ref2.colWidth,
-        align = _ref2.align,
-        grouped = _ref2.grouped,
-        groupheader = _ref2.groupheader,
-        fixed = _ref2.fixed,
-        children = _ref2.children,
-        customCell = _ref2.customCell,
-        renderCell = _ref2.renderCell,
-        isVisible = _ref2.isVisible,
-        link = _ref2.link,
-        rowClick = _ref2.rowClick,
-        sortKey = _ref2.sortKey;
+    return (columns != null ? columns : []).map(function (_ref3) {
+      var title = _ref3.title,
+        field = _ref3.field,
+        resizable = _ref3.resizable,
+        sortable = _ref3.sortable,
+        colWidth = _ref3.colWidth,
+        align = _ref3.align,
+        grouped = _ref3.grouped,
+        groupheader = _ref3.groupheader,
+        fixed = _ref3.fixed,
+        children = _ref3.children,
+        customCell = _ref3.customCell,
+        renderCell = _ref3.renderCell,
+        isVisible = _ref3.isVisible,
+        link = _ref3.link,
+        rowClick = _ref3.rowClick,
+        sortKey = _ref3.sortKey;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isVisible && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
         header: groupheader,
         fixed: fixed,
@@ -371,7 +371,9 @@ var QbsTable = function QbsTable(_ref) {
     onChange: handleCheckAll,
     id: "checkbox-all",
     className: "qbs-table-checkbox-input " + classes.tableCheckBoxClass,
-    checked: (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) === data.length
+    checked: data.every(function (item) {
+      return checkedKeys.includes(item.id);
+    })
   }), /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "checkbox-all"
   }, /*#__PURE__*/_react["default"].createElement("svg", {

package/package.json

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

package/src/qbsTable/QbsTable.tsx

@@ -82,15 +82,15 @@ const QbsTable: React.FC<QbsTableProps> = ({
     setCheckedKeys(selectedRows as (number | string)[]);
   }, [selectedRows]);
 
-  const handleChecked = debounce(() => {
-    onSelect?.(checkedKeys);
+  const handleChecked = debounce((keys?: any) => {
+    onSelect?.(keys);
   }, 500);
 
   const handleCheckAll = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const keys = event.target.checked ? data.map(item => item.id) : [];
       setCheckedKeys(keys);
-      handleChecked();
+      handleChecked(keys);
     },
     [data]
   );
@@ -102,7 +102,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
         ? [...checkedKeys, value]
         : checkedKeys.filter(key => key !== value);
       setCheckedKeys(updatedKeys);
-      handleChecked();
+      handleChecked(updatedKeys);
     },
 
     [checkedKeys]
@@ -140,9 +140,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
   useEffect(() => {
     handleColumnToggle?.(columns);
   }, [columns, handleColumnToggle]);
-  const handleClear = () => {
+  const handleClear = ([]) => {
     setCheckedKeys([]);
-    handleChecked();
+    handleChecked([]);
   };
   const toolbarProps = {
     title: title,
@@ -389,7 +389,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     onChange={handleCheckAll}
                     id={`checkbox-all`}
                     className={`qbs-table-checkbox-input ${classes.tableCheckBoxClass}`}
-                    checked={checkedKeys?.length === data.length}
+                    checked={data.every(item => checkedKeys.includes(item.id))}
                   />
                   <label htmlFor={`checkbox-all`}>
                     <svg