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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React from "react"; import React, { useState } from "react";
import { useUID } from "react-uid"; import { useUID } from "react-uid";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
@ -36,8 +36,10 @@ export function Input({
...props ...props
}) { }) {
const uid = useUID(); const uid = useUID();
const [initialErrorFeedbackState, setErrorFeedbackState] = useState(false);
const errorFeedbackIsVisible = !!(initialErrorFeedbackState && error);
const inputClassName = `form-control ${className || ""} ${ const inputClassName = `form-control ${className || ""} ${
error ? "is-invalid" : "" errorFeedbackIsVisible ? "is-invalid" : ""
}`.trim(); }`.trim();
return ( return (
<div className="form-group"> <div className="form-group">
@ -49,14 +51,17 @@ export function Input({
className={inputClassName} className={inputClassName}
type={type} type={type}
id={uid} id={uid}
onFocus={() => setErrorFeedbackState(true)}
{...props} {...props}
/> />
{children} {children}
</div> </div>
{error ? <div className="invalid-feedback">{error}</div> : null} {errorFeedbackIsVisible && (
{helpText ? ( <div className="invalid-feedback">{error}</div>
)}
{helpText && (
<small className="form-text text-muted">{helpText}</small> <small className="form-text text-muted">{helpText}</small>
) : null} )}
</div> </div>
); );
} }