mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-04 23:14:56 +01:00
085126d275
* 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>
88 lines
2.2 KiB
JavaScript
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()}
|
|
/>
|
|
);
|
|
}
|
|
}
|