diff --git a/src/bootstrap/Input.js b/src/bootstrap/Input.js index 658522a..171f312 100644 --- a/src/bootstrap/Input.js +++ b/src/bootstrap/Input.js @@ -1,14 +1,60 @@ /* - * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/) + * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://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 React, { forwardRef } from "react"; import { useUID } from "react-uid"; import PropTypes from "prop-types"; +/** Base bootstrap input component. */ +export const Input = forwardRef( + ( + { + type, + label, + helpText, + error, + className, + children, + labelClassName, + groupClassName, + ...props + }, + ref + ) => { + const uid = useUID(); + + const inputClassName = `form-control ${className || ""} ${ + error ? "is-invalid" : "" + }`.trim(); + + return ( +
+ +
+ + {children} +
+ {error ?
{error}
: null} + {helpText ? ( + {helpText} + ) : null} +
+ ); + } +); + Input.propTypes = { type: PropTypes.string.isRequired, label: PropTypes.string.isRequired, @@ -22,41 +68,3 @@ Input.propTypes = { labelClassName: PropTypes.string, groupClassName: PropTypes.string, }; - -/** Base bootstrap input component. */ -export function Input({ - type, - label, - helpText, - error, - className, - children, - labelClassName, - groupClassName, - ...props -}) { - const uid = useUID(); - const inputClassName = `form-control ${className || ""} ${ - error ? "is-invalid" : "" - }`.trim(); - return ( -
- -
- - {children} -
- {error ?
{error}
: null} - {helpText ? ( - {helpText} - ) : null} -
- ); -}