Fix Table block with new format

The new format assumes that withHeadings property only applies to the first row. This makes our table renderer compatible with both formats. Closes #34
moveyourdigital · Oct 27, 2021 · 57cc76c · 57cc76c
1 parent 599fa3e
commit 57cc76c
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 39 deletions.
diff --git a/src/__snapshots__/index.test.tsx.snap b/src/__snapshots__/index.test.tsx.snap
@@ -150,7 +150,6 @@ Array [
         </th>
       </tr>
     </thead>
-    
     <tbody>
       <tr>
         <th
@@ -307,7 +306,6 @@ Array [
         </th>
       </tr>
     </thead>
-    
     <tbody>
       <tr>
         <th

diff --git a/src/renderers/table/__snapshots__/index.test.tsx.snap b/src/renderers/table/__snapshots__/index.test.tsx.snap
@@ -2,14 +2,11 @@
 
 exports[`<Table /> when receives a simple table renders a <table> tag without <thead>, <tfoot> or <caption> 1`] = `
 <table>
-  
   <tbody>
     <tr>
-      <th
-        scope="row"
-      >
+      <td>
         Kine
-      </th>
+      </td>
       <td>
         1 pcs
       </td>
@@ -18,27 +15,111 @@ exports[`<Table /> when receives a simple table renders a <table> tag without <t
       </td>
     </tr>
     <tr>
-      <th
-        scope="row"
-      >
+      <td>
         Pigs
-      </th>
+      </td>
+      <td>
+        3 pcs
+      </td>
+      <td>
+        200$
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Chickens
+      </td>
+      <td>
+        12 pcs
+      </td>
+      <td>
+        150$
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`<Table /> when receives a table 2.20 format withHeadings = false renders a <table> tag without <thead>, <tfoot> or <caption> 1`] = `
+<table>
+  <tbody>
+    <tr>
+      <td>
+        Kine
+      </td>
+      <td>
+        Pigs
+      </td>
+      <td>
+        Chicken
+      </td>
+    </tr>
+    <tr>
+      <td>
+        1 pcs
+      </td>
       <td>
         3 pcs
       </td>
+      <td>
+        12 pcs
+      </td>
+    </tr>
+    <tr>
+      <td>
+        100$
+      </td>
       <td>
         200$
       </td>
+      <td>
+        150$
+      </td>
     </tr>
+  </tbody>
+</table>
+`;
+
+exports[`<Table /> when receives a table 2.20 format withHeadings = true renders a <table> tag without <tfoot> or <caption> 1`] = `
+<table>
+  <thead>
     <tr>
       <th
-        scope="row"
+        scope="col"
       >
-        Chickens
+        Kine
       </th>
+      <th
+        scope="col"
+      >
+        Pigs
+      </th>
+      <th
+        scope="col"
+      >
+        Chicken
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        1 pcs
+      </td>
+      <td>
+        3 pcs
+      </td>
       <td>
         12 pcs
       </td>
+    </tr>
+    <tr>
+      <td>
+        100$
+      </td>
+      <td>
+        200$
+      </td>
       <td>
         150$
       </td>
@@ -71,7 +152,6 @@ exports[`<Table /> when receives a table block renders a <table> tag 1`] = `
       </th>
     </tr>
   </thead>
-  
   <tbody>
     <tr>
       <th
@@ -155,7 +235,6 @@ exports[`<Table /> when receives a table block without footer renders a <table>
       </th>
     </tr>
   </thead>
-  
   <tbody>
     <tr>
       <th

diff --git a/src/renderers/table/index.test.tsx b/src/renderers/table/index.test.tsx
@@ -49,4 +49,24 @@ describe('<Table />', () => {
       expect(create(<Table data={data} />).toJSON()).toMatchSnapshot();
     });
   });
+
+  describe('when receives a table 2.20 format', () => {
+    describe.each([
+      [true, 'renders a <table> tag without <tfoot> or <caption>'],
+      [false, 'renders a <table> tag without <thead>, <tfoot> or <caption>'],
+    ])('withHeadings = %p', (withHeadings, display) => {
+      const data: TableBlockData = {
+        withHeadings,
+        content: [
+          ['Kine', 'Pigs', 'Chicken'],
+          ['1 pcs', '3 pcs', '12 pcs'],
+          ['100$', '200$', '150$'],
+        ],
+      };
+
+      it(display, () => {
+        expect(create(<Table data={data} />).toJSON()).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/renderers/table/index.tsx b/src/renderers/table/index.tsx
@@ -1,14 +1,49 @@
-import React from 'react';
+import React, { FC } from 'react';
 import HTMLReactParser from 'html-react-parser';
 import { RenderFn } from '../..';
 
+type Row = string[];
+type Content = Row[];
+
 export interface TableBlockData {
-  content: string[][];
+  content: Content;
+  withHeadings?: boolean;
   header?: string[];
   footer?: string[];
   caption?: string;
 }
 
+const THead: FC<{
+  row: Row;
+}> = ({ row }) => (
+  <thead>
+    <tr>
+      {row?.map((cell, i) => (
+        <th key={`${i}`} scope="col">
+          {HTMLReactParser(cell)}
+        </th>
+      ))}
+    </tr>
+  </thead>
+);
+
+const Tr: FC<{
+  row: Row;
+  withHeadings: boolean;
+}> = ({ row, withHeadings }) => (
+  <tr>
+    {row.map((cell, i) =>
+      i === 0 && withHeadings ? (
+        <th key={i} scope="row">
+          {HTMLReactParser(cell)}
+        </th>
+      ) : (
+        <td key={i}>{HTMLReactParser(cell)}</td>
+      ),
+    )}
+  </tr>
+);
+
 const Table: RenderFn<TableBlockData> = ({ data, className = '' }) => {
   const tableprops: {
     [s: string]: string;
@@ -18,35 +53,24 @@ const Table: RenderFn<TableBlockData> = ({ data, className = '' }) => {
     tableprops.className = className;
   }
 
+  const content = data?.withHeadings ? data?.content.slice(1) : data?.content;
+  const header = data?.withHeadings ? data?.content[0] : data?.header;
+  const withRowHeadings = !!data?.header;
+
   return (
     <table {...tableprops}>
-      {data?.caption && <caption>{HTMLReactParser(data.caption)}</caption>}
-      {data?.header && (
-        <thead>
-          <tr>
-            {data.header.map((cell, i) => (
-              <th key={`${i}`}>{HTMLReactParser(cell)}</th>
-            ))}
-          </tr>
-        </thead>
-      )}
+      <>
+        {data?.caption && <caption>{HTMLReactParser(data.caption)}</caption>}
+        {header && <THead row={header} />}
+      </>
       <tbody>
-        {data?.content.map((row, i) => (
-          <tr key={`${i}`}>
-            {row.map((cell, j) => {
-              const Tag = `t${j === 0 ? 'h' : 'd'}` as keyof JSX.IntrinsicElements;
-              return <Tag key={`${i}${j}`}>{HTMLReactParser(cell)}</Tag>;
-            })}
-          </tr>
+        {content?.map((row, i) => (
+          <Tr key={i} row={row} withHeadings={withRowHeadings} />
         ))}
       </tbody>
       {data?.footer && (
         <tfoot>
-          <tr>
-            {data?.footer.map((cell, i) => (
-              <th key={`${i}`}>{HTMLReactParser(cell)}</th>
-            ))}
-          </tr>
+          <Tr row={data?.footer} withHeadings={withRowHeadings} />
         </tfoot>
       )}
     </table>