2019-08-23 15:20:22 +02:00
|
|
|
/*
|
|
|
|
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
|
|
|
|
*
|
|
|
|
* This is free software, licensed under the GNU General Public License v3.
|
|
|
|
* See /LICENSE for more information.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2019-08-27 11:54:57 +02:00
|
|
|
import {useUID} from 'react-uid';
|
2019-08-23 15:20:22 +02:00
|
|
|
|
|
|
|
|
|
|
|
Select.propTypes = {
|
|
|
|
/** Select field Label. */
|
|
|
|
label: PropTypes.string.isRequired,
|
|
|
|
/** Choices if form of {value : "Label",...}.*/
|
|
|
|
choices: PropTypes.object.isRequired,
|
|
|
|
/** Current value. */
|
|
|
|
value: PropTypes.oneOfType([
|
|
|
|
PropTypes.string,
|
|
|
|
PropTypes.number,
|
|
|
|
]).isRequired,
|
|
|
|
/** Help text message. */
|
|
|
|
helpText: PropTypes.string,
|
|
|
|
};
|
|
|
|
|
2019-08-27 11:54:57 +02:00
|
|
|
export function Select({label, choices, helpText, ...props}) {
|
2019-08-23 15:20:22 +02:00
|
|
|
const uid = useUID();
|
|
|
|
|
|
|
|
const options = Object.keys(choices).map(
|
|
|
|
key => <option key={key} value={key}>{choices[key]}</option>
|
|
|
|
);
|
|
|
|
|
|
|
|
return <div className='form-group col-sm-12 offset-lg-1 col-lg-10'>
|
|
|
|
<label htmlFor={uid}>{label}</label>
|
|
|
|
<select
|
|
|
|
className='custom-select'
|
|
|
|
id={uid}
|
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
{options}
|
|
|
|
</select>
|
|
|
|
{helpText ? <small className="form-text text-muted">{helpText}</small> : null}
|
|
|
|
</div>;
|
|
|
|
}
|