Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 2x 23x 23x 23x 2x 2x 2x 13x 13x | import { cn } from '@sb/libs';
import React, { useMemo } from 'react';
import { Platform, StyleSheet, TextInput, TextInputProps } from 'react-native';
import { useInput } from '../Context';
import { InputType } from '../../../Input.types';
interface InputFieldProps extends TextInputProps {
direction?: 'rtl' | 'ltr';
type?: InputType;
noKeyboard?: boolean;
}
const InputField = React.forwardRef<TextInput, InputFieldProps>(
({ direction, style, type = 'text', value, noKeyboard = false, className, ...rest }, ref) => {
const { status } = useInput();
const modeType = useMemo(() => getTypeMode(type), [type]);
return (
<TextInput
ref={ref}
className={cn(
'text-primary w-full font-normal',
{
'text-status-error': status === 'error',
'text-status-success': status === 'success',
'text-status-warning': status === 'warning',
},
className
)}
{...modeType}
{...rest}
value={value}
showSoftInputOnFocus={!noKeyboard}
textAlign={direction === 'rtl' ? 'right' : 'left'}
style={[styles.input, Platform.OS === 'android' && styles.focusedInputAndroid, style]}
/>
);
}
);
const styles = StyleSheet.create({
input: {
flex: 1,
width: '100%',
fontSize: 16,
},
focusedInputAndroid: {
fontSize: 16,
display: 'flex',
marginTop: -10,
marginBottom: -10,
height: 'auto',
},
rtl: {
writingDirection: 'rtl',
textAlign: 'right',
},
ltr: {
writingDirection: 'ltr',
textAlign: 'left',
},
});
InputField.displayName = 'InputField';
export default InputField;
const getTypeMode = (type: InputType) => {
const typeConfig: Record<InputType, TextInputProps> = {
number: {
keyboardType: 'numeric',
},
text: {
keyboardType: 'default',
},
email: {
keyboardType: 'email-address',
},
password: {
keyboardType: 'default',
secureTextEntry: true,
},
};
return typeConfig[type];
};
|