52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { SearchBar } from "@nutui/nutui-react-taro";
|
|
import { View, Text, Image } from "@tarojs/components";
|
|
import img from "../../config/images";
|
|
import styles from "./index.module.scss";
|
|
|
|
interface IProps {
|
|
handleFilterIcon: () => void;
|
|
isSelect: boolean;
|
|
filterCount: number;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
const SearchBarComponent = (props: IProps) => {
|
|
const { handleFilterIcon, isSelect, filterCount, onChange } = props;
|
|
|
|
const handleChange = (value: string) => {
|
|
onChange && onChange(value);
|
|
};
|
|
return (
|
|
<>
|
|
<SearchBar
|
|
leftIn={
|
|
<View className={styles.searchBarLeft}>
|
|
<Image className={styles.searchIcon} src={img.ICON_SEARCH} />
|
|
</View>
|
|
}
|
|
right={
|
|
<View
|
|
className={`${styles.searchBarRight} ${
|
|
isSelect ? styles.active : ""
|
|
}`}
|
|
onClick={handleFilterIcon}
|
|
>
|
|
<Image
|
|
src={isSelect ? img.ICON_FILTER_SELECTED : img.ICON_FILTER}
|
|
className={styles.filterIcon}
|
|
/>
|
|
{isSelect && (
|
|
<Text className={styles.filterCount}>{filterCount}</Text>
|
|
)}
|
|
</View>
|
|
}
|
|
className={styles.searchBar}
|
|
placeholder="搜索上海的球局和场地"
|
|
onChange={handleChange}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SearchBarComponent;
|