88 lines
1.7 KiB
JavaScript
88 lines
1.7 KiB
JavaScript
// @flow
|
|
import React from "react";
|
|
|
|
class Option extends React.Component {
|
|
props: {
|
|
value: string,
|
|
active: boolean,
|
|
onChange: (value: string) => void
|
|
};
|
|
render() {
|
|
const { value, active } = this.props;
|
|
return (
|
|
<li>
|
|
<a className={active ? "active" : ""} onClick={this.onChange}>
|
|
{value}
|
|
</a>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
onChange = () => {
|
|
this.props.onChange(this.props.value);
|
|
};
|
|
}
|
|
|
|
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 =>
|
|
<Option
|
|
key={o}
|
|
active={value === o}
|
|
value={o}
|
|
onChange={this.onChange}
|
|
/>
|
|
)}
|
|
</ul>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
onToggleExpand = () => {
|
|
this.setState(state => {
|
|
return {
|
|
expanded: !state.expanded
|
|
};
|
|
});
|
|
};
|
|
|
|
onChange = (value: string) => {
|
|
this.setState({
|
|
expanded: false
|
|
});
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange(value);
|
|
}
|
|
};
|
|
}
|