Skip to content

Commit a0b5a9c

Browse files
JooYangJooYang
committed
fix: change name
1 parent ad8a45a commit a0b5a9c

23 files changed

+293
-233
lines changed

‎example/examples/Alerts.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, {Component} from 'react';
2-
import {Text, View} from 'react-native';
1+
import React, { Component } from 'react';
2+
import { View } from 'react-native';
33

4-
import WebView from 'react-native-webview';
4+
import WebView from 'react-native-webview-patch-jooyang';
55

66
const HTML = `
77
<!DOCTYPE html>\n
@@ -63,7 +63,7 @@ export default class Alerts extends Component<Props, State> {
6363
return (
6464
<View style={{ height: 120 }}>
6565
<WebView
66-
source={{html: HTML}}
66+
source={{ html: HTML }}
6767
automaticallyAdjustContentInsets={false}
6868
/>
6969
</View>

‎example/examples/Alerts.windows.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, {Component} from 'react';
2-
import {Text, View} from 'react-native';
1+
import React, { Component } from 'react';
2+
import { View } from 'react-native';
33

4-
import WebView from 'react-native-webview';
4+
import WebView from 'react-native-webview-patch-jooyang';
55

66
const HTML = `
77
<!DOCTYPE html>\n
@@ -63,7 +63,7 @@ export default class Alerts extends Component<Props, State> {
6363
return (
6464
<View style={{ height: 120 }}>
6565
<WebView
66-
source={{html: HTML}}
66+
source={{ html: HTML }}
6767
automaticallyAdjustContentInsets={false}
6868
useWebView2
6969
/>

‎example/examples/ApplePay.tsx

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
import React, {Component} from 'react';
2-
import {View} from 'react-native';
1+
import React, { Component } from 'react';
2+
import { View } from 'react-native';
33

4-
import WebView from 'react-native-webview';
4+
import WebView from 'react-native-webview-patch-jooyang';
55

66
type Props = {};
77
type State = {};
88

99
export default class Alerts extends Component<Props, State> {
10-
state = {};
10+
state = {};
1111

12-
render() {
13-
return (
14-
<View style={{ flex: 1 }}>
15-
<WebView
16-
enableApplePay={true}
17-
source={{uri: "https://applepaydemo.apple.com/"}}
18-
automaticallyAdjustContentInsets={false}
19-
/>
20-
</View>
21-
);
22-
}
12+
render() {
13+
return (
14+
<View style={{ flex: 1 }}>
15+
<WebView
16+
enableApplePay={true}
17+
source={{ uri: 'https://applepaydemo.apple.com/' }}
18+
automaticallyAdjustContentInsets={false}
19+
/>
20+
</View>
21+
);
22+
}
2323
}

‎example/examples/Background.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, {Component} from 'react';
2-
import {Text, View} from 'react-native';
1+
import React, { Component } from 'react';
2+
import { Text, View } from 'react-native';
33

4-
import WebView from 'react-native-webview';
4+
import WebView from 'react-native-webview-patch-jooyang';
55

66
const HTML = `
77
<!DOCTYPE html>\n
@@ -27,27 +27,29 @@ const HTML = `
2727

2828
type Props = {};
2929
type State = {
30-
backgroundColor: string,
30+
backgroundColor: string;
3131
};
3232

3333
export default class Background extends Component<Props, State> {
3434
state = {
35-
backgroundColor: '#FF00FF00'
35+
backgroundColor: '#FF00FF00',
3636
};
3737

3838
render() {
3939
return (
4040
<View>
41-
<View style={{backgroundColor:'red'}}>
41+
<View style={{ backgroundColor: 'red' }}>
4242
<View style={{ height: 120 }}>
4343
<WebView
44-
source={{html: HTML}}
44+
source={{ html: HTML }}
4545
automaticallyAdjustContentInsets={false}
46-
style={{backgroundColor:'#00000000'}}
46+
style={{ backgroundColor: '#00000000' }}
4747
/>
4848
</View>
4949
</View>
50-
<Text>WebView is transparent contained in a View with a red backgroundColor</Text>
50+
<Text>
51+
WebView is transparent contained in a View with a red backgroundColor
52+
</Text>
5153
</View>
5254
);
5355
}

‎example/examples/ClearData.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
2-
import { View, Button } from 'react-native';
2+
import { Button, View } from 'react-native';
33

4-
import WebView from 'react-native-webview';
4+
import WebView from 'react-native-webview-patch-jooyang';
55

66
type Props = {};
77
type State = {};

‎example/examples/CustomMenu.tsx

+35-31
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, {Component} from 'react';
2-
import {Button, Linking, Text, View} from 'react-native';
1+
import React from 'react';
2+
import { Text, View } from 'react-native';
33

4-
import WebView from 'react-native-webview';
4+
import WebView from 'react-native-webview-patch-jooyang';
55

66
const HTML = `
77
<!DOCTYPE html>\n
@@ -56,33 +56,37 @@ interface State {}
5656

5757
// export default class CustomMenu extends Component<Props, State> {
5858
export default CustomMenu = () => {
59-
const [selectionInfo, setSelectionInfo] = React.useState(null)
60-
const webviewRef = React.useRef()
59+
const [selectionInfo, setSelectionInfo] = React.useState(null);
60+
const webviewRef = React.useRef();
6161

62-
return (
63-
<View>
64-
<View style={{ height: 120 }}>
65-
<WebView
66-
ref={webviewRef}
67-
source={{html: HTML}}
68-
automaticallyAdjustContentInsets={false}
69-
menuItems={[{ label: 'Highlight', key: 'highlight' }, { label: 'Strikethrough', key: 'strikethrough' }]}
70-
onCustomMenuSelection={(webViewEvent) => {
71-
const { label, key, selectedText } = webViewEvent.nativeEvent;
72-
setSelectionInfo(webViewEvent.nativeEvent)
73-
// clearing the selection by sending a message. This would need a script on the source page to listen to the message.
74-
webviewRef.current?.postMessage(JSON.stringify({what: 'clearSelection'}))
75-
}}
76-
/>
77-
</View>
78-
{selectionInfo
79-
&& <Text>
80-
onCustomMenuSelection called: {"\n"}
81-
- label: {selectionInfo?.label}{"\n"}
82-
- key: {selectionInfo?.key}{"\n"}
83-
- selectedText: {selectionInfo?.selectedText}
84-
</Text>
85-
}
62+
return (
63+
<View>
64+
<View style={{ height: 120 }}>
65+
<WebView
66+
ref={webviewRef}
67+
source={{ html: HTML }}
68+
automaticallyAdjustContentInsets={false}
69+
menuItems={[
70+
{ label: 'Highlight', key: 'highlight' },
71+
{ label: 'Strikethrough', key: 'strikethrough' },
72+
]}
73+
onCustomMenuSelection={(webViewEvent) => {
74+
const { label, key, selectedText } = webViewEvent.nativeEvent;
75+
setSelectionInfo(webViewEvent.nativeEvent);
76+
// clearing the selection by sending a message. This would need a script on the source page to listen to the message.
77+
webviewRef.current?.postMessage(
78+
JSON.stringify({ what: 'clearSelection' })
79+
);
80+
}}
81+
/>
8682
</View>
87-
);
88-
}
83+
{selectionInfo && (
84+
<Text>
85+
onCustomMenuSelection called: {'\n'}- label: {selectionInfo?.label}
86+
{'\n'}- key: {selectionInfo?.key}
87+
{'\n'}- selectedText: {selectionInfo?.selectedText}
88+
</Text>
89+
)}
90+
</View>
91+
);
92+
};

‎example/examples/Downloads.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, {Component} from 'react';
2-
import {Alert, Platform, View} from 'react-native';
1+
import React, { Component } from 'react';
2+
import { Alert, Platform, View } from 'react-native';
33

4-
import WebView, {FileDownload} from 'react-native-webview';
4+
import WebView, { FileDownload } from 'react-native-webview-patch-jooyang';
55

66
const HTML = `
77
<!DOCTYPE html>\n
@@ -33,8 +33,8 @@ interface State {}
3333
export default class Downloads extends Component<Props, State> {
3434
state = {};
3535

36-
onFileDownload = ({ nativeEvent }: { nativeEvent: FileDownload } ) => {
37-
Alert.alert("File download detected", nativeEvent.downloadUrl);
36+
onFileDownload = ({ nativeEvent }: { nativeEvent: FileDownload }) => {
37+
Alert.alert('File download detected', nativeEvent.downloadUrl);
3838
};
3939

4040
render() {
@@ -47,7 +47,7 @@ export default class Downloads extends Component<Props, State> {
4747
return (
4848
<View style={{ height: 120 }}>
4949
<WebView
50-
source={{html: HTML}}
50+
source={{ html: HTML }}
5151
automaticallyAdjustContentInsets={false}
5252
{...platformProps}
5353
/>

‎example/examples/Injection.tsx

+65-24
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, {Component} from 'react';
2-
import {Text, View, ScrollView} from 'react-native';
1+
import React, { Component } from 'react';
2+
import { ScrollView, Text, View } from 'react-native';
33

4-
import WebView from 'react-native-webview';
4+
import WebView from 'react-native-webview-patch-jooyang';
55

66
const HTML = `
77
<!DOCTYPE html>
@@ -23,18 +23,18 @@ const HTML = `
2323

2424
type Props = {};
2525
type State = {
26-
backgroundColor: string,
26+
backgroundColor: string;
2727
};
2828

2929
export default class Injection extends Component<Props, State> {
3030
state = {
31-
backgroundColor: '#FF00FF00'
31+
backgroundColor: '#FF00FF00',
3232
};
3333

3434
render() {
3535
return (
3636
<ScrollView>
37-
<View style={{ }}>
37+
<View style={{}}>
3838
<View style={{ height: 400 }}>
3939
<WebView
4040
/**
@@ -43,18 +43,18 @@ export default class Injection extends Component<Props, State> {
4343
* The cause of this is unresolved.
4444
*/
4545
// source={{ html: HTML }}
46-
source={{ uri: "https://birchlabs.co.uk/linguabrowse/infopages/obsol/rnw_iframe_test.html" }}
46+
source={{
47+
uri: 'https://birchlabs.co.uk/linguabrowse/infopages/obsol/rnw_iframe_test.html',
48+
}}
4749
automaticallyAdjustContentInsets={false}
48-
style={{backgroundColor:'#00000000'}}
49-
50+
style={{ backgroundColor: '#00000000' }}
5051
/* Must be populated in order for `messagingEnabled` to be `true` to activate the
5152
* JS injection user scripts, consistent with current behaviour. This is undesirable,
5253
* so needs addressing in a follow-up PR. */
5354
onMessage={() => {}}
5455
injectedJavaScriptBeforeContentLoadedForMainFrameOnly={false}
5556
injectedJavaScriptForMainFrameOnly={false}
56-
injectedJavaScriptObject={{ hello: "world" }}
57-
57+
injectedJavaScriptObject={{ hello: 'world' }}
5858
/* We set this property in each frame */
5959
injectedJavaScriptBeforeContentLoaded={`
6060
console.log("executing injectedJavaScriptBeforeContentLoaded... " + (new Date()).toString());
@@ -88,7 +88,6 @@ export default class Injection extends Component<Props, State> {
8888
console.log("wasn't window.top. Still going...");
8989
}
9090
`}
91-
9291
/* We read the colourToUse property in each frame to recolour each frame */
9392
injectedJavaScript={`
9493
console.log("executing injectedJavaScript... " + (new Date()).toString());
@@ -153,22 +152,64 @@ export default class Injection extends Component<Props, State> {
153152
/>
154153
</View>
155154
</View>
156-
<Text>This test presents three iframes: iframe_0 (yellow); iframe_1 (pink); and iframe_2 (transparent, because its 'X-Frame-Options' is set to 'SAMEORIGIN').</Text>
157-
<Text>Before injection, the main frame's background is the browser's default value (transparent or white) and each frame has its natural colour.</Text>
155+
<Text>
156+
This test presents three iframes: iframe_0 (yellow); iframe_1 (pink);
157+
and iframe_2 (transparent, because its 'X-Frame-Options' is set to
158+
'SAMEORIGIN').
159+
</Text>
160+
<Text>
161+
Before injection, the main frame's background is the browser's default
162+
value (transparent or white) and each frame has its natural colour.
163+
</Text>
158164
{/*<Text>1a) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'orange' as the "colour to be used".</Text>*/}
159165
{/*<Text>1b) Also upon "beforeContentLoaded", a style element to change the text "beforeContentLoaded failed" -> "beforeContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>*/}
160166
{/*<Text>2a) At injection time "afterContentLoaded", that variable will be read – if present, the colour orange will be injected into all frames. Otherwise, cyan.</Text>*/}
161167
{/*<Text>2b) Also upon "afterContentLoaded", a style element to change the text "afterContentLoaded failed" -> "afterContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>*/}
162-
<Text>✅ If the main frame becomes orange, then top-frame injection both beforeContentLoaded and afterContentLoaded is supported.</Text>
163-
<Text>✅ If iframe_0, and iframe_1 become orange, then multi-frame injection beforeContentLoaded and afterContentLoaded is supported.</Text>
164-
<Text>✅ If the two texts say "beforeContentLoaded on the top frame succeeded!" and "afterContentLoaded on the top frame succeeded!", then both injection times are supported at least on the main frame.</Text>
165-
<Text>❌ If either of the two iframes become coloured cyan, then for that given frame, JS injection succeeded after the content loaded, but didn't occur before the content loaded.</Text>
166-
<Text>❌ If "Names of iframes that called beforeContentLoaded: " is [], then see above.</Text>
167-
<Text>❌ If "Names of iframes that called afterContentLoaded: " is [], then afterContentLoaded is not supported in iframes.</Text>
168-
<Text>❌ If the main frame becomes coloured cyan, then JS injection succeeded after the content loaded, but didn't occur before the content loaded.</Text>
169-
<Text>❌ If the text "beforeContentLoaded on the top frame failed" remains unchanged, then JS injection has failed on the main frame before the content loaded.</Text>
170-
<Text>❌ If the text "afterContentLoaded on the top frame failed" remains unchanged, then JS injection has failed on the main frame after the content loaded.</Text>
171-
<Text>❌ If the iframes remain their original colours (yellow and pink), then multi-frame injection is not supported at all.</Text>
168+
<Text>
169+
✅ If the main frame becomes orange, then top-frame injection both
170+
beforeContentLoaded and afterContentLoaded is supported.
171+
</Text>
172+
<Text>
173+
✅ If iframe_0, and iframe_1 become orange, then multi-frame injection
174+
beforeContentLoaded and afterContentLoaded is supported.
175+
</Text>
176+
<Text>
177+
✅ If the two texts say "beforeContentLoaded on the top frame
178+
succeeded!" and "afterContentLoaded on the top frame succeeded!", then
179+
both injection times are supported at least on the main frame.
180+
</Text>
181+
<Text>
182+
❌ If either of the two iframes become coloured cyan, then for that
183+
given frame, JS injection succeeded after the content loaded, but
184+
didn't occur before the content loaded.
185+
</Text>
186+
<Text>
187+
❌ If "Names of iframes that called beforeContentLoaded: " is [], then
188+
see above.
189+
</Text>
190+
<Text>
191+
❌ If "Names of iframes that called afterContentLoaded: " is [], then
192+
afterContentLoaded is not supported in iframes.
193+
</Text>
194+
<Text>
195+
❌ If the main frame becomes coloured cyan, then JS injection
196+
succeeded after the content loaded, but didn't occur before the
197+
content loaded.
198+
</Text>
199+
<Text>
200+
❌ If the text "beforeContentLoaded on the top frame failed" remains
201+
unchanged, then JS injection has failed on the main frame before the
202+
content loaded.
203+
</Text>
204+
<Text>
205+
❌ If the text "afterContentLoaded on the top frame failed" remains
206+
unchanged, then JS injection has failed on the main frame after the
207+
content loaded.
208+
</Text>
209+
<Text>
210+
❌ If the iframes remain their original colours (yellow and pink),
211+
then multi-frame injection is not supported at all.
212+
</Text>
172213
</ScrollView>
173214
);
174215
}

0 commit comments

Comments
 (0)