70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import React, {ReactElement, useState} from 'react';
|
|
import {View} from 'react-native';
|
|
import {DefaultTheme, Subheading, Title, RadioButton, Paragraph, TextInput, HelperText, Button} from 'react-native-paper';
|
|
import {CameraType, SettingsScreenProps} from '../models/ElementProps';
|
|
import {colors, styles} from './Styles';
|
|
|
|
export const SettingsScreen = (props: SettingsScreenProps): ReactElement => {
|
|
const [newCameraType, setNewCameraType] = useState<CameraType>(props.cameraType);
|
|
const [newLocationStr, setNewLocationStr] = useState<string>(props.locationStr);
|
|
|
|
const pattern = /^[\d]{4}$/;
|
|
const hasErrors = () => {
|
|
return !pattern.test(newLocationStr);
|
|
};
|
|
|
|
return <View style={styles.settings}>
|
|
<Title style={{color: DefaultTheme.colors.text}}>Settings</Title>
|
|
<View style={{marginBottom: 40}}>
|
|
<Subheading style={{color: DefaultTheme.colors.text}}>Camera to Use</Subheading>
|
|
<RadioButton.Group
|
|
onValueChange={value => setNewCameraType(value as CameraType)}
|
|
value={newCameraType as string}
|
|
>
|
|
<RadioButton.Item
|
|
value="front"
|
|
label="Front"
|
|
theme={DefaultTheme}
|
|
/>
|
|
<RadioButton.Item
|
|
value="back"
|
|
label="Back"
|
|
theme={DefaultTheme}
|
|
/>
|
|
</RadioButton.Group>
|
|
</View>
|
|
|
|
<View style={{marginBottom: 10}}>
|
|
<Subheading style={{color: DefaultTheme.colors.text}}>Location Code</Subheading>
|
|
<Paragraph style={{color: DefaultTheme.colors.text}}>
|
|
Please do NOT change this unless you know what you are doing. Entering an incorrect location number may
|
|
prevent patients from getting accurate info about their test results.
|
|
</Paragraph>
|
|
<TextInput
|
|
label="Location #"
|
|
value={newLocationStr}
|
|
onChangeText={inputStr => setNewLocationStr(inputStr)}
|
|
mode="outlined"
|
|
theme={DefaultTheme}
|
|
/>
|
|
<HelperText type="error" visible={hasErrors()}>
|
|
Location number must be exactly 4 digits. No other characters are allowed.
|
|
</HelperText>
|
|
<Button
|
|
icon="content-save"
|
|
mode="contained"
|
|
color={colors.primary}
|
|
style={{marginBottom: 10}}
|
|
disabled={hasErrors()}
|
|
onPress={() => props.onSave(newCameraType, newLocationStr)}
|
|
>Save</Button>
|
|
<Button
|
|
icon="cancel"
|
|
mode="outlined"
|
|
color={colors.primary}
|
|
onPress={props.onCancel}
|
|
>Cancel</Button>
|
|
</View>
|
|
</View>
|
|
}
|