text: import React from 'react';
  import PropTypes from 'prop-types';
  import {
      Input,
      InputGroup,
      Button,
      InputGroupAddon
  } from './../../../../components';
  
  export class CustomSearch extends React.Component {
      static propTypes = {
          className: PropTypes.string,
          onSearch: PropTypes.func
      }
  
      constructor(props) {
          super(props);
  
          this.state = {
              value: ''
          }
      }
  
      componentDidUpdate(prevProps, prevState) {
          if (prevState.value !== this.state.value) {
              this.props.onSearch(this.state.value);
          }
      }
  
      render() {
          return (
              <InputGroup className={ this.props.className } size="sm">
                  <InputGroupAddon addonType="prepend">
                      <i className="fa fa-search fa-fw"></i>
                  </InputGroupAddon>
                  <Input
                      onChange={(e) => { this.setState({ value: e.target.value }) }}
                      value={ this.state.value }
                      className="bg-white"
                      placeholder="Type to search..."
                  />
                  {
                      this.state.value && (
                          <InputGroupAddon addonType="append">
                              <Button
                                  outline
                                  onClick={() => { this.setState({value: ''}) }}
                              >
                                  <i className="fa fa-fw fa-times"></i>
                              </Button>
                          </InputGroupAddon>
                      )
                  }
              </InputGroup>
          )
      }
  } 