style: add classname to textarea when it has errors (#237)

* style: add error-input class to Textarea when it has errors

* chore: add error styles to example forms

Author: inigomarquinez

example/src/App.jsx

@@ -4,6 +4,8 @@ import { Link, Outlet } from 'react-router-dom'
 import 'react-datepicker/dist/react-datepicker.css'
 import 'react-phone-number-input/style.css'
 
+import './styles.css'
+
 const App = () => {
   return (
     <div style={{ display: 'flex' }}>

example/src/styles.css

@@ -0,0 +1,3 @@
+.error-input {
+  border: 1px solid red !important
+}

src/Fields/Textarea/index.js

@@ -6,10 +6,13 @@ import React, { useState } from 'react'
 
 const Textarea = React.forwardRef(({ ...props }, ref) => {
   const [count, setCount] = useState(0)
+  const { 'data-haserrors': haserrors } = props
+
   return (
     <>
       <TextareaUI
         ref={ref}
+        className={haserrors ? 'error-input' : ''}
         {...props}
         onChange={(e) => {
           if (props.countType === 'word')

src/Questions/Textarea/index.js

@@ -1,3 +1,5 @@
+import { useFormContext } from 'react-hook-form'
+
 import ErrorMessage from '../../Fields/Error'
 import Textarea from '../../Fields/Textarea'
 import Label from '../../Fields/Label'
@@ -13,11 +15,14 @@ const styles = {
   }
 }
 
-const QuestionTextarea = ({ question, useForm }) => {
+const QuestionTextarea = ({ question }) => {
   const {
     register,
     formState: { errors }
-  } = useForm
+  } = useFormContext()
+
+
+
   const defaultRows = 5
   const reg = {
     ...question.registerConfig,
@@ -89,6 +94,7 @@ const QuestionTextarea = ({ question, useForm }) => {
         defaultValue={question.defaultValue}
         maximumLen={question.registerConfig.maximumLen}
         countType={question.registerConfig.countType}
+        data-haserrors={!!errors[question.name]}
         {...register(question.name, reg)}
       />
       {errors[question.name] &&

src/builder.js

@@ -86,7 +86,7 @@ const FormBuilder = ({
         <QuestionImageInput useForm={useFormObj} question={question} />
       ),
       password: <QuestionInput useForm={useFormObj} question={question} />,
-      textarea: <QuestionTextarea useForm={useFormObj} question={question} />,
+      textarea: <QuestionTextarea question={question} />,
       select: (
         <>
           <QuestionSelect useForm={useFormObj} question={question} />