qm-ui/src/SearchSelect.js

千米公有云管理端UI基础组件库

/**
 * @author qsw
 */
import React from 'react'
import classNames from 'classnames'
import { Row, Col, Select, Input, Button } from 'antd'

const InputGroup = Input.Group
const Option = Select.Option

export default class SearchSelect extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      focus: false,
      data: [],
      haveImg: true,
    }
  }

  render() {
    const { style, size, placeholder } = this.props
    const btnCls = classNames({
      'ant-search-btn': true,
      'ant-search-btn-noempty': !!(this.state.value || '').trim(),
    })
    const searchCls = classNames({
      'ant-search-input': true,
      'ant-search-input-focus': this.state.focus,
    })

    return (
      <div className="ant-search-input-wrapper" style={style}>
        <div className="search-select">
          <Row>
            <Col span="8">
              <Select
                defaultValue="有图片"
                style={{ width: '100%' }}
                size="large"
                onChange={this.handleSelect}>
                <Option value="有图片">有图片</Option>
                <Option value="无图片">无图片</Option>
              </Select>
            </Col>
            <Col span="16">
              <InputGroup className={searchCls} size="large">
                <Input
                  placeholder={placeholder}
                  value={this.state.value}
                  onChange={this.handleInputChange}
                  onFocus={this.handleFocusBlur}
                  onBlur={this.handleFocusBlur}
                  onPressEnter={this.handleSearch}
                />
                <div className="ant-input-group-wrap">
                  <Button
                    icon="search"
                    className={btnCls}
                    size={size}
                    onClick={this.handleSearch}
                  />
                </div>
              </InputGroup>
            </Col>
          </Row>
        </div>
      </div>
    )
  }

  handleInputChange = e => {
    this.setState({
      value: e.target.value,
    })
  }

  handleSelect = () => {
    this.setState({
      haveImg: !this.state.haveImg,
    })
  }

  handleFocusBlur = e => {
    this.setState({
      focus: e.target === document.activeElement,
    })
  }

  handleSearch = () => {
    if (this.props.onSearch) {
      this.props.onSearch(this.state.value, this.state.haveImg)
    }
  }
}