import React from 'react' ; import { debounce } from 'lodash' ; import styled from 'styled-components' ; import { height , space , color } from 'design/system' ; class InputSearch extends React . Component { constructor ( props ) { super ( props ) ; this . debouncedNotify = debounce ( ( ) => { this . props . onChange ( this . state . value ) ; } , 200 ) ; let value = props . value || '' ; this . state = { value , isFocused : false , } ; } onBlur = ( ) => { this . setState ( { isFocused : false } ) ; } ; onFocus = ( ) => { this . setState ( { isFocused : true } ) ; } ; onChange = e => { this . setState ( { value : e . target . value } ) ; this . debouncedNotify ( ) ; } ; render ( ) { const { autoFocus = false , ... rest } = this . props ; return ( < Input px = "3" placeholder = "SEARCH..." color = "text.primary" { ... rest } autoFocus = { autoFocus } value = { this . state . value } onChange = { this . onChange } onFocus = { this . onFocus } onBlur = { this . onBlur } / > ) ; } } function fromTheme ( props ) { return { background : props . theme . colors . primary . dark , '&:hover' : { background : props . theme . colors . primary . lighter , } , '&:focus, &:active' : { background : props . theme . colors . primary . lighter , boxShadow : 'inset 0 2px 4px rgba(0, 0, 0, .24)' , color : props . theme . colors . text . primary , } , '&::placeholder' : { color : props . theme . colors . text . placeholder , fontSize : props . theme . fontSizes [ 1 ] , } , } ; } const Input = styled . input `
  box-sizing: border-box;
  font-size: 12px;
  min-width: 200px;
  outline: none;
  border: none;
  border-radius: 200px;
  height: 32px;
  transition: all 0.2s;
  ${ fromTheme }
  ${ space }
  ${ color }
  ${ height }
` ; export default InputSearch ;