From 599fa3e432f4193a74e228832df10bc760fe2d2f Mon Sep 17 00:00:00 2001 From: Vitor Carvalho Date: Wed, 27 Oct 2021 13:07:07 +0100 Subject: [PATCH 1/2] Fix semantic scope to th in table --- src/__snapshots__/index.test.tsx.snap | 74 ++++++++++++------ .../table/__snapshots__/index.test.tsx.snap | 75 ++++++++++++++----- 2 files changed, 107 insertions(+), 42 deletions(-) diff --git a/src/__snapshots__/index.test.tsx.snap b/src/__snapshots__/index.test.tsx.snap index 46db491..ac620b9 100644 --- a/src/__snapshots__/index.test.tsx.snap +++ b/src/__snapshots__/index.test.tsx.snap @@ -133,20 +133,29 @@ Array [ - + Name - + Qtd - + Price + - + Kine @@ -157,7 +166,9 @@ Array [ - + Pigs @@ -168,7 +179,9 @@ Array [ - + Chickens @@ -181,15 +194,17 @@ Array [ - + Total - + 16 pcs - - + + $450 - + , @@ -275,20 +290,29 @@ Array [ - + Name - + Qtd - + Price + - + Kine @@ -299,7 +323,9 @@ Array [ - + Pigs @@ -310,7 +336,9 @@ Array [ - + Chickens @@ -323,15 +351,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..9066627 100644 --- a/src/renderers/table/__snapshots__/index.test.tsx.snap +++ b/src/renderers/table/__snapshots__/index.test.tsx.snap @@ -2,9 +2,12 @@ exports[` when receives a simple table renders a
tag without , or
1`] = ` + -
+ Kine @@ -15,7 +18,9 @@ exports[` when receives a simple table renders a
tag without -
+ Pigs @@ -26,7 +31,9 @@ exports[` when receives a simple table renders a
tag without -
+ Chickens @@ -47,20 +54,29 @@ exports[` when receives a table block renders a
tag 1`] = ` - - - + -
+ Name + Qtd + Price
+ Kine @@ -71,7 +87,9 @@ exports[` when receives a table block renders a
tag 1`] = ` -
+ Pigs @@ -82,7 +100,9 @@ exports[` when receives a table block renders a
tag 1`] = ` -
+ Chickens @@ -95,15 +115,17 @@ exports[` when receives a table block renders a
tag 1`] = ` - -
+ Total + 16 pcs - - + + $450 - +
@@ -116,20 +138,29 @@ exports[` when receives a table block without footer renders a
- - - + -
+ Name + Qtd + Price
+ Kine @@ -140,7 +171,9 @@ exports[` when receives a table block without footer renders a
-
+ Pigs @@ -151,7 +184,9 @@ exports[` when receives a table block without footer renders a
- - -
+ Chickens From 57cc76cc8bc9891b50b38963ba0cc52b3d8a384d Mon Sep 17 00:00:00 2001 From: Vitor Carvalho Date: Wed, 27 Oct 2021 13:18:24 +0100 Subject: [PATCH 2/2] 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 --- src/__snapshots__/index.test.tsx.snap | 2 - .../table/__snapshots__/index.test.tsx.snap | 105 +++++++++++++++--- src/renderers/table/index.test.tsx | 20 ++++ src/renderers/table/index.tsx | 72 ++++++++---- 4 files changed, 160 insertions(+), 39 deletions(-) diff --git a/src/__snapshots__/index.test.tsx.snap b/src/__snapshots__/index.test.tsx.snap index ac620b9..cd41cc5 100644 --- a/src/__snapshots__/index.test.tsx.snap +++ b/src/__snapshots__/index.test.tsx.snap @@ -150,7 +150,6 @@ Array [
when receives a simple table renders a tag without , or
1`] = ` - - @@ -18,27 +15,111 @@ exports[`
+ Kine - + 1 pcs
when receives a simple table renders a
tag without - + + + + + + + + + +
+ Pigs - + + 3 pcs + + 200$ +
+ 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`] = ` + + + + + + + + + + + + + + @@ -71,7 +152,6 @@ exports[`
- Chickens + Kine + Pigs + + Chicken +
+ 1 pcs + + 3 pcs + 12 pcs
+ 100$ + + 200$ + 150$
when receives a table block renders a
tag 1`] = ` -
when receives a table block without footer renders a -
', () => { 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)}