1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/import-token/token-search/token-search.component.js
daniba 085126d275
Move search icon and add to storybook (#14940)
* move search icon || update imports || add to story

* Optimized svg path, updated icon api and updating colors

* update other icons

* update snapshot

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
2022-06-21 10:18:35 -05:00

88 lines
2.2 KiB
JavaScript

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Fuse from 'fuse.js';
import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '../../../components/ui/text-field';
import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
import SearchIcon from '../../../components/ui/icon/search-icon';
export default class TokenSearch extends Component {
static contextTypes = {
t: PropTypes.func,
};
static defaultProps = {
error: null,
};
static propTypes = {
onSearch: PropTypes.func,
error: PropTypes.string,
tokenList: PropTypes.object,
};
state = {
searchQuery: '',
};
constructor(props) {
super(props);
const { tokenList } = this.props;
this.tokenList = Object.values(tokenList);
this.tokenSearchFuse = new Fuse(this.tokenList, {
shouldSort: true,
threshold: 0.45,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
{ name: 'name', weight: 0.5 },
{ name: 'symbol', weight: 0.5 },
],
});
}
handleSearch(searchQuery) {
this.setState({ searchQuery });
const fuseSearchResult = this.tokenSearchFuse.search(searchQuery);
const addressSearchResult = this.tokenList.filter((token) => {
return (
token.address &&
searchQuery &&
isEqualCaseInsensitive(token.address, searchQuery)
);
});
const results = [...addressSearchResult, ...fuseSearchResult];
this.props.onSearch({ searchQuery, results });
}
renderAdornment() {
return (
<InputAdornment position="start" style={{ marginRight: '12px' }}>
<SearchIcon color="var(--color-icon-muted)" />
</InputAdornment>
);
}
render() {
const { error } = this.props;
const { searchQuery } = this.state;
return (
<TextField
id="search-tokens"
placeholder={this.context.t('searchTokens')}
type="text"
value={searchQuery}
onChange={(e) => this.handleSearch(e.target.value)}
error={error}
fullWidth
autoFocus
autoComplete="off"
startAdornment={this.renderAdornment()}
/>
);
}
}