diff --git a/src/Form.tsx b/src/Form.tsx index 9a1e446..c241e12 100644 --- a/src/Form.tsx +++ b/src/Form.tsx @@ -1,4 +1,5 @@ import React, {useEffect, useState} from 'react'; +import {Props as FormProps} from 'react-hook-form/dist/types'; import useForm from 'react-hook-form'; import {useTranslation} from 'react-i18next'; import {Col, Form, Row} from 'reactstrap'; @@ -10,14 +11,12 @@ import SelectForm from './components/SingleSelect'; import SubmitBtn from './components/SubmitBtn'; import ToggleForm from './components/Toggle'; -interface Props { +interface Props extends FormProps { form: FormConfig[]; - defaultValues?: { - [key: string]: any; - }; csrfUrl?: string; getForm?: (formHooks: FormHooks) => any; onSubmit: (...args: any) => Promise | T | void; + valid?: {[key: string]: any}; } const dependencies = [ @@ -28,7 +27,14 @@ const dependencies = [ ]; /** Form generator */ -export default ({csrfUrl, defaultValues, form, getForm, onSubmit}: Props) => { +export default ({ + csrfUrl, + defaultValues, + form, + getForm, + onSubmit, + valid, +}: Props) => { const formHooks = useForm({defaultValues}); const [csrf, setCsrf] = useState(); const {t} = useTranslation(); @@ -59,6 +65,7 @@ export default ({csrfUrl, defaultValues, form, getForm, onSubmit}: Props) => { ); diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 7076da5..0658159 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {FormProps} from 'react-hook-form/dist/types'; import {useTranslation} from 'react-i18next'; import { + FormFeedback, FormGroup, Input, InputGroup, @@ -20,6 +21,7 @@ export default ({ getValues, register, triggerValidation, + valid, }: DefaultInputProps) => { const {t} = useTranslation(); const values = getValues(); @@ -52,7 +54,7 @@ export default ({ return ( - + {addon && ( @@ -64,9 +66,13 @@ export default ({ triggerValidation([{name}])} /> + {errors[name] && ( + + {errors[name].message} + + )} ); diff --git a/src/interfaces/FormConfig.ts b/src/interfaces/FormConfig.ts index ecb7c1d..0a06331 100644 --- a/src/interfaces/FormConfig.ts +++ b/src/interfaces/FormConfig.ts @@ -43,6 +43,7 @@ export interface DefaultInputProps extends Omit, 'formState'> { elementConfig: FormConfig; formState: FormProps['formState'] | unknown[] | unknown; + valid?: {[key: string]: any}; } export interface FormHooks extends Omit { diff --git a/src/styles/_input.scss b/src/styles/_input.scss index ed7494e..ebb567c 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -1,3 +1,7 @@ +@import '~compass-mixins/lib/compass'; +@import './custom_colors'; +@import './flat_ui_colors'; + .rbf-label-index { z-index: 100; } @@ -5,3 +9,16 @@ .rbf-m-40 { margin: 0 0 0 40px; } + +.rfb-feedback { + @include border-bottom-radius(3px); + + background-color: rgba($flat-pomegranate, 0.8); + color: $rbf-white; + font-size: 14px; + margin: -2px 0 0 0; + + > span { + margin: 0 0 0 15px; + } +}