123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- // @flow
-
- import * as React from 'react';
- import {Linking, Platform, View} from 'react-native';
- 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";
- import ThemeManager from "../utils/ThemeManager";
- import BaseContainer from "../components/BaseContainer";
-
- type Props = {
- navigation: Object,
- data: Array<{
- url: string,
- icon: string,
- name: string,
- customJS: string
- }>,
- headerTitle: string,
- hasHeaderBackButton: boolean,
- hasSideMenu: boolean,
- hasFooter: boolean,
- }
-
- /**
- * Class defining a webview screen.
- */
- export default class WebViewScreen extends React.Component<Props> {
-
- static defaultProps = {
- hasBackButton: false,
- hasSideMenu: true,
- hasFooter: true,
- };
-
- webviewArray: Array<WebView> = [];
-
- openWebLink(url: string) {
- Linking.openURL(url).catch((err) => console.error('Error opening link', err));
- }
-
- getHeaderButton(clickAction: Function, icon: string) {
- return (
- <Touchable
- style={{padding: 6}}
- onPress={() => clickAction()}>
- <CustomMaterialIcon
- color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
- icon={icon}/>
- </Touchable>
- );
- }
-
- getRefreshButton() {
- return (
- <View style={{flexDirection: 'row'}}>
- {this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
- </View>
- );
- };
-
- refreshWebview() {
- for (let view of this.webviewArray) {
- view.reload();
- }
- }
-
- goBackWebview() {
- for (let view of this.webviewArray) {
- view.goBack();
- }
- }
-
- goForwardWebview() {
- for (let view of this.webviewArray) {
- view.goForward();
- }
- }
-
- getWebview(obj: Object) {
- return (
- <WebView
- ref={ref => (this.webviewArray.push(ref))}
- source={{uri: obj['url']}}
- style={{
- width: '100%',
- height: '100%',
- }}
- startInLoadingState={true}
- injectedJavaScript={obj['customJS']}
- javaScriptEnabled={true}
- renderLoading={() =>
- <View style={{
- backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
- position: 'absolute',
- top: 0,
- right: 0,
- width: '100%',
- height: '100%',
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center'
- }}>
- <Spinner/>
- </View>
- }
- />
- );
- }
-
- getTabbedWebview() {
- let tabbedView = [];
- for (let i = 0; i < this.props.data.length; i++) {
- tabbedView.push(
- <Tab heading={
- <TabHeading>
- <CustomMaterialIcon
- icon={this.props.data[i]['icon']}
- color={ThemeManager.getCurrentThemeVariables().tabIconColor}
- fontSize={20}
- />
- <Text>{this.props.data[i]['name']}</Text>
- </TabHeading>}
- key={this.props.data[i]['url']}
- style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
- {this.getWebview(this.props.data[i])}
- </Tab>);
- }
- return tabbedView;
- }
-
- render() {
- const nav = this.props.navigation;
- return (
- <BaseContainer
- navigation={nav}
- headerTitle={this.props.headerTitle}
- headerRightButton={this.getRefreshButton()}
- hasBackButton={this.props.hasHeaderBackButton}
- hasSideMenu={this.props.hasSideMenu}>
- {this.props.data.length === 1 ?
- this.getWebview(this.props.data[0]) :
- <Tabs
- tabContainerStyle={{
- elevation: 0, // Fix for android shadow
- }}
- locked={true}
- >
- {this.getTabbedWebview()}
- </Tabs>}
- {this.props.hasFooter && this.props.data.length === 1 ?
- <Footer>
- <Left style={{
- paddingLeft: 6,
- }}>
- {this.getHeaderButton(() => this.openWebLink(this.props.data[0]['url']), 'open-in-new')}
- </Left>
- <Body/>
- <Right style={{
- flexDirection: 'row',
- alignItems: 'flex-end',
- paddingRight: 6
- }}>
- <View style={{
- flexDirection: 'row',
- marginRight: 0,
- marginLeft: 'auto'
- }}>
- {this.getHeaderButton(() => this.goBackWebview(), 'chevron-left')}
- {this.getHeaderButton(() => this.goForwardWebview(), 'chevron-right')}
- </View>
- </Right>
- </Footer> : <View/>}
- </BaseContainer>
- );
- }
- }
|