GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-11-03 23:00:31 +01:00
Code Issues Releases Activity

Wrap Input component with forwardRef

Browse Source 
In order to pass `ref` to the child <input> DOM element.
This commit is contained in:
Aleksandr Gumroian
2022-04-21 15:13:35 +02:00
parent e24cd76009
commit 1a4ba03ff5
1 changed files with 48 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/bootstrap/Input.js
View File

@@ -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 (
<div className="form-group">
<label className={labelClassName} htmlFor={uid}>
{label}
</label>
<div className={`input-group ${groupClassName || ""}`.trim()}>
<input
className={inputClassName}
type={type}
id={uid}
ref={ref}
{...props}
/>
{children}
</div>
{error ? <div className="invalid-feedback">{error}</div> : null}
{helpText ? (
<small className="form-text text-muted">{helpText}</small>
) : null}
</div>
);
}
);
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 (
<div className="form-group">
<label className={labelClassName} htmlFor={uid}>
{label}
</label>
<div className={`input-group ${groupClassName || ""}`.trim()}>
<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>
);
}