rawalcher/interaktive-systeme
Archived
1
0
Fork 0
Code Issues 5 Pull requests 2 Projects Releases 14 Packages Wiki Activity Actions

feat: now has onchange functionality. clear works now

Browse source
This commit is contained in:
Jakob Stornig 2024-01-04 19:57:05 +01:00
parent 93d16fc08a
commit 5876fcaf8e
1 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/common/SearchBar.tsx
View file

@ -1,14 +1,18 @@
import { AntDesign } from '@expo/vector-icons'; import { AntDesign } from '@expo/vector-icons';
import React from 'react'; import React, { useState } from 'react';
import { StyleSheet, TextInput, TouchableOpacity, View, ViewProps } from 'react-native'; import { StyleSheet, TextInput, TouchableOpacity, View, ViewProps } from 'react-native';
import { SIZES } from '../../constants/theme'; import { SIZES } from '../../constants/theme';
import { useTheme } from '../../app/contexts/ThemeContext'; import { useTheme } from '../../app/contexts/ThemeContext';
type SearchBarProps = {placeholder: string} & ViewProps interface SearchBarProps extends ViewProps {
placeholder? : string;
onChangeText? : (text: string) => void | undefined
}
export default function SearchBar(props: SearchBarProps) { export default function SearchBar(props: SearchBarProps) {
const [isActive, setIsactive] = React.useState(false); const [isActive, setIsactive] = React.useState(false);
const { colors } = useTheme(); const { colors } = useTheme();
const [text, setText] = useState<string>("");
const textColor = colors const textColor = colors
const backgroundColor = colors.elementDefaultColor; const backgroundColor = colors.elementDefaultColor;
@ -23,6 +27,10 @@ export default function SearchBar(props: SearchBarProps) {
setIsactive(false) setIsactive(false)
} }
} }
if(props.onChangeText){
props.onChangeText(text)
}
setText(text)
} }
// cant apply the background color otherwise // cant apply the background color otherwise
@ -35,10 +43,10 @@ export default function SearchBar(props: SearchBarProps) {
// changed styles.container to containerStyle // changed styles.container to containerStyle
return ( return (
<View style={containerStyle}> <View style={containerStyle}>
<TextInput onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%"}, styles.TextInput]} autoCorrect={false} keyboardType='web-search' placeholder={props.placeholder}></TextInput> <TextInput onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%"}, styles.TextInput]} autoCorrect={false} keyboardType='web-search' placeholder={props.placeholder} value={text}/>
{isActive && {isActive &&
<TouchableOpacity style={styles.cancel}> <TouchableOpacity style={styles.cancel} onPress={()=>{handleChange("")}}>
<AntDesign size={15} name='closecircle'></AntDesign> <AntDesign size={15} name='closecircle'></AntDesign>
</TouchableOpacity> </TouchableOpacity>
} }