GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-11-14 17:35:35 +01:00
Code Issues Releases Activity

Display input's error feedback only after focus

Browse Source
This commit is contained in:
Aleksandr Gumroian 2021-04-15 12:20:58 +02:00
parent 02f2c5be4f
commit 8c929baeb5
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/bootstrap/Input.js
View File

@ -1,11 +1,11 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2021 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 React, { useState } from "react";
import { useUID } from "react-uid";
import PropTypes from "prop-types";
@ -36,8 +36,10 @@ export function Input({
...props
}) {
const uid = useUID();
const [initialErrorFeedbackState, setErrorFeedbackState] = useState(false);
const errorFeedbackIsVisible = !!(initialErrorFeedbackState && error);
const inputClassName = `form-control ${className || ""} ${
error ? "is-invalid" : ""
errorFeedbackIsVisible ? "is-invalid" : ""
}`.trim();
return (
<div className="form-group">
@ -49,14 +51,17 @@ export function Input({
className={inputClassName}
type={type}
id={uid}
onFocus={() => setErrorFeedbackState(true)}
{...props}
/>
{children}
</div>
{error ? <div className="invalid-feedback">{error}</div> : null}
{helpText ? (
{errorFeedbackIsVisible && (
<div className="invalid-feedback">{error}</div>
)}
{helpText && (
<small className="form-text text-muted">{helpText}</small>
) : null}
)}
</div>
);
}