|
@@ -1,10 +1,13 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {View} from 'react-native';
|
5
|
|
-import {Container, Content, Spinner} from 'native-base';
|
|
4
|
+import {Platform, View} from 'react-native';
|
|
5
|
+import {Container, Right, Spinner} from 'native-base';
|
6
|
6
|
import CustomHeader from "../components/CustomHeader";
|
7
|
7
|
import WebView from "react-native-webview";
|
|
8
|
+import Touchable from "react-native-platform-touchable";
|
|
9
|
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
|
10
|
+import ThemeManager from "../utils/ThemeManager";
|
8
|
11
|
|
9
|
12
|
type Props = {
|
10
|
13
|
navigation: Object,
|
|
@@ -26,23 +29,53 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
26
|
29
|
isFinishedLoading: false,
|
27
|
30
|
};
|
28
|
31
|
|
|
32
|
+ webview: WebView;
|
|
33
|
+
|
|
34
|
+ getRefreshButton() {
|
|
35
|
+ return (
|
|
36
|
+ <Right>
|
|
37
|
+ <Touchable
|
|
38
|
+ style={{padding: 6}}
|
|
39
|
+ onPress={() => this.refreshWebview()}>
|
|
40
|
+ <CustomMaterialIcon
|
|
41
|
+ color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
|
42
|
+ icon="refresh"/>
|
|
43
|
+ </Touchable>
|
|
44
|
+ </Right>
|
|
45
|
+ );
|
|
46
|
+ };
|
|
47
|
+
|
|
48
|
+ refreshWebview() {
|
|
49
|
+ this.setState({isFinishedLoading: false});
|
|
50
|
+ this.webview.reload();
|
|
51
|
+ }
|
|
52
|
+
|
29
|
53
|
render() {
|
30
|
54
|
const nav = this.props.navigation;
|
31
|
55
|
return (
|
32
|
56
|
<Container>
|
33
|
|
- <CustomHeader navigation={nav} title={'Planex'}/>
|
|
57
|
+ <CustomHeader navigation={nav} title={'Planex'} rightMenu={this.getRefreshButton()}/>
|
34
|
58
|
<WebView
|
|
59
|
+ ref={ref => (this.webview = ref)}
|
35
|
60
|
source={{uri: PLANEX_URL}}
|
36
|
|
- style={{width: this.state.isFinishedLoading ? '100%' : 0}}
|
37
|
|
- onLoadEnd={() => {
|
38
|
|
- this.setState({isFinishedLoading: true})
|
|
61
|
+ style={{
|
|
62
|
+ width: '100%',
|
|
63
|
+ height: '100%',
|
39
|
64
|
}}
|
|
65
|
+ startInLoadingState={true}
|
|
66
|
+ renderLoading={() =>
|
|
67
|
+ <View style={{
|
|
68
|
+ backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
|
|
69
|
+ width: '100%',
|
|
70
|
+ height: '100%',
|
|
71
|
+ flex: 1,
|
|
72
|
+ alignItems: 'center',
|
|
73
|
+ justifyContent: 'center'
|
|
74
|
+ }}>
|
|
75
|
+ <Spinner/>
|
|
76
|
+ </View>
|
|
77
|
+ }
|
40
|
78
|
/>
|
41
|
|
- {this.state.isFinishedLoading ?
|
42
|
|
- <View/> :
|
43
|
|
- <Content>
|
44
|
|
- <Spinner/>
|
45
|
|
- </Content>}
|
46
|
79
|
</Container>
|
47
|
80
|
);
|
48
|
81
|
}
|