178 lines
4.5 KiB
TypeScript
178 lines
4.5 KiB
TypeScript
/*
|
|
* File: SearchBar.tsx
|
|
* Description: Search bar component for patient filtering
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
View,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
} from 'react-native';
|
|
import { theme } from '../../../theme/theme';
|
|
import Icon from 'react-native-vector-icons/Feather';
|
|
|
|
// ============================================================================
|
|
// INTERFACES
|
|
// ============================================================================
|
|
|
|
interface SearchBarProps {
|
|
value: string;
|
|
onChangeText: (text: string) => void;
|
|
placeholder?: string;
|
|
showFilter?: boolean;
|
|
onFilterPress?: () => void;
|
|
}
|
|
|
|
// ============================================================================
|
|
// SEARCH BAR COMPONENT
|
|
// ============================================================================
|
|
|
|
/**
|
|
* SearchBar Component
|
|
*
|
|
* Purpose: Provide search functionality for patient list
|
|
*
|
|
* Features:
|
|
* - Real-time search input
|
|
* - Clear button when text is present
|
|
* - Optional filter button
|
|
* - Modern design with icons
|
|
* - Optimized for medical data search
|
|
*/
|
|
const SearchBar: React.FC<SearchBarProps> = ({
|
|
value,
|
|
onChangeText,
|
|
placeholder = 'Search patients...',
|
|
showFilter = false,
|
|
onFilterPress,
|
|
}) => {
|
|
// ============================================================================
|
|
// EVENT HANDLERS
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Handle Clear Search
|
|
*
|
|
* Purpose: Clear the search input
|
|
*/
|
|
const handleClear = () => {
|
|
onChangeText('');
|
|
};
|
|
|
|
// ============================================================================
|
|
// MAIN RENDER
|
|
// ============================================================================
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.searchContainer}>
|
|
{/* Search Icon */}
|
|
<Icon
|
|
name="search"
|
|
size={18}
|
|
color={theme.colors.textMuted}
|
|
style={styles.searchIcon}
|
|
/>
|
|
|
|
{/* Search Input */}
|
|
<TextInput
|
|
style={styles.searchInput}
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={theme.colors.textMuted}
|
|
returnKeyType="search"
|
|
autoCorrect={false}
|
|
autoCapitalize="none"
|
|
/>
|
|
|
|
{/* Clear Button */}
|
|
{value.length > 0 && (
|
|
<TouchableOpacity
|
|
style={styles.clearButton}
|
|
onPress={handleClear}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Icon
|
|
name="x-circle"
|
|
size={18}
|
|
color={theme.colors.textMuted}
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
|
|
{/* Filter Button */}
|
|
{showFilter && (
|
|
<TouchableOpacity
|
|
style={styles.filterButton}
|
|
onPress={onFilterPress}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Icon
|
|
name="sliders"
|
|
size={18}
|
|
color={theme.colors.primary}
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
// ============================================================================
|
|
// STYLES
|
|
// ============================================================================
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing.sm,
|
|
},
|
|
searchContainer: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: theme.colors.backgroundAlt,
|
|
borderRadius: 12,
|
|
paddingHorizontal: theme.spacing.sm,
|
|
paddingVertical: theme.spacing.xs,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.border,
|
|
},
|
|
searchIcon: {
|
|
marginRight: theme.spacing.xs,
|
|
},
|
|
searchInput: {
|
|
flex: 1,
|
|
fontSize: 16,
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.primary,
|
|
paddingVertical: theme.spacing.xs,
|
|
},
|
|
clearButton: {
|
|
padding: theme.spacing.xs,
|
|
marginLeft: theme.spacing.xs,
|
|
},
|
|
filterButton: {
|
|
backgroundColor: theme.colors.backgroundAlt,
|
|
borderRadius: 12,
|
|
padding: theme.spacing.sm,
|
|
marginLeft: theme.spacing.sm,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.primary,
|
|
},
|
|
});
|
|
|
|
export default SearchBar;
|
|
|
|
/*
|
|
* End of File: SearchBar.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/ |