qm-bus/src/GalleryBox/components/Search.js

千米公有云业务组件库

/**
 * @author gcy[of1518]
 * @date 16/10/11
 *
 * @description QMSearchForm 通过store与其他组件（table,grid）耦合
 */
import React, { Component } from 'react'
import { Input, Col } from 'antd'
import { Relax } from 'iflux2'

import { searchQL } from '../ql'

const Search = Input.Search
const noop = () => {}

@Relax
export default class SearchForm extends Component {
  static defaultProps = {
    //protected
    formCurrentGroup: 'simple', //当前分组
    group: 'simple',

    init: noop,
    onFetch: noop, //发起请求
    onRefresh: noop, //刷新
    onFormReset: noop, //表单重置
    onReset: noop, //重置
    onFormChangeGroup: noop, //切换分组（切换高级搜索和简易搜索）
    elementOnChange: noop,
    onSearch: noop,
    onCellSelectedClear: noop,
    searchKey: searchQL,
    //private
    defaultFromData: {}, //默认formData数据
  }

  constructor(props) {
    super(props)
  }

  componentWillMount() {
    let { init, children, group } = this.props
    if (!!group) {
      init({ formCurrentGroup: 'simple', formGroup: true })
    }
  }

  _onSearch() {
    this.props.onCellSelectedClear()
    this.props.onFetch({ group: 'simple' })
  }

  _onChange(e) {
    this.props.onFormReset('simple')
    this.props.elementOnChange({
      index: 'name',
      source: { index: 'name', value: e.target.value, group: 'simple' },
    })
    this.props.onSearch(e.target.value)
  }

  render() {
    return (
      <Col span={8}>
        <Search
          className="search-input"
          value={this.props.searchKey}
          placeholder="按文件夹/文件名称搜索"
          onChange={this._onChange.bind(this)}
          onSearch={this._onSearch.bind(this)}
        />
      </Col>
    )
  }
}