Add the SelectAll checkbox callback function for Batch actions carbon…

…-design-system#4190 (carbon-design-system#4196)
makafsal · Feb 5, 2024 · 918026e · 918026e
1 parent 95a4f59
commit 918026e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js b/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js
@@ -353,6 +353,7 @@ return (
         description: `When building a Datagrid that requires selectable rows, use the \`useSelectRows\` hook.
 - Include \`useSelectRows\` hook
 - Add \`onRowSelect\` to the \`useDatagrid\` hook, this is a callback function called when on a row's selection checkbox onChange, and sends back the row object and the event
+- Add \`onAllRowSelect\` to the \`useDatagrid\` hook, this is a callback function called when on all rows selection checkbox onChange, and sends back all rows object and the event
         `,
         source: {
           code: `
@@ -363,6 +364,7 @@ const datagridState = useDatagrid(
     columns,
     data,
     onRowSelect: (row, event) => console.log(row, event),
+    onAllRowSelect: (rows, event) => console.log(rows, event),
     batchActionMenuButtonLabel: 'More',
   },
   useSelectRows

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.mdx b/packages/ibm-products/src/components/Datagrid/Datagrid.mdx
@@ -1190,6 +1190,10 @@ hook.
 2. Add `onRowSelect` to the `useDatagrid` hook, this is a callback function
    called when on a row's selection checkbox onChange, and sends back the row
    object and the event
+3. Add `onAllRowSelect` to the `useDatagrid` hook, this is a callback function
+   called when on all rows selection checkbox onChange, and sends back all rows 
+   object and the event
+
 
 ```jsx
 const [data] = useState(makeData(10));
@@ -1199,6 +1203,7 @@ const datagridState = useDatagrid(
     columns,
     data,
     onRowSelect: (row, event) => console.log(row, event),
+    onAllRowSelect: (rows, event) => console.log(rows, event),
   },
   useSelectRows
 );

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js
@@ -486,7 +486,8 @@ export const BatchActions = () => {
       DatagridActions,
       DatagridBatchActions,
       rowActions: getRowActions(),
-      onSelectAllRows: () => console.log('onSelectAll batch action callback'),
+      onRowSelect: (row, event) => console.log('onRowClick: ', row, event),
+      onAllRowSelect: (rows, event) => console.log('onAllRowsClick called', rows, event),
       batchActionMenuButtonLabel: 'More',
     },
     useSelectRows,

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.js b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.js
@@ -38,6 +38,7 @@ const SelectAll = (datagridState) => {
     rows,
     getRowId,
     toggleAllRowsSelected,
+    onAllRowSelect,
   } = datagridState;
   const isFirstColumnStickyLeft =
     columns[0]?.sticky === 'left' && withStickyColumn;
@@ -67,6 +68,8 @@ const SelectAll = (datagridState) => {
         indeterminate: true,
       });
       toggleAllRowsSelected(false);
+      onAllRowSelect?.(rows, event);
+
       return onChange?.({
         target: { checked: false },
       });
@@ -77,6 +80,7 @@ const SelectAll = (datagridState) => {
       getRowId,
       isChecked: event.target.checked,
     });
+    onAllRowSelect?.(rows, event);
     return onChange?.(event);
   };