DropdownSelector

The Dropdown Selector is a simplified version of the Bootstrap Dropdown component, designed to automatically create the menu from it's children. It also provides access to the onSelect event method, so that a custom event handler method can be created and passed to the component as a property.

This also allows it to be wrapped by the WithEndpoint hook, so that when a menu item is selected, the related information will be automatically sent to the provided Adapter Endpoint.

As with all JSX components, the list of children can be programmatically created with a Map for a For loop, which allows you to potentially get a list of options from an endpoint, and automatically create or update a dropdown menu with those options.

Properties

• buttonText (string)

  The text to display in the Dropdown button.

• variant (string)

  The style of button to use, based on the standard options within the Bootstrap Library. Defaults to the standard blue "primary" option.

• id (string)

  A unique identifier for the Dropdown menu

• onSelect (javascript function)

  The event handler method that will be called when a dropdown option is selected.

Examples

const onSelectExample = (event) => {
        console.log(event);
    }
...

<DropdownSelector buttonText="Test Dropdown" id="example_dropdown" onSelect={onSelectExample}>
    <Dropdown.Item eventKey="1">First Option</Dropdown.Item>
    <Dropdown.Item eventKey="2">Second Option</Dropdown.Item>
    <Dropdown.Item eventKey="Addition">Addtional Option</Dropdown.Item>
</DropdownSelector>

const [selectedOption, changeSelectedOption] = useState("Option First"); //using a hook to store the Option selected
const options_list = ["Option First", "Option two", "more Option"];
...

<DropdownSelector buttonText={selectedOption} id="automatic_dropdown" onSelect={changeSelectedOption}>
    {options_list.map(
        (selection, index) =>
        (
            <Dropdown.Item eventKey={selection} key={index} active={selection == selectedOption}>{selection}</Dropdown.Item>
        )
    )}
</DropdownSelector>