78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { Input, View } from "@tarojs/components";
|
|
import styles from "./index.module.scss"
|
|
import CloseBtn from "@/components/closeBtn"
|
|
import classnames from "classnames";
|
|
import { debounce } from "@/common/util";
|
|
import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
|
|
type Params = {
|
|
clickOnSearch?: (val: string) => void
|
|
disabled?: false|true,
|
|
placeholder?: string,
|
|
changeOnSearch?:(any) => void,
|
|
showIcon?: false|true,
|
|
placeIcon?: 'out'|'inner',
|
|
style?: Object,
|
|
showBtn?: false|true,
|
|
btnStyle?: Object,
|
|
btnTitle?: string,
|
|
debounceTime?: number //防抖时间，不设默认为零
|
|
}
|
|
|
|
export default forwardRef(({
|
|
clickOnSearch,
|
|
changeOnSearch,
|
|
disabled = false,
|
|
placeholder = '输入搜索内容',
|
|
showIcon = true,
|
|
showBtn = false,
|
|
btnStyle = {},
|
|
placeIcon = 'inner',
|
|
btnTitle = '搜索',
|
|
debounceTime = 0,
|
|
}:Params, ref) => {
|
|
const [inputCon , setInputCon] = useState('')
|
|
const debounceTimeRef = useRef(0)
|
|
|
|
useEffect(() => {
|
|
debounceTimeRef.current = debounceTime
|
|
}, [debounceTime])
|
|
|
|
const onInputEven = (e) => {
|
|
const value = e.detail.value
|
|
changeData(value)
|
|
}
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
clearInput
|
|
}))
|
|
|
|
const clearInput = () => {
|
|
setInputCon('')
|
|
changeOnSearch?.('')
|
|
}
|
|
|
|
const changeData = debounce((value) => {
|
|
setInputCon(value)
|
|
changeOnSearch?.(value)
|
|
}, debounceTimeRef.current)
|
|
|
|
const onSearch = () => {
|
|
clickOnSearch?.(inputCon)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
|
|
<View className={styles.search_con}>
|
|
{showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
|
|
<Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
|
|
{!!inputCon&&<View className={styles.search_closeBtn}>
|
|
<CloseBtn onClose={() => clearInput()} styleObj={{width: '20rpx', height:'20rpx', backgroundColor:'#fff', border:'0'}}/>
|
|
</View>}
|
|
</View>
|
|
{showBtn&&<View style={btnStyle} className={styles.btn} onClick = {() => onSearch()}>{btnTitle}</View>}
|
|
</View>
|
|
</>
|
|
)
|
|
}) |