accounts-frontend/packages/app/components/ui/form/Dropdown.tsx

160 lines
3.6 KiB
TypeScript
Raw Normal View History

import React, { InputHTMLAttributes, MouseEventHandler } from 'react';
2016-05-28 04:44:28 +05:30
import ReactDOM from 'react-dom';
2019-12-28 15:35:41 +05:30
import { MessageDescriptor } from 'react-intl';
2019-12-08 01:13:08 +05:30
import clsx from 'clsx';
2019-12-28 15:35:41 +05:30
import { COLOR_GREEN, Color } from 'app/components/ui';
2016-05-30 10:10:59 +05:30
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';
2019-12-28 15:35:41 +05:30
type I18nString = string | MessageDescriptor;
type ItemLabel = I18nString | React.ReactElement;
interface Props extends InputHTMLAttributes<HTMLInputElement> {
label: I18nString;
items: { [value: string]: ItemLabel };
block?: boolean;
color: Color;
}
2019-12-28 15:35:41 +05:30
interface OptionItem {
label: ItemLabel;
value: string;
}
interface State {
isActive: boolean;
activeItem: OptionItem | null;
}
export default class Dropdown extends FormInputComponent<Props, State> {
static defaultProps: Partial<Props> = {
color: COLOR_GREEN,
};
2019-12-28 15:35:41 +05:30
state: State = {
isActive: false,
activeItem: null,
};
componentDidMount() {
// listen to capturing phase to ensure, that our event handler will be
// called before all other
// @ts-ignore
document.addEventListener('click', this.onBodyClick, true);
}
componentWillUnmount() {
// @ts-ignore
document.removeEventListener('click', this.onBodyClick);
}
render() {
2019-12-28 15:35:41 +05:30
const { color, block, items, ...restProps } = this.props;
const { isActive } = this.state;
2019-12-28 15:35:41 +05:30
delete restProps.label;
const activeItem = this.getActiveItem();
2019-12-28 15:35:41 +05:30
const label = React.isValidElement(activeItem.label)
? activeItem.label
: this.formatMessage(activeItem.label);
return (
<div>
<div
2019-12-08 01:13:08 +05:30
className={clsx(styles[color], {
[styles.block]: block,
[styles.opened]: isActive,
})}
2019-12-28 15:35:41 +05:30
data-e2e-select-name={restProps.name}
{...restProps}
onClick={this.onToggle}
>
2019-12-28 15:35:41 +05:30
<span className={styles.label} data-testid="select-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: OptionItem): MouseEventHandler<HTMLDivElement> {
return (event) => {
event.preventDefault();
this.setState({
activeItem: item,
});
2016-05-30 10:10:59 +05:30
};
}
2019-12-28 15:35:41 +05:30
getActiveItem(): OptionItem {
const { items } = this.props;
2019-12-28 15:35:41 +05:30
let { activeItem } = 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() {
2019-12-28 15:35:41 +05:30
return this.getActiveItem()?.value;
}
2016-05-28 04:44:28 +05:30
2019-12-28 15:35:41 +05:30
onToggle = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
2016-05-28 04:44:28 +05:30
this.toggle();
};
2016-05-28 04:44:28 +05:30
onBodyClick: MouseEventHandler = (event) => {
if (this.state.isActive) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const el = ReactDOM.findDOMNode(this)!;
2016-05-28 04:44:28 +05:30
if (!el.contains(event.target as HTMLElement) && el !== event.target) {
2016-05-28 04:44:28 +05:30
event.preventDefault();
event.stopPropagation();
2016-05-28 04:44:28 +05:30
this.toggle();
}
}
};
}