rn-inkpad
Version:
<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />
66 lines (64 loc) • 3.49 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const __1 = require("..");
const hooks_1 = require("../../hooks");
const inputStyles_1 = require("../../theme/inputStyles");
const Input = (props) => {
const { autoComplete, borderColor, borderRadius, icon, iconColor, iconSize, keyboardType, label, labelColor, onChangeText, onEndEditing, password = false, placeholder, placeholderColor, rightIcon, rightIconColor, rightIconSize, search = false, style, textColor, textContentType, textStyle, type = 'filled', value, } = props;
const { getRightIcon, handleBlur, handleFocus, handlePress, inputStyle, passwordVisible, titleStyle, } = (0, hooks_1.useInput)(props);
return (<react_native_1.View style={[{ width: '100%' }, style]}>
{label && (<react_native_1.View style={{
flexDirection: 'row',
marginBottom: type === 'outlined' ? -8 : 0,
}}>
{type === 'outlined' && (<react_native_1.View style={{
borderTopColor: borderColor,
borderTopWidth: 1,
borderLeftColor: borderColor,
borderLeftWidth: 1,
width: 10,
height: 18,
marginBottom: -6,
borderTopLeftRadius: borderRadius,
}}/>)}
<react_native_1.Text style={[{ ...inputStyles_1.inputStyles.label, color: labelColor }, titleStyle]}>
{label}
</react_native_1.Text>
{type === 'outlined' && (<react_native_1.View style={{
borderTopColor: borderColor,
borderTopWidth: 1,
borderRightColor: borderColor,
borderRightWidth: 1,
flex: 1,
borderTopRightRadius: borderRadius,
}}/>)}
</react_native_1.View>)}
<react_native_1.View style={{
...inputStyles_1.inputStyles.input,
...inputStyle,
flexDirection: 'row',
}}>
{icon && <__1.Icon name={icon} color={iconColor} size={iconSize ?? 15}/>}
<react_native_1.TextInput style={[
{
flex: 1,
fontWeight: '600',
color: textColor,
},
textStyle,
]} autoComplete={password ? 'password' : autoComplete} keyboardType={keyboardType} onBlur={handleBlur} onChangeText={onChangeText} onEndEditing={onEndEditing} onFocus={handleFocus} onSubmitEditing={() => react_native_1.Keyboard.dismiss()} placeholder={placeholder ?? label ?? 'Input'} placeholderTextColor={placeholderColor} secureTextEntry={password ? !passwordVisible : false} textContentType={password ? 'password' : textContentType} value={value}/>
{(password || search || rightIcon) && (<react_native_1.Pressable style={{
...inputStyles_1.inputStyles.btnViewPass,
}} onPress={handlePress}>
<__1.Icon style={inputStyles_1.inputStyles.icon} color={rightIconColor} size={rightIconSize ?? 18} name={getRightIcon()}/>
</react_native_1.Pressable>)}
</react_native_1.View>
</react_native_1.View>);
};
exports.Input = Input;