com.sabre.redapp.example3.web.ui.components Sample

This sample contains usage examples of React UI Components that can be used when creating web RedApp. All examples of using individual components are displayed in one modal.

UI Components sample modal

Each example of using the component is in a separate package named as the component.

UI Components webmodule structure

MultiWidgetModal is main react class which initialize individual components.

Components:

Select Widget

This is example usage of Select Widget.

  • Entire logic is in SelectWidgetPart class which is responsible for displaying 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={(value) => this.handleValueChange(value, 'select-airport-domain')}
                  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
    </ControlLabel>
    <SelectWidget id={'select-custom-domain'}
                  customDomain={items}
                  onValueChange={(value) => this.handleValueChange(value, 'select-custom-domain')}
                  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 local handleValueChange method which sets received values in local state, which is displayed below the select widget input.

The picture of the "Select Widget" modal part:

Select widget modal part

Date Picker

This is example usage of Date Picker.

  • Entire logic is in DatePickerPart class which is responsible for displaying a simple form with date picker.

const dFormat = 'DD-MM-YYYY'

handleDateChange = (event: moment.Moment | string) => {
    if (moment.isMoment(event)) {
        this.setState({
            selectedDate: event.format(dFormat)
        });
    } else {
        this.setState({
            selectedDate: event
        });
    }
}

<FormGroup>
    <ControlLabel>
        SRW Date Picker
    </ControlLabel>
    <div>
        <SrwDatePicker
            customDateFormat={dFormat}
            onSelectHandler={this.handleDateChange}
            monthsShown={2}
        />
    </div>
    <div>Selected {this.state.selectedDate}</div>
</FormGroup>

Above example shows simple usage of SrwDatePicker component with the selected type of date formatting set, displaying two months in the popover. Data returned by the component is handled by the handleDateChange method which set received value as local state which is then displayed below the form.

The picture of the "Date Picker" modal part:

Date Picker modal part