fix: nested root keys typescript

Author: RichardLindhout

example/src/App.tsx

@@ -1,9 +1,19 @@
 import * as React from 'react';
 
 import { View } from 'react-native';
-import { useFormState, Form } from '../../src/index';
-import { Button, HelperText, TextInput } from 'react-native-paper';
+import { Form, useFormState } from '../../src/index';
+import {
+  Button,
+  HelperText,
+  Surface,
+  TextInput,
+  Title,
+} from 'react-native-paper';
 
+type AddressType = {
+  street: string;
+  houseNumber: string;
+};
 type FormType = {
   email: string;
   telephone: string;
@@ -16,10 +26,7 @@ type FormType = {
     telephone: string;
     revenue: number;
   };
-  address?: {
-    street: string;
-    houseNumber: string;
-  };
+  address?: AddressType;
 };
 export default function App() {
   const [
@@ -58,7 +65,9 @@ export default function App() {
         marginTop: 100,
         marginLeft: 12,
         marginRight: 12,
-        // alignSelf: 'center',
+        alignSelf: 'center',
+        width: 300,
+        paddingBottom: 500,
       }}
     >
       <Form {...formProps}>
@@ -175,6 +184,9 @@ export default function App() {
         <HelperText type="error" visible={hasError('organization.revenue')}>
           {errors.organization?.revenue}
         </HelperText>
+
+        <AddressEdit {...fh.raw('address')} />
+
         <Button mode="contained" onPress={submit} style={{ marginTop: 24 }}>
           Save
         </Button>
@@ -183,15 +195,44 @@ export default function App() {
   );
 }
 
+function AddressEdit({
+  value,
+  onChange,
+  ...rest
+}: {
+  value: AddressType | undefined;
+  onChange: (v: AddressType | undefined) => void;
+}) {
+  const [{ formProps }, fh] = useFormState<AddressType>(
+    value || { street: '', houseNumber: '' },
+    {
+      onChange,
+    }
+  );
+  return (
+    <Surface {...rest}>
+      <Title>Nested form</Title>
+      <Form {...formProps}>
+        <TextInput
+          mode="outlined"
+          label="Street"
+          {...fh.streetAddress('street')}
+        />
+        <TextInput
+          mode="outlined"
+          label="House number"
+          {...fh.streetAddress('houseNumber')}
+        />
+      </Form>
+    </Surface>
+  );
+}
+
 function looksLikeTelephone(str: string): boolean {
   if (str.length !== 10) {
     return false;
   }
-  let isNum = /^\d+$/.test(str);
-  if (!isNum) {
-    return false;
-  }
-  return true;
+  return /^\d+$/.test(str);
 }
 
 function looksLikeMail(str: string): boolean {

src/objectPath.ts

@@ -174,7 +174,7 @@ export function deepGet<V>(obj: any, path: any): V {
     return nextObj;
   }
 
-  return deepGet((obj as any)[currentPath], path.slice(1));
+  return deepGet(obj[currentPath], path.slice(1));
 }
 
 export const deepSet = set.bind(null, null);

src/types.ts

@@ -36,6 +36,29 @@ export type GetFieldType<T, P> = P extends `${infer Left}.${infer Right}`
 // https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object
 
 export type DotPrefix<T extends string> = T extends '' ? '' : `.${T}`;
+// export type DotNestedKeysAndRoot<T> = (
+//   T extends object
+//     ? {
+//         [K in Exclude<keyof T, symbol>]: `${K}${DotPrefix<
+//           DotNestedKeys<T[K]>
+//         >}`;
+//       }[Exclude<keyof T, symbol>]
+//     : ''
+// ) extends infer D
+//   ? Extract<D, string>
+//   : never;
+
+export type DotNestedKeysWithRoot<T> = (
+  T extends object
+    ? {
+        [K in Exclude<keyof T, symbol>]:
+          | `${K}${DotPrefix<DotNestedKeys<T[K]>>}`
+          | `${K}`;
+      }[Exclude<keyof T, symbol>]
+    : ''
+) extends infer D
+  ? Extract<D, string>
+  : never;
 
 export type DotNestedKeys<T> = (
   T extends object

src/useFormState.ts

@@ -16,6 +16,7 @@ import type {
   DotNestedKeys,
   GetFieldType,
   TouchedUtility,
+  DotNestedKeysWithRoot,
 } from './types';
 
 type FormTextInputProps = {
@@ -62,7 +63,7 @@ type CustomizingRaw<V, T> = {
   onLayout?: TextInputProps['onLayout'];
 };
 
-type FormRawType<T> = <K extends DotNestedKeys<T>>(
+type FormRawType<T> = <K extends DotNestedKeysWithRoot<T>>(
   key: K,
   handlers?: CustomizingRaw<GetFieldType<T, K>, T>
 ) => FormRawProps<GetFieldType<T, K>>;