zidane-ui/ keybindings
import { … } from 'zidane-ui/keybindings'ui/src/keybindings/index.ts
Components#
FooterHintComponent#
A footer legend entry: the keys, then what they do (↑ ↓ Navigate).
function FooterHint(props: FooterHintProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | FooterHintProps | See |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| className? | string | Classes merged on the root. |
| keys | readonly string[] | The binding specs, each drawn as a small |
| label | string | What they do ( |
| style? | CSSProperties | Styles on the root. |
KeybindingsProviderComponent#
Provides a KeybindingsHost and optional label overrides to the keybindings hooks and components below it.
function KeybindingsProvider(props: KeybindingsProviderProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | KeybindingsProviderProps | Provider props: the |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The app. |
| host | KeybindingsHost | Where the user's overrides live. |
| labels? | Partial<{ keyHintOr: string }> | Overrides for the built-in strings. Keys you leave out keep the default English label. |
KeyCommandsProviderComponent#
Holds a key command registry and fires its handlers on the document, against the bindings of the nearest
KeybindingsProvider (the defaults without one). AppHostProvider mounts one.
function KeyCommandsProvider(props: KeyCommandsProviderProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | KeyCommandsProviderProps | The optional |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The app. |
| registry? | KeyCommandRegistry | The registry to dispatch. Absent: the provider makes its own. |
KeyHintComponent#
A key binding as keycaps: one .zg-keycap per key (⌘ K), macOS glyphs, alternatives quietly separated.
function KeyHint(props: KeyHintProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | KeyHintProps | See |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| className? | string | Classes merged on the root. |
| size? | 'sm' | 'md' |
|
| spec | string | The binding spec ( |
| style? | CSSProperties | Styles on the root. |
Functions#
bindKeyListenersFunction#
Listens on the document for the given actions' chords (the dispatcher's rules, see the header) and calls the
handler read returns at press time. Returns the function that removes the listeners.
function bindKeyListeners(
actions: readonly KeyAction[],
merged: KeyBindings,
read: (action: KeyAction) => (() => void) | undefined,
): () => voidParameters
| Name | Type | Description |
|---|---|---|
| actions | readonly KeyAction[] | The bound actions, in order: the first matching a chord wins. |
| merged | KeyBindings | The bindings in effect. |
| read | (action: KeyAction) => (() => void) | undefined | The handler of an action now ( |
Returns
() => voidmatchesBindingFunction#
Whether a key event fires a binding. All declared modifiers must be pressed and no others, so 'o' does not match
ctrl+o and 'ctrl+o' does not match ctrl+shift+o. A spec with alternatives (ctrl+w | cmd+w) matches any.
function matchesBinding(event: KeyboardEvent, spec: string | ParsedBinding): booleanParameters
| Name | Type | Description |
|---|---|---|
| event | KeyboardEvent | The key event. |
| spec | string | ParsedBinding | A spec string, or one parsed chord. |
Returns
booleanmodIsMetaFunction#
Whether this platform's mod is ⌘.
function modIsMeta(): booleanReturns
booleanpressChordFunction#
Presses chord where focus is. Returns whether a binding took it (a listener called
preventDefault). A chord that doesn't parse presses nothing and returns false.
function pressChord(chord: string, options?: PressChordOptions): booleanParameters
| Name | Type | Default | Description |
|---|---|---|---|
| chord | string | The chord ( | |
| options? | PressChordOptions | {} | How to resolve |
Returns
booleanresolveChordFunction#
A chord with mod resolved: cmd on macOS, ctrl elsewhere. Other parts stay as written.
function resolveChord(chord: string, mac?: boolean): stringParameters
| Name | Type | Description |
|---|---|---|
| chord | string | The chord ( |
| mac? | boolean | Resolve |
Returns
stringuseHelpKeyFunction#
Calls onOpen on a bare ? outside fields. The listener attaches once; both callbacks are read at press time.
function useHelpKey(onOpen: (() => void) | undefined, blocked?: () => boolean): voidParameters
| Name | Type | Description |
|---|---|---|
| onOpen | (() => void) | undefined | Opens the shortcut reference. Absent: nothing listens. |
| blocked? | () => boolean | Whether something else owns input now (a modal is open). |
useKeybindingsFunction#
Listens on the document for the bound actions' keys and calls their handlers. Handlers are read at press time, so a fresh object each render costs nothing; only the set of bound actions decides what is listened for. The first action (in the caller's order) matching a chord wins.
function useKeybindings(handlers: KeybindingHandlers): voidParameters
| Name | Type | Description |
|---|---|---|
| handlers | KeybindingHandlers | A handler per action to bind. |
useKeybindingsHostFunction#
The KeybindingsHost from the nearest KeybindingsProvider, or null outside one (the defaults apply).
function useKeybindingsHost(): KeybindingsHost | nullReturns
KeybindingsHost | nulluseKeybindingsLabelsFunction#
Returns the keybindings components' strings: the defaults merged with any overrides.
function useKeybindingsLabels(): { keyHintOr: string }Returns
{ keyHintOr: string }useKeyCommandActionsFunction#
The bound actions of the nearest registry, as one space-separated string: re-renders only when the set changes.
function useKeyCommandActions(): stringReturns
stringuseKeyCommandRegistryFunction#
The registry of the nearest KeyCommandsProvider, or null outside one.
function useKeyCommandRegistry(): KeyCommandRegistry | nullReturns
KeyCommandRegistry | nulluseKeyCommandsFunction#
Registers handlers with the nearest KeyCommandsProvider for as long as the component is mounted. A fresh
object each render costs nothing: handlers are read at press time. Outside a provider it does nothing.
function useKeyCommands(commands: KeyCommands): voidParameters
| Name | Type | Description |
|---|---|---|
| commands | KeyCommands | A handler per action this part binds. |
useMergedKeybindingsFunction#
The bindings in effect (defaults plus the host's overrides), re-rendering when the overrides change.
function useMergedKeybindings(): KeyBindingsReturns
Interfaces#
FooterHintPropsInterface#
Props for FooterHint.
interface FooterHintPropsProperties
| Name | Type | Description |
|---|---|---|
| className? | string | Classes merged on the root. |
| keys | readonly string[] | The binding specs, each drawn as a small |
| label | string | What they do ( |
| style? | CSSProperties | Styles on the root. |
KeybindingsProviderPropsInterface#
Props for KeybindingsProvider.
interface KeybindingsProviderPropsProperties
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The app. |
| host | KeybindingsHost | Where the user's overrides live. |
| labels? | Partial<{ keyHintOr: string }> | Overrides for the built-in strings. Keys you leave out keep the default English label. |
KeyCommandsProviderPropsInterface#
Props for KeyCommandsProvider.
interface KeyCommandsProviderPropsProperties
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The app. |
| registry? | KeyCommandRegistry | The registry to dispatch. Absent: the provider makes its own. |
KeyHintPropsInterface#
Props for KeyHint.
interface KeyHintPropsProperties
| Name | Type | Description |
|---|---|---|
| className? | string | Classes merged on the root. |
| size? | 'sm' | 'md' |
|
| spec | string | The binding spec ( |
| style? | CSSProperties | Styles on the root. |
PressChordOptionsInterface#
Options of pressChord.
interface PressChordOptionsProperties
| Name | Type | Description |
|---|---|---|
| mac? | boolean | Resolve |
| target? | EventTarget | Where the key goes. Default: the focused element, else the body. |
Types#
KeybindingHandlersType#
A handler per action the caller binds.
type KeybindingHandlers = KeyCommands