64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import Select, { ReactSelectProps, Option } from 'react-select';
|
|
|
|
interface Props extends ReactSelectProps {
|
|
className?: string;
|
|
options: any;
|
|
onChange: any;
|
|
}
|
|
|
|
export default class Dropdown extends React.Component<Props> {
|
|
public state = {
|
|
selectedOption: { value: '', label: '' },
|
|
hasBlurred: false
|
|
};
|
|
|
|
public handleChange = (selectedOption: Option) => {
|
|
this.setState({ selectedOption });
|
|
};
|
|
|
|
public formatOptions = (options: Option[]) => {
|
|
if (typeof options[0] === 'object') {
|
|
return options;
|
|
}
|
|
const formatted = options.map(opt => {
|
|
return { value: opt, label: opt };
|
|
});
|
|
return formatted;
|
|
};
|
|
|
|
public render() {
|
|
const { onChange } = this.props;
|
|
const { selectedOption } = this.state;
|
|
const value = selectedOption && selectedOption.value;
|
|
const options = this.formatOptions(this.props.options);
|
|
|
|
return (
|
|
<Select
|
|
// use ref to prevent <label /> from stealing focus when used inline with an input
|
|
ref={el => {
|
|
if (!!el && !!(el as any).control) {
|
|
(el as any).control.addEventListener('click', (e: React.FormEvent<any>) => {
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
}}
|
|
className={`${this.props.className} ${this.state.hasBlurred ? 'has-blurred' : ''}`}
|
|
value={value}
|
|
onChange={obj => {
|
|
this.handleChange(obj as any);
|
|
onChange();
|
|
}}
|
|
{...this.props}
|
|
onBlur={e => {
|
|
this.setState({ hasBlurred: true });
|
|
if (this.props && this.props.onBlur) {
|
|
this.props.onBlur(e);
|
|
}
|
|
}}
|
|
options={options as any}
|
|
/>
|
|
);
|
|
}
|
|
}
|