fix(highlight-matched-substrings): highlight all matches coming from …

…the Google API
ubilabs · Aug 9, 2023 · 195d6c1 · 195d6c1
1 parent bfd0517
commit 195d6c1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 32 deletions.
diff --git a/src/Geosuggest.tsx b/src/Geosuggest.tsx
@@ -372,10 +372,12 @@ export default class GeoSuggest extends React.Component<Props, State> {
           suggests.push({
             ...fixture,
             isFixture: true,
-            matchedSubstrings: {
-              length: userInput.length,
-              offset: fixture.label.indexOf(userInput)
-            },
+            matchedSubstrings: [
+              {
+                length: userInput.length,
+                offset: fixture.label.indexOf(userInput)
+              }
+            ],
             placeId: fixture.placeId || fixture.label
           });
         }
@@ -390,7 +392,7 @@ export default class GeoSuggest extends React.Component<Props, State> {
           label: this.props.getSuggestLabel
             ? this.props.getSuggestLabel(suggest)
             : '',
-          matchedSubstrings: suggest.matched_substrings[0],
+          matchedSubstrings: suggest.matched_substrings,
           placeId: suggest.place_id
         });
       }

diff --git a/src/suggest-item.tsx b/src/suggest-item.tsx
@@ -43,12 +43,8 @@ export default class SuggestItem extends React.PureComponent<Props, unknown> {
   /**
    * Makes a text bold
    */
-  makeBold(element: string, key: string): JSX.Element {
-    return (
-      <b className="geosuggest__item__matched-text" key={key}>
-        {element}
-      </b>
-    );
+  makeBold(element: string) {
+    return <b className="geosuggest__item__matched-text">{element}</b>;
   }
 
   /**
@@ -59,31 +55,30 @@ export default class SuggestItem extends React.PureComponent<Props, unknown> {
       return suggest.label;
     }
 
-    const start: number = suggest.matchedSubstrings.offset;
-    const length: number = suggest.matchedSubstrings.length;
-    const end: number = start + length;
-    const boldPart = this.makeBold(
-      suggest.label.substring(start, end),
-      suggest.label
-    );
+    const parts = [];
 
-    let pre = '';
-    let post = '';
+    let previousEnd = 0;
+
+    for (const {offset: start, length} of suggest.matchedSubstrings) {
+      // Add non-matching substring before and between matches
+      if (start > previousEnd) {
+        parts.push(suggest.label.substring(previousEnd, start));
+      }
 
-    if (start > 0) {
-      pre = suggest.label.slice(0, start);
+      // Add matching substring as bold text
+      const end = start + length;
+      const match = this.makeBold(suggest.label.substring(start, end));
+      parts.push(match);
+
+      previousEnd = end;
     }
-    if (end < suggest.label.length) {
-      post = suggest.label.slice(end);
+
+    // Add non-matching substring after matches
+    if (previousEnd < suggest.label.length) {
+      parts.push(suggest.label.substring(previousEnd));
     }
 
-    return (
-      <span>
-        {pre}
-        {boldPart}
-        {post}
-      </span>
-    );
+    return <span>{parts}</span>;
   }
 
   /**

diff --git a/src/types/suggest.ts b/src/types/suggest.ts
@@ -13,6 +13,6 @@ export interface Suggest {
   readonly matchedSubstrings?: {
     offset: number;
     length: number;
-  };
+  }[];
   readonly className?: string;
 }