2016-05-26 03:07:18 +05:30
|
|
|
import React, { PropTypes } from 'react';
|
2016-05-28 04:44:28 +05:30
|
|
|
import ReactDOM from 'react-dom';
|
2016-05-26 03:07:18 +05:30
|
|
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
2016-05-28 04:44:28 +05:30
|
|
|
import styles from './dropdown.scss';
|
2016-05-26 03:07:18 +05:30
|
|
|
import FormComponent from './FormComponent';
|
|
|
|
|
|
|
|
export default class Dropdown extends FormComponent {
|
|
|
|
static displayName = 'Dropdown';
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
label: PropTypes.oneOfType([
|
|
|
|
PropTypes.shape({
|
|
|
|
id: PropTypes.string
|
|
|
|
}),
|
|
|
|
PropTypes.string
|
|
|
|
]).isRequired,
|
2016-05-28 04:44:28 +05:30
|
|
|
items: PropTypes.arrayOf(PropTypes.string).isRequired,
|
2016-05-26 03:07:18 +05:30
|
|
|
block: PropTypes.bool,
|
2016-05-29 22:18:30 +05:30
|
|
|
color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet', 'orange'])
|
2016-05-26 03:07:18 +05:30
|
|
|
};
|
|
|
|
|
2016-05-28 04:44:28 +05:30
|
|
|
state = {
|
|
|
|
isActive: false,
|
|
|
|
activeItem: this.props.label
|
|
|
|
};
|
2016-05-26 03:07:18 +05:30
|
|
|
|
2016-05-28 04:44:28 +05:30
|
|
|
componentDidMount() {
|
|
|
|
document.addEventListener('click', this.onBodyClick);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
document.removeEventListener('click', this.onBodyClick);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { color = 'green', block, items } = this.props;
|
|
|
|
const {isActive, activeItem} = this.state;
|
2016-05-26 03:07:18 +05:30
|
|
|
|
2016-05-28 04:44:28 +05:30
|
|
|
const label = this.formatMessage(activeItem);
|
2016-05-26 03:07:18 +05:30
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={classNames(styles[color], {
|
2016-05-29 22:18:30 +05:30
|
|
|
[styles.block]: block,
|
|
|
|
[styles.opened]: isActive
|
2016-05-28 04:44:28 +05:30
|
|
|
})} {...this.props} onClick={this.onToggle}>
|
|
|
|
{label}
|
2016-05-26 03:07:18 +05:30
|
|
|
<span className={styles.toggleIcon} />
|
2016-05-28 04:44:28 +05:30
|
|
|
|
2016-05-29 22:18:30 +05:30
|
|
|
<div className={styles.menu}>
|
2016-05-28 04:44:28 +05:30
|
|
|
{items.map((item, key) => (
|
|
|
|
<div className={styles.menuItem} key={key} onClick={this.onSelectItem(item)}>
|
|
|
|
{item}
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
2016-05-26 03:07:18 +05:30
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-05-28 04:44:28 +05:30
|
|
|
|
|
|
|
toggle() {
|
|
|
|
this.setState({
|
|
|
|
isActive: !this.state.isActive
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onSelectItem(item) {
|
|
|
|
return (event) => {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
activeItem: item
|
|
|
|
});
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
onToggle = (event) => {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
this.toggle();
|
|
|
|
};
|
|
|
|
|
|
|
|
onBodyClick = (event) => {
|
|
|
|
if (this.state.isActive) {
|
|
|
|
const el = ReactDOM.findDOMNode(this);
|
|
|
|
|
|
|
|
if (!el.contains(event.target) && el !== event.taget) {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
this.toggle();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2016-05-26 03:07:18 +05:30
|
|
|
}
|