Skip to content

Commit 439c352

Browse files
jsamrjsamr
committed
chore: migrate to [email protected]
1 parent 11a8ca0 commit 439c352

10 files changed

+188
-77
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@
1313
| ------------------------ | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
1414
| ≥ 4.2.1 < 5.0.0 | 2.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/4.x#readme)) | _No Plugin, iframes were rendered internally_ |
1515
| ≥ 5.0.0 < 6.0.0 | 3.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/5.x/packages/table-plugin#readme)) | 1.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/5.x/packages/iframe-plugin#readme)) |
16-
| ≥ 6.0.0 | 4.x (_in development_) | 2.x (_in development_) |
16+
| ≥ 6.0.0 | 4.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/table-plugin#readme)) | 2.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/iframe-plugin#readme) |

‎example/App.js

+65-21
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react-native/no-inline-styles */
12
import React, { useCallback, useState } from 'react';
23
import { StatusBar } from 'expo-status-bar';
34
import * as WebBrowser from 'expo-web-browser';
@@ -24,31 +25,47 @@ import YoutubeExample from './YoutubeExample';
2425

2526
const Stack = createStackNavigator();
2627

28+
function Monospace({ children }) {
29+
return (
30+
<Text
31+
style={{
32+
fontFamily: Platform.select({ default: 'monospace', ios: 'Menlo' }),
33+
fontWeight: 'bold'
34+
}}>
35+
{children}
36+
</Text>
37+
);
38+
}
39+
2740
function SimpleExampleDescription() {
2841
return (
2942
<Text style={styles.welcome}>
30-
This Table renderer was created with extractHtmlProps function, and will
31-
render HTML tables in the body of the HTML component.
43+
This <Monospace>TableRenderer</Monospace> is the default export of{' '}
44+
<Monospace>@native-html/table-plugin</Monospace>, and will render HTML
45+
tables in the body of the HTML component via a{' '}
46+
<Monospace>WebView</Monospace>.
3247
</Text>
3348
);
3449
}
3550

3651
function CustomExampleDescription() {
3752
return (
3853
<Text style={styles.welcome}>
39-
This Table renderer was created with extractHtmlTableProps function to
40-
register a custom component. Depending on the table complexity, it will
41-
display the HTLM table in the content or through an actionable modal.
54+
This Table renderer was created with{' '}
55+
<Monospace>useHtmlTableProps</Monospace> hook to register a custom
56+
component. Depending on the table complexity, it will display the HTLM
57+
table in the content or through an actionable modal.
4258
</Text>
4359
);
4460
}
4561

46-
function YoutubeExampleDescription() {
62+
function YoutubeExampleDescription({ scalesPageToFit }) {
4763
return (
4864
<Text style={styles.welcome}>
49-
This Iframe renderer has the scalesPageToFit option set to true. It will
50-
zoom down to a level that allows the whole content to be visible. Default
51-
is false.
65+
This <Monospace>IframeRenderer</Monospace> has the{' '}
66+
<Monospace>scalesPageToFit</Monospace> option set to{' '}
67+
<Monospace children={scalesPageToFit + ''} />. It will zoom down to a
68+
level that allows the whole content to be visible. Default is false.
5269
</Text>
5370
);
5471
}
@@ -91,16 +108,20 @@ function SimpleExampleScreen({ onLinkPress, availableWidth }) {
91108
);
92109
}
93110

94-
function YoutubeExampleScreen({ availableWidth }) {
111+
function YoutubeExampleScreen({ availableWidth, scalesPageToFit }) {
95112
const [instance, setInstance] = useState(0);
96113
return (
97114
<ScrollView
98115
contentContainerStyle={styles.contentStyle}
99116
style={styles.scrollViewStyle}>
100-
<YoutubeExampleDescription />
117+
<YoutubeExampleDescription scalesPageToFit={scalesPageToFit} />
101118
<Button title="reload" onPress={() => setInstance((i) => i + 1)} />
102119
<View style={styles.example}>
103-
<YoutubeExample availableWidth={availableWidth} instance={instance} />
120+
<YoutubeExample
121+
scalesPageToFit={scalesPageToFit}
122+
availableWidth={availableWidth}
123+
instance={instance}
124+
/>
104125
</View>
105126
</ScrollView>
106127
);
@@ -112,21 +133,29 @@ function HomeScreen() {
112133
<View style={styles.buttonsContainer}>
113134
<View style={styles.button}>
114135
<Button
115-
title="Open simple table example"
136+
title="simple table example"
116137
onPress={() => navigation.navigate('SimpleExample')}
117138
style={styles.button}
118139
/>
119140
</View>
120141
<View style={styles.button}>
121142
<Button
122-
title="Open custom table example"
143+
title="custom table example"
123144
onPress={() => navigation.navigate('CustomExample')}
124145
/>
125146
</View>
126-
<Button
127-
title="Open Youtube iframe example"
128-
onPress={() => navigation.navigate('YoutubeExample')}
129-
/>
147+
<View style={styles.button}>
148+
<Button
149+
title="Youtube iframe example (scaling ON)"
150+
onPress={() => navigation.navigate('YoutubeExampleScaleOn')}
151+
/>
152+
</View>
153+
<View style={styles.button}>
154+
<Button
155+
title="Youtube iframe example (scaling OFF)"
156+
onPress={() => navigation.navigate('YoutubeExampleScaleOff')}
157+
/>
158+
</View>
130159
</View>
131160
);
132161
}
@@ -184,9 +213,24 @@ export default function App() {
184213
)}
185214
</Stack.Screen>
186215
<Stack.Screen
187-
name="YoutubeExample"
188-
options={{ title: 'Youtube Example' }}>
189-
{() => <YoutubeExampleScreen availableWidth={availableWidth} />}
216+
name="YoutubeExampleScaleOn"
217+
options={{ title: 'Youtube Example', scalesPageToFit: true }}>
218+
{() => (
219+
<YoutubeExampleScreen
220+
availableWidth={availableWidth}
221+
scalesPageToFit={true}
222+
/>
223+
)}
224+
</Stack.Screen>
225+
<Stack.Screen
226+
name="YoutubeExampleScaleOff"
227+
options={{ title: 'Youtube Example', scalesPageToFit: false }}>
228+
{() => (
229+
<YoutubeExampleScreen
230+
availableWidth={availableWidth}
231+
scalesPageToFit={false}
232+
/>
233+
)}
190234
</Stack.Screen>
191235
</Stack.Navigator>
192236
</NavigationContainer>

