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.
96 lines
3.2 KiB
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,
|
|
};
|
|
|