feat(manager): integrate manager with DDF

Author: rvsia

packages/form-state-manager/package.json

@@ -2,10 +2,16 @@
   "name": "@data-driven-forms/form-state-manager",
   "version": "0.0.1-beta.0",
   "description": "Form state management library for data driven forms",
-  "main": "index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "author": "Martin Marosi",
   "typings": "dist/cjs/index.d.ts",
-  "private": true,
+  "repository": "[email protected]:data-driven-forms/react-forms.git",
+  "keywords": [
+    "react",
+    "forms",
+    "javascript"
+  ],
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-class-properties": "^7.1.0",

packages/form-state-manager/src/files/form-manager-context.ts

@@ -19,7 +19,7 @@ const FormManagerContext = createContext<ManagerContextValue>({
   }),
   formOptions: createManagerApi({
     onSubmit: noop
-  }),
+  })(),
   getFieldValue: noop,
   getFieldState: () => undefined,
   blur: noop,

packages/form-state-manager/src/files/form-spy.ts

@@ -3,8 +3,8 @@ import FormManagerContext from './form-manager-context';
 import generateId from '../utils/generate-id';
 import FormSpyProps from '../types/form-spy';
 
-const FormSpy: React.FunctionComponent<FormSpyProps> = ({ children, subscription }) => {
-  const { subscribe, unsubscribe, getState } = useContext(FormManagerContext);
+const FormSpy: React.FunctionComponent<FormSpyProps> = ({ children, subscription = { all: true } }) => {
+  const { subscribe, unsubscribe, getState, formOptions } = useContext(FormManagerContext);
   const [, rerender] = useReducer((prev) => prev + 1, 0);
 
   const [id] = useState(() => {
@@ -23,7 +23,7 @@ const FormSpy: React.FunctionComponent<FormSpyProps> = ({ children, subscription
     []
   );
 
-  return children({ ...getState() });
+  return children({ ...getState(), form: formOptions });
 };
 
 export default FormSpy;

packages/form-state-manager/src/files/form-state-manager.tsx

@@ -1,10 +1,11 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
 
 import FormManagerContext from './form-manager-context';
 import createManagerApi from '../utils/manager-api';
 
 import FormStateManagerProps from '../types/form-state-manager';
 import useFieldArrayApi from './use-field-array-api';
+import generateId from '../utils/generate-id';
 
 const FormStateManager: React.ComponentType<FormStateManagerProps> = ({
   children,
@@ -15,50 +16,50 @@ const FormStateManager: React.ComponentType<FormStateManagerProps> = ({
   initialValues,
   initializeOnMount,
   validate,
-  debug
+  debug,
+  render
 }) => {
   const { current: managerApi } = useRef(
     createManagerApi({ onSubmit, clearOnUnmount, validate, subscription, initialValues, initializeOnMount, debug })
   );
 
-  const {
-    batch,
-    change,
-    handleSubmit,
-    registerField,
-    unregisterField,
-    getState,
-    getFieldValue,
-    getFieldState,
-    blur,
-    focus,
-    subscribe,
-    unsubscribe
-  } = managerApi();
+  const { change, getFieldValue, subscribe, unsubscribe, pauseValidation, resumeValidation } = managerApi();
+
+  const [, rerender] = useReducer((prev) => prev + 1, 0);
+
+  const [id] = useState(() => {
+    const internalId = generateId();
+
+    pauseValidation();
+
+    subscribe({ name: internalId, render: rerender, subscription });
+
+    return internalId;
+  });
+
+  useEffect(
+    () => {
+      resumeValidation();
+      return () => {
+        unsubscribe({ name: id });
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
   const { current: fieldArrayApi } = useRef(useFieldArrayApi(change, getFieldValue));
+
+  const managerState = {
+    formOptions: managerApi(),
+    clearedValue,
+    ...managerApi().getState(),
+    ...fieldArrayApi
+  };
+
   return (
-    <FormManagerContext.Provider
-      value={{
-        batch,
-        blur,
-        focus,
-        getFieldState,
-        getFieldValue,
-        change,
-        getState,
-        handleSubmit,
-        registerField,
-        unregisterField,
-        formOptions: managerApi,
-        clearedValue,
-        initialValues,
-        subscribe,
-        unsubscribe,
-        ...fieldArrayApi
-      }}
-    >
-      <FormManagerContext.Consumer>{(managerState) => children(managerState)}</FormManagerContext.Consumer>
+    <FormManagerContext.Provider value={managerState}>
+      <FormManagerContext.Consumer>{() => (render ? render(managerState) : children(managerState))}</FormManagerContext.Consumer>
     </FormManagerContext.Provider>
   );
 };

packages/form-state-manager/src/files/use-field.ts

@@ -96,7 +96,7 @@ const useField = ({
 
     return internalId;
   });
-  const state = formOptions().getFieldState(name);
+  const state = formOptions.getFieldState(name);
 
   const finalClearedValue = Object.prototype.hasOwnProperty.call(props, 'clearedValue') ? props.clearedValue : rest.clearedValue;
 
@@ -128,15 +128,15 @@ const useField = ({
 
   useEffect(
     () => {
-      formOptions().afterSilentRegistration({ name, internalId: id });
+      formOptions.afterSilentRegistration({ name, internalId: id });
 
       if (type === 'file') {
-        formOptions().registerInputFile(name);
+        formOptions.registerInputFile(name);
       }
 
       return () => {
         if (type === 'file') {
-          formOptions().unregisterInputFile(name);
+          formOptions.unregisterInputFile(name);
         }
 
         unregisterField({ name, clearOnUnmount, internalId: id, value: finalClearedValue });
@@ -154,7 +154,7 @@ const useField = ({
     }
   };
 
-  let valueToReturn = formOptions().getFieldValue(name);
+  let valueToReturn = formOptions.getFieldValue(name);
   let checked;
 
   if (type === 'checkbox') {

packages/form-state-manager/src/index.ts

@@ -2,3 +2,5 @@ export * from './files/form-state-manager';
 export { default as FormStateManager } from './files/form-state-manager';
 export { default as useField } from './files/use-field';
 export { default as FormManagerContext } from './files/form-manager-context';
+export { default as FormSpy } from './files/form-spy';
+export { default as FieldArray } from './files/field-array';

packages/form-state-manager/src/tests/performance/field-render-cycle.test.js

@@ -81,9 +81,9 @@ describe('useField rendering cycle', () => {
 
       return (
         <Fragment>
-          <button id="initialize" onClick={() => formOptions().initialize({ one: 'changed' })} />
-          <button id="reset" onClick={() => formOptions().reset()} />
-          <button id="resetfieldstate" onClick={() => formOptions().resetFieldState('one')} />
+          <button id="initialize" onClick={() => formOptions.initialize({ one: 'changed' })} />
+          <button id="reset" onClick={() => formOptions.reset()} />
+          <button id="resetfieldstate" onClick={() => formOptions.resetFieldState('one')} />
           <button id="submit" type="submit" />
         </Fragment>
       );

packages/form-state-manager/src/types/form-manager-context.d.ts

@@ -1,6 +1,6 @@
 import { FormEvent } from 'react';
 import AnyObject from './any-object';
-import { Batch, Change, ManagerApi, GetState, Blur, Focus, Unsubscribe, Subscribe } from './manager-api';
+import { Batch, Change, ManagerState, GetState, Blur, Focus, Unsubscribe, Subscribe } from './manager-api';
 import FieldConfig from './field-config';
 import FieldArrayApi from './use-field-array-api';
 
@@ -15,7 +15,7 @@ export interface ManagerContextValue extends FieldArrayApi {
   unregisterField: (fieldState: Omit<FieldConfig, 'render'>) => void;
   change: Change;
   getState: GetState;
-  formOptions: ManagerApi;
+  formOptions: ManagerState;
   getFieldValue: (name: string) => any;
   getFieldState: (name: string) => AnyObject | undefined;
   blur: Blur;

packages/form-state-manager/src/types/form-spy.d.ts

@@ -1,7 +1,11 @@
 import { Subscription } from './use-field';
 import { ManagerState } from './manager-api';
 
-type Children = (props: ManagerState) => React.ReactElement;
+interface ChildrenFormSpyProps extends ManagerState {
+  form: ManagerState;
+}
+
+type Children = (props: ChildrenFormSpyProps) => React.ReactElement;
 
 export interface FormSpyProps {
   children: Children;

packages/form-state-manager/src/types/form-state-manager.d.ts

@@ -1,11 +1,12 @@
 import AnyObject from './any-object';
-import { Subscription } from './use-subscription';
+import { Subscription } from './use-field';
 import { FormValidator } from './validate';
 import { Debug } from './manager-api';
 
 export interface FormStateManagerProps {
   onSubmit: (values: AnyObject) => void;
   children: (props: AnyObject) => React.ReactNode;
+  render: (props: AnyObject) => React.ReactNode;
   clearOnUnmount?: boolean;
   subscription?: Subscription;
   clearedValue?: any;