Dropdown
Dropdown component is a base component which manages the positioning and keyboard events of its content. Under the hood it uses 2 libraries:
- [Popper.js](https://popper.js.org) - a positioning engine which calculate the position of an element to make it possible to position it near a given reference element,
- [React Popper](https://github.com/FezVrasta/react-popper) - React wrapper around Popper.js
Usage of popper props (`eventsEnabled, modifiers, placement, positionFixed, referenceElement`) is described in [Popper.js docs](https://popper.js.org/popper-documentation.html).
Drop menu should appear above other UI elements (use appropriate z-index).
By default menu opens below the trigger, along the left side. If there’s not enough room, the menu can appear on the left, right, or above the trigger.
Using Esc key closes the drop menu and moves focus back to the menu trigger.
It's available only for React application.
```js
const dropdownPositions = [
"auto",
"auto-end",
"auto-start",
"bottom",
"bottom-end",
"bottom-start",
"left",
"left-end",
"left-start",
"right",
"right-end",
"right-start",
"top",
"top-end",
"top-start"
];
const items = dropdownPositions.map(position => ({
key: position,
props: { name: position }
}));
initialState = {
selectedItem: null
};
const handleItemSelect = item => setState({ selectedItem: item });
const getItemBody = props => {
if (!props) {
return null;
}
return {props.name}
;
};
const getSelectedItemBody = props => {
return {props.name}
;
};
class DropdownExample extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
isVisible: true,
position: "auto"
};
this.handleTriggerClick = this.handleTriggerClick.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleItemSelect = this.handleItemSelect.bind(this);
}
getItemBody(props) {
if (!props) {
return null;
}
return {props.name}
;
}
handleItemSelect(position) {
this.setState({ position, isVisible: true });
}
handleClose() {
this.setState({ isVisible: false });
}
handleTriggerClick() {
this.setState(prevState => ({ isVisible: !prevState.isVisible }));
}
render() {
return (
);
}
}
;
```