Differential D1154 Diff 2993 src/pages/businessManagement/comSearchBar.jsx

Changeset View

Standalone View

src/pages/businessManagement/comSearchBar.jsx

This file was added.

				import Taro, { Component } from "@tarojs/taro"
				import { View, Input, Image, Text } from "@tarojs/components"
				import searchIcon from "./images/search.png"
				import closeIcon from "./images/close.png"
				import rightArrowIcon from './images/right-arrow.png'
				import "./comSearchBar.scss"

				export default class SearchInput extends Component {
				static defaultProps = {
				placeholder: "",
				customStyle: "",
				dropDownList: [],
				searchValue: '',
				onClick: () => { },
				onInput: () => { },
				onSearch: () => { },
				onConfirm: () => { },
				onCancel: () => { }
				}
				state = {
				//是否展示下拉列表
				showDropDownList: false
				}
				handleInput = event => {
				let showDropDown = false
				if (event.detail.value !== '') {
				showDropDown = true
				}
				this.setState({
				showDropDownList: showDropDown
				})
				this.props.onInput(event.detail.value)
				}
				/**
				* 选中某一行
				*/
				selectRow = (item, value) => {
				this.setState({
				showDropDownList: false
				})
				this.props.onInput(value)
				this.props.onSearch(item, value)
				}
				/**
				* 点击取消
				*/
				cancel = () => {
				this.setState({
				showDropDownList: false
				})
				this.props.onCancel()
				}
				/**
				* 回车事件
				*/
				confirm = () => {
				const { searchValue } = this.props
				if (searchValue.trim() == '') {
				this.props.onSearch()
				}
				}
				/**
				* 输入框聚焦
				*/
				handleFocus = () => {
				const { searchValue } = this.props
				if (searchValue.trim() !== '') {
				this.setState({
				showDropDownList: true
				})
				}
				}
				render () {
				const {
				placeholder,
				customStyle,
				dropDownList,
				searchValue
				} = this.props
				const { showDropDownList } = this.state
				return (
				<View className='g-search-bar-layout' style={customStyle}>
				<View className='search-out'>
				<Image className='icon' src={searchIcon} />
				<Input
				className='search-input'
				placeholderClass='input_placeholder'
				confirmType='search'
				maxlength='15'
				placeholder={placeholder}
				value={searchValue}
				onInput={this.handleInput}
				onConfirm={this.confirm}
				onFocus={this.handleFocus}
				/>
				<Image className='icon' src={closeIcon} onClick={this.cancel.bind(this)} />
				</View>
				{showDropDownList && <View className='row-layout'>
				<View className='row-wrapper'>
				{dropDownList.map((item, index) => (
				<View className='row-out' key={index}>
				<View className='black-left'></View>
				<View className='row' onClick={this.selectRow.bind(this, item, searchValue)}>
				<View className='row-left'>{item}</View>
				<View className='vertical'></View>
				<View className='row-right'>
				<View>{searchValue}</View>
				<Image className='arrow-right' src={rightArrowIcon}></Image>
				</View>
				</View>
				</View>
				))}
				</View>
				</View>}
				</View>
				)
				}
				}