Interface OptionsDialogProps

Configuration for an options dialog.

interface OptionsDialogProps {
    autoFocusSel?: string;
    cancelOption?: string;
    createOptionsButton?: ((option, props, isDefaultOption) => ReactNode);
    defaultOption?: string;
    description?: string;
    icon?: ReactNode;
    initialPosition?: RelativePoint;
    isModal?: boolean;
    onCancel?: (() => void);
    onDone?: ((results?) => void);
    onHide?: (() => void);
    onOption?: ((option, isCancel, isDefault) => void);
    onShow?: (() => void);
    onValidateOption?: ((option?) => boolean | Promise<boolean>);
    open?: boolean;
    options?: string[];
    refWindow?: Ref<InternalWindowElement>;
    title?: string;
}

Hierarchy (view full)

Properties

autoFocusSel?: string

Query selector for the element to focus on show.

Remarks

It would be better to honor autoFocus attribute but React is 'hiding' it

cancelOption?: string

Allows for the cancel option to be specified. Allow for special styling.

Default Value

'Cancel'
createOptionsButton?: ((option, props, isDefaultOption) => ReactNode)

Hook for create custom options buttons

Type declaration

    • (option, props, isDefaultOption): ReactNode
    • Parameters

      • option: string
      • props: HTMLAttributes<HTMLButtonElement> & Attributes
      • isDefaultOption: boolean

      Returns ReactNode

Remarks

The option is passed as the children prop and as the second argument

defaultOption?: string

Allows for the option will be the default selected option and the enter key trigger.

Default Value

The first option
description?: string

Display text information for the user to make a decision.

icon?: ReactNode

Display an icon next to the description for additional context

Remarks

Not yet implemented

initialPosition?: RelativePoint

A default position for the window. The default is center at %50, %50.

isModal?: boolean

If true this will show a backdrop

Remarks

Our floating menu achieve modality without a background by listens to global clicks (and focus)

Default Value

false
onCancel?: (() => void)

Type declaration

    • (): void
    • Returns void

onDone?: ((results?) => void)

Type declaration

    • (results?): void
    • Parameters

      • Optional results: any

      Returns void

onHide?: (() => void)

Type declaration

    • (): void
    • Returns void

onOption?: ((option, isCancel, isDefault) => void)

Call when an option is selected.

Type declaration

    • (option, isCancel, isDefault): void
    • Parameters

      • option: string
      • isCancel: boolean
      • isDefault: boolean

      Returns void

Remarks

It is possible that the option can be both a cancel and a default option.

onShow?: (() => void)

Type declaration

    • (): void
    • Returns void

onValidateOption?: ((option?) => boolean | Promise<boolean>)

Call when an option is selected. If false is returned, the the dialog will not close. Notification is not provided but can be supplied via the textFieldProps helperText property.

Type declaration

    • (option?): boolean | Promise<boolean>
    • Parameters

      • Optional option: string

      Returns boolean | Promise<boolean>

open?: boolean
options?: string[]

The options as a list of strings

refWindow?: Ref<InternalWindowElement>

We couldn't use the forwardRef? Revisit this. It seemed to be due to the createPortal returns a ReactPortal not an HTMLElement

title?: string

The title of the options panel