57 lines
1.6 KiB
React
57 lines
1.6 KiB
React
|
// @flow
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
export default class UnitDropdown extends React.Component {
|
||
|
|
props: {
|
||
|
|
value: string,
|
||
|
|
options: string[],
|
||
|
|
onChange?: (value: string) => void
|
||
|
|
};
|
||
|
|
state: {
|
||
|
|
expanded: boolean
|
||
|
|
} = {
|
||
|
|
expanded: false
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { value, options, onChange } = this.props;
|
||
|
|
const isReadonly = !onChange;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="input-group-btn">
|
||
|
|
<a
|
||
|
|
style={{ minWidth: 170 }}
|
||
|
|
className="btn btn-default dropdown-toggle"
|
||
|
|
onClick={this.onToggleExpand}
|
||
|
|
>
|
||
|
|
<strong>
|
||
|
|
{value}<i className="caret" />
|
||
|
|
</strong>
|
||
|
|
</a>
|
||
|
|
{this.state.expanded &&
|
||
|
|
!isReadonly &&
|
||
|
|
<ul className="dropdown-menu dropdown-menu-right">
|
||
|
|
{options.map(o =>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
className={value === o ? 'active' : ''}
|
||
|
|
onClick={this.props.onChange}
|
||
|
|
>
|
||
|
|
{o}
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
)}
|
||
|
|
</ul>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
onToggleExpand = () => {
|
||
|
|
this.setState(state => {
|
||
|
|
return {
|
||
|
|
expanded: !state.expanded
|
||
|
|
};
|
||
|
|
});
|
||
|
|
};
|
||
|
|
}
|