Skip to content

Commit 57cc76c

Browse files
lightningspiritlightningspirit
committed
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
1 parent 599fa3e commit 57cc76c

File tree

4 files changed

+160
-39
lines changed

4 files changed

+160
-39
lines changed

‎src/__snapshots__/index.test.tsx.snap

-2
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,6 @@ Array [
150150
</th>
151151
</tr>
152152
</thead>
153-
154153
<tbody>
155154
<tr>
156155
<th
@@ -307,7 +306,6 @@ Array [
307306
</th>
308307
</tr>
309308
</thead>
310-
311309
<tbody>
312310
<tr>
313311
<th

‎src/renderers/table/__snapshots__/index.test.tsx.snap

+92-13
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,11 @@
22

33
exports[`<Table /> when receives a simple table renders a <table> tag without <thead>, <tfoot> or <caption> 1`] = `
44
<table>
5-
65
<tbody>
76
<tr>
8-
<th
9-
scope="row"
10-
>
7+
<td>
118
Kine
12-
</th>
9+
</td>
1310
<td>
1411
1 pcs
1512
</td>
@@ -18,27 +15,111 @@ exports[`<Table /> when receives a simple table renders a <table> tag without <t
1815
</td>
1916
</tr>
2017
<tr>
21-
<th
22-
scope="row"
23-
>
18+
<td>
2419
Pigs
25-
</th>
20+
</td>
21+
<td>
22+
3 pcs
23+
</td>
24+
<td>
25+
200$
26+
</td>
27+
</tr>
28+
<tr>
29+
<td>
30+
Chickens
31+
</td>
32+
<td>
33+
12 pcs
34+
</td>
35+
<td>
36+
150$
37+
</td>
38+
</tr>
39+
</tbody>
40+
</table>
41+
`;
42+
43+
exports[`<Table /> when receives a table 2.20 format withHeadings = false renders a <table> tag without <thead>, <tfoot> or <caption> 1`] = `
44+
<table>
45+
<tbody>
46+
<tr>
47+
<td>
48+
Kine
49+
</td>
50+
<td>
51+
Pigs
52+
</td>
53+
<td>
54+
Chicken
55+
</td>
56+
</tr>
57+
<tr>
58+
<td>
59+
1 pcs
60+
</td>
2661
<td>
2762
3 pcs
2863
</td>
64+
<td>
65+
12 pcs
66+
</td>
67+
</tr>
68+
<tr>
69+
<td>
70+
100$
71+
</td>
2972
<td>
3073
200$
3174
</td>
75+
<td>
76+
150$
77+
</td>
3278
</tr>
79+
</tbody>
80+
</table>
81+
`;
82+
83+
exports[`<Table /> when receives a table 2.20 format withHeadings = true renders a <table> tag without <tfoot> or <caption> 1`] = `
84+
<table>
85+
<thead>
3386
<tr>
3487
<th
35-
scope="row"
88+
scope="col"
3689
>
37-
Chickens
90+
Kine
3891
</th>
92+
<th
93+
scope="col"
94+
>
95+
Pigs
96+
</th>
97+
<th
98+
scope="col"
99+
>
100+
Chicken
101+
</th>
102+
</tr>
103+
</thead>
104+
<tbody>
105+
<tr>
106+
<td>
107+
1 pcs
108+
</td>
109+
<td>
110+
3 pcs
111+
</td>
39112
<td>
40113
12 pcs
41114
</td>
115+
</tr>
116+
<tr>
117+
<td>
118+
100$
119+
</td>
120+
<td>
121+
200$
122+
</td>
42123
<td>
43124
150$
44125
</td>
@@ -71,7 +152,6 @@ exports[`<Table /> when receives a table block renders a <table> tag 1`] = `
71152
</th>
72153
</tr>
73154
</thead>
74-
75155
<tbody>
76156
<tr>
77157
<th
@@ -155,7 +235,6 @@ exports[`<Table /> when receives a table block without footer renders a <table>
155235
</th>
156236
</tr>
157237
</thead>
158-
159238
<tbody>
160239
<tr>
161240
<th

‎src/renderers/table/index.test.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,24 @@ describe('<Table />', () => {
4949
expect(create(<Table data={data} />).toJSON()).toMatchSnapshot();
5050
});
5151
});
52+
53+
describe('when receives a table 2.20 format', () => {
54+
describe.each([
55+
[true, 'renders a <table> tag without <tfoot> or <caption>'],
56+
[false, 'renders a <table> tag without <thead>, <tfoot> or <caption>'],
57+
])('withHeadings = %p', (withHeadings, display) => {
58+
const data: TableBlockData = {
59+
withHeadings,
60+
content: [
61+
['Kine', 'Pigs', 'Chicken'],
62+
['1 pcs', '3 pcs', '12 pcs'],
63+
['100$', '200$', '150$'],
64+
],
65+
};
66+
67+
it(display, () => {
68+
expect(create(<Table data={data} />).toJSON()).toMatchSnapshot();
69+
});
70+
});
71+
});
5272
});

