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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import { useCallback, useEffect } from 'react';
import styled from 'styled-components';
import { colors } from '../../config.json';
import { messages } from '../../shared/gettext';
import { useStyledRef } from '../lib/utilityHooks';
import { normalText } from './common-styles';
import ImageView from './ImageView';
export const StyledSearchContainer = styled.div({
position: 'relative',
display: 'flex',
});
export const StyledSearchInput = styled.input.attrs({ type: 'text' })({
...normalText,
flex: 1,
border: 'none',
borderRadius: '4px',
padding: '9px 38px',
margin: 0,
lineHeight: '24px',
color: colors.white60,
backgroundColor: colors.white10,
'&&::placeholder': {
color: colors.white60,
},
'&&:focus': {
color: colors.blue,
backgroundColor: colors.white,
},
'&&:focus::placeholder': {
color: colors.blue40,
},
});
export const StyledClearButton = styled.button({
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
right: '9px',
border: 'none',
background: 'none',
padding: 0,
});
export const StyledSearchIcon = styled(ImageView)({
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
left: '9px',
[`${StyledSearchInput}:focus ~ &&`]: {
backgroundColor: colors.blue,
},
});
export const StyledClearIcon = styled(ImageView)({
'&&:hover': {
backgroundColor: colors.white60,
},
[`${StyledSearchInput}:focus ~ ${StyledClearButton} &&`]: {
backgroundColor: colors.blue40,
},
[`${StyledSearchInput}:focus ~ ${StyledClearButton} &&:hover`]: {
backgroundColor: colors.blue,
},
});
interface ISearchBarProps {
searchTerm: string;
onSearch: (searchTerm: string) => void;
className?: string;
disableAutoFocus?: boolean;
}
export default function SearchBar(props: ISearchBarProps) {
const inputRef = useStyledRef<HTMLInputElement>();
const onInput = useCallback(
(event: React.FormEvent) => {
const element = event.target as HTMLInputElement;
props.onSearch(element.value);
},
[props.onSearch],
);
const onClear = useCallback(() => {
props.onSearch('');
inputRef.current?.blur();
}, [props.onSearch]);
useEffect(() => {
if (!props.disableAutoFocus) {
inputRef.current?.focus({ preventScroll: true });
}
}, []);
return (
<StyledSearchContainer className={props.className}>
<StyledSearchInput
ref={inputRef}
value={props.searchTerm}
onInput={onInput}
placeholder={messages.gettext('Search for...')}
/>
<StyledSearchIcon source="icon-search" width={24} tintColor={colors.white60} />
{props.searchTerm.length > 0 && (
<StyledClearButton onClick={onClear}>
<StyledClearIcon source="icon-close" width={18} tintColor={colors.white40} />
</StyledClearButton>
)}
</StyledSearchContainer>
);
}
|
