156 lines
4.2 KiB
JavaScript
Executable File
156 lines
4.2 KiB
JavaScript
Executable File
|
|
import React, { PropTypes } from 'react'
|
|
import { connect } from 'react-redux'
|
|
import { bindActionCreators } from 'redux'
|
|
|
|
import Icon from '../Icon';
|
|
|
|
export default class DropdownField extends React.Component{
|
|
|
|
constructor(props){
|
|
super(props);
|
|
|
|
// Create a "unique" id. This is human-controlled to avoid requiring
|
|
// other libraries for a very simple purpose: clicking outside
|
|
this.uid = this.props.name.replace(' ','_').toLowerCase();
|
|
if (this.props.uid){
|
|
this.uid += "_"+this.props.uid;
|
|
}
|
|
|
|
this.state = {
|
|
expanded: false
|
|
}
|
|
|
|
this.handleClick = this.handleClick.bind(this);
|
|
}
|
|
|
|
componentDidMount(){
|
|
window.addEventListener("click", this.handleClick, false);
|
|
}
|
|
|
|
componentWillUnmount(){
|
|
window.removeEventListener("click", this.handleClick, false);
|
|
}
|
|
|
|
setExpanded(expanded = !this.state.expanded){
|
|
if (expanded){
|
|
this.setState({expanded: expanded});
|
|
window.addEventListener("click", this.handleClick, false);
|
|
} else {
|
|
this.setState({expanded: expanded});
|
|
window.removeEventListener("click", this.handleClick, false);
|
|
}
|
|
}
|
|
|
|
handleClick(e){
|
|
// TODO: remove dependency on jQuery and explore the performance of this functionality
|
|
if ($(e.target).closest('.dropdown-field').attr('data-uid') != this.uid && this.state.expanded){
|
|
this.setExpanded(false);
|
|
}
|
|
}
|
|
|
|
handleChange(value, is_selected){
|
|
|
|
var current_value = this.props.value;
|
|
if (this.isMultiSelect()){
|
|
if (value == 'select-all'){
|
|
var new_value = [];
|
|
for (var i = 0; i < this.props.options.length; i++){
|
|
new_value.push(this.props.options[i].value);
|
|
}
|
|
} else if (is_selected){
|
|
var index = current_value.indexOf(value);
|
|
current_value.splice(index, 1);
|
|
var new_value = current_value;
|
|
} else {
|
|
current_value.push(value);
|
|
var new_value = current_value;
|
|
}
|
|
} else {
|
|
var new_value = value;
|
|
|
|
// Collapse our menu
|
|
this.setExpanded(false);
|
|
}
|
|
|
|
return this.props.handleChange(new_value);
|
|
}
|
|
|
|
isMultiSelect(){
|
|
return this.props.value instanceof Array;
|
|
}
|
|
|
|
render(){
|
|
if (!this.props.options){
|
|
return null;
|
|
}
|
|
|
|
var className = 'dropdown-field';
|
|
if (this.state.expanded){
|
|
className += ' expanded';
|
|
}
|
|
if (this.props.no_status_icon){
|
|
className += ' no-status-icon';
|
|
}
|
|
if (this.props.no_label){
|
|
className += ' no-label';
|
|
}
|
|
if (this.props.button){
|
|
className += ' buttonify';
|
|
}
|
|
if (this.props.className){
|
|
className += ' '+this.props.className;
|
|
}
|
|
var current_value = null;
|
|
if (this.props.value !== undefined){
|
|
current_value = this.props.value;
|
|
} else if (this.props.options.length > 0){
|
|
current_value = this.props.options[0].value;
|
|
}
|
|
|
|
var selected_icon = <Icon name="check" />
|
|
if (this.props.selected_icon){
|
|
selected_icon = <Icon name={this.props.selected_icon} />
|
|
}
|
|
|
|
var options = Object.assign([], this.props.options);
|
|
if (this.isMultiSelect()){
|
|
options.push({
|
|
value: 'select-all',
|
|
label: 'Select all',
|
|
className: 'grey-text'
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className={className} data-uid={this.uid}>
|
|
<div className={"label"+(this.props.button ? " button "+this.props.button : "")} onClick={e => this.setExpanded()}>
|
|
{this.props.icon ? <Icon name={this.props.icon} type={this.props.icon_type ? this.props.icon_type : "material"} /> : null}
|
|
<span className="text">
|
|
{this.props.name}
|
|
{this.isMultiSelect() ? ' ('+current_value.length+')' : null}
|
|
</span>
|
|
</div>
|
|
<div className="options">
|
|
<div className="liner">
|
|
{
|
|
options.map(option => {
|
|
if (this.isMultiSelect()){
|
|
var is_selected = current_value.indexOf(option.value) > -1;
|
|
} else {
|
|
var is_selected = current_value === option.value;
|
|
}
|
|
return (
|
|
<div className={"option "+(option.className ? option.className : '')} key={option.value} onClick={e => this.handleChange(option.value, is_selected)}>
|
|
{!this.props.no_status_icon && is_selected ? selected_icon : null}
|
|
{option.label}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
} |