diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index 7a2ba8b..f18cc66 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -2,7 +2,7 @@ import * as React from 'react'; import {Linking, Platform, View} from 'react-native'; -import {Spinner, Footer, Right, Left, Body} from 'native-base'; +import {Spinner, Footer, Right, Left, Body, Tab, TabHeading, Text, Tabs} from 'native-base'; import WebView from "react-native-webview"; import Touchable from "react-native-platform-touchable"; import CustomMaterialIcon from "../components/CustomMaterialIcon"; @@ -11,8 +11,12 @@ import BaseContainer from "../components/BaseContainer"; type Props = { navigation: Object, - url: string, - customInjectedJS: string, + data: Array<{ + url: string, + icon: string, + name: string, + customJS: string + }>, headerTitle: string, hasHeaderBackButton: boolean, hasSideMenu: boolean, @@ -25,16 +29,15 @@ type Props = { export default class WebViewScreen extends React.Component { static defaultProps = { - customInjectedJS: '', hasBackButton: false, hasSideMenu: true, hasFooter: true, }; - webview: WebView; + webviewArray: Array = []; - openWebLink() { - Linking.openURL(this.props.url).catch((err) => console.error('Error opening link', err)); + openWebLink(url: string) { + Linking.openURL(url).catch((err) => console.error('Error opening link', err)); } getHeaderButton(clickAction: Function, icon: string) { @@ -58,15 +61,73 @@ export default class WebViewScreen extends React.Component { }; refreshWebview() { - this.webview.reload(); + for (let view of this.webviewArray) { + view.reload(); + } } goBackWebview() { - this.webview.goBack(); + for (let view of this.webviewArray) { + view.goBack(); + } } goForwardWebview() { - this.webview.goForward(); + for (let view of this.webviewArray) { + view.goForward(); + } + } + + getWebview(obj: Object) { + return ( + (this.webviewArray.push(ref))} + source={{uri: obj['url']}} + style={{ + width: '100%', + height: '100%', + }} + startInLoadingState={true} + injectedJavaScript={obj['customJS']} + javaScriptEnabled={true} + renderLoading={() => + + + + } + /> + ); + } + + getTabbedWebview() { + let tabbedView = []; + for (let i = 0; i < this.props.data.length; i++) { + tabbedView.push( + + + {this.props.data[i]['name']} + } + key={this.props.data[i]['url']} + style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> + {this.getWebview(this.props.data[i])} + ); + } + return tabbedView; } render() { @@ -78,38 +139,22 @@ export default class WebViewScreen extends React.Component { headerRightButton={this.getRefreshButton()} hasBackButton={this.props.hasHeaderBackButton} hasSideMenu={this.props.hasSideMenu}> - (this.webview = ref)} - source={{uri: this.props.url}} - style={{ - width: '100%', - height: '100%', - }} - startInLoadingState={true} - injectedJavaScript={this.props.customInjectedJS} - javaScriptEnabled={true} - renderLoading={() => - - - - } - /> - {this.props.hasFooter ? + {this.props.data.length === 1 ? + this.getWebview(this.props.data[0]) : + + {this.getTabbedWebview()} + } + {this.props.hasFooter && this.props.data.length === 1 ?