123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197 |
- // @flow
-
- import * as React from 'react';
- import WebView from "react-native-webview";
- import BasicLoadingScreen from "./BasicLoadingScreen";
- import ErrorView from "./ErrorView";
- import {ERROR_TYPE} from "../../utils/WebData";
- import MaterialHeaderButtons, {Item} from '../Overrides/CustomHeaderButton';
- import {Divider, HiddenItem, OverflowMenu} from "react-navigation-header-buttons";
- import i18n from 'i18n-js';
- import {Animated, BackHandler, Linking} from "react-native";
- import {withCollapsible} from "../../utils/withCollapsible";
- import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
- import {withTheme} from "react-native-paper";
- import type {CustomTheme} from "../../managers/ThemeManager";
- import {StackNavigationProp} from "@react-navigation/stack";
- import {Collapsible} from "react-navigation-collapsible";
-
- type Props = {
- navigation: StackNavigationProp,
- theme: CustomTheme,
- url: string,
- customJS: string,
- collapsibleStack: Collapsible,
- onMessage: Function,
- onScroll: Function,
- showAdvancedControls: boolean,
- }
-
- const AnimatedWebView = Animated.createAnimatedComponent(WebView);
-
- /**
- * Class defining a webview screen.
- */
- class WebViewScreen extends React.PureComponent<Props> {
-
- static defaultProps = {
- customJS: '',
- showAdvancedControls: true,
- };
-
- webviewRef: Object;
-
- canGoBack: boolean;
-
- constructor() {
- super();
- this.webviewRef = React.createRef();
- this.canGoBack = false;
- }
-
- /**
- * Creates refresh button after mounting
- */
- componentDidMount() {
- this.props.navigation.setOptions({
- headerRight: this.props.showAdvancedControls
- ? this.getAdvancedButtons
- : this.getBasicButton,
- });
- this.props.navigation.addListener(
- 'focus',
- () =>
- BackHandler.addEventListener(
- 'hardwareBackPress',
- this.onBackButtonPressAndroid
- )
- );
- this.props.navigation.addListener(
- 'blur',
- () =>
- BackHandler.removeEventListener(
- 'hardwareBackPress',
- this.onBackButtonPressAndroid
- )
- );
- }
-
- onBackButtonPressAndroid = () => {
- if (this.canGoBack) {
- this.onGoBackClicked();
- return true;
- }
- return false;
- };
-
- /**
- * Gets a header refresh button
- *
- * @return {*}
- */
- getBasicButton = () => {
- return (
- <MaterialHeaderButtons>
- <Item
- title="refresh"
- iconName="refresh"
- onPress={this.onRefreshClicked}/>
- <Item
- title={i18n.t("general.openInBrowser")}
- iconName="open-in-new"
- onPress={this.onOpenClicked}/>
- </MaterialHeaderButtons>
- );
- };
-
- getAdvancedButtons = () => {
- return (
- <MaterialHeaderButtons>
- <Item
- title="refresh"
- iconName="refresh"
- onPress={this.onRefreshClicked}
- />
- <OverflowMenu
- style={{marginHorizontal: 10}}
- OverflowIcon={
- <MaterialCommunityIcons
- name="dots-vertical"
- size={26}
- color={this.props.theme.colors.text}
- />}
- >
- <HiddenItem
- title={i18n.t("general.goBack")}
- onPress={this.onGoBackClicked}/>
- <HiddenItem
- title={i18n.t("general.goForward")}
- onPress={this.onGoForwardClicked}/>
- <Divider/>
- <HiddenItem
- title={i18n.t("general.openInBrowser")}
- onPress={this.onOpenClicked}/>
- </OverflowMenu>
- </MaterialHeaderButtons>
- );
- }
-
- /**
- * Callback to use when refresh button is clicked. Reloads the webview.
- */
- onRefreshClicked = () => this.webviewRef.current.getNode().reload(); // Need to call getNode() as we are working with animated components
- onGoBackClicked = () => this.webviewRef.current.getNode().goBack();
- onGoForwardClicked = () => this.webviewRef.current.getNode().goForward();
-
- onOpenClicked = () => Linking.openURL(this.props.url);
-
- injectJavaScript = (script: string) => {
- this.webviewRef.current.getNode().injectJavaScript(script);
- }
-
- /**
- * Gets the loading indicator
- *
- * @return {*}
- */
- getRenderLoading = () => <BasicLoadingScreen isAbsolute={true}/>;
-
- getJavascriptPadding(padding: number) {
- return (
- "document.getElementsByTagName('body')[0].style.paddingTop = '" + padding + "px';" +
- "true;"
- );
- }
-
- onScroll = (event: Object) => {
- if (this.props.onScroll)
- this.props.onScroll(event);
- }
-
- render() {
- const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
- return (
- <AnimatedWebView
- ref={this.webviewRef}
- source={{uri: this.props.url}}
- startInLoadingState={true}
- injectedJavaScript={this.props.customJS}
- javaScriptEnabled={true}
- renderLoading={this.getRenderLoading}
- renderError={() => <ErrorView
- errorCode={ERROR_TYPE.CONNECTION_ERROR}
- onRefresh={this.onRefreshClicked}
- />}
- onNavigationStateChange={navState => {
- this.canGoBack = navState.canGoBack;
- }}
- onMessage={this.props.onMessage}
- onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
- // Animations
- onScroll={onScrollWithListener(this.onScroll)}
- />
- );
- }
- }
-
- export default withCollapsible(withTheme(WebViewScreen));
|