@arkyn/components 1.3.133 → 1.3.135

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;AAW/E,OAAO,cAAc,CAAC;AAItB,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA6CjD;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;AAKtB,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA4BjD;AAED,iBAAS,iBAAiB,+BAEzB;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -1,24 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useActionData, useFetchers } from "@remix-run/react";
-import { createContext, useContext, useEffect, useId, useRef, useState, } from "react";
+import { createContext, useContext, useId, useRef, } from "react";
 import "./styles.css";
+import { useFieldErrors } from "../../../hooks/useFieldErrors";
 const FormControllerContext = createContext({});
 function FormController(props) {
     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 };
-            }
-        });
-        if (JSON.stringify(newFieldErrors) !== JSON.stringify(fieldErrors)) {
-            setFieldErrors(newFieldErrors);
-        }
-    }, [fetchers, actionData, fieldErrors]);
+    const fieldErrors = useFieldErrors();
     const inputRef = useRef(null);
     const name = inputRef.current?.name || "";
     const error = fieldErrors?.[name] || null;

package/dist/hooks/useFieldErrors.d.ts

@@ -0,0 +1,5 @@
+declare function useFieldErrors(): {
+    [x: string]: string;
+};
+export { useFieldErrors };
+//# sourceMappingURL=useFieldErrors.d.ts.map

package/dist/hooks/useFieldErrors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldErrors.d.ts","sourceRoot":"","sources":["../../src/hooks/useFieldErrors.ts"],"names":[],"mappings":"AAGA,iBAAS,cAAc;;EA0CtB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/hooks/useFieldErrors.js

@@ -0,0 +1,39 @@
+import { useActionData, useFetchers, useNavigation } from "@remix-run/react";
+import { useEffect, useState } from "react";
+function useFieldErrors() {
+    const actionData = useActionData();
+    const navigation = useNavigation();
+    const fetchers = useFetchers();
+    const [fetcherFieldErrors, setFetcherFieldErrors] = useState(null);
+    function compareObjects(obj1, obj2) {
+        return JSON.stringify(obj1) === JSON.stringify(obj2);
+    }
+    function handleClearFields() {
+        if (fetcherFieldErrors)
+            setFetcherFieldErrors(null);
+        return;
+    }
+    // create field errors
+    useEffect(() => {
+        let newFieldErrors = fetchers[0]?.data?.fieldErrors || {};
+        if (!compareObjects(fetcherFieldErrors, newFieldErrors)) {
+            if (Object.entries(newFieldErrors).length !== 0) {
+                setFetcherFieldErrors(newFieldErrors);
+            }
+        }
+    }, [fetchers, actionData]);
+    // clear field errors
+    useEffect(() => {
+        if (fetchers[0]?.state === "submitting")
+            handleClearFields();
+    }, [fetchers, navigation]);
+    const responseFieldErrors = actionData?.fieldErrors || fetcherFieldErrors;
+    let mappedResponse = {};
+    Object.entries(responseFieldErrors || {}).forEach(([key, value]) => {
+        if (typeof value === "string" && typeof key === "string") {
+            mappedResponse[key] = value;
+        }
+    });
+    return mappedResponse;
+}
+export { useFieldErrors };

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { Toast } from "./components/Toast";
 export { Tooltip } from "./components/Tooltip";
 export { useAutomation } from "./hooks/useAutomation";
 export { useDrawer } from "./hooks/useDrawer";
+export { useFieldErrors } from "./hooks/useFieldErrors";
 export { useModal } from "./hooks/useModal";
 export { useScopedParams } from "./hooks/useScopedParams";
 export { useToast } from "./hooks/useToast";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,UAAU,GACX,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EACL,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,UAAU,GACX,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EACL,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -31,6 +31,7 @@ export { Tooltip } from "./components/Tooltip";
 // Hooks
 export { useAutomation } from "./hooks/useAutomation";
 export { useDrawer } from "./hooks/useDrawer";
+export { useFieldErrors } from "./hooks/useFieldErrors";
 export { useModal } from "./hooks/useModal";
 export { useScopedParams } from "./hooks/useScopedParams";
 export { useToast } from "./hooks/useToast";

package/package.json

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

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

@@ -10,6 +10,7 @@ import {
 } from "react";
 
 import "./styles.css";
+import { useFieldErrors } from "../../../hooks/useFieldErrors";
 
 const FormControllerContext = createContext({} as FormControllerContextProps);
 
@@ -21,24 +22,7 @@ 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 };
-      }
-    });
-
-    if (JSON.stringify(newFieldErrors) !== JSON.stringify(fieldErrors)) {
-      setFieldErrors(newFieldErrors);
-    }
-  }, [fetchers, actionData, fieldErrors]);
-
+  const fieldErrors = useFieldErrors();
   const inputRef = useRef<HTMLInputElement>(null);
 
   const name = inputRef.current?.name || "";

package/src/hooks/useFieldErrors.ts

@@ -0,0 +1,48 @@
+import { useActionData, useFetchers, useNavigation } from "@remix-run/react";
+import { useEffect, useState } from "react";
+
+function useFieldErrors() {
+  const actionData = useActionData<any>();
+  const navigation = useNavigation();
+  const fetchers = useFetchers();
+
+  const [fetcherFieldErrors, setFetcherFieldErrors] = useState<any>(null);
+
+  function compareObjects(obj1: any, obj2: any) {
+    return JSON.stringify(obj1) === JSON.stringify(obj2);
+  }
+
+  function handleClearFields() {
+    if (fetcherFieldErrors) setFetcherFieldErrors(null);
+    return;
+  }
+
+  // create field errors
+  useEffect(() => {
+    let newFieldErrors = fetchers[0]?.data?.fieldErrors || {};
+
+    if (!compareObjects(fetcherFieldErrors, newFieldErrors)) {
+      if (Object.entries(newFieldErrors).length !== 0) {
+        setFetcherFieldErrors(newFieldErrors);
+      }
+    }
+  }, [fetchers, actionData]);
+
+  // clear field errors
+  useEffect(() => {
+    if (fetchers[0]?.state === "submitting") handleClearFields();
+  }, [fetchers, navigation]);
+
+  const responseFieldErrors = actionData?.fieldErrors || fetcherFieldErrors;
+  let mappedResponse: { [x: string]: string | undefined | null } = {};
+
+  Object.entries(responseFieldErrors || {}).forEach(([key, value]) => {
+    if (typeof value === "string" && typeof key === "string") {
+      mappedResponse[key] = value;
+    }
+  });
+
+  return mappedResponse;
+}
+
+export { useFieldErrors };

package/src/index.ts

@@ -47,6 +47,7 @@ export { Tooltip } from "./components/Tooltip";
 // Hooks
 export { useAutomation } from "./hooks/useAutomation";
 export { useDrawer } from "./hooks/useDrawer";
+export { useFieldErrors } from "./hooks/useFieldErrors";
 export { useModal } from "./hooks/useModal";
 export { useScopedParams } from "./hooks/useScopedParams";
 export { useToast } from "./hooks/useToast";