1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import Downshift from 'downshift';
import { SEARCH_ITEMS_QUERY } from '../queries';
import { graphql, compose } from 'react-apollo';
import makeImage from '../lib/image';
import { Router } from '../routes';
import slugify from 'slugify';
function routeToItem(item) {
Router.pushRoute('item', {
slug: slugify(item.title),
itemId: item.id,
});
}
function BasicAutocomplete(props) {
const { items, onChange } = props;
console.log(props);
return (
<Downshift onChange={routeToItem} itemToString={item => item.title}>
{({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
<div>
<input
{...getInputProps({
placeholder: 'Search For Item',
onChange: e => props.refetch({ searchTerm: e.target.value }),
style: { fontSize: '20px', padding: '20px', display: 'block', width: '100%' },
})}
/>
{isOpen ? (
<div>
{items.map((item, index) => (
<div
{...getItemProps({ item })}
key={item.id}
style={{
backgroundColor: highlightedIndex === index ? '#e8e8e8' : 'white',
borderLeft: highlightedIndex === index ? '10px solid #ffc600' : '10px solid white',
padding: '10px',
display: 'flex',
alignItems: 'center',
}}
>
<img width="50" style={{ 'margin-right': '10px' }} src={makeImage(item.image)} alt={item.title} />
{item.title}
</div>
))}
</div>
) : null}
</div>
)}
</Downshift>
);
}
const Search = props => (
<BasicAutocomplete
items={props.searchItems.allItems}
onChange={selectedItem => console.log(selectedItem)}
refetch={props.searchItems.refetch}
/>
);
const searchEnhancer = graphql(SEARCH_ITEMS_QUERY, {
name: 'searchItems',
options: {
variables: { searchTerm: 'camo' },
},
});
export default compose(searchEnhancer)(Search);
|
