From b4a6367bce2984ac4d671f262faccfbb6204a0b5 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 12 Mar 2024 16:44:26 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20DataGrid=20selectio?=
 =?UTF-8?q?n=20checkbox=20rerendering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each time a row was select or unselect the checkbox was re-triggering
its animation, which looked buggy.

Fixes #37
---
 .changeset/famous-mice-explode.md             |  5 ++++
 .../react/src/components/DataGrid/index.tsx   | 23 +++++++++++++++----
 .../react/src/components/DataGrid/utils.tsx   | 13 ++++-------
 3 files changed, 28 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/famous-mice-explode.md

diff --git a/.changeset/famous-mice-explode.md b/.changeset/famous-mice-explode.md
new file mode 100644
index 0000000..6e642f8
--- /dev/null
+++ b/.changeset/famous-mice-explode.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix DataGrid selection checkbox rerendering
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index 4476f01..65477f2 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -12,12 +12,14 @@ import { Pagination, PaginationProps } from ":/components/Pagination";
 import { useCunningham } from ":/components/Provider";
 import { Loader } from ":/components/Loader";
 import {
+  HEADER_ID_SELECT,
   paginationToPaginationState,
   sortingStateToSortModel,
   sortModelToSortingState,
   useHeadlessColumns,
 } from ":/components/DataGrid/utils";
 import emptyImageUrl from ":/components/DataGrid/empty.svg";
+import { Checkbox } from ":/components/Forms/Checkbox";
 
 export interface Row extends Record<string, any> {
   id: string;
@@ -208,7 +210,7 @@ export const DataGrid = <T extends Row>({
                               colSpan={header.colSpan}
                               className={classNames({
                                 "c__datagrid__header--select":
-                                  header.id === "select",
+                                  header.id === HEADER_ID_SELECT,
                               })}
                               style={style}
                             >
@@ -230,9 +232,22 @@ export const DataGrid = <T extends Row>({
                                       }
                                     : {})}
                                 >
-                                  {flexRender(
-                                    header.column.columnDef.header,
-                                    header.getContext(),
+                                  {/* We cant use flexRender for select header because it triggers a re-render each time */}
+                                  {/* a row is selected or unselected, re-triggering the animation each time, which looks buggy. */}
+                                  {header.id === HEADER_ID_SELECT ? (
+                                    <Checkbox
+                                      checked={table.getIsAllRowsSelected()}
+                                      indeterminate={table.getIsSomeRowsSelected()}
+                                      onChange={table.getToggleAllRowsSelectedHandler()}
+                                      aria-label={t(
+                                        "components.datagrid.rows_selection_aria",
+                                      )}
+                                    />
+                                  ) : (
+                                    flexRender(
+                                      header.column.columnDef.header,
+                                      header.getContext(),
+                                    )
                                   )}
                                   {header.column.getIsSorted() === "asc" && (
                                     <span className="material-icons">
diff --git a/packages/react/src/components/DataGrid/utils.tsx b/packages/react/src/components/DataGrid/utils.tsx
index 574b0b0..c72009a 100644
--- a/packages/react/src/components/DataGrid/utils.tsx
+++ b/packages/react/src/components/DataGrid/utils.tsx
@@ -11,6 +11,8 @@ import { PaginationProps } from ":/components/Pagination";
 import { BaseProps, Column, Row, SortModel } from ":/components/DataGrid/index";
 import { useCunningham } from ":/components/Provider";
 
+export const HEADER_ID_SELECT = "cunningham-select";
+
 /**
  * Converts Cunningham's columns to the underlying tanstack table.
  */
@@ -47,15 +49,8 @@ export const useHeadlessColumns = <T extends Row>({
   if (enableRowSelection) {
     headlessColumns = [
       columnHelper.display({
-        id: "select",
-        header: ({ table }) => (
-          <Checkbox
-            checked={table.getIsAllRowsSelected()}
-            indeterminate={table.getIsSomeRowsSelected()}
-            onChange={table.getToggleAllRowsSelectedHandler()}
-            aria-label={t("components.datagrid.rows_selection_aria")}
-          />
-        ),
+        id: HEADER_ID_SELECT,
+        header: () => null,
         cell: ({ row }) => (
           <Checkbox
             checked={row.getIsSelected()}