Closes #95, Add support for multiple highlights (#97)

* handle multiple keys
* add unit tests
* add docs
* remove important from css
* refactor suggestions to reduce cognitive complexity

Author: asabaylus

README.md

@@ -71,8 +71,8 @@ const commands = [{
 * ```options``` options controls how fuzzy search is configured. Note: use at your own risk, this is likley to change in the future. The search options are derived from these [fuzzysort options](https://github.com/farzher/fuzzysort#options). However the command palette options prop must have the following values included to function correctly:
 
   ```js
-    key: "name", // must be "name"
-    keys: ["name"], // must include "name"
+    key: "name", // default is "name"
+    keys: ["name"], // default is "name"
 
     // other options may be freely configured
     threshold: -Infinity, 
@@ -126,7 +126,7 @@ const commands = [{
   ```
   see: https://github.com/moroshko/react-autosuggest#rendersuggestion-required.
 
-  Note: the _suggestion.hightlight_ will be passed and contains the rendered markup from (fuzzysort)[farzher/fuzzysort#fuzzysorthighlightresult-openb-closeb], see the ```options``` prop.
+  Note: the _suggestion.hightlight_ will be passed and contains the rendered markup from [fuzzysort](farzher/fuzzysort#fuzzysorthighlightresult-openb-closeb), see the ```options``` prop. If the ```options``` prop contains an array of "keys" then an highlights will contain an array of matches, see: [fuzzysort advanced usage](https://github.com/farzher/fuzzysort#advanced-usage) or checkout the [sampleChromeCommand.js](examples/sampleChromeCommand.js)
 
   See [a full example](examples/sampleAtomCommand.js)
 

examples/sampleChromeCommand.css

@@ -1,10 +1,15 @@
 .chrome-category {
-    color: #fff;
+    color: rgb(255, 255, 255);
     margin-right: 6px;
     border-radius: 2px;
     padding: 1.2px 3px;
 }
 
+.chrome-category > b {
+    color: rgb(255, 255, 255);
+    font-weight: bolder;
+}
+
 .chrome-shortcut {
     float: right;
     margin-right: 2px;

examples/sampleChromeCommand.js

@@ -2,15 +2,34 @@ import React from "react";
 import "./sampleChromeCommand.css";
 
 export default function sampleChromeCommand(suggestion) {
-  const { name, highlight, category, shortcut } = suggestion;
+  const { name, highlight = [], category, shortcut } = suggestion;
+
+  // handle simple highlight when searching a single key
+  if (!Array.isArray(highlight)) {
+    return (
+      <div className="chrome-suggestion">
+        <span className={`chrome-category ${category}`}>{category}</span>
+        <span dangerouslySetInnerHTML={{ __html: highlight || name }} />
+        <kbd className="chrome-shortcut">{shortcut}</kbd>
+      </div>
+    );
+  }
+
+  // handle multiple highlights when searching multiple keys, see:
+  // https://github.com/farzher/fuzzysort#advanced-usage
+  // Note that we are passing "keys" to the fuzzysort options, ex:
+  // <CommandPalette
+  //   commands={commands}
+  //   options={{keys: ["name", "category"]}}
+  //   renderCommand={sampleChromeCommand}
+  // />
   return (
     <div className="chrome-suggestion">
-      <span className={`chrome-category ${category}`}>{category}</span>
-      {highlight ? (
-        <span dangerouslySetInnerHTML={{ __html: highlight }} />
-      ) : (
-        <span>{name}</span>
-      )}
+      <span
+        dangerouslySetInnerHTML={{ __html: highlight[1] || category }}
+        className={`chrome-category ${category}`}
+      />
+      <span dangerouslySetInnerHTML={{ __html: highlight[0] || name }} />
       <kbd className="chrome-shortcut">{shortcut}</kbd>
     </div>
   );

src/render-command.js

@@ -18,10 +18,10 @@ RenderCommand.propTypes = {
   /** a single suggestion that appears in the command palette. It must have a _name_ and
    * a _command_. The _name_ is a user friendly string that will be display to the user.
    * The command is a function that will be executed when the user clicks or presses the
-   * enter key. */
+   * enter key. For single match a _highlight_ string will be passed, for mutliple mathes the _highlight_ should be an array */
   suggestion: PropTypes.shape({
     name: PropTypes.string.isRequired,
-    highlight: PropTypes.string,
+    highlight: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
     command: PropTypes.func.isRequired
   }),
 

src/suggestions.js

@@ -1,12 +1,31 @@
 import fuzzysort from "fuzzysort";
 
-// Teach Autosuggest how to calculate suggestions for any given input value.
-export default function getSuggestions(value = "", allCommands, options) {
-  // return all commands when user didnt suggest a specific term
-  if (!value) {
-    return allCommands;
+function getSuggestionHighlights(suggestion) {
+  // if there's more than one suggestion, retun an array of
+  // highlighted results. ex: ["first *result*", "second *result*"]
+  if (Array.isArray(suggestion) && suggestion.length >= 2) {
+    return suggestion.map(result => fuzzysort.highlight(result));
   }
+  // otherwise return the single suggestion as a string. ex:
+  // "only *result*"
+  return fuzzysort.highlight(suggestion[0]);
+}
+
+// format the output to include a code higlight for innerHTML
+// and the command to invoke
+function formatSuggestions(filteredSuggestions) {
+  return filteredSuggestions.map(suggestion => {
+    const opts = {
+      name: suggestion.obj.name,
+      command: suggestion.obj.command,
+      highlight: getSuggestionHighlights(suggestion)
+    };
+    return { ...opts, ...suggestion.obj };
+  });
+}
 
+// Teach Autosuggest how to calculate suggestions for any given input value.
+const getSuggestions = function(value, allCommands, options) {
   // TODO: preparing fuzzysort results make them much faster
   // however prepare is expensiveand should only be run when
   // the commands change lodash.once get close to this
@@ -18,23 +37,16 @@ export default function getSuggestions(value = "", allCommands, options) {
 
   // If the user specified an autosuggest term
   // search for close matches
-  const filteredSuggestions = fuzzysort.go(value, allCommands, options);
+  const suggestionResults = fuzzysort.go(value, allCommands, options);
 
-  // format the output to include a code higlight for innerHTML
-  // and the command to invoke
-  const formattedSuggestions = filteredSuggestions.map(suggestion => {
-    const opts = {
-      name: suggestion.obj.name,
-      command: suggestion.obj.command,
-      highlight: fuzzysort.highlight(suggestion[0])
-    };
-    return { ...opts, ...suggestion.obj };
-  });
-
-  // When the user specified a search term but there we no matches found
-  // return all the commands
-  if (!formattedSuggestions.length) return allCommands;
+  // if the user didnt suggest a specific term or there's a search term
+  // but no matches were found return all the commands
+  if (!value || !suggestionResults.length) {
+    return allCommands;
+  }
 
   // Otherwise return the search results
-  return formattedSuggestions;
-}
+  return formatSuggestions(suggestionResults);
+};
+
+export default getSuggestions;

src/suggestions.test.js

@@ -35,4 +35,31 @@ describe("getSuggestions", () => {
       expect(commands.length).toBe(2);
     });
   });
+
+  describe("a value was provide with mutiple keys to search", () => {
+    it("should return the matching command with multple highlights", () => {
+      fuzzysortOptions.keys = ["name", "category"];
+      const matchName = getSuggestions(
+        "Imports",
+        allCommands,
+        fuzzysortOptions
+      );
+      expect(matchName[0]).toMatchObject({
+        name: "Stop All Data Imports",
+        category: "Command",
+        highlight: ["Stop All Data <b>Imports</b>", null]
+      });
+
+      const matchCategory = getSuggestions(
+        "Com",
+        allCommands,
+        fuzzysortOptions
+      );
+      expect(matchCategory[0]).toMatchObject({
+        name: "Stop All Data Imports",
+        category: "Command",
+        highlight: [null, "<b>Com</b>mand"]
+      });
+    });
+  });
 });

stories/index.stories.js

@@ -259,4 +259,19 @@ storiesOf("Command Palette", module)
         open
       />
     );
+  })
+  .add("with multiple highlights", () => {
+    const opts = {
+      keys: ["name", "category"]
+    };
+    return (
+      <CommandPalette
+        commands={commands}
+        options={opts}
+        maxDisplayed={10}
+        renderCommand={sampleChromeCommand}
+        theme={chrome}
+        open
+      />
+    );
   });

themes/chrome.css

@@ -79,7 +79,7 @@
   cursor: pointer;
 }
 
-.chrome-suggestion b {
+.chrome-suggestion > b {
   color: rgb(30, 30, 30);
   font-weight: bold;
 }