46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { View } from "react-native";
|
|
import { TextInput } from "react-native-paper";
|
|
|
|
import { SizeEnum } from "@/constants/sizeEnum";
|
|
|
|
interface SearchBarProps {
|
|
searchQuery: string;
|
|
onChange: (query: string) => void;
|
|
placeholderText?: string;
|
|
size?: SizeEnum;
|
|
}
|
|
|
|
export const SearchBar = ({
|
|
searchQuery,
|
|
onChange,
|
|
placeholderText = "Search",
|
|
size = SizeEnum.Regular,
|
|
}: SearchBarProps) => {
|
|
const isSmall = size === SizeEnum.Small;
|
|
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
placeholder={placeholderText}
|
|
value={searchQuery}
|
|
onChangeText={onChange}
|
|
mode="outlined"
|
|
right={
|
|
searchQuery ? (
|
|
<TextInput.Icon icon="close" onPress={() => onChange("")} />
|
|
) : (
|
|
<TextInput.Icon icon="magnify" size={isSmall ? 20 : 24} />
|
|
)
|
|
}
|
|
style={isSmall ? { height: 40, fontSize: 14 } : undefined}
|
|
contentStyle={isSmall ? { paddingTop: 0, paddingBottom: 0 } : undefined}
|
|
outlineStyle={[
|
|
isSmall ? { borderRadius: 24 } : undefined,
|
|
{ borderColor: "transparent" },
|
|
]}
|
|
placeholderTextColor="#d9d9d9"
|
|
/>
|
|
</View>
|
|
);
|
|
};
|