Browse Source

Improved webview screen header buttons and removed unused props

Arnaud Vergnet 4 years ago
parent
commit
fe24fce882

+ 2
- 2
src/components/Custom/HeaderButton.js View File

8
 
8
 
9
 const MaterialHeaderButton = (props: Object) => (
9
 const MaterialHeaderButton = (props: Object) => (
10
     <HeaderButton
10
     <HeaderButton
11
-        {...props}
12
         IconComponent={MaterialCommunityIcons}
11
         IconComponent={MaterialCommunityIcons}
13
         iconSize={26}
12
         iconSize={26}
14
         color={props.theme.colors.text}
13
         color={props.theme.colors.text}
15
         background={Touchable.Ripple(props.theme.colors.ripple, true)}
14
         background={Touchable.Ripple(props.theme.colors.ripple, true)}
15
+        {...props}
16
     />
16
     />
17
 );
17
 );
18
 
18
 
19
 const MaterialHeaderButtons = (props: Object) => {
19
 const MaterialHeaderButtons = (props: Object) => {
20
     return (
20
     return (
21
         <HeaderButtons
21
         <HeaderButtons
22
-            {...props}
23
             HeaderButtonComponent={withTheme(MaterialHeaderButton)}
22
             HeaderButtonComponent={withTheme(MaterialHeaderButton)}
24
             OverflowIcon={
23
             OverflowIcon={
25
                 <MaterialCommunityIcons
24
                 <MaterialCommunityIcons
28
                     color={props.theme.colors.text}
27
                     color={props.theme.colors.text}
29
                 />
28
                 />
30
             }
29
             }
30
+            {...props}
31
         />
31
         />
32
     );
32
     );
33
 };
33
 };

+ 28
- 20
src/components/Screens/WebViewScreen.js View File

6
 import ErrorView from "../Custom/ErrorView";
6
 import ErrorView from "../Custom/ErrorView";
7
 import {ERROR_TYPE} from "../../utils/WebData";
7
 import {ERROR_TYPE} from "../../utils/WebData";
8
 import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
8
 import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
9
+import {HiddenItem} from "react-navigation-header-buttons";
10
+import {Linking} from "expo";
11
+import i18n from 'i18n-js';
9
 
12
 
10
 type Props = {
13
 type Props = {
11
     navigation: Object,
14
     navigation: Object,
12
-    data: Array<{
13
-        url: string,
14
-        icon: string,
15
-        name: string,
16
-        customJS: string
17
-    }>,
18
-    headerTitle: string,
19
-    hasHeaderBackButton: boolean,
20
-    hasSideMenu: boolean,
21
-    hasFooter: boolean,
15
+    url: string,
16
+    customJS: string,
22
 }
17
 }
23
 
18
 
24
 /**
19
 /**
27
 class WebViewScreen extends React.PureComponent<Props> {
22
 class WebViewScreen extends React.PureComponent<Props> {
28
 
23
 
29
     static defaultProps = {
24
     static defaultProps = {
30
-        hasBackButton: false,
31
-        hasSideMenu: true,
32
-        hasFooter: true,
25
+        customJS: '',
33
     };
26
     };
34
 
27
 
35
     webviewRef: Object;
28
     webviewRef: Object;
57
     getRefreshButton() {
50
     getRefreshButton() {
58
         return (
51
         return (
59
             <MaterialHeaderButtons>
52
             <MaterialHeaderButtons>
60
-                <Item title="refresh" iconName="refresh" onPress={this.onRefreshClicked}/>
53
+                <Item
54
+                    title="refresh"
55
+                    iconName="refresh"
56
+                    onPress={this.onRefreshClicked}/>
57
+                <HiddenItem
58
+                    title={i18n.t("general.goBack")}
59
+                    iconName="arrow-left"
60
+                    onPress={this.onGoBackClicked}/>
61
+                <HiddenItem
62
+                    title={i18n.t("general.goForward")}
63
+                    iconName="arrow-right"
64
+                    onPress={this.onGoForwardClicked}/>
65
+                <HiddenItem
66
+                    title={i18n.t("general.openInBrowser")}
67
+                    iconName="web"
68
+                    onPress={this.onOpenClicked}/>
61
             </MaterialHeaderButtons>
69
             </MaterialHeaderButtons>
62
         );
70
         );
63
     };
71
     };
66
      * Callback to use when refresh button is clicked. Reloads the webview.
74
      * Callback to use when refresh button is clicked. Reloads the webview.
67
      */
75
      */
68
     onRefreshClicked = () => this.webviewRef.current.reload();
76
     onRefreshClicked = () => this.webviewRef.current.reload();
77
+    onGoBackClicked = () => this.webviewRef.current.goBack();
78
+    onGoForwardClicked = () => this.webviewRef.current.goForward();
79
+
80
+    onOpenClicked = () => Linking.openURL(this.props.url);
69
 
81
 
