Improved webview screen header buttons and removed unused props
This commit is contained in:
parent
f12029eae9
commit
fe24fce882
7 changed files with 45 additions and 70 deletions
|
@ -8,18 +8,17 @@ import * as Touchable from "react-native/Libraries/Components/Touchable/Touchabl
|
|||
|
||||
const MaterialHeaderButton = (props: Object) => (
|
||||
<HeaderButton
|
||||
{...props}
|
||||
IconComponent={MaterialCommunityIcons}
|
||||
iconSize={26}
|
||||
color={props.theme.colors.text}
|
||||
background={Touchable.Ripple(props.theme.colors.ripple, true)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
const MaterialHeaderButtons = (props: Object) => {
|
||||
return (
|
||||
<HeaderButtons
|
||||
{...props}
|
||||
HeaderButtonComponent={withTheme(MaterialHeaderButton)}
|
||||
OverflowIcon={
|
||||
<MaterialCommunityIcons
|
||||
|
@ -28,6 +27,7 @@ const MaterialHeaderButtons = (props: Object) => {
|
|||
color={props.theme.colors.text}
|
||||
/>
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -6,19 +6,14 @@ import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
|
|||
import ErrorView from "../Custom/ErrorView";
|
||||
import {ERROR_TYPE} from "../../utils/WebData";
|
||||
import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
|
||||
import {HiddenItem} from "react-navigation-header-buttons";
|
||||
import {Linking} from "expo";
|
||||
import i18n from 'i18n-js';
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
data: Array<{
|
||||
url: string,
|
||||
icon: string,
|
||||
name: string,
|
||||
customJS: string
|
||||
}>,
|
||||
headerTitle: string,
|
||||
hasHeaderBackButton: boolean,
|
||||
hasSideMenu: boolean,
|
||||
hasFooter: boolean,
|
||||
url: string,
|
||||
customJS: string,
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -27,9 +22,7 @@ type Props = {
|
|||
class WebViewScreen extends React.PureComponent<Props> {
|
||||
|
||||
static defaultProps = {
|
||||
hasBackButton: false,
|
||||
hasSideMenu: true,
|
||||
hasFooter: true,
|
||||
customJS: '',
|
||||
};
|
||||
|
||||
webviewRef: Object;
|
||||
|
@ -57,7 +50,22 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
getRefreshButton() {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
@ -66,6 +74,10 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
* Callback to use when refresh button is clicked. Reloads the webview.
|
||||
*/
|
||||
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
|
||||
|
@ -78,13 +90,9 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
return (
|
||||
<WebView
|
||||
ref={this.webviewRef}
|
||||
source={{uri: this.props.data[0]['url']}}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
source={{uri: this.props.url}}
|
||||
startInLoadingState={true}
|
||||
injectedJavaScript={this.props.data[0]['customJS']}
|
||||
injectedJavaScript={this.props.customJS}
|
||||
javaScriptEnabled={true}
|
||||
renderLoading={this.getRenderLoading}
|
||||
renderError={() => <ErrorView
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import WebViewScreen from "../../components/Screens/WebViewScreen";
|
||||
import i18n from "i18n-js";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
@ -39,25 +38,9 @@ export default class AvailableRoomScreen extends React.Component<Props> {
|
|||
return (
|
||||
<WebViewScreen
|
||||
navigation={nav}
|
||||
data={[
|
||||
{
|
||||
url: ROOM_URL,
|
||||
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}/>
|
||||
url={ROOM_URL}
|
||||
customJS={this.customInjectedJS}
|
||||
customInjectedJS={this.customInjectedJS}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import WebViewScreen from "../../components/Screens/WebViewScreen";
|
||||
import i18n from "i18n-js";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
@ -50,19 +49,8 @@ export default class AvailableRoomScreen extends React.Component<Props> {
|
|||
return (
|
||||
<WebViewScreen
|
||||
navigation={nav}
|
||||
data={[
|
||||
{
|
||||
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}/>
|
||||
url={BIB_URL}
|
||||
customJS={this.customBibInjectedJS}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -165,18 +165,8 @@ export default class PlanexScreen extends React.Component<Props, State> {
|
|||
</Banner>
|
||||
<WebViewScreen
|
||||
navigation={nav}
|
||||
data={[
|
||||
{
|
||||
url: PLANEX_URL,
|
||||
icon: '',
|
||||
name: '',
|
||||
customJS: this.customInjectedJS
|
||||
},
|
||||
]}
|
||||
customInjectedJS={this.customInjectedJS}
|
||||
headerTitle={'Planex'}
|
||||
hasHeaderBackButton={false}
|
||||
hasFooter={false}/>
|
||||
url={PLANEX_URL}
|
||||
customJS={this.customInjectedJS}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -345,7 +345,10 @@
|
|||
"general": {
|
||||
"loading": "Loading...",
|
||||
"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": {
|
||||
"daysOfWeek": {
|
||||
|
|
|
@ -345,7 +345,10 @@
|
|||
"general": {
|
||||
"loading": "Chargement...",
|
||||
"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": {
|
||||
"daysOfWeek": {
|
||||
|
|
Loading…
Reference in a new issue