gab-social/app/javascript/gabsocial/components/select.js

59 lines
1.4 KiB
JavaScript
Raw Normal View History

2020-03-07 04:53:28 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-04-23 07:13:29 +01:00
import Icon from './icon'
2020-03-07 04:53:28 +00:00
2020-04-23 07:13:29 +01:00
/**
* Renders a select element with options
* @param {func} props.onChange - function to call on option selection
* @param {object} props.options - options for selection
* @param {string} [props.value] - value to set selected
*/
2020-03-07 04:53:28 +00:00
export default class Select extends ImmutablePureComponent {
static propTypes = {
2020-04-23 07:13:29 +01:00
onChange: PropTypes.func.isRequired,
2020-03-07 04:53:28 +00:00
options: PropTypes.oneOf([
ImmutablePropTypes.map,
PropTypes.object,
2020-04-23 07:13:29 +01:00
]).isRequired,
2020-03-07 04:53:28 +00:00
value: PropTypes.string,
}
2020-04-23 07:13:29 +01:00
updateOnProps = [
'options',
'value',
]
2020-03-07 04:53:28 +00:00
render() {
const {
value,
options,
2020-04-23 07:13:29 +01:00
onChange,
2020-03-07 04:53:28 +00:00
} = this.props
return (
<div className={_s.default}>
<select
2020-03-11 23:56:18 +00:00
className={[_s.default, _s.outlineNone, _s.text, _s.border1PX, _s.borderColorSecondary, _s.px15, _s.select].join(' ')}
2020-03-07 04:53:28 +00:00
value={value}
onChange={onChange}
>
{
2020-04-23 07:13:29 +01:00
options.map((option) => (
2020-03-07 04:53:28 +00:00
<option key={`option-${option.value}`} value={option.value}>
{option.title}
</option>
))
}
</select>
2020-04-23 07:13:29 +01:00
<Icon
id='select'
size='14px'
2020-04-29 23:32:49 +01:00
className={[_s.fillSecondary, _s.posAbs, _s.right0, _s.mr10, _s.bottom0, _s.mb15].join(' ')}
2020-04-23 07:13:29 +01:00
/>
2020-03-07 04:53:28 +00:00
</div>
)
}
}