70
     /**
82
     /**
71
      * Gets the loading indicator
83
      * Gets the loading indicator
78
         return (
90
         return (
79
             <WebView
91
             <WebView
80
                 ref={this.webviewRef}
92
                 ref={this.webviewRef}
81
-                source={{uri: this.props.data[0]['url']}}
82
-                style={{
83
-                    width: '100%',
84
-                    height: '100%',
85
-                }}
93
+                source={{uri: this.props.url}}
86
                 startInLoadingState={true}
94
                 startInLoadingState={true}
87
-                injectedJavaScript={this.props.data[0]['customJS']}
95
+                injectedJavaScript={this.props.customJS}
88
                 javaScriptEnabled={true}
96
                 javaScriptEnabled={true}
89
                 renderLoading={this.getRenderLoading}
97
                 renderLoading={this.getRenderLoading}
90
                 renderError={() => <ErrorView
98
                 renderError={() => <ErrorView

+ 3
- 20
src/screens/Websites/AvailableRoomScreen.js View File

2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import WebViewScreen from "../../components/Screens/WebViewScreen";
4
 import WebViewScreen from "../../components/Screens/WebViewScreen";
5
-import i18n from "i18n-js";
6
 
5
 
7
 type Props = {
6
 type Props = {
8
     navigation: Object,
7
     navigation: Object,
39
         return (
38
         return (
40
             <WebViewScreen
39
             <WebViewScreen
41
                 navigation={nav}
40
                 navigation={nav}
42
-                data={[
43
-                    {
44
-                        url: ROOM_URL,
45
-                        icon: 'file-document-outline',
46
-                        name: i18n.t('availableRoomScreen.normalRoom'),
47
-                        customJS: this.customInjectedJS
48
-                    },
49
-                    {
50
-                        url: PC_URL,
51
-                        icon: 'monitor',
52
-                        name: i18n.t('availableRoomScreen.computerRoom'),
53
-                        customJS: this.customInjectedJS
54
-                    },
55
-                ]}
56
-                customInjectedJS={this.customInjectedJS}
57
-                headerTitle={i18n.t('screens.availableRooms')}
58
-                hasHeaderBackButton={true}
59
-                hasSideMenu={false}
60
-                hasFooter={false}/>
41
+                url={ROOM_URL}
42
+                customJS={this.customInjectedJS}
43
+                customInjectedJS={this.customInjectedJS}/>
61
         );
44
         );
62
     }
45
     }
63
 }
46
 }

+ 2
- 14
src/screens/Websites/BibScreen.js View File

2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import WebViewScreen from "../../components/Screens/WebViewScreen";
4
 import WebViewScreen from "../../components/Screens/WebViewScreen";
5
-import i18n from "i18n-js";
6
 
5
 
7
 type Props = {
6
 type Props = {
8
     navigation: Object,
7
     navigation: Object,
50
         return (
49
         return (
51
             <WebViewScreen
50
             <WebViewScreen
52
                 navigation={nav}
51
                 navigation={nav}
53
-                data={[
54
-                    {
55
-                        url: BIB_URL,
56
-                        icon: 'book',
57
-                        name: i18n.t('availableRoomScreen.bibRoom'),
58
-                        customJS: this.customBibInjectedJS
59
-                    },
60
-                ]}
61
-                customInjectedJS={this.customInjectedJS}
62
-                headerTitle={i18n.t('screens.availableRooms')}
63
-                hasHeaderBackButton={true}
64
-                hasSideMenu={false}
65
-                hasFooter={false}/>
52
+                url={BIB_URL}
53
+                customJS={this.customBibInjectedJS}/>
66
         );
54
         );
67
     }
55
     }
68
 }
56
 }

+ 2
- 12
src/screens/Websites/PlanexScreen.js View File

165
                 </Banner>
165
                 </Banner>
166
                 <WebViewScreen
166
                 <WebViewScreen
167
                     navigation={nav}
167
                     navigation={nav}
168
-                    data={[
169
-                        {
170
-                            url: PLANEX_URL,
171
-                            icon: '',
172
-                            name: '',
173
-                            customJS: this.customInjectedJS
174
-                        },
175
-                    ]}
176
-                    customInjectedJS={this.customInjectedJS}
177
-                    headerTitle={'Planex'}
178
-                    hasHeaderBackButton={false}
179
-                    hasFooter={false}/>
168
+                    url={PLANEX_URL}
169
+                    customJS={this.customInjectedJS}/>
180
             </View>
170
             </View>
181
         );
171
         );
182
     }
172
     }

+ 4
- 1
translations/en.json View File

345
   "general": {
345
   "general": {
346
     "loading": "Loading...",
346
     "loading": "Loading...",
347
     "retry": "Retry",
347
     "retry": "Retry",
348
-    "networkError": "Unable to contact servers. Make sure you are connected to Internet."
348
+    "networkError": "Unable to contact servers. Make sure you are connected to Internet.",
349
+    "goBack": "Go Back",
350
+    "goForward": "Go Forward",
351
+    "openInBrowser": "Open in Browser"
349
   },
352
   },
350
   "date": {
353
   "date": {
351
     "daysOfWeek": {
354
     "daysOfWeek": {

+ 4
- 1
translations/fr.json View File

345
   "general": {
345
   "general": {
346
     "loading": "Chargement...",
346
     "loading": "Chargement...",
347
     "retry": "Réessayer",
347
     "retry": "Réessayer",
348
-    "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet."
348
+    "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet.",
349
+    "goBack": "Suivant",
350
+    "goForward": "Précédent",
351
+    "openInBrowser": "Ouvrir dans le navigateur"
349
   },
352
   },
350
   "date": {
353
   "date": {
351
     "daysOfWeek": {
354
     "daysOfWeek": {

Loading…
Cancel
Save