Skip Navigation

Select Widget

Allows creating a select widget component with encode/decode support.

select widget

Usage

In order to be used, the SelectWidget has to be imported:

import {SelectWidget} from 'sabre-ngv-UIComponents-inputs/SelectWidget/components/SelectWidget';

Then SelectWidget can be used as you want to:

<SelectWidget domain={Domain.AIRPORT}/>

Properties

The following properties can be defined for select widget component:

Property Description

id (optional)

Id of a component.

domain (optional)

Domain on which the encoding/decoding will be performed.

onValueChange (optional)

Method that sends chosen values as WidgetResult[] to the parent component.

optionsLimit (optional)

Number of options that can be selected, by default set to 1.

customDomain (optional)

Structure that can replace defined domains, defined as an array of CustomDomainUnits:

interface CustomDomainUnit {
    label: string;
    value: string;
}
Note

  • At least one of the Domain and CustomDomain parameters must be passed, otherwise the component will return an empty value and generate an error.

  • If both Domain and CustomDomain parameters were passed, component will use CustomDomain component.

  • Each label and value of CustomDomainUnit must be unique.

  • If CustomDomain parameter was passed, list of all possible options is displayed after focusing component.

defaultValue (optional)

Default value(s) to be set at the beginning.

nextComponentToFocusRef (optional)

Reference to another component, to set the focus on it when the limit of selectable options has been reached. It doesn’t have to be another SelectWidget component, it may be any component with 'focus' option like for e.g. html 'input' field.

showError (optional)

Flag indicating if the component should display an error.

errorMessage (optional)

Error message, if not given, default message will be displayed.

placeholder (optional)

Placeholder text for SelectWidget input.

icon (optional)

Icon class rendered inside SelectWidget input.

onFieldBlur (optional)

Method triggered on component blur. Passes in the latest value of widget.

interface WidgetResult {
    label: string;
    value: string;
    domain: string;
}