43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { useTheme } from "@/providers/ThemeProvider";
|
|
import { Feather } from "@expo/vector-icons";
|
|
import { useState } from "react";
|
|
import { TouchableOpacity } from "react-native";
|
|
import { InputForm } from "./inputForm";
|
|
|
|
export default function InputSearch({ onChange, width, value, bg }: { onChange?: (val: string) => void, width?: number, value?: string, bg?: string }) {
|
|
const { colors } = useTheme();
|
|
const [internalValue, setInternalValue] = useState(value ?? "");
|
|
|
|
const displayValue = value !== undefined ? value : internalValue;
|
|
|
|
const handleChange = (val: string) => {
|
|
setInternalValue(val);
|
|
onChange?.(val);
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setInternalValue("");
|
|
onChange?.("");
|
|
};
|
|
|
|
return (
|
|
<InputForm
|
|
type="default"
|
|
placeholder="Pencarian"
|
|
round
|
|
itemLeft={<Feather name="search" size={20} color={colors.dimmed} />}
|
|
itemRight={
|
|
displayValue ? (
|
|
<TouchableOpacity onPress={handleClear}>
|
|
<Feather name="x" size={20} color={colors.dimmed} />
|
|
</TouchableOpacity>
|
|
) : undefined
|
|
}
|
|
onChange={handleChange}
|
|
width={width}
|
|
bg={bg}
|
|
value={displayValue}
|
|
mb={false}
|
|
/>
|
|
)
|
|
} |