import * as React from 'react' ; import classNames from 'classnames' ; import SearchOutlined from '@jdcfe/icons-react/SearchOutlined' ; import CloseCircleOutlined from '@jdcfe/icons-react/CloseCircleOutlined' ; export interface SearchBarProps { prefixCls ? : string ; className ? : string ; style ? : React . CSSProperties ; value : any ; type ? : string ; defaultValue ? : string | number ; onChange ? : ( value : any ) => void ; onSearch ? : ( value : any ) => void ; disabled ? : boolean ; clearable ? : boolean ; placeholder ? : string ; readOnly ? : boolean ; maxLength ? : number ; } class SearchBar extends React . PureComponent < SearchBarProps > { static defaultProps = { prefixCls : 'Yep-search-bar' , style : { } , type : 'text' , value : '' , readOnly : false , } ; constructor ( props ) { super ( props ) ; this . handleChange = this . handleChange . bind ( this ) ; this . handleClear = this . handleClear . bind ( this ) ; this . handleSearchFn = this . handleSearchFn . bind ( this ) ; } handleClear ( ) { const { onChange } = this . props ; onChange && onChange ( '' ) ; } handleChange ( e ) { const { value } = e . target ; const { onChange } = this . props ; onChange && onChange ( value ) ; } handleSearchFn ( value ) { const { onSearch } = this . props ; onSearch && onSearch ( value ) ; } render ( ) { const { className , prefixCls , disabled , placeholder , readOnly , maxLength , clearable , value , type , style , } = this . props ; const inputProps = { value , type , disabled , placeholder , readOnly , maxLength } ; const inputCls = classNames ( `${ prefixCls }` , className ) ; return ( < div className = "yep-search-bar-bj" > < div className = { classNames ( 'Yep-search-bar-wrapper' , className ) } style = { style } > < SearchOutlined className = "Yep-icon-lego_sousuo Yep-icon-xxs" / > < input className = { inputCls } { ... inputProps } onChange = { this . handleChange } / > { ( value || value === 0 || Number . isNaN ( value ) ) && clearable && ( < CloseCircleOutlined className = "Yep-search-bar__clear Yep-icon-xxs" onClick = { this . handleClear } / > ) } < /div> { ( value || value === 0 || Number . isNaN ( value ) ) && clearable && ( < span className = "yep-search-bar-cancel" onClick = { this . handleSearchFn } > 搜索 < /span>)} < /div>); } } export default SearchBar ;