fix: refactor

Author: RichardLindhout

example/package.json

@@ -9,18 +9,18 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "~47.0.12",
-    "expo-status-bar": "~1.4.2",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-native": "0.70.5",
-    "react-native-paper": "^5.2.0",
-    "react-native-safe-area-context": "^4.5.0",
-    "react-native-web": "~0.18.9"
+    "expo": "^48.0.0",
+    "expo-status-bar": "~1.4.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.3",
+    "react-native-paper": "^5.8.0",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-web": "~0.18.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@expo/webpack-config": "^0.17.2",
+    "@babel/core": "^7.20.0",
+    "@expo/webpack-config": "^18.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^4.1.0"
   },

example/src/App.tsx

@@ -36,6 +36,7 @@ type FormType = {
   address?: AddressType | null;
 };
 export default function App() {
+  const [hideRequiredField, setHideRequiredField] = React.useState(false);
   const scrollViewRef = useRef<ScrollView>(null);
   const [{ submit, formProps, hasError }, fh] = useFormState<FormType>(
     {
@@ -83,16 +84,21 @@ export default function App() {
                   label: 'Email',
                 })}
               />
-              <TextInputWithError
-                mode="outlined"
-                {...fh.telephone('telephone', {
-                  required: true,
-                  minLength: 3,
-                  maxLength: 10,
-                  shouldFollowRegexes: [telephoneRegex],
-                  label: 'Telephone',
-                })}
-              />
+              <Button onPress={() => setHideRequiredField((prev) => !prev)}>
+                hide required field
+              </Button>
+              {!hideRequiredField && (
+                <TextInputWithError
+                  mode="outlined"
+                  {...fh.telephone('telephone', {
+                    required: true,
+                    minLength: 3,
+                    maxLength: 10,
+                    shouldFollowRegexes: [telephoneRegex],
+                    label: 'Telephone',
+                  })}
+                />
+              )}
               <TextInputWithError
                 mode="outlined"
                 {...fh.text('postalCode', {

example/yarn.lock

@@ -0,0 +1,16 @@
+import useRefState from './useRefState';
+import type { BooleanUtility, DotNestedKeys } from './types';
+import * as React from 'react';
+import { deepSet } from './objectPath';
+
+export type UseTouchedReturnType<T> = ReturnType<typeof useTouched<T>>;
+export default function useTouched<T>() {
+  const [touched, sTouched] = useRefState<BooleanUtility<T>>({});
+  const setTouchedField = React.useCallback(
+    <K extends DotNestedKeys<T>>(k: K, v: boolean) => {
+      sTouched((p) => deepSet(p, k, v) as any);
+    },
+    [sTouched]
+  );
+  return { touched, setTouchedField };
+}

src/useFocusedOnce.ts

@@ -1,4 +1,3 @@
-import { deepGet } from './objectPath';
 import type {
   Customizing,
   DotNestedKeys,
@@ -17,7 +16,10 @@ export default function useLayout<T>({
   scrollViewRef: ScrollViewRef;
 }) {
   const layoutsRef = React.useRef<Record<string, LayoutRectangle>>({});
-  return <K extends DotNestedKeys<T>>(k: K, h?: Customizing<T, K>) =>
+  const onLayoutKey = <K extends DotNestedKeys<T>>(
+    k: K,
+    h?: Customizing<T, K>
+  ) =>
     referencedCallback(`layout.${k}`, (e: LayoutChangeEvent) => {
       h?.onLayout?.(e);
 
@@ -31,10 +33,14 @@ export default function useLayout<T>({
         });
       }
 
-      const value = deepGet(values.current, k);
-      // this is not ideal, but we need to check the error after the layout is
-      // calculated  because it's the only way to check if the value has an
-      // error since we don't have the handlers at mount time
-      checkError(k, h, value as any, values.current, true);
+      // const value = deepGet(values.current, k);
+      // // this is not ideal, but we need to check the error after the layout is
+      // // calculated  because it's the only way to check if the value has an
+      // // error since we don't have the handlers at mount time
+      // checkError(k, h, value as any, values.current, true);
     });
+  return {
+    onLayoutKey,
+    layoutsRef,
+  };
 }

src/layout.ts renamed to src/useLayout.ts

@@ -0,0 +1,16 @@
+import useRefState from './useRefState';
+import type { BooleanUtility, DotNestedKeys } from './types';
+import * as React from 'react';
+import { deepSet } from './objectPath';
+
+export type UseTouchedReturnType<T> = ReturnType<typeof useTouched<T>>;
+export default function useTouched<T>() {
+  const [touched, sTouched] = useRefState<BooleanUtility<T>>({});
+  const setTouchedField = React.useCallback(
+    <K extends DotNestedKeys<T>>(k: K, v: boolean) => {
+      sTouched((p) => deepSet(p, k, v) as any);
+    },
+    [sTouched]
+  );
+  return { touched, setTouchedField };
+}