83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
/*
|
|
* 라벨 + 텍스트 입력 필드 — radius 4, 높이 48(터치 타깃).
|
|
*/
|
|
import React from 'react';
|
|
import {
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
type KeyboardTypeOptions,
|
|
type TextInputProps,
|
|
} from 'react-native';
|
|
import { colors, radius, touch, type } from '../theme';
|
|
|
|
interface Props {
|
|
label?: string;
|
|
value: string;
|
|
onChangeText: (v: string) => void;
|
|
placeholder?: string;
|
|
secureTextEntry?: boolean;
|
|
keyboardType?: KeyboardTypeOptions;
|
|
autoCapitalize?: TextInputProps['autoCapitalize'];
|
|
helperText?: string;
|
|
errorText?: string;
|
|
editable?: boolean;
|
|
}
|
|
|
|
export function Field({
|
|
label,
|
|
value,
|
|
onChangeText,
|
|
placeholder,
|
|
secureTextEntry,
|
|
keyboardType,
|
|
autoCapitalize = 'none',
|
|
helperText,
|
|
errorText,
|
|
editable = true,
|
|
}: Props) {
|
|
return (
|
|
<View style={styles.wrap}>
|
|
{label ? <Text style={styles.label}>{label}</Text> : null}
|
|
<TextInput
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.neutral500}
|
|
secureTextEntry={secureTextEntry}
|
|
keyboardType={keyboardType}
|
|
autoCapitalize={autoCapitalize}
|
|
editable={editable}
|
|
style={[
|
|
styles.input,
|
|
!!errorText && { borderColor: colors.error },
|
|
!editable && { backgroundColor: colors.neutral050 },
|
|
]}
|
|
/>
|
|
{errorText ? (
|
|
<Text style={styles.error}>{errorText}</Text>
|
|
) : helperText ? (
|
|
<Text style={styles.helper}>{helperText}</Text>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrap: { gap: 6 },
|
|
label: { fontSize: type.body.fontSize, fontWeight: '600', color: colors.neutral700 },
|
|
input: {
|
|
minHeight: touch.min,
|
|
borderWidth: 1,
|
|
borderColor: colors.neutral200,
|
|
borderRadius: radius.sm,
|
|
paddingHorizontal: 12,
|
|
fontSize: type.body.fontSize,
|
|
color: colors.neutral900,
|
|
backgroundColor: colors.white,
|
|
},
|
|
helper: { fontSize: type.caption.fontSize, color: colors.neutral500 },
|
|
error: { fontSize: type.caption.fontSize, color: colors.error },
|
|
});
|