accounts-frontend/src/components/ui/form/Dropdown.jsx

96 lines
2.4 KiB
React
Raw Normal View History

import React, { PropTypes } from 'react';
2016-05-28 04:44:28 +05:30
import ReactDOM from 'react-dom';
import classNames from 'classnames';
2016-05-28 04:44:28 +05:30
import styles from './dropdown.scss';
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,
block: PropTypes.bool,
color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet', 'orange'])
};
2016-05-28 04:44:28 +05:30
state = {
isActive: false,
activeItem: this.props.label
};
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-28 04:44:28 +05:30
const label = this.formatMessage(activeItem);
return (
<div className={classNames(styles[color], {
[styles.block]: block,
[styles.opened]: isActive
2016-05-28 04:44:28 +05:30
})} {...this.props} onClick={this.onToggle}>
{label}
<span className={styles.toggleIcon} />
2016-05-28 04:44:28 +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>
</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();
}
}
};
}