52 lines
1.8 KiB
JavaScript
52 lines
1.8 KiB
JavaScript
import {React} from "modules";
|
|
import Arrow from "../../icons/downarrow";
|
|
|
|
export default class Select extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {open: false, value: this.props.hasOwnProperty("value") ? this.props.value : this.props.options[0].value};
|
|
this.dropdown = React.createRef();
|
|
this.onChange = this.onChange.bind(this);
|
|
this.showMenu = this.showMenu.bind(this);
|
|
this.hideMenu = this.hideMenu.bind(this);
|
|
}
|
|
|
|
showMenu(event) {
|
|
event.preventDefault();
|
|
this.setState({open: true}, () => {
|
|
document.addEventListener("click", this.hideMenu);
|
|
});
|
|
}
|
|
|
|
hideMenu() {
|
|
this.setState({open: false}, () => {
|
|
document.removeEventListener("click", this.hideMenu);
|
|
});
|
|
}
|
|
|
|
onChange(value) {
|
|
this.setState({value});
|
|
if (this.props.onChange) this.props.onChange(value);
|
|
}
|
|
|
|
get selected() {return this.props.options.find(o => o.value == this.state.value);}
|
|
|
|
get options() {
|
|
const selected = this.selected;
|
|
return <div className="bd-select-options">
|
|
{this.props.options.map(opt =>
|
|
<div className={`bd-select-option${selected.value == opt.value ? " selected" : ""}`} onClick={this.onChange.bind(this, opt.value)}>{opt.label}</div>
|
|
)}
|
|
</div>;
|
|
}
|
|
|
|
render() {
|
|
const style = this.props.style == "transparent" ? " bd-select-transparent" : "";
|
|
const isOpen = this.state.open ? " menu-open" : "";
|
|
return <div className={`bd-select${style}${isOpen}`} onClick={this.showMenu} ref={this.dropdown}>
|
|
<div className="bd-select-value">{this.selected.label}</div>
|
|
<Arrow className="bd-select-arrow" />
|
|
{this.state.open && this.options}
|
|
</div>;
|
|
}
|
|
} |