2017-08-23 00:19:50 +05:30
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React 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-08-27 15:47:43 +05:30
|
|
|
import { omit } from 'functions';
|
2016-05-30 10:10:59 +05:30
|
|
|
import { colors, COLOR_GREEN } from 'components/ui';
|
|
|
|
|
2016-05-28 04:44:28 +05:30
|
|
|
import styles from './dropdown.scss';
|
2016-06-18 17:43:28 +05:30
|
|
|
import FormInputComponent from './FormInputComponent';
|
2016-05-26 03:07:18 +05:30
|
|
|
|
2016-06-18 17:43:28 +05:30
|
|
|
export default class Dropdown extends FormInputComponent {
|
2019-11-27 14:33:32 +05:30
|
|
|
static displayName = 'Dropdown';
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
label: PropTypes.oneOfType([
|
|
|
|
PropTypes.shape({
|
|
|
|
id: PropTypes.string,
|
|
|
|
}),
|
|
|
|
PropTypes.string,
|
|
|
|
]).isRequired,
|
|
|
|
items: PropTypes.arrayOf(
|
|
|
|
PropTypes.oneOfType([
|
|
|
|
PropTypes.string,
|
|
|
|
PropTypes.shape({
|
|
|
|
id: PropTypes.string,
|
|
|
|
}),
|
|
|
|
]),
|
|
|
|
).isRequired,
|
|
|
|
block: PropTypes.bool,
|
|
|
|
color: PropTypes.oneOf(colors),
|
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
color: COLOR_GREEN,
|
|
|
|
};
|
|
|
|
|
|
|
|
state = {
|
|
|
|
isActive: false,
|
|
|
|
activeItem: null,
|
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
// listen to capturing phase to ensure, that our event handler will be
|
|
|
|
// called before all other
|
|
|
|
document.addEventListener('click', this.onBodyClick, true);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
document.removeEventListener('click', this.onBodyClick);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { color, block, items } = this.props;
|
|
|
|
const { isActive } = this.state;
|
|
|
|
|
|
|
|
const activeItem = this.getActiveItem();
|
|
|
|
const label = this.formatMessage(activeItem.label);
|
|
|
|
const props = omit(this.props, Object.keys(Dropdown.propTypes));
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
className={classNames(styles[color], {
|
|
|
|
[styles.block]: block,
|
|
|
|
[styles.opened]: isActive,
|
|
|
|
})}
|
|
|
|
{...props}
|
|
|
|
onClick={this.onToggle}
|
|
|
|
>
|
|
|
|
<span className={styles.label}>{label}</span>
|
|
|
|
<span className={styles.toggleIcon} />
|
|
|
|
|
|
|
|
<div className={styles.menu}>
|
|
|
|
{Object.entries(items).map(([value, label]) => (
|
|
|
|
<div
|
|
|
|
className={styles.menuItem}
|
|
|
|
key={value}
|
|
|
|
onClick={this.onSelectItem({ value, label })}
|
|
|
|
>
|
|
|
|
{label}
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{this.renderError()}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
toggle() {
|
|
|
|
this.setState({
|
|
|
|
isActive: !this.state.isActive,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onSelectItem(item) {
|
|
|
|
return event => {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
activeItem: item,
|
|
|
|
});
|
2016-05-30 10:10:59 +05:30
|
|
|
};
|
2019-11-27 14:33:32 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
getActiveItem() {
|
|
|
|
const { items } = this.props;
|
2019-12-07 16:58:52 +05:30
|
|
|
let { activeItem } = /** @type {any} */ (this.state);
|
2019-11-27 14:33:32 +05:30
|
|
|
|
|
|
|
if (!activeItem) {
|
|
|
|
activeItem = {
|
|
|
|
label: this.props.label,
|
|
|
|
value: '',
|
|
|
|
};
|
|
|
|
|
|
|
|
if (!activeItem.label) {
|
2019-12-07 16:58:52 +05:30
|
|
|
const [[value, label]] = Object.entries(items);
|
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
activeItem = {
|
2019-12-07 16:58:52 +05:30
|
|
|
label,
|
|
|
|
value,
|
2019-11-27 14:33:32 +05:30
|
|
|
};
|
|
|
|
}
|
2016-05-28 04:44:28 +05:30
|
|
|
}
|
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
return activeItem;
|
|
|
|
}
|
2016-05-28 04:44:28 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
getValue() {
|
|
|
|
return this.getActiveItem().value;
|
|
|
|
}
|
2016-05-28 04:44:28 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
onToggle = event => {
|
|
|
|
event.preventDefault();
|
2016-05-28 04:44:28 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
this.toggle();
|
|
|
|
};
|
2016-05-28 04:44:28 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
onBodyClick = event => {
|
|
|
|
if (this.state.isActive) {
|
|
|
|
const el = ReactDOM.findDOMNode(this);
|
2016-05-28 04:44:28 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
if (!el.contains(event.target) && el !== event.taget) {
|
2016-05-28 04:44:28 +05:30
|
|
|
event.preventDefault();
|
2019-11-27 14:33:32 +05:30
|
|
|
event.stopPropagation();
|
2016-05-28 04:44:28 +05:30
|
|
|
|
|
|
|
this.toggle();
|
2019-11-27 14:33:32 +05:30
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2016-05-26 03:07:18 +05:30
|
|
|
}
|