joywok-material-components/components/search/index.js

<h1 align="center"> Joywok Material Components </h1>

/**
 *
 * @api {}   搜索组件
 * @apiName   带搜索图标、带删除搜索内容按钮的搜索组件，可设置样式（圆形、圆角矩形）
 * @apiGroup 组件使用
 *
 * @apiParam {String } value 搜索框中内容
 * @apiParam {String } placeholder 占位文字 默认为 "搜索"
 * @apiParam {String } variant 外形  RoundedRectangle:圆角矩形 circular:圆形边框 ,默认为 RoundedRectangle
 * @apiParam {String } customClassName 搜索框自定义样式类
 * @apiParam {function } onChange 搜索框内容发生变化后，会回传当前值， onChange(value) ,value:当前搜索框中内容
 *
 * @apiSuccessExample {json} 使用案例:
 *  import { JwSearch } from 'joywok-material-components'; //路径需要自行更改
    <JwSearch
      value={""}
      placeholder={"搜索"}
      variant={"circular"}
      customClassName={""}
      onChange={(value)=>self.fetchData("search value:",value)}
    />
 *
 *
 */

import React from 'react';
import ReactDOM from 'react-dom';
import InputBase from "@material-ui/core/InputBase/InputBase";

require('./style/index.css');
class JwSearch extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      value: props.value || '',
      placeholder: props.placeholder || i18n('placeholder.search'),
      customClassName: props.customClassName || '',
      variant: props.variant || 'RoundedRectangle'
    }
    this.fetchTime = null;
  }
  onChange(e){
    let self = this;
    let value = e.target.value;
    // value = value.trim(' ');
    if(value!=this.state.value){
      this.setState({
        value: value
      })
    }
    clearTimeout(this.fetchTime)
    this.fetchTime = setTimeout(function(){
      typeof(self.props.onChange)=='function' && self.props.onChange(value)
      self.fetchTime = null;
    }, 300);
  }
  // 清空所有输入内容
  handleClearAll = ()=>{
    if(this.state.value == '') return;
    this.setState({value:''});
    typeof(this.props.onChange)=='function' && this.props.onChange('')
  }
  render(){
    let self = this;
    return (
      <div className={"jw-search-component "+(this.state.customClassName)+" "+(this.state.variant=='RoundedRectangle'?'rounded-rectangle':'')}>
        <div className="jw-search-component-icon">
          <i className={'icon-jw-search'}></i>
        </div>
        <InputBase
          className="jw-search-component-input"
          placeholder={this.state.placeholder}
          value={this.state.value}
          onChange={(e)=>self.onChange(e)}
        />
        {
          this.state.value=='' ? '' :
          <div className="jw-search-component-icon jw-search-component-icon-right" onClick={()=>this.handleClearAll()}>
            <i className="icon-jw-search-clear"></i>
          </div>
        }
      </div>
    )
  }
}

export default JwSearch;