73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TextInput, TextInputProps } from 'react-native';
|
|
import { useSettings, type ThemeColors } from '@/theme';
|
|
|
|
interface TaskNameInputProps extends TextInputProps {
|
|
error?: string;
|
|
}
|
|
|
|
export function TaskNameInput({ error, ...props }: TaskNameInputProps) {
|
|
const { theme } = useSettings();
|
|
const styles = React.useMemo(() => createStyles(theme), [theme]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.labelRow}>
|
|
<Text style={[styles.label, { color: theme.text }]}>Task Name</Text>
|
|
<Text style={styles.required}>*</Text>
|
|
</View>
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
{ backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text },
|
|
error && styles.inputError,
|
|
]}
|
|
placeholder="Task name"
|
|
placeholderTextColor={theme.textMuted}
|
|
maxLength={100}
|
|
autoCapitalize="sentences"
|
|
accessibilityLabel="Task name"
|
|
accessibilityHint="Required field. Enter a name for the task"
|
|
{...props}
|
|
/>
|
|
{error && <Text style={styles.errorText}>{error}</Text>}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const createStyles = (theme: ThemeColors) =>
|
|
StyleSheet.create({
|
|
container: {
|
|
gap: 5,
|
|
},
|
|
labelRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
label: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
},
|
|
required: {
|
|
color: theme.dangerStrong,
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
},
|
|
input: {
|
|
height: 48,
|
|
paddingHorizontal: 14,
|
|
borderRadius: 10,
|
|
borderWidth: 1,
|
|
fontSize: 15,
|
|
},
|
|
inputError: {
|
|
borderColor: theme.dangerStrong,
|
|
borderWidth: 1.5,
|
|
},
|
|
errorText: {
|
|
fontSize: 11,
|
|
color: theme.dangerStrong,
|
|
marginLeft: 4,
|
|
},
|
|
});
|