‎example/CustomExample.js

+10-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import HTML from 'react-native-render-html';
3-
import { extractHtmlTableProps, IGNORED_TAGS } from '@native-html/table-plugin';
3+
import { useHtmlTableProps, tableModel } from '@native-html/table-plugin';
44
import ClickTable from './ClickTable';
55
import WebView from 'react-native-webview';
66

@@ -157,23 +157,22 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
157157
</p>
158158
`;
159159

160+
function TableRenderer(props) {
161+
const tableProps = useHtmlTableProps(props);
162+
return React.createElement(ClickTable, tableProps);
163+
}
164+
165+
TableRenderer.model = tableModel;
166+
160167
const htmlConfig = {
161168
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-
}
169+
table: TableRenderer
170170
},
171171
tagsStyles: {
172172
table: {}
173173
},
174174
WebView,
175-
defaultWebViewProps: {},
176-
ignoredTags: IGNORED_TAGS
175+
defaultWebViewProps: {}
177176
};
178177

179178
export default function CustomExample({

‎example/SimpleExample.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import HTML from 'react-native-render-html';
3-
import table, { IGNORED_TAGS } from '@native-html/table-plugin';
3+
import table from '@native-html/table-plugin';
44
import WebView from 'react-native-webview';
55

66
const table1 = `
@@ -158,7 +158,6 @@ const renderers = {
158158
const htmlConfig = {
159159
renderers,
160160
WebView,
161-
ignoredTags: IGNORED_TAGS,
162161
renderersProps: {
163162
table: {
164163
animationType: 'animated',
@@ -170,7 +169,9 @@ const htmlConfig = {
170169
}
171170
},
172171
tagsStyles: {
173-
table: {}
172+
table: {
173+
flex: 1
174+
}
174175
},
175176
defaultWebViewProps: {},
176177
computeEmbeddedMaxWidth: (contentWidth, tagName) => {

‎example/YoutubeExample.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@ const htmlConfig = {
77
renderers: {
88
iframe
99
},
10-
renderersProps: {
11-
iframe: {
12-
scalesPageToFit: true
13-
}
14-
},
1510
tagsStyles: {
1611
iframe: {
1712
alignSelf: 'center'
@@ -36,7 +31,8 @@ const youtubeIframe = `
3631
export default function YoutubeExample({
3732
instance,
3833
onLinkPress,
39-
availableWidth
34+
availableWidth,
35+
scalesPageToFit = true
4036
}) {
4137
return (
4238
<HTML
@@ -45,6 +41,11 @@ export default function YoutubeExample({
4541
source={{ html: youtubeIframe }}
4642
onLinkPress={onLinkPress}
4743
{...htmlConfig}
44+
renderersProps={{
45+
iframe: {
46+
scalesPageToFit
47+
}
48+
}}
4849
/>
4950
);
5051
}

‎example/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"react-native-paper": "^4.4.1",
2424
"react-native-picker-select": "^8.0.0",
2525
"react-native-reanimated": "~1.13.0",
26-
"react-native-render-html": "5.0.0-alpha.8",
26+
"react-native-render-html": "6.0.0-alpha.12",
2727
"react-native-safe-area-context": "3.1.4",
2828
"react-native-screens": "~2.10.1",
2929
"react-native-web": "~0.13.7",

‎images/scalesPageToFit.jpg

316 KB
Loading

‎images/scalesPageToFit.png

-1.45 MB
Binary file not shown.

‎tsconfig-base.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"composite": false,
77
"noEmit": false,
88
"declaration": true,
9-
"noImplicitAny": false
9+
"noImplicitAny": false,
10+
"isolatedModules": false
1011
}
1112
}

0 commit comments

Comments
 (0)