скрипты компонента подсветкие ошибок валидации формы, по аналогии с тем, как в текущем magic с помощью comm_form подсвечиваются ошибки валидации формы. Состояние сырое, пока готов только каркас. Возможно, стоит посмотреть на компонент\библиотеку UseForm, но кажется это будет более заморный вариант
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
/**
|
||||
* Объект с данными для отображения в блоке с ошибками
|
||||
*/
|
||||
export interface FormValidErrObject
|
||||
{
|
||||
fieldName: string | null,
|
||||
fieldErrors: string[] | []
|
||||
}
|
||||
|
||||
export default function FormValidErr ( {visible, validErrorsObj}: {visible: boolean, validErrorsObj: FormValidErrObject[]} )
|
||||
{
|
||||
const [blockVisible, setBlockVisible] = useState<boolean>(false);
|
||||
useEffect ( () => {
|
||||
setBlockVisible(visible)
|
||||
}, [visible]);
|
||||
return (
|
||||
<div id="form-valid-err-container" className={`form-valid-err--${blockVisible ? "visible" : 'hide'}`}>
|
||||
<ul>
|
||||
{ validErrorsObj.map( (validErrObj: FormValidErrObject, index: number) => (
|
||||
<li key={index}>
|
||||
<b>{ validErrObj.fieldName }</b>:
|
||||
<span>{ validErrObj.fieldErrors }</span>
|
||||
</li>
|
||||
)) }
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user