131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
import React, {useState} from 'react';
|
|
import {
|
|
SafeAreaView,
|
|
Text,
|
|
useColorScheme,
|
|
Vibration,
|
|
View,
|
|
} from 'react-native';
|
|
|
|
import {Colors} from 'react-native/Libraries/NewAppScreen';
|
|
|
|
import QRCodeScanner from 'react-native-qrcode-scanner';
|
|
import {Button} from '@ant-design/react-native';
|
|
|
|
function App(): JSX.Element {
|
|
const colors = {
|
|
nothingScanned: '#95a5a6', // gray
|
|
input: '#9b59b6', // purple
|
|
foundArticle: '#2ecc71', // green
|
|
wrongArticle: '#c0392b', // red
|
|
};
|
|
|
|
const isDarkMode = useColorScheme() === 'dark';
|
|
|
|
const backgroundStyle = {
|
|
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
|
|
};
|
|
|
|
const [inputCode, setInputCode] = useState('');
|
|
const [scannedCode, setScannedCode] = useState('');
|
|
const [markerStyleBorderColor, setMarkerStyleBorderColor] =
|
|
useState('#95a5a6');
|
|
|
|
return (
|
|
<SafeAreaView style={backgroundStyle}>
|
|
<View style={{height: '100%', width: '100%'}}>
|
|
<QRCodeScanner
|
|
showMarker={true}
|
|
onRead={data => {
|
|
if (inputCode == '') {
|
|
setInputCode(c => (c = data.data));
|
|
setMarkerStyleBorderColor(colors.input);
|
|
|
|
Vibration.vibrate(500);
|
|
|
|
setTimeout(
|
|
() => setMarkerStyleBorderColor(colors.nothingScanned),
|
|
500,
|
|
);
|
|
} else {
|
|
setScannedCode(c => (c = data.data));
|
|
|
|
if (data.data == inputCode) {
|
|
setMarkerStyleBorderColor(m => (m = colors.foundArticle));
|
|
|
|
Vibration.vibrate(100);
|
|
|
|
setTimeout(
|
|
() => setMarkerStyleBorderColor(colors.nothingScanned),
|
|
500,
|
|
);
|
|
} else {
|
|
setMarkerStyleBorderColor(m => (m = colors.wrongArticle));
|
|
|
|
Vibration.vibrate(300);
|
|
|
|
setTimeout(
|
|
() => setMarkerStyleBorderColor(colors.nothingScanned),
|
|
500,
|
|
);
|
|
}
|
|
}
|
|
}}
|
|
reactivate={true}
|
|
reactivateTimeout={500}
|
|
vibrate={false}
|
|
cameraStyle={{overflow: 'hidden'}}
|
|
markerStyle={{borderColor: markerStyleBorderColor, borderWidth: 5}}
|
|
topViewStyle={{
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'flex-start',
|
|
paddingLeft: 20,
|
|
paddingTop: 20,
|
|
paddingBottom: 20,
|
|
flex: 1,
|
|
}}
|
|
topContent={
|
|
<View>
|
|
<Text style={{fontSize: 16, fontWeight: 'bold'}}>
|
|
Desired article
|
|
</Text>
|
|
<Text
|
|
style={{fontSize: 18, color: '#9b59b6', fontWeight: 'bold'}}>
|
|
{inputCode}
|
|
</Text>
|
|
<Text style={{fontSize: 16, fontWeight: 'bold'}}>
|
|
Scanned article
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 18,
|
|
color: '#d35400',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
{scannedCode}
|
|
</Text>
|
|
</View>
|
|
}
|
|
bottomContent={
|
|
<View>
|
|
<Button
|
|
disabled={inputCode == '' ? true : false}
|
|
type="primary"
|
|
onPress={() => {
|
|
setInputCode(c => (c = ''));
|
|
setScannedCode(c => (c = ''));
|
|
setMarkerStyleBorderColor(s => (s = colors.nothingScanned));
|
|
}}
|
|
style={{width: 220}}>
|
|
Next Article
|
|
</Button>
|
|
</View>
|
|
}
|
|
/>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
export default App;
|