@websolutespa/bom-mixer-forms 1.8.1 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-forms
 
+## 1.9.0
+
+### Minor Changes
+
+- Added: useFormSchema
+
 ## 1.8.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -11,10 +11,10 @@ declare class EventEmitter {
     once(event: string, listener: (...args: any[]) => any): void;
 }
 
-declare class FormAbstractCollection<T extends FormControls> extends FormAbstract {
+declare class FormAbstractCollection<U extends Record<string, FormValue> | FormValue[], T extends FormControls> extends FormAbstract<U> {
     controls_: T;
     constructor(controls: T, validators?: (FormValidator | FormValidator[]));
-    initControl_(controlOrValue: FormAbstract | any, key: any): FormAbstract;
+    initControl_(controlOrValue: FormAbstract | FormValue, key: any): FormAbstract;
     protected setInitialOptions(options?: FormOptions): void;
     protected checkAsyncPropState_(key: keyof FormFlags, option?: FormActivator, root?: FormCollection): Promise<boolean>;
     updateState_(): void;
@@ -34,7 +34,7 @@ declare class FormAbstractCollection<T extends FormControls> extends FormAbstrac
     protected reduce_(callback: Function, result: any): any;
     protected all_(key: (keyof FormAbstract), value: any): boolean;
     protected any_(key: (keyof FormAbstract), value: any): boolean;
-    protected map_(): FormAbstract[];
+    protected map_(): FormAbstract<any>[];
     get controls(): T;
     set controls(controls: T);
     set disabled(disabled: boolean);
@@ -42,12 +42,8 @@ declare class FormAbstractCollection<T extends FormControls> extends FormAbstrac
     set hidden(hidden: boolean);
     set submitted(submitted: boolean);
     set touched(touched: boolean);
-    get value(): {
-        [key: string]: FormValue;
-    };
-    set value(value: {
-        [key: string]: FormValue;
-    });
+    get value(): U;
+    set value(value: U);
     get errors(): {
         [key: string]: any;
     };
@@ -56,11 +52,11 @@ declare class FormAbstractCollection<T extends FormControls> extends FormAbstrac
     });
 }
 
