relay-forms-nodeps 1.1.1 → 2.2.0

package/README.md

@@ -22,13 +22,13 @@ This repository manages the three libraries to manage forms by exploiting the po
 
 [See SimpleExample.md](./docs/RelaySimpleExample.md)
 
-## useFormSetValue
+## useFormField
 
-[See useFormSetValue.md](./docs/useFormSetValue.md)
+[See useFormField.md](./docs/useFormSetValue.md)
 
-## useFormSubmit
+## useForm
 
-[See useFormSubmit.md](./docs/useFormSubmit.md)
+[See useForm.md](./docs/useFormSubmit.md)
 
 ## useFormState
 

package/lib/RelayFormsTypes.d.ts

@@ -8,12 +8,16 @@ export declare type FormSubmitReturn = {
     validate: () => void;
     reset: () => void;
 };
+export declare type ValidateFunction<ValueType> = (value: ValueType, deps?: {
+    [key: string]: FormValueStateReturn<any>;
+}) => Promise<string | undefined> | string | undefined;
 export declare type FormSetValueOptions<ValueType> = {
     key: string;
     initialValue?: ValueType;
-    validate?: (value: ValueType) => Promise<string | undefined> | string | undefined;
+    validate?: ValidateFunction<ValueType>;
     validateOnChange?: boolean;
     label?: string;
+    dependsOn?: ReadonlyArray<string> | null | undefined;
 };
 export declare type FormSetValueStateReturn<ValueType> = {
     error: undefined | null | Error;

package/lib/es/RelayFormsTypes.d.ts

@@ -8,12 +8,16 @@ export declare type FormSubmitReturn = {
     validate: () => void;
     reset: () => void;
 };
+export declare type ValidateFunction<ValueType> = (value: ValueType, deps?: {
+    [key: string]: FormValueStateReturn<any>;
+}) => Promise<string | undefined> | string | undefined;
 export declare type FormSetValueOptions<ValueType> = {
     key: string;
     initialValue?: ValueType;
-    validate?: (value: ValueType) => Promise<string | undefined> | string | undefined;
+    validate?: ValidateFunction<ValueType>;
     validateOnChange?: boolean;
     label?: string;
+    dependsOn?: ReadonlyArray<string> | null | undefined;
 };
 export declare type FormSetValueStateReturn<ValueType> = {
     error: undefined | null | Error;

package/lib/es/index.d.ts

@@ -1,6 +1,6 @@
 export { useFormState } from './useFormState';
-export { useFormSubmit } from './useFormSubmit';
-export { useFormSetValue } from './useFormSetValue';
+export { useForm } from './useForm';
+export { useFormField } from './useFormField';
 export { useFormValue } from './useFormValue';
 export { StoreProvider } from './relay/RelayStoreProvider';
 export { RelayModernStore as Store, createStore } from './relay/RelayModernStore';

package/lib/es/index.js

@@ -1,6 +1,6 @@
 export { useFormState } from './useFormState';
-export { useFormSubmit } from './useFormSubmit';
-export { useFormSetValue } from './useFormSetValue';
+export { useForm } from './useForm';
+export { useFormField } from './useFormField';
 export { useFormValue } from './useFormValue';
 export { StoreProvider } from './relay/RelayStoreProvider';
 export { RelayModernStore as Store, createStore } from './relay/RelayModernStore';

package/lib/es/relay/queryErrorsFieldQuery.graphql.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @generated SignedSource<<cdb0ac3f0c6e25530bc6aa8ece819e03>>
+ * @relayHash 1e729a4dd469bbcedf1c07919286ff70
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export declare type queryErrorsFieldQuery$variables = Record<PropertyKey, never>;
+export declare type queryErrorsFieldQuery$data = {
+    readonly form: {
+        readonly errors: ReadonlyArray<{
+            readonly check: number | null | undefined;
+            readonly error: string | null | undefined;
+            readonly id: string;
+            readonly key: string;
+            readonly label: string | null | undefined;
+        } | null | undefined> | null | undefined;
+        readonly isSubmitting: boolean | null | undefined;
+        readonly isValid: boolean | null | undefined;
+        readonly isValidating: boolean | null | undefined;
+    } | null | undefined;
+};
+export declare type queryErrorsFieldQuery = {
+    response: queryErrorsFieldQuery$data;
+    variables: queryErrorsFieldQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/lib/es/relay/queryErrorsFieldQuery.graphql.js

@@ -0,0 +1,103 @@
+/**
+ * @generated SignedSource<<cdb0ac3f0c6e25530bc6aa8ece819e03>>
+ * @relayHash 1e729a4dd469bbcedf1c07919286ff70
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+var node = function () {
+  var v0 = [{
+    "alias": null,
+    "args": null,
+    "concreteType": "EntryForm",
+    "kind": "LinkedField",
+    "name": "form",
+    "plural": false,
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "isSubmitting",
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "isValidating",
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "isValid",
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "concreteType": "Entry",
+      "kind": "LinkedField",
+      "name": "errors",
+      "plural": true,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "key",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "error",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "check",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "label",
+        "storageKey": null
+      }],
+      "storageKey": null
+    }],
+    "storageKey": null
+  }];
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "queryErrorsFieldQuery",
+      "selections": v0 /*: any*/,
+      "type": "Query",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "queryErrorsFieldQuery",
+      "selections": v0 /*: any*/
+    },
+
+    "params": {
+      "id": "1e729a4dd469bbcedf1c07919286ff70\r",
+      "metadata": {},
+      "name": "queryErrorsFieldQuery",
+      "operationKind": "query",
+      "text": null
+    }
+  };
+}();
+node.hash = "10e337eb009f23b0bbee954d56b68b89";
+export default node;

