2018-08-25 11:15:40 +02:00
|
|
|
import React, { PureComponent, Fragment } from 'react'
|
|
|
|
|
// import { Link } from 'gatsby'
|
|
|
|
|
import Helmet from 'react-helmet'
|
2018-08-27 19:42:09 +02:00
|
|
|
import { CSSTransition } from 'react-transition-group'
|
2018-08-25 11:15:40 +02:00
|
|
|
import Input from '../atoms/Input'
|
|
|
|
|
import SearchIcon from '../svg/MagnifyingGlass'
|
|
|
|
|
import styles from './Search.module.scss'
|
|
|
|
|
|
|
|
|
|
class Search extends PureComponent {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
|
|
|
|
|
this.state = {
|
2018-08-27 19:42:09 +02:00
|
|
|
searchOpen: false
|
2018-08-25 11:15:40 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toggleSearch = () => {
|
|
|
|
|
this.setState(prevState => ({
|
|
|
|
|
searchOpen: !prevState.searchOpen
|
|
|
|
|
}))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isSearchOpen = () => this.state.searchOpen === true
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<Fragment>
|
|
|
|
|
<Helmet>
|
|
|
|
|
<body className={this.isSearchOpen() ? 'has-search-open' : null} />
|
|
|
|
|
</Helmet>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
className={styles.searchButton}
|
|
|
|
|
onClick={this.toggleSearch}
|
|
|
|
|
>
|
|
|
|
|
<SearchIcon />
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
{this.state.searchOpen && (
|
2018-08-27 19:42:09 +02:00
|
|
|
<CSSTransition
|
|
|
|
|
appear={this.state.searchOpen}
|
|
|
|
|
in={this.state.searchOpen}
|
|
|
|
|
timeout={200}
|
|
|
|
|
classNames={styles}
|
|
|
|
|
>
|
|
|
|
|
<section className={styles.search}>
|
|
|
|
|
<Input
|
|
|
|
|
autoFocus
|
|
|
|
|
type="search"
|
|
|
|
|
placeholder="Search everything"
|
|
|
|
|
onBlur={this.toggleSearch}
|
|
|
|
|
// value={this.state.query}
|
|
|
|
|
// onChange={this.search}
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
className={styles.searchInputClose}
|
|
|
|
|
onClick={this.toggleSearch}
|
|
|
|
|
>
|
|
|
|
|
×
|
|
|
|
|
</button>
|
|
|
|
|
</section>
|
|
|
|
|
</CSSTransition>
|
2018-08-25 11:15:40 +02:00
|
|
|
)}
|
|
|
|
|
</Fragment>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Search
|
