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';
|
2019-08-27 11:54:57 +02:00
|
|
|
import {useUID} from 'react-uid';
|
2019-08-23 15:20:22 +02:00
|
|
|
import {formFieldsSize} from './constants';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
Input.propTypes = {
|
|
|
|
type: PropTypes.string.isRequired,
|
|
|
|
label: PropTypes.string.isRequired,
|
|
|
|
helpText: PropTypes.string,
|
|
|
|
error: PropTypes.string,
|
|
|
|
className: PropTypes.string,
|
|
|
|
children: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
|
|
|
])
|
|
|
|
}
|
|
|
|
|
|
|
|
/** Base bootstrap input component. */
|
2019-08-27 11:54:57 +02:00
|
|
|
export function Input({type, label, helpText, error, className, children, ...props}) {
|
2019-08-23 15:20:22 +02:00
|
|
|
const uid = useUID();
|
|
|
|
const inputClassName = `form-control ${className ? className : ''} ${(error ? 'is-invalid' : '')}`.trim();
|
|
|
|
return <div className={formFieldsSize}>
|
|
|
|
<div className='form-group'>
|
|
|
|
<label htmlFor={uid}>{label}</label>
|
|
|
|
<div className='input-group'>
|
|
|
|
<input
|
|
|
|
className={inputClassName}
|
|
|
|
type={type}
|
|
|
|
id={uid}
|
|
|
|
|
|
|
|
{...props}
|
|
|
|
/>
|
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
{error ? <div className='invalid-feedback'>{error}</div> : null}
|
|
|
|
{helpText ? <small className="form-text text-muted">{helpText}</small> : null}
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
}
|