packages/components/hooks/helpers/search.tsx

   1 import { normalize } from '@proton/shared/lib/helpers/string';
   2
   3 /**
   4  *  Returns a formatted JSX with all matches wrapped with <b></b>
   5  */
   6 export const getMatch = (
   7     input: string | undefined,
   8     match: string,
   9     getHighlightedText = (str: string) => <mark className="is-light">{str}</mark>
  10 ) => {
  11     if (!input) {
  12         return input;
  13     }
  14     const parts = normalize(input, true).split(match);
  15     if (parts.length < 2) {
  16         return;
  17     }
  18     const { result } = parts.reduce(
  19         (acc, part, partIndex) => {
  20             const matchPart = (
  21                 <>
  22                     {acc.result}
  23                     {input.substring(acc.currentIdx, acc.currentIdx + part.length)}
  24                     {partIndex !== parts.length - 1 && getHighlightedText(match)}
  25                 </>
  26             );
  27             return { result: matchPart, currentIdx: acc.currentIdx + part.length + match.length };
  28         },
  29         { result: <></>, currentIdx: 0 }
  30     );
  31     return result;
  32 };