1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.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

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,
};