Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface KeyboardMovementOptions<D, CE, IE>

The options for custom keyboard movement.

Type parameters

  • D = unknown

    the type of each item within the item list

  • CE: HTMLElement = HTMLElement

    the type of the DOM element for the keyboard event handler.

  • IE: HTMLElement = HTMLElement

    the type of the DOM element for the keyboard event handler.

Hierarchy

Index

Properties

Methods

Properties

decrementKeys

decrementKeys: readonly IncrementMovementKey[]

The keys that can trigger a move to the previous item. If the loopable config is enabled, this will loop to the last item if the first item is currently "focused".

Optional findMatchIndex

findMatchIndex?: (value: string, values: readonly string[], startIndex: number, isSelfMatchable?: boolean) => number

Type declaration

    • (value: string, values: readonly string[], startIndex: number, isSelfMatchable?: boolean): number

    • A function that is used to find the next match index within a list of values by comparing the start values ignoring case.

      If a match can not be found from the search string, -1 will be returned. The search value is self-matchable by default, but it can be omitted by disabling the isSelfMatchable argument. This will make a self-match return -1.

      internal

      Parameters

      • value: string

        The current search value

      • values: readonly string[]

        A list of values to search within

      • startIndex: number

        The index within the values list to start the search from

      • isSelfMatchable: boolean = true

        Boolean if the current index can be included in the search

      Returns number

focusedIndex

focusedIndex: number

The currently focused index within the item list. This will need to be updated due to the onChange callback being called for this hook to work as it is fully "controlled" by a parent hook/component.

Optional getItemValue

getItemValue?: GetItemValue<D>

A function that will get a string value from each item. The default implementation will:

  • return a number as a string
  • return a string as itself
  • return the result of item() if it is a function (this will also be used if the valueKey on an object is a function).
  • return item[valueKey] if it's an object (this uses typeof item === "object")
  • return the empty string for all other data types

incrementKeys

incrementKeys: readonly IncrementMovementKey[]

The keys that can trigger a move to the next item. If the loopable config is enabled, this will loop to the first item if the last item is currently "focused".

items

items: readonly D[]

The list of items that should be searched whenever the user types a letter.

jumpToFirstKeys

jumpToFirstKeys: readonly JumpMovementKey[]

The keys that can trigger a move to the first item.

jumpToLastKeys

jumpToLastKeys: readonly JumpMovementKey[]

The keys that can trigger a move to the last item.

Optional loopable

loopable?: boolean

Boolean if the keyboard movement should be able to loop around once it has reached the start or end of all the items.

Optional onKeyDown

onKeyDown?: KeyboardEventHandler<CE>

An optional onKeyDown event handler that should be merged with the search functionality.

Note: This will be called before the search functionality is triggered.

Optional resetTime

resetTime?: number

The amount of time that a "search" value should be kept before resetting. The default value works for most cases, but it might be nice to configure it based on your use case.

Optional searchable

searchable?: boolean

Boolean if the movement should also include printable characters search movement.

Optional stopPropagation

stopPropagation?: boolean

Boolean if the event should trigger event.stopPropagation() when the custom keyboard movement is triggered. This should generally be kept as false or undefined by default, but enabled when creating more complex 2-dimensional movement cases such as grids.

Optional valueKey

valueKey?: string

The key to use to get a value string if the item is an object.

Methods

onChange

Generated using TypeDoc