package/lib/es/relay/queryFieldFragment.graphql.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @generated SignedSource<<d21170d0feb748c6558c5e5dbb4425c4>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export declare type queryFieldFragment$data = {
+    readonly check: number | null | undefined;
+    readonly id: string;
+    readonly " $fragmentType": "queryFieldFragment";
+};
+export declare type queryFieldFragment$key = {
+    readonly " $data"?: queryFieldFragment$data;
+    readonly " $fragmentSpreads": FragmentRefs<"queryFieldFragment">;
+};
+declare const node: ReaderFragment;
+export default node;

package/lib/es/relay/queryFieldFragment.graphql.js

@@ -0,0 +1,28 @@
+/**
+ * @generated SignedSource<<d21170d0feb748c6558c5e5dbb4425c4>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+var node = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "queryFieldFragment",
+  "selections": [{
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "id",
+    "storageKey": null
+  }, {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "check",
+    "storageKey": null
+  }],
+  "type": "Entry",
+  "abstractKey": null
+};
+node.hash = "d5b0953bdeb412925ee13444a6be6082";
+export default node;

package/lib/es/relay/queryFieldQuery.graphql.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @generated SignedSource<<6f460eca2a43fd75eab202937349c693>>
+ * @relayHash 0b493a6f66e132f2693f91a5da941414
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export declare type queryFieldQuery$variables = Record<PropertyKey, never>;
+export declare type queryFieldQuery$data = {
+    readonly form: {
+        readonly entries: ReadonlyArray<{
+            readonly check: number | null | undefined;
+            readonly error: string | null | undefined;
+            readonly id: string;
+            readonly key: string;
+            readonly value: string | null | undefined;
+        } | null | undefined> | null | undefined;
+    } | null | undefined;
+};
+export declare type queryFieldQuery = {
+    response: queryFieldQuery$data;
+    variables: queryFieldQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/lib/es/relay/queryFieldQuery.graphql.js

@@ -0,0 +1,85 @@
+/**
+ * @generated SignedSource<<6f460eca2a43fd75eab202937349c693>>
+ * @relayHash 0b493a6f66e132f2693f91a5da941414
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+var node = function () {
+  var v0 = [{
+    "alias": null,
+    "args": null,
+    "concreteType": "EntryForm",
+    "kind": "LinkedField",
+    "name": "form",
+    "plural": false,
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "concreteType": "Entry",
+      "kind": "LinkedField",
+      "name": "entries",
+      "plural": true,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "key",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "value",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "check",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "error",
+        "storageKey": null
+      }],
+      "storageKey": null
+    }],
+    "storageKey": null
+  }];
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "queryFieldQuery",
+      "selections": v0 /*: any*/,
+      "type": "Query",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "queryFieldQuery",
+      "selections": v0 /*: any*/
+    },
+
+    "params": {
+      "id": "0b493a6f66e132f2693f91a5da941414\r",
+      "metadata": {},
+      "name": "queryFieldQuery",
+      "operationKind": "query",
+      "text": null
+    }
+  };
+}();
+node.hash = "f9fd20a80a839dfb51206c305cbb1657";
+export default node;

package/lib/es/relay/queryValueFieldFragment.graphql.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @generated SignedSource<<432c971608826457e61804e44aeb7a64>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export declare type queryValueFieldFragment$data = {
+    readonly error: string | null | undefined;
+    readonly id: string;
+    readonly label: string | null | undefined;
+    readonly value: string | null | undefined;
+    readonly " $fragmentType": "queryValueFieldFragment";
+};
+export declare type queryValueFieldFragment$key = {
+    readonly " $data"?: queryValueFieldFragment$data;
+    readonly " $fragmentSpreads": FragmentRefs<"queryValueFieldFragment">;
+};
+declare const node: ReaderFragment;
+export default node;

package/lib/es/relay/queryValueFieldFragment.graphql.js

