You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.3 KiB
66 lines
1.3 KiB
import React, { useCallback } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
const Dropdown = ({
|
|
className,
|
|
disabled,
|
|
onChange,
|
|
options,
|
|
selectedOption,
|
|
style,
|
|
title,
|
|
}) => {
|
|
const _onChange = useCallback(
|
|
(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
onChange(event.target.value);
|
|
},
|
|
[onChange],
|
|
);
|
|
|
|
return (
|
|
<select
|
|
className={classnames('dropdown', className)}
|
|
disabled={disabled}
|
|
title={title}
|
|
onChange={_onChange}
|
|
style={style}
|
|
value={selectedOption}
|
|
>
|
|
{options.map((option) => {
|
|
return (
|
|
<option key={option.value} value={option.value}>
|
|
{option.name || option.value}
|
|
</option>
|
|
);
|
|
})}
|
|
</select>
|
|
);
|
|
};
|
|
|
|
Dropdown.propTypes = {
|
|
className: PropTypes.string,
|
|
disabled: PropTypes.bool,
|
|
title: PropTypes.string,
|
|
onChange: PropTypes.func.isRequired,
|
|
options: PropTypes.arrayOf(
|
|
PropTypes.exact({
|
|
name: PropTypes.string,
|
|
value: PropTypes.string.isRequired,
|
|
}),
|
|
).isRequired,
|
|
selectedOption: PropTypes.string,
|
|
style: PropTypes.object,
|
|
};
|
|
|
|
Dropdown.defaultProps = {
|
|
className: undefined,
|
|
disabled: false,
|
|
title: undefined,
|
|
selectedOption: null,
|
|
style: undefined,
|
|
};
|
|
|
|
export default Dropdown;
|
|
|