com.sabre.redapp.example3.web.select.widget Sample

This sample showing how to use Select Widget.

Sample contains two modals:

  • SelectWidgetModal which opens a simple form with two component instances.

    • First one with given AIRPORT domain, optionsLimit property set to 3, nextComponentToFocusRef set to the second instance of SelectWidget and defaultValue set to 'KRK'.

<FormGroup key={'select-airport-domain'}>
    <ControlLabel>
        Select Widget - AIRPORT Domain
    </ControlLabel>
    <SelectWidget id={'select-airport-domain'}
                  domain={Domain.AIRPORT}
                  optionsLimit={3}
                  onValueChange={this.props.updateProps}
                  defaultValue={'KRK'}
                  nextComponentToFocusRef={this.selectWidgetRef}
    />
</FormGroup>

  • Second one with given customDomain:

private selectWidgetRef: React.ReactInstance;
const items = [
    {"label": "Economic", "value": "ECO"},
    {"label": "Business", "value": "BUS"},
    {"label": "Premium", "value": "PRE"}
]
<FormGroup key={'select-custom-domain'}>
    <ControlLabel>
        Select Widget - Custom Domain with multiple options
    </ControlLabel>
    <SelectWidget id={'select-custom-domain'}
                  customDomain={items}
                  onValueChange={this.props.updateProps}
                  ref={ref => this.selectWidgetRef = ref}
    />
</FormGroup>
Note
 The reference to this instance is passed to the local selectWidgetRef variable in order to set it in the previous SelectWidget instance.

In both cases onValueChange parameter was set to updateProps which sets received values in global store to be used it later.

The picture of the "Select Widget" modal:

Modal with above select widgets

  • ResultsModal which opens after clicking the "Submit" button in the above modal. It is a simple component that shows value selected in the previous step, which were saved in the global store by the updateProps method.

The picture of the "Select Widget Results" modal:

Modal with select widgets results