@@ -0,0 +1,40 @@
+/**
+ * @generated SignedSource<<432c971608826457e61804e44aeb7a64>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+var node = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "queryValueFieldFragment",
+  "selections": [{
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "id",
+    "storageKey": null
+  }, {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "value",
+    "storageKey": null
+  }, {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "label",
+    "storageKey": null
+  }, {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "error",
+    "storageKey": null
+  }],
+  "type": "Entry",
+  "abstractKey": null
+};
+node.hash = "364beea31c4e318a5241f2bd7d96fbd8";
+export default node;

package/lib/es/useForm.d.ts

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStore } from './relay/RelayStoreProvider';
 import { isPromise } from './relay/RelayStoreUtils';
-import { isDone, RESET, TOBEVALIDATE, VALIDATING } from './useFormSetValue';
+import { isDone, RESET, TOBEVALIDATE, VALIDATING } from './useFormField';
 import { operationQueryForm, commit } from './Utils';
 function logicSubmit(environment, onSubmit) {
   function dispose() {
@@ -107,7 +107,7 @@ function logicSubmit(environment, onSubmit) {
     getData: getData
   };
 }
-export var useFormSubmit = function (_a) {
+export var useForm = function (_a) {
   var onSubmit = _a.onSubmit;
   var environment = useStore();
   var resolver = React.useMemo(function () {

package/lib/es/{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/es/{useFormSetValue.js → useFormField.js}

@@ -1,5 +1,16 @@
+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);
+};
 import React from 'react';
 import { FragmentSet } from './relay/queries';
+import FragmentValueField from './relay/queryValueFieldFragment.graphql';
 import { useStore } from './relay/RelayStoreProvider';
 import { isPromise } from './relay/RelayStoreUtils';
 import { useForceUpdate } from './useForceUpdate';
@@ -22,10 +33,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 = getFieldId(key);
+  function getDeps() {
+    return deps;
+  }
   function getValidate() {
     return validate;
   }
@@ -100,13 +116,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);
@@ -130,9 +147,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 = getSnapshot(environment, FragmentValueField, 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 = VALIDATING;
+            commitField(false);
+          }
+        }).dispose;
+        disposeDeps.push(disposeDep);
+      });
+    }
     var dispose = function () {
       disposeSubscrition();
       commit(environment, function (store, form) {
@@ -143,9 +176,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;
   }
@@ -156,12 +192,13 @@ function logicSetValue(params) {
     setValidate: setValidate
   };
 }
-export function useFormSetValue(_a) {
+export 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();
   var environment = useStore();
   var resolver = React.useMemo(function () {
@@ -171,9 +208,10 @@ export 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();

package/lib/es/useFormState.js

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

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 export { useFormState } from './useFormState';
-export { useFormSubmit } from './useFormSubmit';
-export { useFormSetValue } from './useFormSetValue';
+export { useForm } from './useForm';
+export { useFormField } from './useFormField';
 export { useFormValue } from './useFormValue';
 export { StoreProvider } from './relay/RelayStoreProvider';
 export { RelayModernStore as Store, createStore } from './relay/RelayModernStore';

package/lib/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 var useFormState_1 = require("./useFormState");
 exports.useFormState = useFormState_1.useFormState;
-var useFormSubmit_1 = require("./useFormSubmit");
-exports.useFormSubmit = useFormSubmit_1.useFormSubmit;
-var useFormSetValue_1 = require("./useFormSetValue");
-exports.useFormSetValue = useFormSetValue_1.useFormSetValue;
+var useForm_1 = require("./useForm");
+exports.useForm = useForm_1.useForm;
+var useFormField_1 = require("./useFormField");
+exports.useFormField = useFormField_1.useFormField;
 var useFormValue_1 = require("./useFormValue");
 exports.useFormValue = useFormValue_1.useFormValue;
 var RelayStoreProvider_1 = require("./relay/RelayStoreProvider");

package/lib/relay/queryErrorsFieldQuery.graphql.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @generated SignedSource<<cdb0ac3f0c6e25530bc6aa8ece819e03>>
+ * @relayHash 1e729a4dd469bbcedf1c07919286ff70
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export declare type queryErrorsFieldQuery$variables = Record<PropertyKey, never>;
+export declare type queryErrorsFieldQuery$data = {
+    readonly form: {
+        readonly errors: ReadonlyArray<{
+            readonly check: number | null | undefined;
+            readonly error: string | null | undefined;
+            readonly id: string;
+            readonly key: string;
+            readonly label: string | null | undefined;
+        } | null | undefined> | null | undefined;
+        readonly isSubmitting: boolean | null | undefined;
+        readonly isValid: boolean | null | undefined;
+        readonly isValidating: boolean | null | undefined;
+    } | null | undefined;
+};
+export declare type queryErrorsFieldQuery = {
+    response: queryErrorsFieldQuery$data;
+    variables: queryErrorsFieldQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;