Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a7fa70a

Browse files
jsamrjsamr
committed
feat(table-plugin): new lightweight API for react-native-render-html v5.0
This release supports the new release of react-native-render-html! BREAKING CHANGE: `makeTableRenderer` and `makeCustomTableRenderer` have been dropped in favor of the default `table` renderer export and `extractHtmlTableProp` function for custom renderers. This release takes advantage of the availability of `domNode` in custom renderers and the new `domNodeToHTMLString` utility available in react-native-render-html. Configuration for the table renderer is now read from `renderersProps.table` prop of the `HTML` component.
1 parent ea3165e commit a7fa70a

34 files changed

+1390
-575
lines changed

‎example/App.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Stack = createStackNavigator();
2121
function SimpleExampleDescription() {
2222
return (
2323
<Text style={styles.welcome}>
24-
This Table renderer was created with makeTableRenderer function, and will
24+
This Table renderer was created with extractHtmlProps function, and will
2525
render HTML tables in the body of the HTML component.
2626
</Text>
2727
);
@@ -30,7 +30,7 @@ function SimpleExampleDescription() {
3030
function CustomExampleDescription() {
3131
return (
3232
<Text style={styles.welcome}>
33-
This Table renderer was created with makeCustomTableRenderer function to
33+
This Table renderer was created with extractHtmlTableProps function to
3434
register a custom component. Depending on the table complexity, it will
3535
display the HTLM table in the content or through an actionable modal.
3636
</Text>

‎example/ClickTable.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import React, {PureComponent} from 'react';
2-
import {View, Modal, Button, Text, StyleSheet} from 'react-native';
3-
import {HTMLTable} from '@native-html/table-plugin';
1+
import React, { PureComponent } from 'react';
2+
import { View, Modal, Button, Text, StyleSheet } from 'react-native';
3+
import { HTMLTable } from '@native-html/table-plugin';
44
import WebView from 'react-native-webview';
55

66
const tableConfig = {
77
WebView,
8-
animationType: 'animated',
8+
animationType: 'animated'
99
};
1010

1111
const unconstrainedHeight = () => null;
1212

1313
export default class ClickTable extends PureComponent {
1414
state = {
15-
modalVisible: false,
15+
modalVisible: false
1616
};
1717

1818
render() {
19-
const {numOfRows, numOfColumns, numOfChars} = this.props;
19+
const { numOfRows, numOfColumns, numOfChars } = this.props;
2020
// If table contains less then 100 chars or has less then 4 columns and 8 rows,
2121
// show table inline
2222
const shouldRenderTableInline =
@@ -49,7 +49,7 @@ export default class ClickTable extends PureComponent {
4949
{description}
5050
<Button
5151
title="Show table"
52-
onPress={() => this.setState({modalVisible: true})}
52+
onPress={() => this.setState({ modalVisible: true })}
5353
/>
5454
<Modal visible={this.state.modalVisible}>
5555
<View style={styles.modalContainer}>
@@ -60,7 +60,7 @@ export default class ClickTable extends PureComponent {
6060
/>
6161
<Button
6262
title="Close"
63-
onPress={() => this.setState({modalVisible: false})}
63+
onPress={() => this.setState({ modalVisible: false })}
6464
/>
6565
</View>
6666
</Modal>
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
7474
fontStyle: 'italic',
7575
fontSize: 11,
7676
textAlign: 'center',
77-
marginBottom: 20,
77+
marginBottom: 20
7878
},
79-
modalContainer: {flex: 1, position: 'relative'},
79+
modalContainer: { flex: 1, position: 'relative' }
8080
});

‎example/CustomExample.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React from 'react';
22
import HTML from 'react-native-render-html';
3-
import {
4-
IGNORED_TAGS,
5-
alterNode,
6-
makeCustomTableRenderer
7-
} from '@native-html/table-plugin';
3+
import { extractHtmlTableProps, IGNORED_TAGS } from '@native-html/table-plugin';
84
import ClickTable from './ClickTable';
5+
import WebView from 'react-native-webview';
96

107
const table1 = `
118
@@ -160,21 +157,26 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
160157
</p>
161158
`;
162159

163-
const renderers = {
164-
table: makeCustomTableRenderer(ClickTable)
165-
};
166-
167160
const htmlConfig = {
168-
alterNode,
169-
renderers,
161+
renderers: {
162+
table(htmlAttribs, children, convertedCSSStyles, passProps) {
163+
const props = extractHtmlTableProps(
164+
htmlAttribs,
165+
convertedCSSStyles,
166+
passProps
167+
);
168+
return React.createElement(ClickTable, props);
169+
}
170+
},
171+
WebView,
170172
ignoredTags: IGNORED_TAGS
171173
};
172174

173175
export default function CustomExample({ instance, onLinkPress }) {
174176
return (
175177
<HTML
176178
key={`custom-${instance}`}
177-
html={table1}
179+
source={{ html: table1 }}
178180
onLinkPress={onLinkPress}
179181
{...htmlConfig}
180182
/>

‎example/SimpleExample.js

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import React from 'react';
22
import HTML from 'react-native-render-html';
3-
import {
4-
IGNORED_TAGS,
5-
alterNode,
6-
makeTableRenderer
7-
} from '@native-html/table-plugin';
3+
import table, { IGNORED_TAGS } from '@native-html/table-plugin';
84
import WebView from 'react-native-webview';
95

106
const table1 = `
@@ -155,29 +151,34 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
155151
</p>
156152
`;
157153

154+
const tableConfig = {
155+
animationType: 'animated',
156+
tableStyleSpecs: {
157+
outerBorderWidthPx: 1,
158+
rowsBorderWidthPx: 1,
159+
columnsBorderWidthPx: 1
160+
}
161+
};
162+
158163
const renderers = {
159-
table: makeTableRenderer({
160-
WebView,
161-
animationType: 'animated',
162-
tableStyleSpecs: {
163-
outerBorderWidthPx: 1,
164-
rowsBorderWidthPx: 1,
165-
columnsBorderWidthPx: 1
166-
}
167-
})
164+
table
168165
};
169166

170167
const htmlConfig = {
171-
alterNode,
172168
renderers,
173-
ignoredTags: IGNORED_TAGS
169+
WebView,
170+
ignoredTags: IGNORED_TAGS,
171+
renderersProps: {
172+
table: tableConfig
173+
},
174+
defaultWebViewProps: {}
174175
};
175176

176177
export default function SimpleExample({ instance, onLinkPress }) {
177178
return (
178179
<HTML
179180
key={`simple-${instance}`}
180-
html={table1}
181+
source={{ html: table1 }}
181182
onLinkPress={onLinkPress}
182183
{...htmlConfig}
183184
/>

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"react-native-gesture-handler": "~1.7.0",
2323
"react-native-picker-select": "^8.0.0",
2424
"react-native-reanimated": "~1.13.0",
25-
"react-native-render-html": "^4.2.4",
25+
"react-native-render-html": "5.0.0-alpha.8",
2626
"react-native-safe-area-context": "3.1.4",
2727
"react-native-screens": "~2.10.1",
2828
"react-native-snackbar-component": "^1.1.11",

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
"build:table": "yarn workspace @native-html/table-plugin build",
99
"build:iframe": "yarn workspace @native-html/iframe-plugin build",
1010
"test:table": "yarn workspace @native-html/table-plugin test",
11+
"test:table:jest": "yarn workspace @native-html/table-plugin test:jest",
1112
"test:iframe": "yarn workspace @native-html/iframe-plugin test",
13+
"test:iframe:jest": "yarn workspace @native-html/iframe-plugin test:jest",
1214
"release:table": "yarn workspace @native-html/table-plugin release-it",
1315
"release:iframe": "yarn workspace @native-html/iframe-plugin release-it",
1416
"publish:example": "yarn workspace example expo publish"

‎packages/iframe-plugin/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"@microsoft/api-extractor": "7.12.0",
4141
"@react-native-community/bob": "^0.16.2",
4242
"@release-it/conventional-changelog": "^2.0.0",
43-
"@testing-library/react-native": "^7.0.2",
43+
"@testing-library/react-native": "^7.1.0",
4444
"@types/jest": "^26.0.14",
4545
"@types/react": "^16.9.49",
4646
"@types/react-native": "^0.63.22",
@@ -52,14 +52,14 @@
5252
"metro-react-native-babel-transformer": "^0.64.0",
5353
"react": "16.14.0",
5454
"react-native": "^0.63.2",
55-
"react-native-render-html": "5.0.0-alpha.6",
55+
"react-native-render-html": "5.0.0-alpha.8",
5656
"react-native-webview": "^10.9.0",
5757
"react-test-renderer": "16.13.1",
5858
"release-it": "^14.2.2",
5959
"typescript": "~3.9.7"
6060
},
6161
"dependencies": {
62-
"@formidable-webview/webshell": "^2.0.2",
62+
"@formidable-webview/webshell": "^2.1.0",
6363
"@types/prop-types": "^15.7.3",
6464
"prop-types": "^15.7.2"
6565
},

0 commit comments

Comments
 (0)