Keybind Dialog

This component wraps the KeybindRecorder component, captures focus, and allows the user to cancel (and thus close) the dialog, and to confirm their input and continue the user experience.

Example

Code Snippet

import React from "react";
import ReactDOM from "react-dom";
import { FluentProvider, type Theme, webLightTheme, webDarkTheme } from "@fluentui/react-components";
import { KeySequence, KeybindDialog } from "react-fluent-keybinds";

const DarkMode: boolean = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme: Theme = DarkMode ? webDarkTheme : webLightTheme;

const Title = "Example Dialog Component";
const Content = "This example dialog accepts a keybind, which is displayed below the triggering button once the keybind is saved."

const [ Sequence, SetSequence ] = useState([ ]);
const [ open, setOpen ] = useState(false);
const onSave = (NewSequence) =>
{
    SetSequence(NewSequence);
};

ReactDOM.render(
    <FluentProvider { ...{ theme } }>
        <Button onClick={ () => { setOpen(true) } }>
            Open Dialog
        </Button>
        <KeybindDialog { ...{
            Content,
            Sequence,
            Title,
            onSave,
            open,
            setOpen }
        }/>
    </FluentProvider>,
    document.getElementById("root"),
);

Table of contents

Type Aliases

• FKeybindDialogOpenData
• FKeybindOpenState
• PKeybindDialog
• SKeybindDialog

Type Aliases

FKeybindDialogOpenData

Ƭ FKeybindDialogOpenData: DialogOpenChangeData & { Type: FKeybindOpenState }

Defined in

Component/KeybindDialog/KeybindDialog.Types.ts:15

---

FKeybindOpenState

Ƭ FKeybindOpenState: "Opened" | "Success" | "Canceled"

The trichotomy of the dialog's open/closed state.

Defined in

Component/KeybindDialog/KeybindDialog.Types.ts:23

---

PKeybindDialog

Ƭ PKeybindDialog: Pick<PKey, "BackgroundColor" | "CornerDirection" | "Color"> & PKeybindRecorder & { Content: string | ReactElement ; Title: string ; onCancel?: () => void ; onOpenChange?: (Event: DialogOpenChangeEvent, Data: FKeybindDialogOpenData) => void ; onSave?: (NewSequence: FDomKey[]) => void ; open: boolean ; setOpen?: (Old: boolean) => void }

Defined in

Component/KeybindDialog/KeybindDialog.Types.ts:31

---

SKeybindDialog

Ƭ SKeybindDialog: Omit<PKeybindDialog, "MaxLength" | "onOpenChange" | "setOpen"> & FFluentDialogOpenChangeEventHandler & { OnCancel: () => void ; OnSave: () => void ; SaveButtonRef: RefObject<HTMLButtonElement> } & FStyledState

Defined in

Component/KeybindDialog/KeybindDialog.Types.ts:68