mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 23:44: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>
115 lines
3.1 KiB
JavaScript
115 lines
3.1 KiB
JavaScript
import React, { useState, useContext } 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 { I18nContext } from '../../../../contexts/i18n';
|
|
import SearchIcon from '../../../../components/ui/icon/search-icon';
|
|
|
|
export default function CustomContentSearch({
|
|
onSearch,
|
|
error,
|
|
networksList,
|
|
searchQueryInput,
|
|
}) {
|
|
const t = useContext(I18nContext);
|
|
const [searchIconColor, setSearchIconColor] = useState(
|
|
'var(--color-icon-muted)',
|
|
);
|
|
|
|
const networksListArray = Object.values(networksList);
|
|
const networksSearchFuse = new Fuse(networksListArray, {
|
|
shouldSort: true,
|
|
threshold: 0.2,
|
|
location: 0,
|
|
distance: 100,
|
|
maxPatternLength: 32,
|
|
minMatchCharLength: 1,
|
|
keys: ['label', 'labelKey'],
|
|
});
|
|
|
|
const handleSearch = async (searchQuery) => {
|
|
if (searchQuery === '') {
|
|
setSearchIconColor('var(--color-icon-muted)');
|
|
} else {
|
|
setSearchIconColor('var(--color-icon-alternative)');
|
|
}
|
|
|
|
const fuseSearchResult = networksSearchFuse.search(searchQuery);
|
|
const results = searchQuery ? [...fuseSearchResult] : networksListArray;
|
|
await onSearch({ searchQuery, results });
|
|
};
|
|
|
|
const renderStartAdornment = () => {
|
|
return (
|
|
<InputAdornment position="start">
|
|
<SearchIcon color={searchIconColor} />
|
|
</InputAdornment>
|
|
);
|
|
};
|
|
|
|
const renderEndAdornment = () => {
|
|
return (
|
|
<>
|
|
{searchQueryInput && (
|
|
<InputAdornment
|
|
className="imageclosectn"
|
|
position="end"
|
|
onClick={() => handleSearch('')}
|
|
>
|
|
<i
|
|
className="fa fa-times networks-tab__imageclose"
|
|
width="17"
|
|
heigth="17"
|
|
title="Close"
|
|
/>
|
|
</InputAdornment>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<TextField
|
|
id="search-networks"
|
|
data-testid="search-networks"
|
|
placeholder={t('customContentSearch')}
|
|
type="text"
|
|
value={searchQueryInput}
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
error={error}
|
|
fullWidth
|
|
autoFocus
|
|
autoComplete="off"
|
|
classes={{
|
|
inputRoot: 'networks-tab__networks-list__custom-search-network',
|
|
}}
|
|
startAdornment={renderStartAdornment()}
|
|
endAdornment={renderEndAdornment()}
|
|
/>
|
|
);
|
|
}
|
|
|
|
CustomContentSearch.propTypes = {
|
|
/**
|
|
* The function searches the list of networks depending on
|
|
* the entered parameter and returns the entire list of
|
|
* networks when the user clicks on 'X' on the search tab
|
|
*/
|
|
onSearch: PropTypes.func,
|
|
/**
|
|
* An error message is displayed when a user searches for a specific
|
|
* network on the search tab and that network does not exist
|
|
* in the networks list
|
|
*/
|
|
error: PropTypes.string,
|
|
/**
|
|
* The list of networks available for search.
|
|
*/
|
|
networksList: PropTypes.array,
|
|
/**
|
|
* Search for a specific network(s) by label or labelKey
|
|
*/
|
|
searchQueryInput: PropTypes.string,
|
|
};
|