81 lines
1.6 KiB
JavaScript
81 lines
1.6 KiB
JavaScript
// @flow
|
|
import React, { Component } from 'react';
|
|
|
|
type Props<T> = {
|
|
value: T,
|
|
options: T[],
|
|
ariaLabel: string,
|
|
formatTitle: (option: T) => any,
|
|
extra?: any,
|
|
onChange: (value: T) => void
|
|
};
|
|
|
|
type State = {
|
|
expanded: boolean
|
|
};
|
|
|
|
export default class DropdownComponent<T: *> extends Component<
|
|
void,
|
|
Props<T>,
|
|
State
|
|
> {
|
|
props: Props<T>;
|
|
|
|
state = {
|
|
expanded: false
|
|
};
|
|
|
|
render() {
|
|
const { options, value, ariaLabel, extra } = this.props;
|
|
|
|
return (
|
|
<span className="dropdown">
|
|
<a
|
|
tabIndex="0"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
aria-label={ariaLabel}
|
|
className="dropdown-toggle"
|
|
onClick={this.toggleExpanded}
|
|
>
|
|
{this.formatTitle(value)}
|
|
<i className="caret" />
|
|
</a>
|
|
{this.state.expanded &&
|
|
<ul className="dropdown-menu">
|
|
{options.map((option, i) => {
|
|
return (
|
|
<li key={i}>
|
|
<a
|
|
className={option === value ? 'active' : ''}
|
|
onClick={this.onChange.bind(null, option)}
|
|
>
|
|
{this.formatTitle(option)}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
{extra}
|
|
</ul>}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
formatTitle(option: any) {
|
|
return this.props.formatTitle(option);
|
|
}
|
|
|
|
toggleExpanded = () => {
|
|
this.setState(state => {
|
|
return {
|
|
expanded: !state.expanded
|
|
};
|
|
});
|
|
};
|
|
|
|
onChange = (value: any) => {
|
|
this.props.onChange(value);
|
|
this.setState({ expanded: false });
|
|
};
|
|
}
|