relay-forms-nodeps 1.1.1 → 2.2.0

package/lib/{useFormSubmit.js → useForm.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var React = require("react");
 var RelayStoreProvider_1 = require("./relay/RelayStoreProvider");
 var RelayStoreUtils_1 = require("./relay/RelayStoreUtils");
-var useFormSetValue_1 = require("./useFormSetValue");
+var useFormField_1 = require("./useFormField");
 var Utils_1 = require("./Utils");
 function logicSubmit(environment, onSubmit) {
   function dispose() {
@@ -25,7 +25,7 @@ function logicSubmit(environment, onSubmit) {
     var data = snapshot.data;
     var entries = data.form.entries;
     var filtered = entries.filter(function (value) {
-      return useFormSetValue_1.isDone(value.check);
+      return useFormField_1.isDone(value.check);
     });
     var isValidating = filtered.length !== entries.length;
     var errors = entries.filter(function (value) {
@@ -62,7 +62,7 @@ function logicSubmit(environment, onSubmit) {
       dispose();
       Utils_1.commit(environment, function (_, form) {
         form.setValue(false, 'isSubmitting').setValue(false, 'isValidating').setLinkedRecords([], 'errors').getLinkedRecords('entries').forEach(function (entry) {
-          return entry.setValue(useFormSetValue_1.RESET, 'check').setValue(undefined, 'error');
+          return entry.setValue(useFormField_1.RESET, 'check').setValue(undefined, 'error');
         });
       });
     }
@@ -70,11 +70,11 @@ function logicSubmit(environment, onSubmit) {
   function validate() {
     Utils_1.commit(environment, function (_, form) {
       var tobeValitating = form.setValue(isSubmitting, 'isSubmitting').getLinkedRecords('entries').filter(function (value) {
-        return value.getValue('check') === useFormSetValue_1.TOBEVALIDATE;
+        return value.getValue('check') === useFormField_1.TOBEVALIDATE;
       });
       form.setValue(tobeValitating.length === 0, 'isValidating');
       tobeValitating.forEach(function (entry) {
-        return entry.setValue(useFormSetValue_1.VALIDATING, 'check');
+        return entry.setValue(useFormField_1.VALIDATING, 'check');
       });
     });
     var snapshot = environment.lookup(Utils_1.operationQueryForm.fragment);
@@ -112,7 +112,7 @@ function logicSubmit(environment, onSubmit) {
     getData: getData
   };
 }
-exports.useFormSubmit = function (_a) {
+exports.useForm = function (_a) {
   var onSubmit = _a.onSubmit;
   var environment = RelayStoreProvider_1.useStore();
   var resolver = React.useMemo(function () {

package/lib/{useFormSetValue.d.ts → useFormField.d.ts}

@@ -3,4 +3,4 @@ export declare const TOBEVALIDATE = 1;
 export declare const VALIDATING = 2;
 export declare const RESET = 5;
 export declare function isDone(check: any): boolean;
-export declare function useFormSetValue<ValueType>({ key, initialValue, validate, validateOnChange, label, }: FormSetValueOptions<ValueType>): FormSetValueReturn<ValueType>;
+export declare function useFormField<ValueType>({ key, initialValue, validate, validateOnChange, label, dependsOn, }: FormSetValueOptions<ValueType>): FormSetValueReturn<ValueType>;

package/lib/{useFormSetValue.js → useFormField.js}

@@ -1,10 +1,21 @@
 "use strict";
 
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = require("react");
 var queries_1 = require("./relay/queries");
+var queryValueFieldFragment_graphql_1 = require("./relay/queryValueFieldFragment.graphql");
 var RelayStoreProvider_1 = require("./relay/RelayStoreProvider");
 var RelayStoreUtils_1 = require("./relay/RelayStoreUtils");
 var useForceUpdate_1 = require("./useForceUpdate");
@@ -28,10 +39,15 @@ function logicSetValue(params) {
     initialValue = params.initialValue,
     forceUpdate = params.forceUpdate,
     validateOnChange = params.validateOnChange,
-    label = params.label;
+    label = params.label,
+    dependsOn = params.dependsOn;
   var validate = undefined;
   var firstSet = true;
+  var deps = {};
   var localId = Utils_1.getFieldId(key);
+  function getDeps() {
+    return deps;
+  }
   function getValidate() {
     return validate;
   }
@@ -106,13 +122,14 @@ function logicSetValue(params) {
     }
     commitField(false);
   }
-  function internalValidate(value, validateFunction) {
+  function internalValidate(value, validateFunction, depsValidation) {
     ref.isChecking = true;
-    var result = validateFunction(value);
+    var result = validateFunction(value, deps);
     function internalFinalize(error) {
       var validate = getValidate();
-      if (value !== dataResult.value || validate !== validateFunction) {
-        internalValidate(dataResult.value, validate);
+      var deps = getDeps();
+      if (value !== dataResult.value || validate !== validateFunction || deps !== depsValidation) {
+        internalValidate(dataResult.value, validate, deps);
         return;
       }
       finalizeCheck(error);
@@ -136,9 +153,25 @@ function logicSetValue(params) {
         ref.check = getInitCheck(validate);
         setValueInternal(initialValue);
       } else if (isValidating && !ref.isChecking) {
-        internalValidate(dataResult.value, validate);
+        internalValidate(dataResult.value, validate, deps);
       }
     }).dispose;
+    var disposeDeps = [];
+    if (dependsOn != null) {
+      dependsOn.forEach(function (depKey) {
+        var snapshot = Utils_1.getSnapshot(environment, queryValueFieldFragment_graphql_1.default, depKey);
+        var disposeDep = environment.subscribe(snapshot, function (s) {
+          var _a;
+          var data = s.data;
+          deps = __assign(__assign({}, deps), (_a = {}, _a[depKey] = data, _a));
+          if (ref.check == DONEVALIDATED && !ref.isChecking) {
+            ref.check = exports.VALIDATING;
+            commitField(false);
+          }
+        }).dispose;
+        disposeDeps.push(disposeDep);
+      });
+    }
     var dispose = function () {
       disposeSubscrition();
       Utils_1.commit(environment, function (store, form) {
@@ -149,9 +182,12 @@ function logicSetValue(params) {
         form.setLinkedRecords(newEntries, 'entries');
         store.delete(localId);
       });
+      disposeDeps.forEach(function (dispose) {
+        return dispose;
+      });
     };
     if (validateOnChange) {
-      internalValidate(initialValue, getValidate());
+      internalValidate(initialValue, getValidate(), deps);
     }
     return dispose;
   }
@@ -162,12 +198,13 @@ function logicSetValue(params) {
     setValidate: setValidate
   };
 }
-function useFormSetValue(_a) {
+function useFormField(_a) {
   var key = _a.key,
     initialValue = _a.initialValue,
     validate = _a.validate,
     validateOnChange = _a.validateOnChange,
-    label = _a.label;
+    label = _a.label,
+    dependsOn = _a.dependsOn;
   var forceUpdate = useForceUpdate_1.useForceUpdate();
   var environment = RelayStoreProvider_1.useStore();
   var resolver = React.useMemo(function () {
@@ -177,13 +214,14 @@ function useFormSetValue(_a) {
       label: label,
       initialValue: initialValue,
       forceUpdate: forceUpdate,
-      validateOnChange: validateOnChange
+      validateOnChange: validateOnChange,
+      dependsOn: dependsOn
     });
-  }, [environment, key, initialValue, forceUpdate, validateOnChange, label]);
+  }, [environment, key, initialValue, forceUpdate, validateOnChange, label, dependsOn]);
   resolver.setValidate(validate);
   React.useEffect(function () {
     return resolver.subscribe();
   }, [resolver]);
   return [resolver.getData(), resolver.setValue];
 }
-exports.useFormSetValue = useFormSetValue;
+exports.useFormField = useFormField;

package/lib/useFormState.js

@@ -9,7 +9,9 @@ var Utils_1 = require("./Utils");
 exports.useFormState = function () {
   var environment = RelayStoreProvider_1.useStore();
   var snapshot = React.useMemo(function () {
-    return environment.lookup(Utils_1.operationQueryErrorsForm.fragment);
+    var s = environment.lookup(Utils_1.operationQueryErrorsForm.fragment);
+    s.seenRecords.add('local:form');
+    return s;
   }, [environment]);
   var _a = React.useState(snapshot.data.form),
     data = _a[0],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-forms-nodeps",
-  "version": "1.1.1",
+  "version": "2.2.0",
   "keywords": [
     "forms",
     "relay",
@@ -65,11 +65,11 @@
     "graphql": "^14.2.0",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
-    "relay-compiler": "^14.0.0",
+    "relay-compiler": "^17.0.0",
     "replace-in-file": "6.2.0",
     "react-test-renderer": "^18.0.0",
-    "relay-test-utils": "^14.0.0",
-    "relay-test-utils-internal": "^14.0.0",
+    "relay-test-utils": "^17.0.0",
+    "relay-test-utils-internal": "^17.0.0",
     "@types/jest": "24.0.18",
     "ts-jest": "^26.5.6",
     "jest": "^26.0.0",

package/lib/es/useFormSubmit.d.ts

@@ -1,2 +0,0 @@
-import { FormSubmitOptions, FormSubmitReturn } from './RelayFormsTypes';
-export declare const useFormSubmit: <ValueType extends object = object>({ onSubmit, }: FormSubmitOptions<ValueType>) => FormSubmitReturn;

package/lib/useFormSubmit.d.ts

@@ -1,2 +0,0 @@
-import { FormSubmitOptions, FormSubmitReturn } from './RelayFormsTypes';
-export declare const useFormSubmit: <ValueType extends object = object>({ onSubmit, }: FormSubmitOptions<ValueType>) => FormSubmitReturn;