Skip to content

Commit 880f34f

Browse files
dukenv0307dukenv0307
committed
resolve bot comments
1 parent 41c8167 commit 880f34f

5 files changed

Lines changed: 59 additions & 69 deletions

File tree

‎src/components/HTMLEngineProvider/HTMLRenderers/TableCellRenderer.tsx‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,43 @@ import Text from '@components/Text';
22

33
import useThemeStyles from '@hooks/useThemeStyles';
44

5-
import type {FlexStyle, TextStyle} from 'react-native';
65
import type {CustomRendererProps, TBlock} from 'react-native-render-html';
76

8-
import React from 'react';
97
import {View} from 'react-native';
108
import {TNodeChildrenRenderer} from 'react-native-render-html';
119

12-
type CellAlignment = {
13-
alignItems: FlexStyle['alignItems'];
14-
textAlign: TextStyle['textAlign'];
15-
};
10+
type CellHorizontalAlignment = 'left' | 'center' | 'right';
1611

17-
function getCellAlignment(styleAttribute: string | undefined): CellAlignment {
12+
function getCellHorizontalAlignment(styleAttribute: string | undefined): CellHorizontalAlignment {
1813
if (styleAttribute?.includes('text-align: right')) {
19-
return {alignItems: 'flex-end', textAlign: 'right'};
14+
return 'right';
2015
}
2116
if (styleAttribute?.includes('text-align: center')) {
22-
return {alignItems: 'center', textAlign: 'center'};
17+
return 'center';
2318
}
24-
return {alignItems: 'flex-start', textAlign: 'left'};
19+
return 'left';
2520
}
2621

2722
function TableCellRenderer({tnode}: CustomRendererProps<TBlock>) {
2823
const styles = useThemeStyles();
2924
const isHeaderCell = tnode.tagName === 'th';
30-
const {alignItems, textAlign} = getCellAlignment(tnode.attributes.style);
25+
const alignment = getCellHorizontalAlignment(tnode.attributes.style);
26+
27+
// Map the cell alignment to the shared named styles instead of building inline style objects.
28+
const cellAlignmentStyle = {
29+
left: styles.alignItemsStart,
30+
center: styles.alignItemsCenter,
31+
right: styles.alignItemsEnd,
32+
}[alignment];
33+
const textAlignmentStyle = {
34+
left: styles.textAlignLeft,
35+
center: styles.textAlignCenter,
36+
right: styles.textAlignRight,
37+
}[alignment];
3138

3239
return (
33-
<View style={[styles.htmlTableCell, {alignItems}]}>
34-
<Text style={[isHeaderCell ? styles.htmlTableHeaderCellText : styles.htmlTableCellText, {textAlign}]}>
40+
<View style={[styles.htmlTableCell, cellAlignmentStyle]}>
41+
<Text style={[isHeaderCell ? styles.htmlTableHeaderCellText : styles.htmlTableCellText, textAlignmentStyle]}>
3542
<TNodeChildrenRenderer tnode={tnode} />
3643
</Text>
3744
</View>

‎src/components/HTMLEngineProvider/HTMLRenderers/TableChildrenRenderer.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type {TNode} from 'react-native-render-html';
2+
3+
import {TNodeRenderer} from 'react-native-render-html';
4+
5+
/** Element (non-whitespace) children of a node, skipping whitespace-only text nodes that sit between block elements in the source HTML. */
6+
function getElementChildren(node: TNode | null | undefined): TNode[] {
7+
return node?.children?.filter((child) => !!child.tagName) ?? [];
8+
}
9+
10+
/**
11+
* Renders the element children of a table-related node through `TNodeRenderer`, skipping whitespace-only text nodes.
12+
* Shared by the table, section and row renderers so the filter-and-render logic lives in a single place.
13+
*/
14+
function TableChildrenRenderer({tnode}: {tnode: TNode}) {
15+
const children = getElementChildren(tnode);
16+
return (
17+
<>
18+
{children.map((child, index) => (
19+
<TNodeRenderer
20+
key={`${child.tagName ?? 'node'}-${index}`}
21+
tnode={child}
22+
renderIndex={index}
23+
renderLength={children.length}
24+
/>
25+
))}
26+
</>
27+
);
28+
}
29+
30+
export default TableChildrenRenderer;
31+
export {getElementChildren};

‎src/components/HTMLEngineProvider/HTMLRenderers/TableRenderer.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,13 @@ import useThemeStyles from '@hooks/useThemeStyles';
22

33
import type {CustomRendererProps, TBlock} from 'react-native-render-html';
44

5-
import React from 'react';
65
import {ScrollView, View} from 'react-native';
7-
import {TNodeRenderer} from 'react-native-render-html';
6+
7+
import TableChildrenRenderer from './TableChildrenRenderer';
88

99
function TableRenderer({tnode}: CustomRendererProps<TBlock>) {
1010
const styles = useThemeStyles();
1111

12-
// Skip whitespace-only text nodes that sit between block elements in the source HTML.
13-
const sections = tnode.children.filter((child) => !!child.tagName);
14-
1512
return (
1613
<ScrollView
1714
horizontal
@@ -20,17 +17,7 @@ function TableRenderer({tnode}: CustomRendererProps<TBlock>) {
2017
contentContainerStyle={styles.htmlTableScrollContainerContent}
2118
>
2219
<View style={styles.htmlTable}>
23-
{sections.map((child, index) => {
24-
const key = `${child.tagName ?? 'node'}-${index}`;
25-
return (
26-
<TNodeRenderer
27-
key={key}
28-
tnode={child}
29-
renderIndex={index}
30-
renderLength={sections.length}
31-
/>
32-
);
33-
})}
20+
<TableChildrenRenderer tnode={tnode} />
3421
</View>
3522
</ScrollView>
3623
);

‎src/components/HTMLEngineProvider/HTMLRenderers/TableRowRenderer.tsx‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,9 @@ import useThemeStyles from '@hooks/useThemeStyles';
22

33
import type {CustomRendererProps, TBlock, TNode} from 'react-native-render-html';
44

5-
import React from 'react';
65
import {View} from 'react-native';
7-
import {TNodeRenderer} from 'react-native-render-html';
86

9-
function getElementChildren(node: TNode | null | undefined): TNode[] {
10-
return node?.children?.filter((child) => !!child.tagName) ?? [];
11-
}
7+
import TableChildrenRenderer, {getElementChildren} from './TableChildrenRenderer';
128

139
function isLastRowOfTable(tnode: TNode): boolean {
1410
const section = tnode.parent;
@@ -18,7 +14,7 @@ function isLastRowOfTable(tnode: TNode): boolean {
1814
}
1915
const sectionRows = getElementChildren(section);
2016
const tableSections = getElementChildren(table);
21-
return sectionRows[sectionRows.length - 1] === tnode && tableSections[tableSections.length - 1] === section;
17+
return sectionRows.at(-1) === tnode && tableSections.at(-1) === section;
2218
}
2319

2420
function TableRowRenderer({tnode}: CustomRendererProps<TBlock>) {
@@ -27,22 +23,9 @@ function TableRowRenderer({tnode}: CustomRendererProps<TBlock>) {
2723
// Header rows (inside <thead>) use header padding; body rows use the compact min-height.
2824
const isHeaderRow = tnode.parent?.tagName === 'thead';
2925

30-
// Skip whitespace-only text nodes that sit between cells in the source HTML.
31-
const cells = tnode.children.filter((child) => !!child.tagName);
32-
3326
return (
3427
<View style={[isHeaderRow ? styles.htmlTableHeaderRow : styles.htmlTableRow, isLastRowOfTable(tnode) && styles.htmlTableLastRow]}>
35-
{cells.map((child, index) => {
36-
const key = `${child.tagName ?? 'node'}-${index}`;
37-
return (
38-
<TNodeRenderer
39-
key={key}
40-
tnode={child}
41-
renderIndex={index}
42-
renderLength={cells.length}
43-
/>
44-
);
45-
})}
28+
<TableChildrenRenderer tnode={tnode} />
4629
</View>
4730
);
4831
}

‎src/components/HTMLEngineProvider/HTMLRenderers/TableSectionRenderer.tsx‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,13 @@
11
import type {CustomRendererProps, TBlock} from 'react-native-render-html';
22

3-
import React from 'react';
4-
import {TNodeRenderer} from 'react-native-render-html';
3+
import TableChildrenRenderer from './TableChildrenRenderer';
54

65
/**
76
* Renders an HTML <thead>/<tbody> by rendering its <tr> children directly into the table
87
* container, without adding an extra wrapping view, so rows stack with no gaps.
98
*/
109
function TableSectionRenderer({tnode}: CustomRendererProps<TBlock>) {
11-
// Skip whitespace-only text nodes that sit between rows in the source HTML.
12-
const rows = tnode.children.filter((child) => !!child.tagName);
13-
14-
return (
15-
<>
16-
{rows.map((child, index) => {
17-
const key = `${child.tagName ?? 'node'}-${index}`;
18-
return (
19-
<TNodeRenderer
20-
key={key}
21-
tnode={child}
22-
renderIndex={index}
23-
renderLength={rows.length}
24-
/>
25-
);
26-
})}
27-
</>
28-
);
10+
return <TableChildrenRenderer tnode={tnode} />;
2911
}
3012

3113
export default TableSectionRenderer;

0 commit comments

Comments
 (0)