Returns true if the provided property is a Placeholder component from Belle.
Returns true if the provided property is a Option component from Belle.
Returns true if the provided property is a Separator component from Belle.
Verifies that the children is an array containing only Options & at maximum one Placeholder.
Update hover style for the speficied styleId.
Returns true in case there one more element in the list.
Returns true in case there is one previous element in the list.
Returns an object with properties that are relevant for the wrapping div of the selected option.
Returns an object with properties that are relevant for the wrapping div of the selected option.
Returns an object with properties that are relevant for the wrapping div of the selected option.
Returns an object with properties that are relevant for the wrapping div of the selected option.
Select component.
In its simplest form the select component behaves almost identical to the native HTML select which the exception that it comes with beautiful styles.
Example:
<Select defaultValue="rome">
<Option value="vienna">Vienna</Option>
<Option value="rome">Rome</Option>
</Select>
For more advanced examples please see: nikgraf.github.io/belle/#/component/select
This component was inpired by:
- Jet Watson: https://github.com/JedWatson/react-select
- Instructure React Team: https://github.com/instructure-react/react-select-box
Generates the style-id & inject the focus & hover style.
In case shouldPositionOptions is active the scrollTop position is stored to be applied later on. The menu is hidden to make sure it is not displayed beofre repositioned.
In case shouldPositionOptions is active when opening the menu it is repositioned & switched to be visible.
Remove a component’s associated styles whenever it gets removed from the DOM.
Update the focusedOption based on Option the user is touching.
Unfortunately updating the focusedOption only works in case the menu is not scrollable. If a setState would be triggered during a touch with the intention to scroll the setState would trigger a re-render & prevent the scrolling.
Identifies if the menu is scrollable.
Triggers a change event after the user touched on an Option.
Triggers a change event after the user touched on an Option.
Triggers a change event after the user clicked on an Option.
In order to inform the user which element in the document is active the component keeps track of when it’s de-selected and depending on that close the menu.
In order to inform the user which element in the document is active the component keeps track of when it’s de-selected and depending on that close the menu.
In order to inform the user which Option is active the component keeps track of when an option is in focus by the user and depending on that provide a visual indicator.
Initiate the toggle for the menu.
Toggle the menu after a user touched it & resets the pressed state for to toggle.
Reset the precondition to initialize a toggle of the menu.
Set isActive to true on mouse-down.
Set isActive to false on mouse-up.
Set isActive to false on mouse-up.
Set isActive to false on is context menu opens on select’s div.
Update focus for the options for an already open menu.
The user experience of HTML’s native select is good and the goal here is to achieve the same behaviour.
- Focus on the first entry in case no options is focused on.
- Switch focus to the next option in case one option already has focus.
Update focus for the options for an already open menu.
The user experience of HTML’s native select is good and the goal here is to achieve the same behaviour.
- Focus on the last entry in case no options is focused on.
- Switch focus to the previous option in case one option already has focus.
After the user pressed the Enter or Space key for an already open
menu the focused option is selected.
Same as _onClickAtOption this update the state & dispatches a change event.
Manages the keyboard events.
In case the Select is in focus, but closed ArrowDown, ArrowUp, Enter and Space will result in opening the menu.
In case the menu is already open each key press will have different effects already documented in the related methods.
Pressing Escape will close the menu.
Toggle the menu after a user clicked on it.
Returns the index of the entry with a certain value from the component’s children.
The index search includes only option components.
Returns the value of the child with a certain index.
After an option has been selected the menu gets closed and the selection processed.
Depending on the component’s properties the value gets updated and the provided change callback for onUpdate or valueLink is called.