lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improve Services screen components to match linter

Browse source
This commit is contained in:
Arnaud Vergnet 2020-08-05 18:39:44 +02:00
parent 3ce23726c2
commit fcbc70956b
10 changed files with 280 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Lists/Proxiwash/ProxiwashListItem.js
View file

@ -15,12 +15,12 @@ import i18n from 'i18n-js';
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
import ProxiwashConstants from '../../../constants/ProxiwashConstants'; import ProxiwashConstants from '../../../constants/ProxiwashConstants';
import AprilFoolsManager from '../../../managers/AprilFoolsManager'; import AprilFoolsManager from '../../../managers/AprilFoolsManager';
import type {CustomTheme} from '../../../managers/ThemeManager'; import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {ProxiwashMachineType} from '../../../screens/Proxiwash/ProxiwashScreen'; import type {ProxiwashMachineType} from '../../../screens/Proxiwash/ProxiwashScreen';
type PropsType = { type PropsType = {
item: ProxiwashMachineType, item: ProxiwashMachineType,
theme: CustomTheme, theme: CustomThemeType,
onPress: ( onPress: (
title: string, title: string,
item: ProxiwashMachineType, item: ProxiwashMachineType,

4
src/components/Lists/Proxiwash/ProxiwashSectionHeader.js
View file

@ -4,10 +4,10 @@ import * as React from 'react';
import {Avatar, Text, withTheme} from 'react-native-paper'; import {Avatar, Text, withTheme} from 'react-native-paper';
import {StyleSheet, View} from 'react-native'; import {StyleSheet, View} from 'react-native';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import type {CustomTheme} from '../../../managers/ThemeManager'; import type {CustomThemeType} from '../../../managers/ThemeManager';
type PropsType = { type PropsType = {
theme: CustomTheme, theme: CustomThemeType,
title: string, title: string,
isDryer: boolean, isDryer: boolean,
nbAvailable: number, nbAvailable: number,

4
src/components/Screens/WebViewScreen.js
View file

@ -13,7 +13,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
import {withTheme} from 'react-native-paper'; import {withTheme} from 'react-native-paper';
import {StackNavigationProp} from '@react-navigation/stack'; import {StackNavigationProp} from '@react-navigation/stack';
import {Collapsible} from 'react-navigation-collapsible'; import {Collapsible} from 'react-navigation-collapsible';
import type {CustomTheme} from '../../managers/ThemeManager'; import type {CustomThemeType} from '../../managers/ThemeManager';
import {withCollapsible} from '../../utils/withCollapsible'; import {withCollapsible} from '../../utils/withCollapsible';
import MaterialHeaderButtons, {Item} from '../Overrides/CustomHeaderButton'; import MaterialHeaderButtons, {Item} from '../Overrides/CustomHeaderButton';
import {ERROR_TYPE} from '../../utils/WebData'; import {ERROR_TYPE} from '../../utils/WebData';
@ -22,7 +22,7 @@ import BasicLoadingScreen from './BasicLoadingScreen';
type PropsType = { type PropsType = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme, theme: CustomThemeType,
url: string, url: string,
collapsibleStack: Collapsible, collapsibleStack: Collapsible,
onMessage: (event: {nativeEvent: {data: string}}) => void, onMessage: (event: {nativeEvent: {data: string}}) => void,

5
src/managers/AprilFoolsManager.js
View file

@ -2,6 +2,7 @@
import type {ProxiwashMachineType} from '../screens/Proxiwash/ProxiwashScreen'; import type {ProxiwashMachineType} from '../screens/Proxiwash/ProxiwashScreen';
import type {CustomThemeType} from './ThemeManager'; import type {CustomThemeType} from './ThemeManager';
import type {RuFoodCategoryType} from '../screens/Services/SelfMenuScreen';
/** /**
* Singleton class used to manage april fools * Singleton class used to manage april fools
@ -49,8 +50,8 @@ export default class AprilFoolsManager {
* @returns {Object} * @returns {Object}
*/ */
static getFakeMenuItem( static getFakeMenuItem(
menu: Array<{dishes: Array<{name: string}>}>, menu: Array<RuFoodCategoryType>,
): Array<{dishes: Array<{name: string}>}> { ): Array<RuFoodCategoryType> {
menu[1].dishes.splice(4, 0, {name: 'Coq au vin'}); menu[1].dishes.splice(4, 0, {name: 'Coq au vin'});
menu[1].dishes.splice(2, 0, {name: "Bat'Soupe"}); menu[1].dishes.splice(2, 0, {name: "Bat'Soupe"});
menu[1].dishes.splice(1, 0, {name: 'Pave de loup'}); menu[1].dishes.splice(1, 0, {name: 'Pave de loup'});

4
src/screens/Proxiwash/ProxiwashScreen.js
View file

@ -17,7 +17,7 @@ import MaterialHeaderButtons, {
Item, Item,
} from '../../components/Overrides/CustomHeaderButton'; } from '../../components/Overrides/CustomHeaderButton';
import ProxiwashSectionHeader from '../../components/Lists/Proxiwash/ProxiwashSectionHeader'; import ProxiwashSectionHeader from '../../components/Lists/Proxiwash/ProxiwashSectionHeader';
import type {CustomTheme} from '../../managers/ThemeManager'; import type {CustomThemeType} from '../../managers/ThemeManager';
import { import {
getCleanedMachineWatched, getCleanedMachineWatched,
getMachineEndDate, getMachineEndDate,
@ -47,7 +47,7 @@ export type ProxiwashMachineType = {
type PropsType = { type PropsType = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme, theme: CustomThemeType,
}; };
type StateType = { type StateType = {

4
src/screens/Services/Proximo/ProximoListScreen.js
View file

@ -19,7 +19,7 @@ import ProximoListItem from '../../../components/Lists/Proximo/ProximoListItem';
import MaterialHeaderButtons, { import MaterialHeaderButtons, {
Item, Item,
} from '../../../components/Overrides/CustomHeaderButton'; } from '../../../components/Overrides/CustomHeaderButton';
import type {CustomTheme} from '../../../managers/ThemeManager'; import type {CustomThemeType} from '../../../managers/ThemeManager';
import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList'; import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
import type {ProximoArticleType} from './ProximoMainScreen'; import type {ProximoArticleType} from './ProximoMainScreen';
@ -56,7 +56,7 @@ type PropsType = {
shouldFocusSearchBar: boolean, shouldFocusSearchBar: boolean,
}, },
}, },
theme: CustomTheme, theme: CustomThemeType,
}; };
type StateType = { type StateType = {

4
src/screens/Services/Proximo/ProximoMainScreen.js
View file

@ -8,7 +8,7 @@ import WebSectionList from '../../../components/Screens/WebSectionList';
import MaterialHeaderButtons, { import MaterialHeaderButtons, {
Item, Item,
} from '../../../components/Overrides/CustomHeaderButton'; } from '../../../components/Overrides/CustomHeaderButton';
import type {CustomTheme} from '../../../managers/ThemeManager'; import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {SectionListDataType} from '../../../components/Screens/WebSectionList'; import type {SectionListDataType} from '../../../components/Screens/WebSectionList';
const DATA_URL = 'https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json'; const DATA_URL = 'https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json';
@ -43,7 +43,7 @@ export type ProximoDataType = {
type PropsType = { type PropsType = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme, theme: CustomThemeType,
}; };
/** /**

149
src/screens/Services/SelfMenuScreen.js
View file

@ -2,34 +2,51 @@
import * as React from 'react'; import * as React from 'react';
import {View} from 'react-native'; import {View} from 'react-native';
import DateManager from "../../managers/DateManager";
import WebSectionList from "../../components/Screens/WebSectionList";
import {Card, Text, withTheme} from 'react-native-paper'; import {Card, Text, withTheme} from 'react-native-paper';
import AprilFoolsManager from "../../managers/AprilFoolsManager"; import {StackNavigationProp} from '@react-navigation/stack';
import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../managers/ThemeManager";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import DateManager from '../../managers/DateManager';
import WebSectionList from '../../components/Screens/WebSectionList';
import type {CustomThemeType} from '../../managers/ThemeManager';
import type {SectionListDataType} from '../../components/Screens/WebSectionList';
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json"; const DATA_URL =
'https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json';
type Props = { type PropsType = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme, theme: CustomThemeType,
} };
export type RuFoodCategoryType = {
name: string,
dishes: Array<{name: string}>,
};
type RuMealType = {
name: string,
foodcategory: Array<RuFoodCategoryType>,
};
type RawRuMenuType = {
restaurant_id: number,
id: number,
date: string,
meal: Array<RuMealType>,
};
/** /**
* Class defining the app's menu screen. * Class defining the app's menu screen.
*/ */
class SelfMenuScreen extends React.Component<Props> { class SelfMenuScreen extends React.Component<PropsType> {
/** /**
* Extract a key for the given item * Formats the given string to make sure it starts with a capital letter
* *
* @param item The item to extract the key from * @param name The string to format
* @return {*} The extracted key * @return {string} The formatted string
*/ */
getKeyExtractor(item: Object) { static formatName(name: string): string {
return item !== undefined ? item['name'] : undefined; return name.charAt(0) + name.substr(1).toLowerCase();
} }
/** /**
@ -38,31 +55,28 @@ class SelfMenuScreen extends React.Component<Props> {
* @param fetchedData * @param fetchedData
* @return {[]} * @return {[]}
*/ */
createDataset = (fetchedData: Object) => { createDataset = (
fetchedData: Array<RawRuMenuType>,
): SectionListDataType<RuFoodCategoryType> => {
let result = []; let result = [];
if (fetchedData == null || Object.keys(fetchedData).length === 0) { if (fetchedData == null || fetchedData.length === 0) {
result = [ result = [
{ {
title: i18n.t("general.notAvailable"), title: i18n.t('general.notAvailable'),
data: [], data: [],
keyExtractor: this.getKeyExtractor keyExtractor: this.getKeyExtractor,
} },
]; ];
} else { } else {
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled() && fetchedData.length > 0) fetchedData.forEach((item: RawRuMenuType) => {
fetchedData[0].meal[0].foodcategory = AprilFoolsManager.getFakeMenuItem(fetchedData[0].meal[0].foodcategory); result.push({
// fetched data is an array here title: DateManager.getInstance().getTranslatedDate(item.date),
for (let i = 0; i < fetchedData.length; i++) { data: item.meal[0].foodcategory,
result.push(
{
title: DateManager.getInstance().getTranslatedDate(fetchedData[i].date),
data: fetchedData[i].meal[0].foodcategory,
keyExtractor: this.getKeyExtractor, keyExtractor: this.getKeyExtractor,
});
});
} }
); return result;
}
}
return result
}; };
/** /**
@ -71,9 +85,14 @@ class SelfMenuScreen extends React.Component<Props> {
* @param section The section to render the header from * @param section The section to render the header from
* @return {*} * @return {*}
*/ */
getRenderSectionHeader = ({section}: Object) => { getRenderSectionHeader = ({
section,
}: {
section: {title: string},
}): React.Node => {
return ( return (
<Card style={{ <Card
style={{
width: '95%', width: '95%',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
@ -84,10 +103,10 @@ class SelfMenuScreen extends React.Component<Props> {
<Card.Title <Card.Title
title={section.title} title={section.title}
titleStyle={{ titleStyle={{
textAlign: 'center' textAlign: 'center',
}} }}
subtitleStyle={{ subtitleStyle={{
textAlign: 'center' textAlign: 'center',
}} }}
style={{ style={{
paddingLeft: 0, paddingLeft: 0,
@ -103,64 +122,66 @@ class SelfMenuScreen extends React.Component<Props> {
* @param item The item to render * @param item The item to render
* @return {*} * @return {*}
*/ */
getRenderItem = ({item}: Object) => { getRenderItem = ({item}: {item: RuFoodCategoryType}): React.Node => {
const {theme} = this.props;
return ( return (
<Card style={{ <Card
style={{
flex: 0, flex: 0,
marginHorizontal: 10, marginHorizontal: 10,
marginVertical: 5, marginVertical: 5,
}}> }}>
<Card.Title <Card.Title style={{marginTop: 5}} title={item.name} />
style={{marginTop: 5}} <View
title={item.name} style={{
/>
<View style={{
width: '80%', width: '80%',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: this.props.theme.colors.primary, borderBottomColor: theme.colors.primary,
marginTop: 5, marginTop: 5,
marginBottom: 5, marginBottom: 5,
}}/> }}
/>
<Card.Content> <Card.Content>
{item.dishes.map((object) => {item.dishes.map((object: {name: string}): React.Node =>
<View> object.name !== '' ? (
{object.name !== "" ? <Text
<Text style={{ style={{
marginTop: 5, marginTop: 5,
marginBottom: 5, marginBottom: 5,
textAlign: 'center' textAlign: 'center',
}}>{this.formatName(object.name)}</Text> }}>
: <View/>} {SelfMenuScreen.formatName(object.name)}
</View>)} </Text>
) : null,
)}
</Card.Content> </Card.Content>
</Card> </Card>
); );
}; };
/** /**
* Formats the given string to make sure it starts with a capital letter * Extract a key for the given item
* *
* @param name The string to format * @param item The item to extract the key from
* @return {string} The formatted string * @return {*} The extracted key
*/ */
formatName(name: String) { getKeyExtractor = (item: RuFoodCategoryType): string => item.name;
return name.charAt(0) + name.substr(1).toLowerCase();
}
render() { render(): React.Node {
const nav = this.props.navigation; const {navigation} = this.props;
return ( return (
<WebSectionList <WebSectionList
createDataset={this.createDataset} createDataset={this.createDataset}
navigation={nav} navigation={navigation}
autoRefreshTime={0} autoRefreshTime={0}
refreshOnFocus={false} refreshOnFocus={false}
fetchUrl={DATA_URL} fetchUrl={DATA_URL}
renderItem={this.getRenderItem} renderItem={this.getRenderItem}
renderSectionHeader={this.getRenderSectionHeader} renderSectionHeader={this.getRenderSectionHeader}
stickyHeader={true}/> stickyHeader
/>
); );
} }
} }

4
src/screens/Services/ServicesScreen.js
View file

@ -13,7 +13,7 @@ import {
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import {StackNavigationProp} from '@react-navigation/stack'; import {StackNavigationProp} from '@react-navigation/stack';
import CardList from '../../components/Lists/CardList/CardList'; import CardList from '../../components/Lists/CardList/CardList';
import type {CustomTheme} from '../../managers/ThemeManager'; import type {CustomThemeType} from '../../managers/ThemeManager';
import MaterialHeaderButtons, { import MaterialHeaderButtons, {
Item, Item,
} from '../../components/Overrides/CustomHeaderButton'; } from '../../components/Overrides/CustomHeaderButton';
@ -28,7 +28,7 @@ import type {ServiceCategoryType} from '../../managers/ServicesManager';
type PropsType = { type PropsType = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme, theme: CustomThemeType,
}; };
class ServicesScreen extends React.Component<PropsType> { class ServicesScreen extends React.Component<PropsType> {

109
src/screens/Services/WebsiteScreen.js
View file

@ -1,60 +1,71 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from '@react-navigation/stack';
import WebViewScreen from "../../components/Screens/WebViewScreen"; import WebViewScreen from '../../components/Screens/WebViewScreen';
import AvailableWebsites from "../../constants/AvailableWebsites"; import AvailableWebsites from '../../constants/AvailableWebsites';
import BasicLoadingScreen from "../../components/Screens/BasicLoadingScreen"; import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
type Props = { type PropsType = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
route: { params: { host: string, path: string | null, title: string } }, route: {params: {host: string, path: string | null, title: string}},
} };
class WebsiteScreen extends React.Component<Props> { const ENABLE_MOBILE_STRING = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
const AVAILABLE_ROOMS_STYLE = `<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>`;
const BIB_STYLE = `<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>`;
const BIB_BACK_BUTTON =
`<div style='width: 100%; display: flex'>` +
`<a style='margin: auto' href='${AvailableWebsites.websites.BIB}'>` +
`<button id='customBackButton' class='btn btn-primary'>Retour</button>` +
`</a>` +
`</div>`;
class WebsiteScreen extends React.Component<PropsType> {
fullUrl: string; fullUrl: string;
injectedJS: { [key: string]: string };
customPaddingFunctions: {[key: string]: (padding: string) => string} injectedJS: {[key: string]: string};
customPaddingFunctions: {[key: string]: (padding: string) => string};
host: string; host: string;
constructor(props: Props) { constructor(props: PropsType) {
super(props); super(props);
this.props.navigation.addListener('focus', this.onScreenFocus); props.navigation.addListener('focus', this.onScreenFocus);
this.injectedJS = {}; this.injectedJS = {};
this.customPaddingFunctions = {}; this.customPaddingFunctions = {};
this.injectedJS[AvailableWebsites.websites.AVAILABLE_ROOMS] = this.injectedJS[AvailableWebsites.websites.AVAILABLE_ROOMS] =
'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' + `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
'document.querySelector(\'head\').innerHTML += \'<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>\'; true;'; `document.querySelector('head').innerHTML += '${AVAILABLE_ROOMS_STYLE}'; true;`;
this.injectedJS[AvailableWebsites.websites.BIB] = this.injectedJS[AvailableWebsites.websites.BIB] =
'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' + `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
'document.querySelector(\'head\').innerHTML += \'<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>\';' + `document.querySelector('head').innerHTML += '${BIB_STYLE}';` +
'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' + `if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)` +
'$(".hero-unit-form").append("' + `$(".hero-unit-form").append("${BIB_BACK_BUTTON}");true;`;
'<div style=\'width: 100%; display: flex\'>' +
'<a style=\'margin: auto\' href=\'' + AvailableWebsites.websites.BIB + '\'>' +
'<button id=\'customBackButton\' class=\'btn btn-primary\'>Retour</button>' +
'</a>' +
'</div>");true;';
this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (padding: string) => { this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (
padding: string,
): string => {
return ( return (
"$('head').append('<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">');" + `$('head').append('${ENABLE_MOBILE_STRING}');` +
"$('.minwidth').css('top', " + padding + ");" + `$('.minwidth').css('top', ${padding}` +
"$('#mailview-bottom').css('min-height', 500);" `$('#mailview-bottom').css('min-height', 500);`
); );
}; };
this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (padding: string) => { this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (
padding: string,
): string => {
return ( return (
"$('#p-logo-text').css('top', 10 + " + padding + ");" + `$('#p-logo-text').css('top', 10 + ${padding});` +
"$('#site-navigation h2').css('top', 10 + " + padding + ");" + `$('#site-navigation h2').css('top', 10 + ${padding});` +
"$('#site-tools h2').css('top', 10 + " + padding + ");" + `$('#site-tools h2').css('top', 10 + ${padding});` +
"$('#user-tools h2').css('top', 10 + " + padding + ");" `$('#user-tools h2').css('top', 10 + ${padding});`
); );
} };
} }
onScreenFocus = () => { onScreenFocus = () => {
@ -65,23 +76,23 @@ class WebsiteScreen extends React.Component<Props> {
* *
*/ */
handleNavigationParams() { handleNavigationParams() {
if (this.props.route.params != null) { const {route, navigation} = this.props;
this.host = this.props.route.params.host; if (route.params != null) {
let path = this.props.route.params.path; this.host = route.params.host;
const title = this.props.route.params.title; let {path} = route.params;
const {title} = route.params;
if (this.host != null && path != null) { if (this.host != null && path != null) {
path = path.replace(this.host, ""); path = path.replace(this.host, '');
this.fullUrl = this.host + path; this.fullUrl = this.host + path;
}else } else this.fullUrl = this.host;
this.fullUrl = this.host;
if (title != null) if (title != null) navigation.setOptions({title});
this.props.navigation.setOptions({title: title});
} }
} }
render() { render(): React.Node {
let injectedJavascript = ""; const {navigation} = this.props;
let injectedJavascript = '';
let customPadding = null; let customPadding = null;
if (this.host != null && this.injectedJS[this.host] != null) if (this.host != null && this.injectedJS[this.host] != null)
injectedJavascript = this.injectedJS[this.host]; injectedJavascript = this.injectedJS[this.host];
@ -91,18 +102,14 @@ class WebsiteScreen extends React.Component<Props> {
if (this.fullUrl != null) { if (this.fullUrl != null) {
return ( return (
<WebViewScreen <WebViewScreen
{...this.props} navigation={navigation}
url={this.fullUrl} url={this.fullUrl}
customJS={injectedJavascript} customJS={injectedJavascript}
customPaddingFunction={customPadding} customPaddingFunction={customPadding}
/> />
); );
} else {
return (
<BasicLoadingScreen/>
);
} }
return <BasicLoadingScreen />;
} }
} }