|
@@ -2,7 +2,7 @@
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
4
|
import {Linking, Platform, View} from 'react-native';
|
5
|
|
-import {Spinner, Footer, Right, Left, Body} from 'native-base';
|
|
5
|
+import {Spinner, Footer, Right, Left, Body, Tab, TabHeading, Text, Tabs} from 'native-base';
|
6
|
6
|
import WebView from "react-native-webview";
|
7
|
7
|
import Touchable from "react-native-platform-touchable";
|
8
|
8
|
import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
|
@@ -11,8 +11,12 @@ import BaseContainer from "../components/BaseContainer";
|
11
|
11
|
|
12
|
12
|
type Props = {
|
13
|
13
|
navigation: Object,
|
14
|
|
- url: string,
|
15
|
|
- customInjectedJS: string,
|
|
14
|
+ data: Array<{
|
|
15
|
+ url: string,
|
|
16
|
+ icon: string,
|
|
17
|
+ name: string,
|
|
18
|
+ customJS: string
|
|
19
|
+ }>,
|
16
|
20
|
headerTitle: string,
|
17
|
21
|
hasHeaderBackButton: boolean,
|
18
|
22
|
hasSideMenu: boolean,
|
|
@@ -25,16 +29,15 @@ type Props = {
|
25
|
29
|
export default class WebViewScreen extends React.Component<Props> {
|
26
|
30
|
|
27
|
31
|
static defaultProps = {
|
28
|
|
- customInjectedJS: '',
|
29
|
32
|
hasBackButton: false,
|
30
|
33
|
hasSideMenu: true,
|
31
|
34
|
hasFooter: true,
|
32
|
35
|
};
|
33
|
36
|
|
34
|
|
- webview: WebView;
|
|
37
|
+ webviewArray: Array<WebView> = [];
|
35
|
38
|
|
36
|
|
- openWebLink() {
|
37
|
|
- Linking.openURL(this.props.url).catch((err) => console.error('Error opening link', err));
|
|
39
|
+ openWebLink(url: string) {
|
|
40
|
+ Linking.openURL(url).catch((err) => console.error('Error opening link', err));
|
38
|
41
|
}
|
39
|
42
|
|
40
|
43
|
getHeaderButton(clickAction: Function, icon: string) {
|
|
@@ -58,15 +61,73 @@ export default class WebViewScreen extends React.Component<Props> {
|
58
|
61
|
};
|
59
|
62
|
|
60
|
63
|
refreshWebview() {
|
61
|
|
- this.webview.reload();
|
|
64
|
+ for (let view of this.webviewArray) {
|
|
65
|
+ view.reload();
|
|
66
|
+ }
|
62
|
67
|
}
|
63
|
68
|
|
64
|
69
|
goBackWebview() {
|
65
|
|
- this.webview.goBack();
|
|
70
|
+ for (let view of this.webviewArray) {
|
|
71
|
+ view.goBack();
|
|
72
|
+ }
|
66
|
73
|
}
|
67
|
74
|
|
68
|
75
|
goForwardWebview() {
|
69
|
|
- this.webview.goForward();
|
|
76
|
+ for (let view of this.webviewArray) {
|
|
77
|
+ view.goForward();
|
|
78
|
+ }
|
|
79
|
+ }
|
|
80
|
+
|
|
81
|
+ getWebview(obj: Object) {
|
|
82
|
+ return (
|
|
83
|
+ <WebView
|
|
84
|
+ ref={ref => (this.webviewArray.push(ref))}
|
|
85
|
+ source={{uri: obj['url']}}
|
|
86
|
+ style={{
|
|
87
|
+ width: '100%',
|
|
88
|
+ height: '100%',
|
|
89
|
+ }}
|
|
90
|
+ startInLoadingState={true}
|
|
91
|
+ injectedJavaScript={obj['customJS']}
|
|
92
|
+ javaScriptEnabled={true}
|
|
93
|
+ renderLoading={() =>
|
|
94
|
+ <View style={{
|
|
95
|
+ backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
|
|
96
|
+ position: 'absolute',
|
|
97
|
+ top: 0,
|
|
98
|
+ right: 0,
|
|
99
|
+ width: '100%',
|
|
100
|
+ height: '100%',
|
|
101
|
+ flex: 1,
|
|
102
|
+ alignItems: 'center',
|
|
103
|
+ justifyContent: 'center'
|
|
104
|
+ }}>
|
|
105
|
+ <Spinner/>
|
|
106
|
+ </View>
|
|
107
|
+ }
|
|
108
|
+ />
|
|
109
|
+ );
|
|
110
|
+ }
|
|
111
|
+
|
|
112
|
+ getTabbedWebview() {
|
|
113
|
+ let tabbedView = [];
|
|
114
|
+ for (let i = 0; i < this.props.data.length; i++) {
|
|
115
|
+ tabbedView.push(
|
|
116
|
+ <Tab heading={
|
|
117
|
+ <TabHeading>
|
|
118
|
+ <CustomMaterialIcon
|
|
119
|
+ icon={this.props.data[i]['icon']}
|
|
120
|
+ color={ThemeManager.getCurrentThemeVariables().tabIconColor}
|
|
121
|
+ fontSize={20}
|
|
122
|
+ />
|
|
123
|
+ <Text>{this.props.data[i]['name']}</Text>
|
|
124
|
+ </TabHeading>}
|
|
125
|
+ key={this.props.data[i]['url']}
|
|
126
|
+ style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
|
127
|
+ {this.getWebview(this.props.data[i])}
|
|
128
|
+ </Tab>);
|
|
129
|
+ }
|
|
130
|
+ return tabbedView;
|
70
|
131
|
}
|
71
|
132
|
|
72
|
133
|
render() {
|
|
@@ -78,38 +139,22 @@ export default class WebViewScreen extends React.Component<Props> {
|
78
|
139
|
headerRightButton={this.getRefreshButton()}
|
79
|
140
|
hasBackButton={this.props.hasHeaderBackButton}
|
80
|
141
|
hasSideMenu={this.props.hasSideMenu}>
|
81
|
|
- <WebView
|
82
|
|
- ref={ref => (this.webview = ref)}
|
83
|
|
- source={{uri: this.props.url}}
|
84
|
|
- style={{
|
85
|
|
- width: '100%',
|
86
|
|
- height: '100%',
|
87
|
|
- }}
|
88
|
|
- startInLoadingState={true}
|
89
|
|
- injectedJavaScript={this.props.customInjectedJS}
|
90
|
|
- javaScriptEnabled={true}
|
91
|
|
- renderLoading={() =>
|
92
|
|
- <View style={{
|
93
|
|
- backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
|
94
|
|
- position: 'absolute',
|
95
|
|
- top: 0,
|
96
|
|
- right: 0,
|
97
|
|
- width: '100%',
|
98
|
|
- height: '100%',
|
99
|
|
- flex: 1,
|
100
|
|
- alignItems: 'center',
|
101
|
|
- justifyContent: 'center'
|
102
|
|
- }}>
|
103
|
|
- <Spinner/>
|
104
|
|
- </View>
|
105
|
|
- }
|
106
|
|
- />
|
107
|
|
- {this.props.hasFooter ?
|
|
142
|
+ {this.props.data.length === 1 ?
|
|
143
|
+ this.getWebview(this.props.data[0]) :
|
|
144
|
+ <Tabs
|
|
145
|
+ tabContainerStyle={{
|
|
146
|
+ elevation: 0, // Fix for android shadow
|
|
147
|
+ }}
|
|
148
|
+ locked={true}
|
|
149
|
+ >
|
|
150
|
+ {this.getTabbedWebview()}
|
|
151
|
+ </Tabs>}
|
|
152
|
+ {this.props.hasFooter && this.props.data.length === 1 ?
|
108
|
153
|
<Footer>
|
109
|
154
|
<Left style={{
|
110
|
155
|
paddingLeft: 6,
|
111
|
156
|
}}>
|
112
|
|
- {this.getHeaderButton(() => this.openWebLink(), 'open-in-new')}
|
|
157
|
+ {this.getHeaderButton(() => this.openWebLink(this.props.data[0]['url']), 'open-in-new')}
|
113
|
158
|
</Left>
|
114
|
159
|
<Body/>
|
115
|
160
|
<Right style={{
|