-
Notifications
You must be signed in to change notification settings - Fork 295
/
WalletSearch.tsx
59 lines (55 loc) · 1.63 KB
/
WalletSearch.tsx
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
// @flow
import React from 'react';
import { intlShape, injectIntl, defineMessages } from 'react-intl';
import { noop } from 'lodash/fp';
import classNames from 'classnames';
import { Input } from 'react-polymorph/lib/components/Input';
import SVGInline from 'react-svg-inline';
import { observer } from 'mobx-react';
import searchIcon from '../../../assets/images/search.inline.svg';
import crossIcon from '../../../assets/images/close-cross.inline.svg';
import styles from './WalletSearch.scss';
const messages = defineMessages({
placeholder: {
id: 'sidebar.wallets.search.placeholder',
defaultMessage: '!!!Filter',
description: 'Search placeholder for the sidebar wallet menu',
},
});
type Props = {
intl: intlShape.isRequired,
onSearch?: Function,
searchValue?: string,
};
const WalletSearchComponent = ({
searchValue = '',
onSearch = noop,
intl,
}: Props) => {
const hasValue = !!searchValue.length;
return (
<label
htmlFor="sideBarwalletSearch"
className={classNames({
[styles.component]: true,
[styles.hasValue]: hasValue,
})}
>
<SVGInline svg={searchIcon} className={styles.searchIcon} />
<Input
id="sideBarwalletSearch"
className={styles.input}
onChange={onSearch}
spellCheck={false}
value={searchValue}
placeholder={intl.formatMessage(messages.placeholder)}
/>
{hasValue && (
<button className={styles.clearButton} onClick={() => onSearch('')}>
<SVGInline svg={crossIcon} />
</button>
)}
</label>
);
};
export const WalletSearch = injectIntl(observer(WalletSearchComponent));