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 { Icon, ICON_NAMES } from '../../../components/component-library'; import { Size } from '../../../helpers/constants/design-system'; export default function SettingsSearchList({ results, onClickSetting }) { const t = useContext(I18nContext); useEffect(highlightSearchedText, [results]); return (
{results.slice(0, 5).map((result) => { const { icon, iconName, tabMessage, sectionMessage, route } = result; return ( Boolean(icon || tabMessage || sectionMessage) && (
onClickSetting(result)} > {iconName ? ( ) : ( )} {tabMessage(t)} {sectionMessage(t)}
) ); })} {results.length === 0 && (
{t('settingsSearchMatchingNotFound')}
)}
{t('missingSetting')} {t('missingSettingRequest')}
); } SettingsSearchList.propTypes = { results: PropTypes.array, onClickSetting: PropTypes.func, };