Merge pull request #20343 from akeneo/add-mixed-checkbox-capability-t…

…o-table-component [DSM] Add mixed capability to checkbox in TableRow component
akeneo · Nov 10, 2023 · 8a0e54c · 8a0e54c
2 parents 6b47e0b + e94514d
commit 8a0e54c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 26 deletions.
diff --git a/front-packages/akeneo-design-system/src/components/Table/Table.stories.mdx b/front-packages/akeneo-design-system/src/components/Table/Table.stories.mdx
@@ -376,7 +376,7 @@ To compare information, for example how many products are completed versus how m
 <Canvas>
   <Story name="Complex table">
     {args => {
-      const [selectedLines, setSelectedLines] = useState([2]);
+      const [selectedLines, setSelectedLines] = useState([2, 3]);
       const handleToggleSelected = lineId => {
         if (selectedLines.indexOf(lineId) === -1) {
           setSelectedLines([...selectedLines, lineId]);
@@ -410,7 +410,7 @@ To compare information, for example how many products are completed versus how m
                 key={row.id}
                 onClick={() => handleClick(row.id)}
                 onSelectToggle={() => handleToggleSelected(row.id)}
-                isSelected={selectedLines.indexOf(row.id) !== -1}
+                isSelected={selectedLines.indexOf(row.id) !== -1 ? (row.id == 3 ? 'mixed' : true) : false}
               >
                 <Table.Cell>
                   <Image src={row.image} alt="The alt" />

diff --git a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx
@@ -132,7 +132,7 @@ type TableRowProps = Override<
     /**
      * Define if the row is selected, required when table is selectable
      */
-    isSelected?: boolean;
+    isSelected?: boolean | 'mixed';
 
     /**
      * Define if the row has a warning
@@ -165,7 +165,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   (
     {
       rowIndex = 0,
-      isSelected,
+      isSelected = false,
       level,
       onSelectToggle,
       onClick,
@@ -228,7 +228,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
             onClick={handleCheckboxChange}
           >
             <Checkbox
-              checked={!!isSelected}
+              checked={isSelected}
               onChange={(_value, e) => {
                 handleCheckboxChange(e);
               }}

diff --git a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.unit.tsx b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.unit.tsx
@@ -75,27 +75,6 @@ test('it throws when onSelectToggle is not given on selectable table', () => {
   mockConsole.mockRestore();
 });
 
-test('it throws when isSelected is not given on selectable table', () => {
-  const mockConsole = jest.spyOn(console, 'error').mockImplementation();
-
-  const onSelectToggle = jest.fn();
-  const cellRender = () =>
-    render(
-      <Table isSelectable={true}>
-        <Table.Body>
-          <Table.Row onSelectToggle={onSelectToggle}>
-            <Table.Cell>A value</Table.Cell>
-            <Table.Cell>Another value</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-  expect(cellRender).toThrowError();
-
-  mockConsole.mockRestore();
-});
-
 test('Table.Row supports forwardRef', () => {
   const ref = {current: null};
   render(