Uses field prop getter function instead of Proxy

Author: kettanaito

examples/reactive-props/DelegatedSubscription.jsx

@@ -14,8 +14,8 @@ export default class RxPropsDelegatedSubscription extends React.Component {
             name="firstName"
             label="Fisrt name"
             hint="Required when `lastName` has value"
-            required={({ fields }) => {
-              return !!fields.lastName.value;
+            required={({ getFieldProp }) => {
+              return !!getFieldProp(['lastName', 'value']);
             }} />
           <Input
             name="lastName"

examples/reactive-props/DynamicRequired.jsx

@@ -18,8 +18,8 @@ export default class RxPropsDynamicRequired extends React.Component {
             name="lastName"
             label="Last name"
             hint="Required when `firstName` has value"
-            required={({ fields }) => {
-              return !!fields.firstName.value;
+            required={({ getFieldProp }) => {
+              return !!getFieldProp(['firstName', 'value']);
             }} />
 
           <Button>Submit</Button>

examples/reactive-props/Interdependent.jsx

@@ -14,15 +14,15 @@ export default class RxPropsInterdependent extends React.Component {
             name="firstName"
             label="First name"
             hint="Required when `lastName` has value"
-            required={({ fields }) => {
-              return !!fields.lastName.value;
+            required={({ getFieldProp }) => {
+              return !!getFieldProp(['lastName', 'value']);
             }} />
           <Input
             name="lastName"
             label="Last name"
             hint="Required when `firstName` has value"
-            required={({ fields }) => {
-              return !!fields.firstName.value;
+            required={({ getFieldProp }) => {
+              return !!getFieldProp(['firstName', 'value']);
             }} />
 
           <Button>Submit</Button>

examples/reactive-props/SingleTarget.jsx

@@ -14,8 +14,8 @@ export default class RxPropsSingleTarget extends React.Component {
             name="firstName"
             label="First name"
             hint="Required when `lastName` has value"
-            required={({ fields }) => {
-              return !!fields.lastName.value;
+            required={({ getFieldProp }) => {
+              return !!getFieldProp(['lastName', 'value']);
             }} />
           <Input
             name="lastName"
@@ -24,8 +24,8 @@ export default class RxPropsSingleTarget extends React.Component {
             name="fieldThree"
             label="Some field three"
             hint="Required when `lastName` has value"
-            required={({ fields }) => {
-              return !!fields.lastName.value;
+            required={({ getFieldProp }) => {
+              return !!getFieldProp(['lastName', 'value'])
             }} />
           <Button>Submit</Button>
         </Form>

src/utils/fieldUtils/createPropGetter.js

@@ -0,0 +1,18 @@
+/**
+ * Generates a field prop getter function.
+ * The latter is used for reactive props implementation and allows to flush
+ * field prop references into a single source using a callback function.
+ * @param {Map} fields
+ * @param {Function} callback
+ */
+export default function createPropGetter(fields, callback) {
+  return (propPath) => {
+    const propValue = fields.getIn(propPath);
+
+    if (callback) {
+      callback(propPath, propValue);
+    }
+
+    return propValue;
+  };
+}

src/utils/fieldUtils/index.js

@@ -10,3 +10,4 @@ export getErrorMessages from './getErrorMessages';
 
 /* Other */
 export serializeFields from './serializeFields';
+export createPropGetter from './createPropGetter';

src/utils/flushFieldRefs.js

@@ -1,50 +1,21 @@
-import ensafeMap from './ensafeMap';
 import dispatch from './dispatch';
+import createPropGetter from './fieldUtils/createPropGetter';
 
 /**
- * Recursively proxies the given origin. Calls optional "callback" function whenever any property
- * if the origin is being referenced.
- * @param {Object} origin
- * @param {Function} callback
- * @returns {Proxy}
- */
-function proxyWithCallback(origin, callback) {
-  return new Proxy(origin, {
-    get(target, propName) {
-      if (callback) callback({ target, propName });
-      return proxyWithCallback({}, callback);
-    }
-  });
-}
-
-/**
- * Returns the collection of field paths of the fields referenced within the provided method.
+ * Returns the map of flushed field props paths referenced within the provided
+ * method, and its initial value.
  * @param {Function} method
- * @param {Object} fields
+ * @param {CallbackHandlerArgs} methodArgs
  */
-export default function flushFieldRefs(method, { fields, ...restParams }) {
-  const { form } = restParams;
+export default function flushFieldRefs(method, methodArgs) {
+  const { fields, form } = methodArgs;
   const refs = [];
-  const mutableFields = fields.toJS();
-
-  /* Assign a temporary property to state the root level of target Object */
-  mutableFields.__IS_ROOT__ = true;
-
-  const fieldsProxy = proxyWithCallback(mutableFields, ({ target, propName }) => {
-    if (target.__IS_ROOT__) {
-      refs.push([]);
-    }
-
-    const refEntry = refs[refs.length - 1];
-    refEntry.push(propName);
-  });
-
-  /* First, execute the method with proxied fields to gather the field path refs */
-  dispatch(method, restParams, form.context, { fields: fieldsProxy });
+  const getFieldProp = createPropGetter(fields, propPath => refs.push(propPath));
 
-  /* Second, execute the method with missing path refs set to "undefined" to prevent throwing */
-  const safeFields = ensafeMap(fields, refs);
-  const initialValue = dispatch(method, { ...restParams, fields: safeFields }, form.context);
+  const initialValue = dispatch(method, {
+    ...methodArgs,
+    getFieldProp
+  }, form.context);
 
   return { refs, initialValue };
 }

src/utils/rxUtils/createSubscriptions.js

@@ -1,5 +1,5 @@
 import makeObservable from './makeObservable';
-import ensafeMap from '../ensafeMap';
+import createPropGetter from '../fieldUtils/createPropGetter';
 
 /**
  * @param {Map} fieldProps
@@ -14,16 +14,16 @@ export default function createSubscriptions({ fieldProps, fields, form }) {
   const resolverArgs = { fieldProps, fields, form };
 
   rxProps.forEach((resolver, rxPropName) => {
-    const { refs } = makeObservable(resolver, resolverArgs, {
+    makeObservable(resolver, resolverArgs, {
       initialCall: true,
       subscribe({ nextContextProps, shouldValidate = true }) {
         const refFieldPath = nextContextProps.get('fieldPath');
         const nextFields = form.state.fields.set(refFieldPath, nextContextProps);
-        const safeFields = ensafeMap(nextFields, refs);
 
         const nextPropValue = resolver({
           fieldProps: fieldProps.toJS(),
-          fields: safeFields.toJS(),
+          fields: nextFields.toJS(),
+          getFieldProp: createPropGetter(nextFields),
           form
         }, form.context);
 

test/unit/utils/flushFieldRefs.spec.js

@@ -1,17 +1,22 @@
 import { fromJS } from 'immutable';
 import { expect } from 'chai';
 import { form } from '../../utils';
-import { flushFieldRefs } from '../../../src/utils';
+import { flushFieldRefs, fieldUtils } from '../../../src/utils';
 
 describe('flushFieldRefs', function () {
   it('Flushes referenced field paths properly', () => {
     const fields = fromJS({ fieldOne: { value: 'foo' } });
-    const method = ({ fields }) => {
-      fields.fieldOne.value;
-      fields.groupOne.fieldOne.required;
+    const method = ({ getFieldProp }) => {
+      getFieldProp(['fieldOne', 'value']);
+      getFieldProp(['groupOne', 'fieldOne', 'required']);
     };
 
-    const { refs } = flushFieldRefs(method, { fields, form });
+    const getFieldProp = fieldUtils.createPropGetter(fields);
+    const { refs } = flushFieldRefs(method, {
+      getFieldProp,
+      fields,
+      form
+    });
 
     expect(refs).to.be.an.instanceof(Array).with.lengthOf(2);
     expect(refs[0]).to.deep.equal(['fieldOne', 'value']);
@@ -20,9 +25,9 @@ describe('flushFieldRefs', function () {
 
   it('Resolves initial value properly', () => {
     const fields = fromJS({ fieldOne: { value: 'foo' } });
-    const method = ({ fields }) => {
-      fields.nonExisting.fieldPath.propName;
-      return fields.fieldOne.value;
+    const method = ({ getFieldProp }) => {
+      getFieldProp(['nonExisting', 'fieldPath', 'propName']);
+      return getFieldProp(['fieldOne', 'value']);
     };
 
     const { initialValue } = flushFieldRefs(method, { fields, form });