Improved webview screen header buttons and removed unused props

This commit is contained in:
Arnaud Vergnet 2020-04-12 12:03:26 +02:00
parent f12029eae9
commit fe24fce882
7 changed files with 45 additions and 70 deletions

View file

@ -8,18 +8,17 @@ import * as Touchable from "react-native/Libraries/Components/Touchable/Touchabl
const MaterialHeaderButton = (props: Object) => ( const MaterialHeaderButton = (props: Object) => (
<HeaderButton <HeaderButton
{...props}
IconComponent={MaterialCommunityIcons} IconComponent={MaterialCommunityIcons}
iconSize={26} iconSize={26}
color={props.theme.colors.text} color={props.theme.colors.text}
background={Touchable.Ripple(props.theme.colors.ripple, true)} background={Touchable.Ripple(props.theme.colors.ripple, true)}
{...props}
/> />
); );
const MaterialHeaderButtons = (props: Object) => { const MaterialHeaderButtons = (props: Object) => {
return ( return (
<HeaderButtons <HeaderButtons
{...props}
HeaderButtonComponent={withTheme(MaterialHeaderButton)} HeaderButtonComponent={withTheme(MaterialHeaderButton)}
OverflowIcon={ OverflowIcon={
<MaterialCommunityIcons <MaterialCommunityIcons
@ -28,6 +27,7 @@ const MaterialHeaderButtons = (props: Object) => {
color={props.theme.colors.text} color={props.theme.colors.text}
/> />
} }
{...props}
/> />
); );
}; };

View file

@ -6,19 +6,14 @@ import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
import ErrorView from "../Custom/ErrorView"; import ErrorView from "../Custom/ErrorView";
import {ERROR_TYPE} from "../../utils/WebData"; import {ERROR_TYPE} from "../../utils/WebData";
import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton'; import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
import {HiddenItem} from "react-navigation-header-buttons";
import {Linking} from "expo";
import i18n from 'i18n-js';
type Props = { type Props = {
navigation: Object, navigation: Object,
data: Array<{ url: string,
url: string, customJS: string,
icon: string,
name: string,
customJS: string
}>,
headerTitle: string,
hasHeaderBackButton: boolean,
hasSideMenu: boolean,
hasFooter: boolean,
} }
/** /**
@ -27,9 +22,7 @@ type Props = {
class WebViewScreen extends React.PureComponent<Props> { class WebViewScreen extends React.PureComponent<Props> {
static defaultProps = { static defaultProps = {
hasBackButton: false, customJS: '',
hasSideMenu: true,
hasFooter: true,
}; };
webviewRef: Object; webviewRef: Object;
@ -57,7 +50,22 @@ class WebViewScreen extends React.PureComponent<Props> {
getRefreshButton() { getRefreshButton() {
return ( return (
<MaterialHeaderButtons> <MaterialHeaderButtons>
<Item title="refresh" iconName="refresh" onPress={this.onRefreshClicked}/> <Item
title="refresh"
iconName="refresh"
onPress={this.onRefreshClicked}/>
<HiddenItem
title={i18n.t("general.goBack")}
iconName="arrow-left"
onPress={this.onGoBackClicked}/>
<HiddenItem
title={i18n.t("general.goForward")}
iconName="arrow-right"
onPress={this.onGoForwardClicked}/>
<HiddenItem
title={i18n.t("general.openInBrowser")}
iconName="web"
onPress={this.onOpenClicked}/>
</MaterialHeaderButtons> </MaterialHeaderButtons>
); );
}; };
@ -66,6 +74,10 @@ class WebViewScreen extends React.PureComponent<Props> {
* Callback to use when refresh button is clicked. Reloads the webview. * Callback to use when refresh button is clicked. Reloads the webview.
*/ */
onRefreshClicked = () => this.webviewRef.current.reload(); onRefreshClicked = () => this.webviewRef.current.reload();
onGoBackClicked = () => this.webviewRef.current.goBack();
onGoForwardClicked = () => this.webviewRef.current.goForward();
onOpenClicked = () => Linking.openURL(this.props.url);
/** /**
* Gets the loading indicator * Gets the loading indicator
@ -78,13 +90,9 @@ class WebViewScreen extends React.PureComponent<Props> {
return ( return (
<WebView <WebView
ref={this.webviewRef} ref={this.webviewRef}
source={{uri: this.props.data[0]['url']}} source={{uri: this.props.url}}
style={{
width: '100%',
height: '100%',
}}
startInLoadingState={true} startInLoadingState={true}
injectedJavaScript={this.props.data[0]['customJS']} injectedJavaScript={this.props.customJS}
javaScriptEnabled={true} javaScriptEnabled={true}
renderLoading={this.getRenderLoading} renderLoading={this.getRenderLoading}
renderError={() => <ErrorView renderError={() => <ErrorView

View file

@ -2,7 +2,6 @@
import * as React from 'react'; import * as React from 'react';
import WebViewScreen from "../../components/Screens/WebViewScreen"; import WebViewScreen from "../../components/Screens/WebViewScreen";
import i18n from "i18n-js";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -39,25 +38,9 @@ export default class AvailableRoomScreen extends React.Component<Props> {
return ( return (
<WebViewScreen <WebViewScreen
navigation={nav} navigation={nav}
data={[ url={ROOM_URL}
{ customJS={this.customInjectedJS}
url: ROOM_URL, customInjectedJS={this.customInjectedJS}/>
icon: 'file-document-outline',
name: i18n.t('availableRoomScreen.normalRoom'),
customJS: this.customInjectedJS
},
{
url: PC_URL,
icon: 'monitor',
name: i18n.t('availableRoomScreen.computerRoom'),
customJS: this.customInjectedJS
},
]}
customInjectedJS={this.customInjectedJS}
headerTitle={i18n.t('screens.availableRooms')}
hasHeaderBackButton={true}
hasSideMenu={false}
hasFooter={false}/>
); );
} }
} }

View file

@ -2,7 +2,6 @@
import * as React from 'react'; import * as React from 'react';
import WebViewScreen from "../../components/Screens/WebViewScreen"; import WebViewScreen from "../../components/Screens/WebViewScreen";
import i18n from "i18n-js";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -50,19 +49,8 @@ export default class AvailableRoomScreen extends React.Component<Props> {
return ( return (
<WebViewScreen <WebViewScreen
navigation={nav} navigation={nav}
data={[ url={BIB_URL}
{ customJS={this.customBibInjectedJS}/>
url: BIB_URL,
icon: 'book',
name: i18n.t('availableRoomScreen.bibRoom'),
customJS: this.customBibInjectedJS
},
]}
customInjectedJS={this.customInjectedJS}
headerTitle={i18n.t('screens.availableRooms')}
hasHeaderBackButton={true}
hasSideMenu={false}
hasFooter={false}/>
); );
} }
} }

View file

@ -165,18 +165,8 @@ export default class PlanexScreen extends React.Component<Props, State> {
</Banner> </Banner>
<WebViewScreen <WebViewScreen
navigation={nav} navigation={nav}
data={[ url={PLANEX_URL}
{ customJS={this.customInjectedJS}/>
url: PLANEX_URL,
icon: '',
name: '',
customJS: this.customInjectedJS
},
]}
customInjectedJS={this.customInjectedJS}
headerTitle={'Planex'}
hasHeaderBackButton={false}
hasFooter={false}/>
</View> </View>
); );
} }

View file

@ -345,7 +345,10 @@
"general": { "general": {
"loading": "Loading...", "loading": "Loading...",
"retry": "Retry", "retry": "Retry",
"networkError": "Unable to contact servers. Make sure you are connected to Internet." "networkError": "Unable to contact servers. Make sure you are connected to Internet.",
"goBack": "Go Back",
"goForward": "Go Forward",
"openInBrowser": "Open in Browser"
}, },
"date": { "date": {
"daysOfWeek": { "daysOfWeek": {

View file

@ -345,7 +345,10 @@
"general": { "general": {
"loading": "Chargement...", "loading": "Chargement...",
"retry": "Réessayer", "retry": "Réessayer",
"networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet." "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet.",
"goBack": "Suivant",
"goForward": "Précédent",
"openInBrowser": "Ouvrir dans le navigateur"
}, },
"date": { "date": {
"daysOfWeek": { "daysOfWeek": {