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.
63 lines
1.4 KiB
63 lines
1.4 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
|
|
|