{"size": 1684, "ext": "js", "max_stars_repo_path": "lib/ui/components/BottomBar/SearchInput.js", "max_stars_repo_name": "Davidislit/mimic", "max_stars_repo_stars_event_min_datetime": "2017-01-18T01:50:43.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-13T08:43:51.000Z", "max_issues_repo_path": "lib/ui/components/BottomBar/SearchInput.js", "max_issues_repo_name": "Davidislit/mimic", "max_issues_repo_issues_event_min_datetime": "2017-01-15T22:00:42.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-02T02:37:04.000Z", "max_forks_repo_path": "lib/ui/components/BottomBar/SearchInput.js", "max_forks_repo_name": "Davidislit/mimic", "max_forks_repo_forks_event_min_datetime": "2017-01-29T09:52:27.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-09T14:52:34.000Z"}
{"max_stars_count": 347, "max_issues_count": 120, "max_forks_count": 48, "avg_line_length": 27.1612903226, "max_line_length": 96, "alphanum_fraction": 0.5985748219}
import React from 'react';
import styled from 'styled-components';
import Icon from 'ui/components/common/Icon';
import ActionIcon from 'ui/components/common/ActionIcon';
import IconDropdown from 'ui/components/common/IconDropdown';
import { Div } from 'ui/components/common/base';
import InputControl from 'ui/components/common/InputControl';

const Container = styled(Div)`
  width: 300px;
  height: 23px;
  display: flex;
  align-items: center;
  border-right: ${(props) => props.theme.lightBorder};
`;

const SearchStyle = {
  border: 'none',
  height: '19px',
  flex: '1',
  outline: 'none',
  'padding-left': '5px',
  'font-size': '13px'
};

class SearchInput extends React.Component {

  focusOnField = () => {
    if (this.searchInput) {
      this.searchInput.select();
    }
  };

  render() {
    return (
      <Container>
        <Icon src="search" onClick={ this.focusOnField }/>
        <InputControl
          style={ SearchStyle }
          value={ this.props.query}
          onBlur={ this.props.onBlur }
          onFocus={ this.props.onFocus }
          onChange={ this.props.onChange }
          placeholder="Find"
          inputRef={ (node) => this.searchInput = node }/>

        { this.props.query && <ActionIcon action="clear" onClick={ this.props.onClearQuery }/> }

        <IconDropdown icon="filter"
                      value={ this.props.filterValue }
                      position="right"
                      align="left"
                      anchorPoint="bottom"
                      onChange={ this.props.onFilterChange }
                      options={ this.props.filterOptions }/>
      </Container>
    )
  }
}

export default SearchInput;
