@arkyn/components 1.3.130 → 1.3.132

package/dist/components/Form/FormController/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FormController/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAI/E,OAAO,cAAc,CAAC;AAItB,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA4BjD;AAED,iBAAS,iBAAiB,+BAEzB;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FormController/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAW/E,OAAO,cAAc,CAAC;AAItB,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA0CjD;AAED,iBAAS,iBAAiB,+BAEzB;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/Form/FormController/index.js

@@ -1,14 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useActionData } from "@remix-run/react";
-import { createContext, useContext, useId, useRef } from "react";
+import { useActionData, useFetchers } from "@remix-run/react";
+import { createContext, useContext, useEffect, useId, useRef, useState, } from "react";
 import "./styles.css";
 const FormControllerContext = createContext({});
 function FormController(props) {
-    const actionData = useActionData();
     const { children, className: baseClassName, id: formControllerId, ...rest } = props;
+    const actionData = useActionData();
+    const fetchers = useFetchers();
+    const [fieldErrors, setFieldErrors] = useState({});
+    useEffect(() => {
+        let newFieldErrors = { ...actionData?.fieldErrors };
+        fetchers.forEach((fetcher) => {
+            if (fetcher.data?.fieldErrors) {
+                newFieldErrors = { ...newFieldErrors, ...fetcher.data.fieldErrors };
+            }
+        });
+        setFieldErrors(newFieldErrors);
+    }, [fetchers, actionData]);
     const inputRef = useRef(null);
     const name = inputRef.current?.name || "";
-    const error = actionData?.fieldErrors?.[name] || null;
+    const error = fieldErrors?.[name] || null;
     const id = useId();
     const className = `arkynFormController ${baseClassName}`;
     return (_jsx(FormControllerContext.Provider, { value: { error, id, inputRef }, children: _jsx("section", { id: formControllerId || name || undefined, className: className.trim(), ...rest, children: children }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "1.3.130",
+  "version": "1.3.132",
   "main": "./dist/bundle.js",
   "types": "./dist/index.d.ts",
   "author": "Lucas Gonçalves",

package/src/components/Form/FormController/index.tsx

@@ -1,13 +1,19 @@
 import { FormControllerContextProps, FormControllerProps } from "@arkyn/types";
-import { useActionData } from "@remix-run/react";
-import { createContext, useContext, useId, useRef } from "react";
+import { useActionData, useFetchers } from "@remix-run/react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
 
 import "./styles.css";
 
 const FormControllerContext = createContext({} as FormControllerContextProps);
 
 function FormController(props: FormControllerProps) {
-  const actionData = useActionData<any>();
   const {
     children,
     className: baseClassName,
@@ -15,10 +21,25 @@ function FormController(props: FormControllerProps) {
     ...rest
   } = props;
 
+  const actionData = useActionData<any>();
+  const fetchers = useFetchers();
+
+  const [fieldErrors, setFieldErrors] = useState<{ [x: string]: string }>({});
+
+  useEffect(() => {
+    let newFieldErrors = { ...actionData?.fieldErrors };
+    fetchers.forEach((fetcher) => {
+      if (fetcher.data?.fieldErrors) {
+        newFieldErrors = { ...newFieldErrors, ...fetcher.data.fieldErrors };
+      }
+    });
+    setFieldErrors(newFieldErrors);
+  }, [fetchers, actionData]);
+
   const inputRef = useRef<HTMLInputElement>(null);
 
   const name = inputRef.current?.name || "";
-  const error = actionData?.fieldErrors?.[name] || null;
+  const error = fieldErrors?.[name] || null;
 
   const id = useId();
   const className = `arkynFormController ${baseClassName}`;