cuz/src/components/SearchGroup/index.js

Front-end modular development kit.

import React from 'react';
import Button from '../Button';
import Input from '../Input';

const SearchGroup = React.createClass({
  propTypes: {
    bsSize: React.PropTypes.string,
  },

  getDefaultProps() {
    return {
      buttonPosition: 'after',
      bsSize: 'normal'
    };
  },

  renderSearchButton() {
    return (
      <Button bsStyle="primary">
        <i className="fa fa-search"></i>
      </Button>
    );
  },

  renderSmallSearchButton() {
    return (
      <Button bsSize="small">
        <i className="fa fa-search"></i>
      </Button>
    );
  },

  renderSearchGroup() {
    return (
      <Input type="text" buttonAfter={this.renderSearchButton()} />
    );
  },

  renderSmallSearchGroup() {
    return (
      <Input bsSize="small" type="text" buttonAfter={this.renderSmallSearchButton()} />
    );
  },

  render() {
    return (
      <div className="search-group">
        {
          this.props.bsSize === 'small' ? this.renderSmallSearchGroup() : this.renderSearchGroup()
        }
      </div>
    );
  }
});

export default SearchGroup;