|
@@ -2,7 +2,7 @@
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
4
|
import {StyleSheet, View} from "react-native";
|
5
|
|
-import {Text, withTheme} from 'react-native-paper';
|
|
5
|
+import {Button, Text, withTheme} from 'react-native-paper';
|
6
|
6
|
import {BarCodeScanner} from "expo-barcode-scanner";
|
7
|
7
|
import {Camera} from 'expo-camera';
|
8
|
8
|
import URLHandler from "../utils/URLHandler";
|
|
@@ -15,6 +15,8 @@ type State = {
|
15
|
15
|
hasPermission: boolean,
|
16
|
16
|
scanned: boolean,
|
17
|
17
|
dialogVisible: boolean,
|
|
18
|
+ dialogTitle: string,
|
|
19
|
+ dialogMessage: string,
|
18
|
20
|
};
|
19
|
21
|
|
20
|
22
|
class ScannerScreen extends React.Component<Props, State> {
|
|
@@ -23,6 +25,8 @@ class ScannerScreen extends React.Component<Props, State> {
|
23
|
25
|
hasPermission: false,
|
24
|
26
|
scanned: false,
|
25
|
27
|
dialogVisible: false,
|
|
28
|
+ dialogTitle: "",
|
|
29
|
+ dialogMessage: "",
|
26
|
30
|
};
|
27
|
31
|
|
28
|
32
|
constructor() {
|
|
@@ -30,22 +34,39 @@ class ScannerScreen extends React.Component<Props, State> {
|
30
|
34
|
}
|
31
|
35
|
|
32
|
36
|
componentDidMount() {
|
33
|
|
- Camera.requestPermissionsAsync().then(this.updatePermissionStatus);
|
|
37
|
+ this.requestPermissions();
|
34
|
38
|
}
|
35
|
39
|
|
36
|
|
- updatePermissionStatus = ({status}) => this.setState({hasPermission: status === "granted"});
|
|
40
|
+ requestPermissions = () => Camera.requestPermissionsAsync().then(this.updatePermissionStatus);
|
37
|
41
|
|
|
42
|
+ updatePermissionStatus = ({status}) => this.setState({hasPermission: status === "granted"});
|
38
|
43
|
|
39
|
44
|
handleCodeScanned = ({type, data}) => {
|
40
|
|
- this.setState({scanned: true});
|
|
45
|
+
|
41
|
46
|
if (!URLHandler.isUrlValid(data))
|
42
|
47
|
this.showErrorDialog();
|
43
|
|
- else
|
|
48
|
+ else {
|
|
49
|
+ this.setState({scanned: true});
|
44
|
50
|
Linking.openURL(data);
|
|
51
|
+ }
|
45
|
52
|
};
|
46
|
53
|
|
47
|
54
|
getPermissionScreen() {
|
48
|
|
- return <Text>PLS</Text>
|
|
55
|
+ return <View style={{marginLeft: 10, marginRight: 10}}>
|
|
56
|
+ <Text>{i18n.t("scannerScreen.errorPermission")}</Text>
|
|
57
|
+ <Button
|
|
58
|
+ icon="camera"
|
|
59
|
+ mode="contained"
|
|
60
|
+ onPress={this.requestPermissions}
|
|
61
|
+ style={{
|
|
62
|
+ marginTop: 10,
|
|
63
|
+ marginLeft: 'auto',
|
|
64
|
+ marginRight: 'auto',
|
|
65
|
+ }}
|
|
66
|
+ >
|
|
67
|
+ {i18n.t("scannerScreen.buttonPermission")}
|
|
68
|
+ </Button>
|
|
69
|
+ </View>
|
49
|
70
|
}
|
50
|
71
|
|
51
|
72
|
getOverlay() {
|
|
@@ -78,8 +99,22 @@ class ScannerScreen extends React.Component<Props, State> {
|
78
|
99
|
);
|
79
|
100
|
}
|
80
|
101
|
|
|
102
|
+ showHelpDialog = () => {
|
|
103
|
+ this.setState({
|
|
104
|
+ dialogVisible: true,
|
|
105
|
+ scanned: true,
|
|
106
|
+ dialogTitle: i18n.t("scannerScreen.helpTitle"),
|
|
107
|
+ dialogMessage: i18n.t("scannerScreen.helpMessage"),
|
|
108
|
+ });
|
|
109
|
+ };
|
|
110
|
+
|
81
|
111
|
showErrorDialog() {
|
82
|
|
- this.setState({dialogVisible: true});
|
|
112
|
+ this.setState({
|
|
113
|
+ dialogVisible: true,
|
|
114
|
+ scanned: true,
|
|
115
|
+ dialogTitle: i18n.t("scannerScreen.errorTitle"),
|
|
116
|
+ dialogMessage: i18n.t("scannerScreen.errorMessage"),
|
|
117
|
+ });
|
83
|
118
|
}
|
84
|
119
|
|
85
|
120
|
onDialogDismiss = () => this.setState({
|
|
@@ -90,12 +125,6 @@ class ScannerScreen extends React.Component<Props, State> {
|
90
|
125
|
getScanner() {
|
91
|
126
|
return (
|
92
|
127
|
<View style={styles.cameraContainer}>
|
93
|
|
- <AlertDialog
|
94
|
|
- visible={this.state.dialogVisible}
|
95
|
|
- onDismiss={this.onDialogDismiss}
|
96
|
|
- title={i18n.t("scannerScreen.errorTitle")}
|
97
|
|
- message={i18n.t("scannerScreen.errorMessage")}
|
98
|
|
- />
|
99
|
128
|
<Camera
|
100
|
129
|
onBarCodeScanned={this.state.scanned ? undefined : this.handleCodeScanned}
|
101
|
130
|
type={Camera.Constants.Type.back}
|
|
@@ -118,6 +147,20 @@ class ScannerScreen extends React.Component<Props, State> {
|
118
|
147
|
? this.getScanner()
|
119
|
148
|
: this.getPermissionScreen()
|
120
|
149
|
}
|
|
150
|
+ <AlertDialog
|
|
151
|
+ visible={this.state.dialogVisible}
|
|
152
|
+ onDismiss={this.onDialogDismiss}
|
|
153
|
+ title={this.state.dialogTitle}
|
|
154
|
+ message={this.state.dialogMessage}
|
|
155
|
+ />
|
|
156
|
+ <Button
|
|
157
|
+ icon="information"
|
|
158
|
+ mode="contained"
|
|
159
|
+ onPress={this.showHelpDialog}
|
|
160
|
+ style={styles.button}
|
|
161
|
+ >
|
|
162
|
+ {i18n.t("scannerScreen.helpButton")}
|
|
163
|
+ </Button>
|
121
|
164
|
</View>
|
122
|
165
|
);
|
123
|
166
|
}
|
|
@@ -167,6 +210,12 @@ const styles = StyleSheet.create({
|
167
|
210
|
aspectRatio: 1,
|
168
|
211
|
width: '100%',
|
169
|
212
|
},
|
|
213
|
+ button: {
|
|
214
|
+ position: 'absolute',
|
|
215
|
+ bottom: 5,
|
|
216
|
+ width: '80%',
|
|
217
|
+ left: '10%'
|
|
218
|
+ },
|
170
|
219
|
overlayTopLeft: {
|
171
|
220
|
...overlayBoxStyle,
|
172
|
221
|
top: borderOffset,
|