Simple Dropdown
Allows creating a simple dropdown with custom options list.
Usage
In order to be used, the SimpleDropdown has to be imported:
import {SimpleDropdown} from 'sabre-ngv-UIComponents/advancedDropdown/components/SimpleDropdown';Next you need to prepare list of dropdown options, a method for updating list with information which option was chosen and any other optional properties you need. Example options list:
import {Option} from 'sabre-ngv-UIComponents/advancedDropdown/interfaces/Option';
const dropdownOptions: Option[] = [
{label: 'Option 1', value: 'option1'},
{label: 'Option 2', value: 'option2'}
]Then SelectWidget can be used as you want to:
<SimpleDropdown
options={this.dropdownOptions}
onChange={this.onSelectionChange}
/>Properties
The following properties can be defined for simple dropdown component:
| Property | Description |
|---|---|
isMulti (optional) |
Controls if component can handle multiple or one option. Default set to false. |
isSearchable (optional) |
Decides if component will let search through its options content. Default set to false. |
leftIcon (optional) |
Sets left icon image. |
rightIcon (optional) |
Sets right icon image. |
rightIconOpen (optional) |
Sets right icon image when dropdown opened. |
minCharactersForSearch (optional) |
Minimum amount of characters required for search mechanism to trigger, default set to 9. |
closeOnChange (optional) |
Decides if chosen option closes dropdown, default set to true. |
mandatory (optional) |
Disables ability to unmark checked option, default set to true. |
optionRenderer (optional) |
Function responsible for displaying options in dropdown. |
isFocusOnFirstOption (optional) |
Sets focus on first option in dropdown. |
simpleStyle (optional) |
Switches between simple raw styled dropdown and advanced styled, default set to true. |
isFocusOnMainInput (optional) |
Sets focus on main input. |
onChange (optional) |
Function invoked when option gets changed. |
placeholder (optional) |
Placeholder text for |
options |
List of items shown in dropdown. |
hideSearchPlaceholder (optional) |
Decides if search placeholder should be hidden. |
hideSearchIcon (optional) |
Decides if search icon should be hidden. |
onBlur (optional) |
Handle blur events on the control. |
onFocus (optional) |
Handle focus events on the control. |