You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.8 KiB
77 lines
1.8 KiB
import React, { useState } from "react"; |
|
import { |
|
TextInput, |
|
View, |
|
Text, |
|
Dimensions, |
|
StyleSheet, |
|
useColorScheme, |
|
} from "react-native"; |
|
import tw from "tailwind-rn"; |
|
|
|
import Colors from "../constants/Colors"; |
|
import fontSize from "../constants/fontSize"; |
|
|
|
const width = Dimensions.get("window").width; |
|
|
|
const FloatingLabelInput = ({ |
|
label, |
|
textAlign, |
|
direction, |
|
labelBackgroundColor, |
|
onChange, |
|
name, |
|
value, |
|
color, |
|
maxLength, |
|
autoFocus, |
|
regex, |
|
...props |
|
}) => { |
|
const colorScheme = useColorScheme(); |
|
const [isFocused, setIsFocused] = useState(false); |
|
const styles = StyleSheet.create({ |
|
labelStyle: { |
|
fontFamily: "regular", |
|
top: !isFocused ? "50%" : 1, |
|
fontSize: !isFocused ? fontSize.base : fontSize.sm, |
|
transform: [{ translateY: -width / 35 }], |
|
color: !isFocused ? "#555" : Colors.theme1[colorScheme].greenC8, |
|
}, |
|
inputStyle: { |
|
fontSize: fontSize.lg, |
|
color: Colors.theme1[colorScheme].black, |
|
borderWidth: 1, |
|
borderColor: isFocused ? Colors.theme1[colorScheme].greenC8 : "#777", |
|
textAlign: textAlign, |
|
fontFamily: "light", |
|
fontWeight : "900" |
|
}, |
|
}); |
|
return ( |
|
<View style={tw("mt-4")}> |
|
<Text |
|
style={[ |
|
styles.labelStyle, |
|
tw("px-1 z-10 bg-white absolute right-4 text-center"), |
|
]} |
|
> |
|
{label} |
|
</Text> |
|
<TextInput |
|
style={[styles.inputStyle, tw("rounded-md p-2")]} |
|
onChangeText={(text) => onChange(name, (text = regex(text)))} |
|
placeholder={"09123456789"} |
|
onFocus={() => setIsFocused(true)} |
|
autoFocus={autoFocus} |
|
underlineColorAndroid={"transparent"} |
|
maxLength={maxLength} |
|
onBlur={() => |
|
value ? setIsFocused(() => false) : setIsFocused(() => false) |
|
} |
|
/> |
|
</View> |
|
); |
|
}; |
|
|
|
export default FloatingLabelInput;
|
|
|