forked from vergnet/application-amicale
233 lines
7.3 KiB
JavaScript
233 lines
7.3 KiB
JavaScript
// @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,
|
|
customPaddingFunction: null | (padding: number) => 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,
|
|
customPaddingFunction: null,
|
|
};
|
|
|
|
webviewRef: { current: null | WebView };
|
|
|
|
canGoBack: boolean;
|
|
|
|
constructor() {
|
|
super();
|
|
this.webviewRef = React.createRef();
|
|
this.canGoBack = false;
|
|
}
|
|
|
|
/**
|
|
* Creates header buttons and listens to events 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
|
|
)
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Goes back on the webview or on the navigation stack if we cannot go back anymore
|
|
*
|
|
* @returns {boolean}
|
|
*/
|
|
onBackButtonPressAndroid = () => {
|
|
if (this.canGoBack) {
|
|
this.onGoBackClicked();
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Gets header refresh and open in browser buttons
|
|
*
|
|
* @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>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Creates advanced header control buttons.
|
|
* These buttons allows the user to refresh, go back, go forward and open in the browser.
|
|
*
|
|
* @returns {*}
|
|
*/
|
|
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 = () => {
|
|
if (this.webviewRef.current != null)
|
|
this.webviewRef.current.reload();
|
|
}
|
|
onGoBackClicked = () => {
|
|
if (this.webviewRef.current != null)
|
|
this.webviewRef.current.goBack();
|
|
}
|
|
onGoForwardClicked = () => {
|
|
if (this.webviewRef.current != null)
|
|
this.webviewRef.current.goForward();
|
|
}
|
|
onOpenClicked = () => Linking.openURL(this.props.url);
|
|
|
|
/**
|
|
* Injects the given javascript string into the web page
|
|
*
|
|
* @param script The script to inject
|
|
*/
|
|
injectJavaScript = (script: string) => {
|
|
if (this.webviewRef.current != null)
|
|
this.webviewRef.current.injectJavaScript(script);
|
|
}
|
|
|
|
/**
|
|
* Gets the loading indicator
|
|
*
|
|
* @return {*}
|
|
*/
|
|
getRenderLoading = () => <BasicLoadingScreen isAbsolute={true}/>;
|
|
|
|
/**
|
|
* Gets the javascript needed to generate a padding on top of the page
|
|
* This adds padding to the body and runs the custom padding function given in props
|
|
*
|
|
* @param padding The padding to add in pixels
|
|
* @returns {string}
|
|
*/
|
|
getJavascriptPadding(padding: number) {
|
|
const customPadding = this.props.customPaddingFunction != null ? this.props.customPaddingFunction(padding) : "";
|
|
return (
|
|
"document.getElementsByTagName('body')[0].style.paddingTop = '" + padding + "px';" +
|
|
customPadding +
|
|
"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));
|