-declare class FormArray extends FormAbstractCollection<FormAbstract[]> {
-    constructor(controls?: FormAbstract[], validators?: FormValidator | FormValidator[], initialOptions?: FormOptions);
+declare class FormArray<T extends FormValue[] = FormValue[]> extends FormAbstractCollection<T, FormArrayControls> {
+    constructor(controls?: FormArrayControls, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions);
     forEach_(callback: (control: FormAbstract, key: number) => any): void;
-    map_(): FormAbstract[];
-    get value(): FormValue[];
+    map_(): FormArrayControls;
+    get value(): T;
     get length(): number;
     protected init(control: FormAbstract, key: number): void;
     set(control: FormAbstract, key: number): void;
@@ -69,25 +65,19 @@ declare class FormArray extends FormAbstractCollection<FormAbstract[]> {
     insert(control: FormAbstract, key: number): void;
     remove(control: FormAbstract): void;
     removeKey(key: number): void;
-    at(key: number): FormAbstract;
+    at(key: number): FormAbstract<any>;
 }
-declare function formArray(controls?: FormAbstract[], validators?: FormValidator | FormValidator[]): FormArray;
+declare function formArray(controls?: FormArrayControls, validators?: FormValidator | FormValidator[]): FormArray<any[]>;
 
 declare class FormControl extends FormAbstract {
     constructor(value?: FormValue, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions);
 }
 declare function formControl(value?: FormValue, validators?: FormValidator | FormValidator[]): FormControl;
 
-declare class FormGroup extends FormAbstractCollection<{
-    [key: string]: FormAbstract;
-}> {
-    constructor(controls?: {
-        [key: string]: FormAbstract | any;
-    }, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions);
+declare class FormGroup<T extends Record<string, FormValue> = FormValue> extends FormAbstractCollection<T, FormGroupControls> {
+    constructor(controls?: FormGroupControls, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions);
 }
-declare function formGroup(controls?: {
-    [key: string]: FormAbstract | FormValue;
-}, validators?: FormValidator | FormValidator[]): FormGroup;
+declare function formGroup(controls?: FormGroupControls, validators?: FormValidator | FormValidator[]): FormGroup<any>;
 
 type FormValue = any;
 type FormValueGroup = {
@@ -121,10 +111,10 @@ type FormOptions = {
 type ValidationError = {
     [key: string]: any;
 };
-type FormControls = {
-    [key: string]: FormAbstract | FormValue;
-} | FormAbstract[];
-type FormCollection = FormAbstractCollection<FormControls>;
+type FormGroupControls = Record<string, FormAbstract | FormValue>;
+type FormArrayControls = FormAbstract[];
+type FormControls = FormGroupControls | FormArrayControls;
+type FormCollection = FormAbstractCollection<Record<string, any> | any[], FormControls>;
 type FormActivator = boolean | ((value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => boolean | Promise<boolean>);
 type FormValidator = (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => null | ValidationError;
 type FormAsyncValidator = (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => Promise<null | ValidationError>;
@@ -144,9 +134,7 @@ type FormFlags = {
     untouched: boolean;
     unsubmitted: boolean;
 };
-type FormErrors = {
-    [key: string]: any;
-};
+type FormErrors = Record<string, any>;
 type FormValidationError = {
     key: string;
     value: FormValue;
@@ -176,18 +164,14 @@ type IFormBuilderControlSchema = {
     children?: IFormBuilderSchema;
     customData?: Record<string, any>;
 };
-type IFormBuilderGroupSchema = {
-    [key: string]: IFormBuilderControlSchema;
-};
+type IFormBuilderGroupSchema = Record<string, IFormBuilderControlSchema>;
 type IFormBuilderArraySchema = IFormBuilderControlSchema[];
-type IFormBuilderGroupValues = {
-    [key: string]: FormGroup | FormArray | FormControl;
-};
+type IFormBuilderGroupValues = Record<string, FormGroup | FormArray | FormControl>;
 type IFormBuilderSchema = IFormBuilderGroupSchema | IFormBuilderArraySchema;
 
-declare class FormAbstract extends EventEmitter {
+declare class FormAbstract<T = any> extends EventEmitter {
     errors_: ValidationError;
-    value_: FormValue;
+    value_: T | null;
     validators_: FormValidator[];
     state_: FormFlags;
     name?: string | number;
@@ -247,8 +231,8 @@ declare class FormAbstract extends EventEmitter {
     get pristine(): boolean;
     get untouched(): boolean;
     get unsubmitted(): boolean;
-    get value(): any;
-    set value(value: any);
+    get value(): T | null;
+    set value(value: T | null);
 }
 
 declare function validValue(value: FormValue): any;
@@ -317,6 +301,17 @@ declare function useControl<T>(control: FormAbstract): [FormState<T>, (value: T
 
 declare function useForm<T, U extends (FormGroup | FormArray)>(factory: () => U, deps?: DependencyList): [FormState<T>, (value: any) => void, () => void, () => void, U];
 
-declare function useFormBuilder<T, U extends (FormGroup | FormArray)>(schema: IFormBuilderSchema, deps?: DependencyList): [FormState<T>, (value: Partial<T>) => void, () => void, () => void, U];
+/**
+ * @deprecated Since version 1.9.0. Will be deleted in version 1.10.0. Use useFormSchema instead.
+ */
+declare function useFormBuilder<T extends (Record<string, FormValue> | FormValue[]) = Record<string, FormValue>, U extends (T extends FormValue[] ? FormArray<T> : FormGroup<T>) = T extends FormValue[] ? FormArray<T> : FormGroup<T>>(schema: IFormBuilderSchema, deps?: DependencyList): [FormState<T>, (value: Partial<T>) => void, () => void, () => void, U];
+
+declare function useFormSchema<T extends (Record<string, FormValue> | FormValue[]) = Record<string, FormValue>, U extends (T extends FormValue[] ? FormArray<T> : FormGroup<T>) = T extends FormValue[] ? FormArray<T> : FormGroup<T>>(schema: IFormBuilderSchema, deps?: DependencyList): {
+    state: FormState<T>;
+    setValue: (value: Partial<T>) => void;
+    setTouched: () => void;
+    reset: () => void;
+    form: U;
+};
 
-export { ControlType, EmailValidator, FormAbstract, FormAbstractCollection, FormActivator, FormArray, FormAsyncValidator, FormCollection, FormControl, FormControls, FormErrors, FormFlags, FormGroup, FormOptions, FormState, FormValidationError, FormValidationErrors, FormValidator, FormValue, FormValueArray, FormValueGroup, IControlParam, IFormBuilderArraySchema, IFormBuilderControlSchema, IFormBuilderGroupSchema, IFormBuilderGroupValues, IFormBuilderSchema, IFormOption, MatchValidator, MaxLengthValidator, MaxValidator, MinLengthValidator, MinValidator, NullValidator, PatternValidator, RequiredIfValidator, RequiredTrueValidator, RequiredValidator, ValidationError, formArray, formControl, formGroup, mapErrors_, stringToValue, useControl, useForm, useFormBuilder, validValue, valueToString };
+export { ControlType, EmailValidator, FormAbstract, FormAbstractCollection, FormActivator, FormArray, FormArrayControls, FormAsyncValidator, FormCollection, FormControl, FormControls, FormErrors, FormFlags, FormGroup, FormGroupControls, FormOptions, FormState, FormValidationError, FormValidationErrors, FormValidator, FormValue, FormValueArray, FormValueGroup, IControlParam, IFormBuilderArraySchema, IFormBuilderControlSchema, IFormBuilderGroupSchema, IFormBuilderGroupValues, IFormBuilderSchema, IFormOption, MatchValidator, MaxLengthValidator, MaxValidator, MinLengthValidator, MinValidator, NullValidator, PatternValidator, RequiredIfValidator, RequiredTrueValidator, RequiredValidator, ValidationError, formArray, formControl, formGroup, mapErrors_, stringToValue, useControl, useForm, useFormBuilder, useFormSchema, validValue, valueToString };

package/dist/index.js

@@ -78,6 +78,7 @@ __export(src_exports, {
   useControl: () => useControl,
   useForm: () => useForm,
   useFormBuilder: () => useFormBuilder,
+  useFormSchema: () => useFormSchema,
   validValue: () => validValue,
   valueToString: () => valueToString
 });
@@ -1115,6 +1116,73 @@ function mapSchema_(schema) {
       return mapControl_(schema);
   }
 }
+
+// src/hooks/useFormSchema/useFormSchema.ts
+var import_react4 = require("react");
+function useFormSchema(schema, deps = []) {
+  const form = (0, import_react4.useMemo)(() => {
+    if (Array.isArray(schema)) {
+      return mapArray_2(schema);
+    } else {
+      return mapGroup_2(schema);
+    }
+  }, deps);
+  const setValue = (0, import_react4.useCallback)((value) => {
+    form.patch(value);
+  }, deps);
+  const setTouched = (0, import_react4.useCallback)(() => {
+    form.touched = true;
+  }, deps);
+  const reset = (0, import_react4.useCallback)(() => {
+    form.reset();
+  }, deps);
+  const [state, setState] = (0, import_react4.useState)({
+    value: form.value,
+    flags: form.state,
+    errors: mapErrors_(form.errors)
+  });
+  (0, import_react4.useEffect)(() => {
+    const onChange = (value) => {
+      const newState = { value, flags: form.state, errors: mapErrors_(form.errors) };
+    };
+    form.on("change", onChange);
+    form.revalidate_();
+    return () => form.off("change", onChange);
+  }, deps);
+  return {
+    form,
+    state,
+    setTouched,
+    setValue,
+    reset
+  };
+}
+function mapGroup_2(children, schema) {
+  const controls = {};
+  Object.keys(children).forEach((key) => {
+    controls[key] = mapSchema_2(__spreadValues({ name: key }, children[key]));
+  });
+  const group = new FormGroup(controls, schema == null ? void 0 : schema.validators, schema);
+  return group;
+}
+function mapArray_2(children, schema) {
+  const controls = children.map((x) => mapSchema_2(x));
+  const array = new FormArray(controls, schema == null ? void 0 : schema.validators, schema);
+  return array;
+}
+function mapControl_2(schema) {
+  return new FormControl(schema.value, schema.validators, schema);
+}
+function mapSchema_2(schema) {
+  switch (schema.schema) {
+    case "group":
+      return mapGroup_2(schema.children || {}, schema);
+    case "array":
+      return mapArray_2(schema.children || [], schema);
+    default:
+      return mapControl_2(schema);
+  }
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   EmailValidator,
@@ -1141,6 +1209,7 @@ function mapSchema_(schema) {
   useControl,
   useForm,
   useFormBuilder,
+  useFormSchema,
   validValue,
   valueToString
 });

package/dist/index.mjs

@@ -1067,6 +1067,73 @@ function mapSchema_(schema) {
       return mapControl_(schema);
   }
 }
+
+// src/hooks/useFormSchema/useFormSchema.ts
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
+function useFormSchema(schema, deps = []) {
+  const form = useMemo3(() => {
+    if (Array.isArray(schema)) {
+      return mapArray_2(schema);
+    } else {
+      return mapGroup_2(schema);
+    }
+  }, deps);
+  const setValue = useCallback4((value) => {
+    form.patch(value);
+  }, deps);
+  const setTouched = useCallback4(() => {
+    form.touched = true;
+  }, deps);
+  const reset = useCallback4(() => {
+    form.reset();
+  }, deps);
+  const [state, setState] = useState4({
+    value: form.value,
+    flags: form.state,
+    errors: mapErrors_(form.errors)
+  });
+  useEffect4(() => {
+    const onChange = (value) => {
+      const newState = { value, flags: form.state, errors: mapErrors_(form.errors) };
+    };
+    form.on("change", onChange);
+    form.revalidate_();
+    return () => form.off("change", onChange);
+  }, deps);
+  return {
+    form,
+    state,
+    setTouched,
+    setValue,
+    reset
+  };
+}
+function mapGroup_2(children, schema) {
+  const controls = {};
+  Object.keys(children).forEach((key) => {
+    controls[key] = mapSchema_2(__spreadValues({ name: key }, children[key]));
+  });
+  const group = new FormGroup(controls, schema == null ? void 0 : schema.validators, schema);
+  return group;
+}
+function mapArray_2(children, schema) {
+  const controls = children.map((x) => mapSchema_2(x));
+  const array = new FormArray(controls, schema == null ? void 0 : schema.validators, schema);
+  return array;
+}
+function mapControl_2(schema) {
+  return new FormControl(schema.value, schema.validators, schema);
+}
+function mapSchema_2(schema) {
+  switch (schema.schema) {
+    case "group":
+      return mapGroup_2(schema.children || {}, schema);
+    case "array":
+      return mapArray_2(schema.children || [], schema);
+    default:
+      return mapControl_2(schema);
+  }
+}
 export {
   EmailValidator,
   FormAbstract,
@@ -1092,6 +1159,7 @@ export {
   useControl,
   useForm,
   useFormBuilder,
+  useFormSchema,
   validValue,
   valueToString
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-forms",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "Mixer Forms module of the BOM Repository",
   "keywords": [
     "bom",

package/src/forms/form-abstract-collection.ts

@@ -3,7 +3,10 @@ import { FormAbstract } from './form-abstract';
 import { FormControl } from './form-control';
 import { FormActivator, FormCollection, FormControls, FormFlags, FormOptions, FormValidator, FormValue } from './types';
 
-export class FormAbstractCollection<T extends FormControls> extends FormAbstract {
+export class FormAbstractCollection<
+  U extends Record<string, FormValue> | FormValue[],
+  T extends FormControls> extends FormAbstract<U
+  > {
 
   controls_: T;
 
@@ -16,7 +19,7 @@ export class FormAbstractCollection<T extends FormControls> extends FormAbstract
     });
   }
 
-  initControl_(controlOrValue: FormAbstract | any, key: any): FormAbstract {
+  initControl_(controlOrValue: FormAbstract | FormValue, key: any): FormAbstract {
     const control = controlOrValue instanceof FormAbstract ? controlOrValue : new FormControl(controlOrValue);
     control.name = key;
     control.parent = this;
@@ -283,18 +286,18 @@ export class FormAbstractCollection<T extends FormControls> extends FormAbstract
     });
   }
 
-  get value(): { [key: string]: FormValue } {
-    return this.reduce_((result: { [key: string]: FormValue }, control: FormAbstract, key: string) => {
+  get value(): U {
+    return this.reduce_((result: U, control: FormAbstract, key: string) => {
       if (control.enabled) {
-        result[key] = control.value;
+        result[key as keyof U] = control.value;
       }
       return result;
     }, {});
   }
 
-  set value(value: { [key: string]: FormValue }) {
+  set value(value: U) {
     this.forEach_((control: FormAbstract, key: string) => {
-      control.value = value[key];
+      control.value = value[key as keyof U];
     });
   }
 

package/src/forms/form-abstract.ts

@@ -3,11 +3,11 @@ import { EventEmitter } from './event-emitter';
 import { ControlType, FormActivator, FormCollection, FormFlags, FormOptions, FormValidator, FormValue, ValidationError } from './types';
 import { validValue } from './utils';
 
-export class FormAbstract extends EventEmitter {
+export class FormAbstract<T = any> extends EventEmitter {
 
   // callbacks_: Function[] = [];
   errors_: ValidationError;
-  value_: FormValue;
+  value_: T | null;
   validators_: FormValidator[];
   state_: FormFlags;
   name?: string | number;

package/src/forms/form-array.ts

@@ -1,10 +1,10 @@
 import { FormAbstract } from './form-abstract';
 import { FormAbstractCollection } from './form-abstract-collection';
-import { FormOptions, FormValidator, FormValue } from './types';
+import { FormArrayControls, FormOptions, FormValidator, FormValue } from './types';
 
-export class FormArray extends FormAbstractCollection<FormAbstract[]> {
+export class FormArray<T extends FormValue[] = FormValue[]> extends FormAbstractCollection<T, FormArrayControls> {
 
-  constructor(controls: FormAbstract[] = [], validators?: FormValidator | FormValidator[], initialOptions?: FormOptions) {
+  constructor(controls: FormArrayControls = [], validators?: FormValidator | FormValidator[], initialOptions?: FormOptions) {
     super(controls, validators);
     this.setInitialOptions(initialOptions);
     // this.revalidate_();
@@ -18,8 +18,8 @@ export class FormArray extends FormAbstractCollection<FormAbstract[]> {
     return this.controls;
   }
 
-  get value(): FormValue[] {
-    return this.reduce_((result: FormValue[], control: FormAbstract, key: number) => {
+  get value(): T {
+    return this.reduce_((result: T, control: FormAbstract, key: number) => {
       result[key] = control.value;
       return result;
     }, []); // init as array
@@ -73,6 +73,6 @@ export class FormArray extends FormAbstractCollection<FormAbstract[]> {
   }
 }
 
-export function formArray(controls: FormAbstract[] = [], validators?: FormValidator | FormValidator[]) {
+export function formArray(controls: FormArrayControls = [], validators?: FormValidator | FormValidator[]) {
   return new FormArray(controls, validators);
 }

package/src/forms/form-group.ts

@@ -1,15 +1,14 @@
-import { FormAbstract } from './form-abstract';
 import { FormAbstractCollection } from './form-abstract-collection';
-import { FormOptions, FormValidator, FormValue } from './types';
+import { FormGroupControls, FormOptions, FormValidator, FormValue } from './types';
 
-export class FormGroup extends FormAbstractCollection<{ [key: string]: FormAbstract }> {
-  constructor(controls: { [key: string]: FormAbstract | any } = {}, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions) {
+export class FormGroup<T extends Record<string, FormValue> = FormValue> extends FormAbstractCollection<T, FormGroupControls> {
+  constructor(controls: FormGroupControls = {}, validators?: FormValidator | FormValidator[], initialOptions?: FormOptions) {
     super(controls, validators);
     this.setInitialOptions(initialOptions);
     // this.revalidate_();
   }
 }
 
-export function formGroup(controls: { [key: string]: FormAbstract | FormValue } = {}, validators?: FormValidator | FormValidator[]) {
+export function formGroup(controls: FormGroupControls = {}, validators?: FormValidator | FormValidator[]) {
   return new FormGroup(controls, validators);
 }

package/src/forms/types.ts

@@ -34,8 +34,10 @@ export type ValidationError = {
   [key: string]: any
 };
 
-export type FormControls = { [key: string]: FormAbstract | FormValue } | FormAbstract[];
-export type FormCollection = FormAbstractCollection<FormControls>;
+export type FormGroupControls = Record<string, FormAbstract | FormValue>;
+export type FormArrayControls = FormAbstract[];
+export type FormControls = FormGroupControls | FormArrayControls;
+export type FormCollection = FormAbstractCollection<Record<string, any> | any[], FormControls>;
 export type FormActivator = boolean | ((value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => boolean | Promise<boolean>);
 export type FormValidator = (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => null | ValidationError;
 export type FormAsyncValidator = (value: FormValue, rootValue: FormValue, control?: FormAbstract, root?: FormCollection) => Promise<null | ValidationError>;
@@ -57,7 +59,7 @@ export type FormFlags = {
   unsubmitted: boolean;
 };
 // export type FormFlags = { [key: string]: boolean };
-export type FormErrors = { [key: string]: any };
+export type FormErrors = Record<string, any>;
 export type FormValidationError = { key: string, value: FormValue };
 export type FormValidationErrors = FormValidationError[];
 
@@ -86,7 +88,7 @@ export type IFormBuilderControlSchema = {
   customData?: Record<string, any>;
 };
 
-export type IFormBuilderGroupSchema = { [key: string]: IFormBuilderControlSchema };
+export type IFormBuilderGroupSchema = Record<string, IFormBuilderControlSchema>;
 export type IFormBuilderArraySchema = IFormBuilderControlSchema[];
-export type IFormBuilderGroupValues = { [key: string]: FormGroup | FormArray | FormControl };
+export type IFormBuilderGroupValues = Record<string, FormGroup | FormArray | FormControl>;
 export type IFormBuilderSchema = IFormBuilderGroupSchema | IFormBuilderArraySchema;

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useControl } from './useControl/useControl';
 export { useForm } from './useForm/useForm';
 export { useFormBuilder } from './useFormBuilder/useFormBuilder';
+export { useFormSchema } from './useFormSchema/useFormSchema';
 

package/src/hooks/useFormBuilder/useFormBuilder.ts

@@ -1,8 +1,14 @@
 import { DependencyList, useCallback, useEffect, useMemo, useState } from 'react';
 import { FormArray, FormControl, FormGroup, FormState, mapErrors_ } from '../../forms';
-import { IFormBuilderArraySchema, IFormBuilderControlSchema, IFormBuilderGroupSchema, IFormBuilderGroupValues, IFormBuilderSchema } from '../../forms/types';
+import { FormValue, IFormBuilderArraySchema, IFormBuilderControlSchema, IFormBuilderGroupSchema, IFormBuilderGroupValues, IFormBuilderSchema } from '../../forms/types';
 
-export function useFormBuilder<T, U extends (FormGroup | FormArray)>(
+/**
+ * @deprecated Since version 1.9.0. Will be deleted in version 1.10.0. Use useFormSchema instead.
+ */
+export function useFormBuilder<
+  T extends (Record<string, FormValue> | FormValue[]) = Record<string, FormValue>,
+  U extends (T extends FormValue[] ? FormArray<T> : FormGroup<T>) = T extends FormValue[] ? FormArray<T> : FormGroup<T>
+>(
   schema: IFormBuilderSchema,
   deps: DependencyList = []
 ): [FormState<T>, (value: Partial<T>) => void, () => void, () => void, U] {

package/src/hooks/useFormSchema/useFormSchema.ts

@@ -0,0 +1,105 @@
+import { DependencyList, useCallback, useEffect, useMemo, useState } from 'react';
+import { FormArray, FormControl, FormGroup, FormState, mapErrors_ } from '../../forms';
+import { FormValue, IFormBuilderArraySchema, IFormBuilderControlSchema, IFormBuilderGroupSchema, IFormBuilderGroupValues, IFormBuilderSchema } from '../../forms/types';
+
+export function useFormSchema<
+  T extends (Record<string, FormValue> | FormValue[]) = Record<string, FormValue>,
+  U extends (T extends FormValue[] ? FormArray<T> : FormGroup<T>) = T extends FormValue[] ? FormArray<T> : FormGroup<T>
+>(
+  schema: IFormBuilderSchema,
+  deps: DependencyList = []
+): {
+  state: FormState<T>,
+  setValue: (value: Partial<T>) => void,
+  setTouched: () => void,
+  reset: () => void,
+  form: U,
+} {
+  const form: U = useMemo<U>(() => {
+    // console.log(' useFormSchema.rebuild', schema);
+    if (Array.isArray(schema)) {
+      return mapArray_(schema) as U;
+    } else {
+      return mapGroup_(schema) as U;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  const setValue = useCallback((value: Partial<T>) => {
+    form.patch(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  const setTouched = useCallback(() => {
+    form.touched = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  const reset = useCallback(() => {
+    form.reset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  const [state, setState] = useState<FormState<T>>({
+    value: form.value as T,
+    flags: form.state,
+    errors: mapErrors_(form.errors),
+  });
+
+  useEffect(() => {
+    const onChange = (value: T) => {
+      // console.log(' useFormSchema.onChange', value);
+      const newState = { value, flags: form.state, errors: mapErrors_(form.errors) };
+      // setState(newState);
+    };
+    form.on('change', onChange);
+    //  form.validateAndChange_();
+    form.revalidate_();
+    // const value =  form.value;
+    //  form.reset();
+    //  form.patch(value);
+    // console.log('subscribe');
+    return () => form.off('change', onChange);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  // console.log(' useFormSchema',  form.value);
+
+  return {
+    form,
+    state,
+    setTouched,
+    setValue,
+    reset,
+  };
+}
+
+function mapGroup_(children: IFormBuilderGroupSchema, schema?: IFormBuilderControlSchema): FormGroup {
+  const controls: IFormBuilderGroupValues = {};
+  Object.keys(children).forEach(key => {
+    controls[key] = mapSchema_({ name: key, ...children[key] });
+  });
+  const group = new FormGroup(controls, schema?.validators, schema);
+  return group;
+}
+
+function mapArray_(children: IFormBuilderControlSchema[], schema?: IFormBuilderControlSchema): FormArray {
+  const controls = children.map(x => mapSchema_(x));
+  const array = new FormArray(controls, schema?.validators, schema);
+  return array;
+}
+
+function mapControl_(schema: IFormBuilderControlSchema): FormControl {
+  return new FormControl(schema.value, schema.validators, schema);
+}
+
+function mapSchema_(schema: IFormBuilderControlSchema): FormGroup | FormArray | FormControl {
+  switch (schema.schema) {
+    case 'group':
+      return mapGroup_(schema.children as IFormBuilderGroupSchema || {}, schema);
+    case 'array':
+      return mapArray_(schema.children as IFormBuilderArraySchema || [], schema);
+    default:
+      return mapControl_(schema);
+  }
+}