diff --git a/src/components/highlight/_highlight_all.tsx b/src/components/highlight/_highlight_all.tsx index a84d205aa51..13ae97c601e 100644 --- a/src/components/highlight/_highlight_all.tsx +++ b/src/components/highlight/_highlight_all.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { memo, useMemo, FunctionComponent } from 'react'; +import React, { useMemo, FunctionComponent } from 'react'; import escapeRegExp from 'lodash/escapeRegExp'; import type { _SharedSubcomponentProps } from './highlight'; @@ -17,46 +17,43 @@ import type { _SharedSubcomponentProps } from './highlight'; * * Uses regex rather than indexOf/while loops for easier dev maintainability */ -export const HighlightAll: FunctionComponent<_SharedSubcomponentProps> = memo( - ({ - searchSubject, - searchValue: _searchValue, - isStrict, - highlightComponent: HighlightComponent = 'mark', - }) => { - const searchValue = useMemo(() => { - return Array.isArray(_searchValue) - ? _searchValue.map(escapeRegExp).join('|') - : escapeRegExp(_searchValue); - }, [_searchValue]); +export const HighlightAll: FunctionComponent<_SharedSubcomponentProps> = ({ + searchSubject, + searchValue: _searchValue, + isStrict, + highlightComponent: HighlightComponent = 'mark', +}) => { + const searchValue = useMemo(() => { + return Array.isArray(_searchValue) + ? _searchValue.map(escapeRegExp).join('|') + : escapeRegExp(_searchValue); + }, [_searchValue]); - const chunks = useMemo(() => { - const regex = new RegExp(searchValue, isStrict ? 'g' : 'gi'); - const matches = [...searchSubject.matchAll(regex)].map((match) => ({ - start: match.index || 0, - end: (match.index || 0) + match[0].length, - })); + const chunks = useMemo(() => { + const regex = new RegExp(searchValue, isStrict ? 'g' : 'gi'); + const matches = [...searchSubject.matchAll(regex)].map((match) => ({ + start: match.index || 0, + end: (match.index || 0) + match[0].length, + })); - return fillInChunks(matches, searchSubject.length); - }, [searchValue, searchSubject, isStrict]); + return fillInChunks(matches, searchSubject.length); + }, [searchValue, searchSubject, isStrict]); - return ( - <> - {chunks.map((chunk) => { - const { end, highlight, start } = chunk; - const value = searchSubject.substring(start, end); + return ( + <> + {chunks.map((chunk) => { + const { end, highlight, start } = chunk; + const value = searchSubject.substring(start, end); - return highlight ? ( - {value} - ) : ( - value - ); - })} - - ); - } -); -HighlightAll.displayName = '_HighlightAll'; + return highlight ? ( + {value} + ) : ( + value + ); + })} + + ); +}; /** * Chunk utility diff --git a/src/components/highlight/_highlight_first.tsx b/src/components/highlight/_highlight_first.tsx index 7a56823e3e1..2b9bbb06c03 100644 --- a/src/components/highlight/_highlight_first.tsx +++ b/src/components/highlight/_highlight_first.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { memo, FunctionComponent } from 'react'; +import React, { FunctionComponent } from 'react'; import { _SharedSubcomponentProps } from './highlight'; @@ -16,49 +16,44 @@ import { _SharedSubcomponentProps } from './highlight'; * * Uses indexOf for performance (which does matter for, e.g. EuiSelectable searching) */ -export const HighlightFirst: FunctionComponent<_SharedSubcomponentProps> = memo( - ({ - searchSubject, - searchValue, - isStrict, - highlightComponent: HighlightComponent = 'mark', - }) => { - if (Array.isArray(searchValue)) { - throw new Error( - 'Cannot parse multiple search strings without `highlightAll` enabled' - ); - } +export const HighlightFirst: FunctionComponent<_SharedSubcomponentProps> = ({ + searchSubject, + searchValue, + isStrict, + highlightComponent: HighlightComponent = 'mark', +}) => { + if (Array.isArray(searchValue)) { + throw new Error( + 'Cannot parse multiple search strings without `highlightAll` enabled' + ); + } - const normalizedSearchSubject = isStrict - ? searchSubject - : searchSubject.toLowerCase(); - const normalizedSearchValue = isStrict - ? searchValue - : searchValue.toLowerCase(); + const normalizedSearchSubject = isStrict + ? searchSubject + : searchSubject.toLowerCase(); + const normalizedSearchValue = isStrict + ? searchValue + : searchValue.toLowerCase(); - const indexOfMatch = normalizedSearchSubject.indexOf(normalizedSearchValue); - if (indexOfMatch === -1) { - return <>{searchSubject}; - } + const indexOfMatch = normalizedSearchSubject.indexOf(normalizedSearchValue); + if (indexOfMatch === -1) { + return <>{searchSubject}; + } - const preMatch = searchSubject.substring(0, indexOfMatch); - const match = searchSubject.substring( - indexOfMatch, - indexOfMatch + searchValue.length - ); - const postMatch = searchSubject.substring( - indexOfMatch + searchValue.length - ); + const preMatch = searchSubject.substring(0, indexOfMatch); + const match = searchSubject.substring( + indexOfMatch, + indexOfMatch + searchValue.length + ); + const postMatch = searchSubject.substring(indexOfMatch + searchValue.length); - return ( - // Note: React 16/17 will render empty strings in the DOM. The - // `|| undefined` prevents this & keeps snapshots the same for all versions - <> - {preMatch || undefined} - {match} - {postMatch || undefined} - - ); - } -); -HighlightFirst.displayName = '_HighlightFirst'; + return ( + // Note: React 16/17 will render empty strings in the DOM. The + // `|| undefined` prevents this & keeps snapshots the same for all versions + <> + {preMatch || undefined} + {match} + {postMatch || undefined} + + ); +};