PliWould/components/PercentDamange.tsx

57 lines
1.5 KiB
TypeScript
Raw Normal View History

import { StyleSheet, Text, TextInput, View } from "react-native";
import Slider from '@react-native-community/slider';
import { useEffect, useState } from "react";
type PercentDamageProps = {
onSetPercentage: (percent: number) => any;
}
function getDamangeColor(damage : number) {
if (damage === 0) return "black";
if (damage <= 20) return "blue";
if (damage <= 50) return "orange";
return "red";
}
export default function PercentDamage({ onSetPercentage }: PercentDamageProps) {
const [damage, setDamage] = useState(0);
const [damageColor, setDamageColor] = useState("black");
function doOnChangeText(val: number) {
setDamage(val || 0);
onSetPercentage((val / 100) || 0);
setDamageColor(getDamangeColor(val || 0));
}
return (
<View style={styles.wrapper}>
<Slider
minimumValue={0}
maximumValue={100}
step={5}
onValueChange={doOnChangeText}
/>
<Text style={{ ...styles.label, color: damageColor }}> {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,
alignSelf: "center",
fontSize: 20,
fontWeight: "bold",
fontStyle: "italic",
}
})