-
Notifications
You must be signed in to change notification settings - Fork 25
Expand file tree
/
Copy pathSearchInput.js
More file actions
77 lines (71 loc) · 1.9 KB
/
SearchInput.js
File metadata and controls
77 lines (71 loc) · 1.9 KB
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
70
71
72
73
74
75
76
77
/** @jsx jsx */
import { func, string } from 'prop-types'
import React from 'react'
import { jsx } from 'theme-ui'
import Icon from './Icon'
function SearchInput({ placeholder, value, onChange, ...props }) {
const inputElement = React.useRef(null)
function handleKeyDown(event) {
if (event.key === '/' && inputElement.current !== document.activeElement) {
event.preventDefault()
inputElement.current.focus()
}
}
React.useEffect(() => {
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}, [])
return (
<div css={{ position: 'relative' }} {...props}>
<div
sx={{
position: 'absolute',
top: 0,
bottom: 0,
left: 4,
display: 'flex',
alignItems: 'center',
}}
>
<Icon name="search" sx={{ color: 'icon' }} />
</div>
<input
ref={inputElement}
type="search"
aria-label="Search"
placeholder={placeholder}
value={value}
onChange={onChange}
sx={{
width: '100%',
margin: 0,
padding: 4,
paddingLeft: 52,
fontSize: 'inherit',
lineHeight: 'none',
fontFamily: 'inherit',
color: 'inherit',
backgroundColor: 'background',
boxShadow: 1,
border: 0,
appearance: 'none',
outline: 0,
borderRadius: 1,
// Removes the extra left padding added to search inputs on Safari
'::-webkit-search-decoration': {
display: 'none',
},
'&:focus': {
boxShadow: theme => `0 0 0 3px ${theme.colors.primary}`,
},
}}
/>
</div>
)
}
SearchInput.propTypes = {
value: string.isRequired,
onChange: func.isRequired,
placeholder: string.isRequired,
}
export default SearchInput