Add matcher property to actions and pass search to handler function

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## Unreleased
+
+- Add passing the search query to the action handler for dynamic handling
+
+- Add a `matcher` property to actions to allow dynamic matching
 
 ## 1.2.0 (2022-04-21)
 

README.md

@@ -91,6 +91,16 @@ Add the tag to your HTML.
         alert('Your logic to handle');
       },
     },
+    {
+      id: 'Users',
+      title: 'Go to user profile',
+      icon: 'person',
+      matcher: (searchQuery) => searchQuery.match(/.+@.+/),
+      handler: (action, searchQuery) => {
+        // simple handler
+        alert(`Visiting user profile: ${searchQuery}`);
+      },
+    },
     {
       id: 'Theme',
       title: 'Change theme...',
@@ -169,6 +179,7 @@ Array of `INinjaAction` - interface properties below
 | title    | string                  | Title of action                                                                        |
 | hotkey   | string(optional)        | Shortcut to display and register                                                       |
 | handler  | Function(optional)      | Function to execute on select                                                          |
+| matcher  | Function(optional)      | Function to execute on search. Return true if action should be displayed               |
 | mdIcon   | string(optional)        | Material Design font icon name                                                         |
 | icon     | string(optional)        | Html to render as custom icon                                                          |
 | parent   | string(optional)        | If using flat structure use id of actions to make a multilevel menu                    |

dev/index.html

@@ -109,6 +109,16 @@
         section: 'Projects',
       },
       //
+      {
+        id: 'Go to User',
+        title: 'Go to user profile',
+        mdIcon: 'person',
+        matcher: (searchQuery) => searchQuery.match(/.+@.+/),
+        handler: (action, searchQuery) => {
+          alert(`Visiting user profile: ${searchQuery}`);
+        },
+      },
+      //
       {
         id: 'Theme',
         title: 'Change theme...',

docs/index.html

@@ -150,6 +150,16 @@ <h3 class="font-bold pt-2">JavaScript</h3>
             alert('Your logic to handle');
           },
         },
+        {
+          id: 'Users',
+          title: 'Visit user profile',
+          mdIcon: 'person',
+          matcher: (searchQuery) => searchQuery.match(/.+@.+/),
+          handler: (action, searchQuery) => {
+            // simple handler
+            alert(`Visiting user profile: ${searchQuery}`);
+          },
+        },
         {
           id: 'Theme',
           title: 'Change theme...',

src/interfaces/ininja-action.ts

@@ -3,6 +3,7 @@ export interface INinjaAction {
   title: string;
   hotkey?: string;
   handler?: Function;
+  matcher?: Function;
   mdIcon?: string;
   icon?: string;
   parent?: string;

src/ninja-keys.ts

@@ -362,8 +362,13 @@ export class NinjaKeys extends LitElement {
 
     const actionMatches = this._flatData.filter((action) => {
       const regex = new RegExp(this._search, 'gi');
-      const matcher =
-        action.title.match(regex) || action.keywords?.match(regex);
+      let matcher;
+      if (action.matcher) {
+        matcher = action.matcher(this._search);
+      }
+      else {
+        matcher = action.title.match(regex) || action.keywords?.match(regex);
+      }
 
       if (!this._currentRoot && this._search) {
         // global search for items on root
@@ -468,7 +473,7 @@ export class NinjaKeys extends LitElement {
     this._headerRef.value!.focusSearch();
 
     if (action.handler) {
-      const result = action.handler(action);
+      const result = action.handler(action, this._search);
       if (!result?.keepOpen) {
         this.close();
       }