diff --git a/src/__snapshots__/index.test.tsx.snap b/src/__snapshots__/index.test.tsx.snap index 46db491..cd41cc5 100644 --- a/src/__snapshots__/index.test.tsx.snap +++ b/src/__snapshots__/index.test.tsx.snap @@ -133,20 +133,28 @@ Array [ - + Name - + Qtd - + Price - + Kine @@ -157,7 +165,9 @@ Array [ - + Pigs @@ -168,7 +178,9 @@ Array [ - + Chickens @@ -181,15 +193,17 @@ Array [ - + Total - + 16 pcs - - + + $450 - + , @@ -275,20 +289,28 @@ Array [ - + Name - + Qtd - + Price - + Kine @@ -299,7 +321,9 @@ Array [ - + Pigs @@ -310,7 +334,9 @@ Array [ - + Chickens @@ -323,15 +349,17 @@ Array [ - + Total - + 16 pcs - - + + $450 - + , diff --git a/src/renderers/table/__snapshots__/index.test.tsx.snap b/src/renderers/table/__snapshots__/index.test.tsx.snap index b13e6cd..c246262 100644 --- a/src/renderers/table/__snapshots__/index.test.tsx.snap +++ b/src/renderers/table/__snapshots__/index.test.tsx.snap @@ -4,9 +4,9 @@ exports[` when receives a simple table renders a
tag without - @@ -15,9 +15,9 @@ exports[`
+ Kine - + 1 pcs
when receives a simple table renders a
tag without - @@ -26,12 +26,100 @@ exports[`
+ Pigs - + 3 pcs
when receives a simple table renders a
tag without - + + + + +
+ Chickens + + 12 pcs + + 150$ +
+`; + +exports[` when receives a table 2.20 format withHeadings = false renders a
tag without , or
1`] = ` + + + + + + + + + + + + + + + + + + +
+ Kine + + Pigs + + Chicken +
+ 1 pcs + + 3 pcs + + 12 pcs +
+ 100$ + + 200$ + + 150$ +
+`; + +exports[` when receives a table 2.20 format withHeadings = true renders a
tag without or
1`] = ` + + + + + + + + + + + + + + + + @@ -47,20 +135,28 @@ exports[`
+ Kine + Pigs + + Chicken +
+ 1 pcs + + 3 pcs + 12 pcs
+ 100$ + + 200$ + 150$
when receives a table block renders a
tag 1`] = ` - - - -
+ Name + Qtd + Price
+ Kine @@ -71,7 +167,9 @@ exports[` when receives a table block renders a
tag 1`] = ` -
+ Pigs @@ -82,7 +180,9 @@ exports[` when receives a table block renders a
tag 1`] = ` -
+ Chickens @@ -95,15 +195,17 @@ exports[` when receives a table block renders a
tag 1`] = ` - -
+ Total + 16 pcs - - + + $450 - +
@@ -116,20 +218,28 @@ exports[` when receives a table block without footer renders a
- - - -
+ Name + Qtd + Price
+ Kine @@ -140,7 +250,9 @@ exports[` when receives a table block without footer renders a
-
+ Pigs @@ -151,7 +263,9 @@ exports[` when receives a table block without footer renders a
-
+ Chickens diff --git a/src/renderers/table/index.test.tsx b/src/renderers/table/index.test.tsx index 201ca59..ed1ee95 100644 --- a/src/renderers/table/index.test.tsx +++ b/src/renderers/table/index.test.tsx @@ -49,4 +49,24 @@ describe('', () => { expect(create(
).toJSON()).toMatchSnapshot(); }); }); + + describe('when receives a table 2.20 format', () => { + describe.each([ + [true, 'renders a
tag without or
'], + [false, 'renders a tag without , or
'], + ])('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().toJSON()).toMatchSnapshot(); + }); + }); + }); }); diff --git a/src/renderers/table/index.tsx b/src/renderers/table/index.tsx index 5482ab3..ebce129 100644 --- 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 }) => ( + + + {row?.map((cell, i) => ( + + ))} + + +); + +const Tr: FC<{ + row: Row; + withHeadings: boolean; +}> = ({ row, withHeadings }) => ( + + {row.map((cell, i) => + i === 0 && withHeadings ? ( + + ) : ( + + ), + )} + +); + const Table: RenderFn = ({ data, className = '' }) => { const tableprops: { [s: string]: string; @@ -18,35 +53,24 @@ const Table: RenderFn = ({ 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 (
+ {HTMLReactParser(cell)} +
+ {HTMLReactParser(cell)} + {HTMLReactParser(cell)}
- {data?.caption && } - {data?.header && ( - - - {data.header.map((cell, i) => ( - - ))} - - - )} + <> + {data?.caption && } + {header && } + - {data?.content.map((row, i) => ( - - {row.map((cell, j) => { - const Tag = `t${j === 0 ? 'h' : 'd'}` as keyof JSX.IntrinsicElements; - return {HTMLReactParser(cell)}; - })} - + {content?.map((row, i) => ( + ))} {data?.footer && ( - - {data?.footer.map((cell, i) => ( - - ))} - + )}
{HTMLReactParser(data.caption)}
{HTMLReactParser(cell)}
{HTMLReactParser(data.caption)}
{HTMLReactParser(cell)}