Scoutbar Actions

What are scoutbar actions ?

What are scoutbar actions ?

Scoutbar actions powers the scoutbar its self here is an outline of the required props and how they work

createScoutAction

When a user searches for something, the result is a list of actions. These actions are structured by the following props.

interface ActionOptions {
  // programmatically close out the bar after an action
  close?: (val?: boolean) => void;
  // clear current search input data
  clearSearch?: () => void;
}

interface IScoutAction {
  // We create an ID on the fly with the `createScoutAction` function
  id?: string;
  label: string;
  // We create a type on the fly with the `createScoutAction | createScoutSection | createScoutPage` function
  type?: 'scout-action';
  href?: string;
  action?: (
    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
    options: ActionOptions
  ) => void;
  target?: string;
  rel?: string;
  keyboardShortcut?: string[];
  icon?: HTMLElement | string;
  description?: string;
  ariaLabel?: string;
}

Usage

createScoutAction({
  href: '/',
  label: 'Hello there',
  description: 'Here is an example',
  keyboardShortcut: ['y'],
});

createScoutAction({
  action: (e) => console.log(e),
  label: 'Hello there',
  description: 'Here is an example',
  keyboardShortcut: ['y'],
});

createScoutSection

Allows us to section scout actions into a section and fill them with actions

interface IScoutSectionAction {
  children: IScoutAction[];
}

createScoutSection({
  label: 'Navigation',
  children: [
    createScoutAction({
      href: '/',
      label: 'Hello there',
      description: 'Here is an example',
      keyboardShortcut: ['y'],
    }),
    createScoutAction({
      action: (e, { close }) => {
        console.log('hey')
        close()
      },
      label: 'Hello there',
      description: 'Here is an example',
      keyboardShortcut: ['y'],
    }),
  ],
});

createScoutPage

This is very similar to createScoutSection but this time new actions open on a new page

interface IScoutSectionAction {
  children: IScoutAction[];
}

createScoutPage({
  label: 'Navigation',
  children: [
    createScoutAction({
      href: '/',
      label: 'Hello there',
      description: 'Here is an example',
      keyboardShortcut: ['y'],
    }),
    createScoutAction({
      action: (e) => {
        console.log('hey')
        console.log(e)
      },
      label: 'Hello there',
      description: 'Here is an example',
      keyboardShortcut: ['y'],
    }),
  ],
});