You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
// @flow
|
|
|
|
|
|
|
|
|
|
import React, { PureComponent } from 'react'
|
|
|
|
|
import styled from 'styled-components'
|
|
|
|
|
|
|
|
|
|
import Box from 'components/base/Box'
|
|
|
|
|
import Icon from 'components/base/Icon'
|
|
|
|
|
|
|
|
|
|
const Input = styled.input`
|
|
|
|
|
border: none;
|
|
|
|
|
background: transparent;
|
|
|
|
|
outline: none;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
|
|
|
|
|
&::placeholder {
|
|
|
|
|
color: ${p => p.theme.colors.warmGrey};
|
|
|
|
|
}
|
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
class GlobalSearch extends PureComponent<{}> {
|
|
|
|
|
_input = null
|
|
|
|
|
|
|
|
|
|
focusInput = () => {
|
|
|
|
|
if (this._input) {
|
|
|
|
|
this._input.focus()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<Box grow horizontal ff="Open Sans|SemiBold" fontSize={4}>
|
|
|
|
|
<Box justify="center" onClick={this.focusInput} pr={2}>
|
|
|
|
|
<Icon name="search" />
|
|
|
|
|
</Box>
|
|
|
|
|
<Input placeholder="Search" innerRef={input => (this._input = input)} />
|
|
|
|
|
</Box>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default GlobalSearch
|
