A Metamask fork with Infura removed and default networks editable
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
ciphermask/ui/pages/settings/settings-search-list/settings-search-list.js

96 lines
3.2 KiB

import React, { useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { highlightSearchedText } from '../../../helpers/utils/settings-search';
import { I18nContext } from '../../../contexts/i18n';
import IconCaretRight from '../../../components/ui/icon/icon-caret-right';
export default function SettingsSearchList({ results, onClickSetting }) {
const t = useContext(I18nContext);
useEffect(highlightSearchedText, [results]);
return (
<div className="settings-page__header__search__list">
{results.slice(0, 5).map((result) => {
const { image, tab, section, id } = result;
return (
Boolean(image || tab || section) && (
<div key={`settings_${id}`}>
<div
className="settings-page__header__search__list__item"
onClick={() => onClickSetting(result)}
>
<img
className="settings-page__header__search__list__item__icon"
src={`./images/${image}`}
/>
<span
id={`menu-tab_${id}`}
className={classnames(
'settings-page__header__search__list__item__tab',
{
'settings-page__header__search__list__item__tab-multiple-lines':
tab === t('securityAndPrivacy'),
},
)}
>
{tab}
</span>
<IconCaretRight
size={16}
className="settings-page__header__search__list__item__caret"
/>
<span
id={`menu-section_${id}`}
className={classnames(
'settings-page__header__search__list__item__section',
{
'settings-page__header__search__list__item__section-multiple-lines':
tab === t('securityAndPrivacy') || tab === t('alerts'),
},
)}
>
{section}
</span>
</div>
</div>
)
);
})}
{results.length === 0 && (
<div
className="settings-page__header__search__list__item"
style={{ cursor: 'auto', display: 'flex' }}
>
<span className="settings-page__header__search__list__item__no-matching">
{t('settingsSearchMatchingNotFound')}
</span>
</div>
)}
<div
className="settings-page__header__search__list__item"
style={{ cursor: 'auto', display: 'flex' }}
>
<span className="settings-page__header__search__list__item__request">
{t('missingSetting')}
</span>
<a
href="https://community.metamask.io/c/feature-requests-ideas/13"
target="_blank"
rel="noopener noreferrer"
key="need-help-link"
className="settings-page__header__search__list__item__link"
>
{t('missingSettingRequest')}
</a>
</div>
</div>
);
}
SettingsSearchList.propTypes = {
results: PropTypes.array,
onClickSetting: PropTypes.func,
};