44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
import { StyleSheet, Text, TextInput, View } from "react-native";
|
||
|
|
import Slider from '@react-native-community/slider';
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
type PercentDamageProps = {
|
||
|
|
onSetPercentage: (percent: number) => any;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function PercentDamage ({onSetPercentage} : PercentDamageProps) {
|
||
|
|
const [damage, setDamage] = useState(0);
|
||
|
|
function doOnChangeText (val : number) {
|
||
|
|
setDamage(val);
|
||
|
|
onSetPercentage(val / 100);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<View style={styles.wrapper}>
|
||
|
|
<Slider
|
||
|
|
value={damage}
|
||
|
|
minimumValue={0}
|
||
|
|
maximumValue={100}
|
||
|
|
step={5}
|
||
|
|
onValueChange={doOnChangeText}
|
||
|
|
/>
|
||
|
|
<Text style={styles.label}> {damage}% Damage</Text>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
wrapper: {
|
||
|
|
padding: 5,
|
||
|
|
},
|
||
|
|
input: {
|
||
|
|
flex: 1,
|
||
|
|
margin: 5,
|
||
|
|
padding: 5,
|
||
|
|
borderWidth: 2,
|
||
|
|
borderColor: "lightgrey",
|
||
|
|
borderStyle: "solid",
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
margin: 5,
|
||
|
|
}
|
||
|
|
})
|