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

155 lines
3.3 KiB
JavaScript
Raw Normal View History

import PropTypes from 'prop-types';
import React from 'react';
2016-05-28 04:44:28 +05:30
import ReactDOM from 'react-dom';
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-06-18 17:43:28 +05:30
export default class Dropdown extends FormInputComponent {
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
};
}
getActiveItem() {
const { items } = this.props;
2019-12-07 16:58:52 +05:30
let { activeItem } = /** @type {any} */ (this.state);
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);
activeItem = {
2019-12-07 16:58:52 +05:30
label,
value,
};
}
2016-05-28 04:44:28 +05:30
}
return activeItem;
}
2016-05-28 04:44:28 +05:30
getValue() {
return this.getActiveItem().value;
}
2016-05-28 04:44:28 +05:30
onToggle = event => {
event.preventDefault();
2016-05-28 04:44:28 +05:30
this.toggle();
};
2016-05-28 04:44:28 +05:30
onBodyClick = event => {
if (this.state.isActive) {
const el = ReactDOM.findDOMNode(this);
2016-05-28 04:44:28 +05:30
if (!el.contains(event.target) && el !== event.taget) {
2016-05-28 04:44:28 +05:30
event.preventDefault();
event.stopPropagation();
2016-05-28 04:44:28 +05:30
this.toggle();
}
}
};
}