128 lines
3.5 KiB
TypeScript
128 lines
3.5 KiB
TypeScript
import { View } from '@tarojs/components'
|
||
import classnames from 'classnames'
|
||
import type { ReactNode } from 'react'
|
||
import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react'
|
||
import IconFont from '../iconfont/iconfont'
|
||
import InputX from '../InputX/index'
|
||
import styles from './index.module.scss'
|
||
import CloseBtn from '@/components/closeBtn'
|
||
|
||
interface Params {
|
||
clickOnSearch?: (val: string) => void
|
||
disabled?: boolean
|
||
placeholder?: string
|
||
changeOnSearch?: (value: string) => void
|
||
showIcon?: boolean
|
||
placeIcon?: 'out' | 'inner'
|
||
style?: Object
|
||
showBtn?: boolean
|
||
btnStyle?: Object
|
||
btnTitle?: string
|
||
defaultValue?: string
|
||
children?: ReactNode
|
||
customRightSlot?: ReactNode
|
||
adjustPosition?: boolean
|
||
showScan?: boolean
|
||
handScan?: () => void
|
||
cursorSpacing?: Number
|
||
}
|
||
const Search = (
|
||
{
|
||
clickOnSearch, // 点击筛选按钮触发
|
||
changeOnSearch, // 输入文字触发
|
||
adjustPosition = false,
|
||
disabled = false, // 是否禁用
|
||
placeholder = '输入搜索内容',
|
||
showIcon = true, // 是否显示关闭图标
|
||
showBtn = false, // 是否显示搜索按钮
|
||
btnStyle = {},
|
||
placeIcon = 'inner', // 搜索图标位置：inner在里面，out在外面
|
||
btnTitle = '搜索', // 搜索文字
|
||
defaultValue = '', // 默认值
|
||
children,
|
||
customRightSlot,
|
||
showScan = false,
|
||
handScan,
|
||
cursorSpacing = 0,
|
||
}: Params,
|
||
ref,
|
||
) => {
|
||
const [inputCon, setInputCon] = useState('')
|
||
useEffect(() => {
|
||
setInputCon(defaultValue)
|
||
}, [defaultValue])
|
||
|
||
const onInputEven = (e) => {
|
||
const value = e.detail.value
|
||
setInputCon(value)
|
||
changeOnSearch?.(value)
|
||
}
|
||
|
||
const clearInput = () => {
|
||
setInputCon('')
|
||
changeOnSearch?.('')
|
||
}
|
||
useImperativeHandle(ref, () => ({
|
||
clearInput,
|
||
}))
|
||
const onSearch = () => {
|
||
clickOnSearch?.(inputCon)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<View className={styles.search_main}>
|
||
<View className={styles.search_con}>
|
||
{showIcon && (
|
||
<IconFont
|
||
name="icon-sousuo"
|
||
size={40}
|
||
color="#bbbbbb"
|
||
customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}
|
||
></IconFont>
|
||
)}
|
||
<View className={styles.input_bar}>
|
||
<InputX
|
||
cursorSpacing={cursorSpacing as any}
|
||
adjustPosition={adjustPosition}
|
||
placeholderStyle="color:#ABABAB; font-size:26rpx"
|
||
onConfirm={onSearch}
|
||
disabled={disabled}
|
||
value={inputCon}
|
||
placeholder={placeholder}
|
||
onInput={e => onInputEven(e)}
|
||
customClassName={classnames(placeIcon == 'out' && styles.input_out)}
|
||
customStyle={{ width: '100%' }}
|
||
/>
|
||
<View className={styles.search_closeBtn}>
|
||
{!!inputCon && <CloseBtn onClose={() => clearInput()} />}
|
||
</View>
|
||
{showScan && (
|
||
<View
|
||
onClick={() => {
|
||
handScan?.()
|
||
}}
|
||
>
|
||
<IconFont name="icon-gongnengtubiao-saomiao" size={40} color="#337FFF"></IconFont>
|
||
</View>
|
||
)}
|
||
|
||
<View className={styles.customRightSlot}>{customRightSlot}</View>
|
||
</View>
|
||
</View>
|
||
{showBtn && (
|
||
<View style={btnStyle} className={styles.btn} onClick={onSearch}>
|
||
{btnTitle}
|
||
</View>
|
||
)}
|
||
{children}
|
||
</View>
|
||
</>
|
||
)
|
||
}
|
||
export default memo(
|
||
forwardRef(
|
||
Search,
|
||
),
|
||
)
|