‎src/renderers/table/index.tsx

+48-24
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,49 @@
1-
import React from 'react';
1+
import React, { FC } from 'react';
22
import HTMLReactParser from 'html-react-parser';
33
import { RenderFn } from '../..';
44

5+
type Row = string[];
6+
type Content = Row[];
7+
58
export interface TableBlockData {
6-
content: string[][];
9+
content: Content;
10+
withHeadings?: boolean;
711
header?: string[];
812
footer?: string[];
913
caption?: string;
1014
}
1115

16+
const THead: FC<{
17+
row: Row;
18+
}> = ({ row }) => (
19+
<thead>
20+
<tr>
21+
{row?.map((cell, i) => (
22+
<th key={`${i}`} scope="col">
23+
{HTMLReactParser(cell)}
24+
</th>
25+
))}
26+
</tr>
27+
</thead>
28+
);
29+
30+
const Tr: FC<{
31+
row: Row;
32+
withHeadings: boolean;
33+
}> = ({ row, withHeadings }) => (
34+
<tr>
35+
{row.map((cell, i) =>
36+
i === 0 && withHeadings ? (
37+
<th key={i} scope="row">
38+
{HTMLReactParser(cell)}
39+
</th>
40+
) : (
41+
<td key={i}>{HTMLReactParser(cell)}</td>
42+
),
43+
)}
44+
</tr>
45+
);
46+
1247
const Table: RenderFn<TableBlockData> = ({ data, className = '' }) => {
1348
const tableprops: {
1449
[s: string]: string;
@@ -18,35 +53,24 @@ const Table: RenderFn<TableBlockData> = ({ data, className = '' }) => {
1853
tableprops.className = className;
1954
}
2055

56+
const content = data?.withHeadings ? data?.content.slice(1) : data?.content;
57+
const header = data?.withHeadings ? data?.content[0] : data?.header;
58+
const withRowHeadings = !!data?.header;
59+
2160
return (
2261
<table {...tableprops}>
23-
{data?.caption && <caption>{HTMLReactParser(data.caption)}</caption>}
24-
{data?.header && (
25-
<thead>
26-
<tr>
27-
{data.header.map((cell, i) => (
28-
<th key={`${i}`}>{HTMLReactParser(cell)}</th>
29-
))}
30-
</tr>
31-
</thead>
32-
)}
62+
<>
63+
{data?.caption && <caption>{HTMLReactParser(data.caption)}</caption>}
64+
{header && <THead row={header} />}
65+
</>
3366
<tbody>
34-
{data?.content.map((row, i) => (
35-
<tr key={`${i}`}>
36-
{row.map((cell, j) => {
37-
const Tag = `t${j === 0 ? 'h' : 'd'}` as keyof JSX.IntrinsicElements;
38-
return <Tag key={`${i}${j}`}>{HTMLReactParser(cell)}</Tag>;
39-
})}
40-
</tr>
67+
{content?.map((row, i) => (
68+
<Tr key={i} row={row} withHeadings={withRowHeadings} />
4169
))}
4270
</tbody>
4371
{data?.footer && (
4472
<tfoot>
45-
<tr>
46-
{data?.footer.map((cell, i) => (
47-
<th key={`${i}`}>{HTMLReactParser(cell)}</th>
48-
))}
49-
</tr>
73+
<Tr row={data?.footer} withHeadings={withRowHeadings} />
5074
</tfoot>
5175
)}
5276
</table>

0 commit comments

Comments
 (0)