Ichitux
100 lines
2.6 KiB
TypeScript
100 lines
2.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, TextInput, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useThemeContext } from './ThemeProvider';
|
|
import { spacing, borderRadius } from '../constants/theme';
|
|
|
|
const TABLET_MIN_WIDTH = 768;
|
|
|
|
interface SearchBarProps {
|
|
placeholder?: string;
|
|
onSearch: (query: string) => void;
|
|
value?: string;
|
|
onChangeText?: (text: string) => void;
|
|
}
|
|
|
|
export function SearchBar({
|
|
placeholder = 'Buscar medicamentos...',
|
|
onSearch,
|
|
value,
|
|
onChangeText
|
|
}: SearchBarProps) {
|
|
const { width } = useWindowDimensions();
|
|
const isTablet = width >= TABLET_MIN_WIDTH;
|
|
const { colors } = useThemeContext();
|
|
const [localValue, setLocalValue] = useState(value || '');
|
|
|
|
const handleChange = (text: string) => {
|
|
setLocalValue(text);
|
|
onChangeText?.(text);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
onSearch(localValue);
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setLocalValue('');
|
|
onChangeText?.('');
|
|
onSearch('');
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, isTablet && styles.containerTablet, { backgroundColor: colors.card }]}>
|
|
<Ionicons name="search" size={20} color={colors.textSecondary} style={styles.icon} />
|
|
<TextInput
|
|
style={[styles.input, isTablet && styles.inputTablet, { color: colors.text }]}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.textSecondary}
|
|
value={localValue}
|
|
onChangeText={handleChange}
|
|
onSubmitEditing={handleSubmit}
|
|
returnKeyType="search"
|
|
autoCorrect={false}
|
|
/>
|
|
{localValue.length > 0 && (
|
|
<TouchableOpacity onPress={handleClear} style={styles.clearButton}>
|
|
<Ionicons name="close-circle" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
borderRadius: borderRadius.lg,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.sm + 2,
|
|
marginVertical: spacing.sm,
|
|
alignSelf: 'center',
|
|
width: '80%',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 8,
|
|
elevation: 2,
|
|
},
|
|
containerTablet: {
|
|
paddingHorizontal: spacing.lg,
|
|
paddingVertical: spacing.md,
|
|
},
|
|
icon: {
|
|
marginRight: spacing.sm,
|
|
},
|
|
input: {
|
|
flex: 1,
|
|
fontSize: 16,
|
|
paddingVertical: spacing.xs,
|
|
},
|
|
inputTablet: {
|
|
fontSize: 18,
|
|
paddingVertical: spacing.sm,
|
|
},
|
|
clearButton: {
|
|
marginLeft: spacing.sm,
|
|
},
|
|
});
|