Interface InputDialogProps

Configuration for an options dialog.

interface InputDialogProps {
    autoFocusSel?: string;
    cancelOption?: string;
    createOptionsButton?: ((option, props, isDefaultOption) => ReactNode);
    defaultOption?: string;
    description?: string;
    icon?: ReactNode;
    initialPosition?: RelativePoint;
    initialValue?: string;
    inputLabel?: string;
    inputPlaceHolder?: string;
    inputProps?: HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;
    isModal?: boolean;
    onCancel?: (() => void);
    onDone?: ((results?) => void);
    onHide?: (() => void);
    onInputOption?: ((input?, option?) => void);
    onOption?: ((option, isCancel, isDefault) => void);
    onShow?: (() => void);
    onValidateInputOption?: ((input?, option?) => InputValidationResults | Promise<InputValidationResults>);
    onValidateOption?: ((option?) => boolean | Promise<boolean>);
    open?: boolean;
    options?: string[];
    refWindow?: Ref<InternalWindowElement>;
    title?: string;
}

Hierarchy (view full)

Properties

autoFocusSel? cancelOption? createOptionsButton? defaultOption? description? icon? initialPosition? initialValue? inputLabel? inputPlaceHolder? inputProps? isModal? onCancel? onDone? onHide? onInputOption? onOption? onShow? onValidateInputOption? onValidateOption? open? options? refWindow? title?

Properties

Optional autoFocusSel

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

Optional cancelOption

cancelOption?: string

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

Default Value

'Cancel'

Optional createOptionsButton

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

Optional defaultOption

defaultOption?: string

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

Default Value

The first option

Optional description

description?: string

Display text information for the user to make a decision.

Optional icon

icon?: ReactNode

Display an icon next to the description for additional context

Remarks

Not yet implemented

Optional initialPosition

initialPosition?: RelativePoint

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

Optional initialValue

initialValue?: string

Optional inputLabel

inputLabel?: string

Optional inputPlaceHolder

inputPlaceHolder?: string

Optional inputProps

inputProps?: HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>

Css style for input

Optional isModal

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

Optional onCancel

onCancel?: (() => void)

Type declaration

    • (): void

    • Returns void

Optional onDone

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

Type declaration

    • (results?): void

    • Parameters

      • Optional results: any

      Returns void

Optional onHide

onHide?: (() => void)

Type declaration

    • (): void

    • Returns void

Optional onInputOption

onInputOption?: ((input?, option?) => void)

Type declaration

    • (input?, option?): void

    • Parameters

      • Optional input: string
      • Optional option: string

      Returns void

Optional onOption

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.

Optional onShow

onShow?: (() => void)

Type declaration

    • (): void

    • Returns void

Optional onValidateInputOption

onValidateInputOption?: ((input?, option?) => InputValidationResults | Promise<InputValidationResults>)

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

Remarks

Optional the textProps can be updated via the textFieldProps argument

Optional onValidateOption

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>

Optional open

open?: boolean

Optional options

options?: string[]

The options as a list of strings

Optional refWindow

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

Optional title

title?: string

The title of the options panel

Settings

Member Visibility

Theme

On This Page

autoFocusSelcancelOptioncreateOptionsButtondefaultOptiondescriptioniconinitialPositioninitialValueinputLabelinputPlaceHolderinputPropsisModalonCancelonDoneonHideonInputOptiononOptiononShowonValidateInputOptiononValidateOptionopenoptionsrefWindowtitle