Constructor
# <SelectInput value name color options onChange />
Sets up the component state
PropTypes:
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
value |
string | Yes | The value of the select (the current selected option or a custom one-time placeholder value) | |
name |
string | Yes | The select input's name | |
color |
enum | Yes | The component's background color. See options. | |
options |
arrayOf | Yes | Options for select component | |
onChange |
func | Yes | Select change handler (handles option changes) |
Members
string
# _maxLengthString
The maximum-length string of all selection options.
Used to size the component properly.
# _selectorRef
A reference to the outermost div element for this component.
Uses a React Ref.
# state
SelectInput component state
Properties:
| Name | Type | Description |
|---|---|---|
value |
string | The current value of the select (the current selected option). |
showDropdown |
boolean | Indicates if the options dropdown should be shown |
componentWidth |
number | The current width of the component |
componentHeight |
number | The current height of the component |
didScreenSizeChange |
boolean | Indicates if the screen size changed |
Methods
# componentDidMount()
Adds a window resize listener.
Updates state with the component's width and height.
# componentDidUpdate()
Updates the actual value of the select.
Updates state with the component's width and height if needed.
# componentWillUnmount()
Removes the window resize listener
# getArrowClassList() → {string}
Gets the CSS classes for the selector arrow
A string of class names
string
# getMaxLengthString() → {string}
Gets the maximum length string based on all given selection options, as well as the provided value from props
The maximum length string
string
# getOptions()
Creates option elements based on provided options from props.
This is a custom version of the option HTML element.
An array of option elements (JSX)
# getOptionsClassList() → {string}
Gets the CSS classes for the options container element
A string of class names
string
# optionButtonClickedHandler()
Calls the onChange handler with the selected option.
Updates state to close the options dropdown.
Parameters:
| Type | Description |
|---|---|
| number | The index of the option clicked |
# render()
Renders the SelectInput component
# selectorButtonClickedHandler()
Opens or closes the options dropdown
# windowSizeChangedHandler()
Updates state to trigger a component resize if needed