react-native-modern-elements
Version:
A modern, customizable UI component library for React Native
110 lines (109 loc) • 5.38 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { Ionicons } from "@expo/vector-icons";
import React, { useState } from "react";
import { StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
import { colors, radius, spacingX } from "../constants/theme";
import CancelIcon from "../assets/svg/CancelIcon";
import { verticalScale } from "../utils/styling";
// Issure
// 1. input clear but first remove keyboard then clear input
const Input = (props) => {
const { error, secureTextEntry, isValid, cancelIcon, RightIcon, value = "", lable = "", wrapperStyle = {}, lableStyle = {}, onChangeText } = props, restProps = __rest(props, ["error", "secureTextEntry", "isValid", "cancelIcon", "RightIcon", "value", "lable", "wrapperStyle", "lableStyle", "onChangeText"]);
const [isSecure, setIsSecure] = useState(secureTextEntry || false);
const [isFocused, setIsFocused] = useState(false);
const handleClear = () => {
onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText("");
};
return (React.createElement(View, { style: [styles.wrapper, wrapperStyle] },
lable && React.createElement(Text, { style: [styles.lableStyles, lableStyle] }, lable),
React.createElement(View, { style: [
styles === null || styles === void 0 ? void 0 : styles.container,
props === null || props === void 0 ? void 0 : props.containerStyle,
error
? { borderColor: "red" }
: isValid
? { borderColor: "green" } // validation PASS → always green
: isFocused
? { borderColor: "green" } // only focus when NOT valid
: null,
props.icon ? null : { paddingLeft: spacingX._10 },
] },
props.icon && (React.createElement(View, { style: [
styles.iconDefaultStyle,
props.iconStyle ? props.iconStyle : null,
] }, props === null || props === void 0 ? void 0 : props.icon)),
React.createElement(TextInput, Object.assign({ style: [
styles.input,
props.inputStyle,
error
? { color: "red" }
: isValid
? { color: "green" }
: { color: colors.black_80 },
], placeholderTextColor: colors.black_50, value: value, onChangeText: onChangeText, secureTextEntry: isSecure, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) }, restProps)),
secureTextEntry && (React.createElement(TouchableOpacity, { style: styles.iconContainer, onPress: () => setIsSecure((prev) => !prev) },
React.createElement(Ionicons, { name: isSecure ? "eye-off" : "eye", size: 20, color: "gray" }))),
RightIcon && React.createElement(React.Fragment, null, RightIcon),
value.length > 0 && cancelIcon && (React.createElement(TouchableOpacity, { style: styles.iconContainer, onPress: handleClear }, cancelIcon ? (cancelIcon) : (React.createElement(CancelIcon, { color: colors.black_80, strokeWidth: 1 }))))),
error && React.createElement(Text, { style: styles.errorText }, error)));
};
const styles = StyleSheet.create({
wrapper: {
width: "100%",
gap: 5,
overflow: "hidden",
},
container: {
flexDirection: "row",
height: verticalScale(47),
alignItems: "center",
borderWidth: 0.7,
borderColor: colors.black_5,
// borderRadius: radius._30,
paddingRight: spacingX._10,
// paddingLeft: props.icon ? spacingX._10 : 0,
gap: spacingX._10,
overflow: "hidden",
},
input: {
flex: 1,
fontSize: verticalScale(15.7),
},
iconContainer: {
justifyContent: "center",
alignItems: "center",
marginLeft: spacingX._10, // Add some space between the input and icon
padding: 8,
},
iconDefaultStyle: {
height: "100%",
width: verticalScale(40),
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.white_40,
borderTopLeftRadius: radius === null || radius === void 0 ? void 0 : radius._10,
borderBottomLeftRadius: radius === null || radius === void 0 ? void 0 : radius._10,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
errorText: {
color: "red",
fontSize: verticalScale(12),
marginTop: verticalScale(4),
marginLeft: spacingX._10, // Align error text with input padding
},
lableStyles: {
fontSize: verticalScale(14),
color: colors === null || colors === void 0 ? void 0 : colors.black_80,
},
});
export default React.memo(Input);