relay-forms-nodeps 1.0.0 → 1.1.0

package/lib/es/useFormSetValue.js

@@ -3,82 +3,180 @@ import { FragmentSet } from './relay/queries';
 import { useStore } from './relay/RelayStoreProvider';
 import { isPromise } from './relay/RelayStoreUtils';
 import { useForceUpdate } from './useForceUpdate';
-import { commitValue, commitErrorIntoRelay, commitResetField, getSnapshot } from './Utils';
-export function useFormSetValue(_a) {
-  var key = _a.key,
-    initialValue = _a.initialValue,
-    validate = _a.validate,
-    validateOnChange = _a.validateOnChange;
-  var forceUpdate = useForceUpdate();
-  var environment = useStore();
-  var ref = React.useRef({
-    value: initialValue,
-    error: undefined,
-    check: validate ? 'INIT' : 'DONE',
+import { getSnapshot, getFieldId, commit } from './Utils';
+var INIT = 0;
+export var TOBEVALIDATE = 1;
+export var VALIDATING = 2;
+var DONE = 3;
+var DONEVALIDATED = 4;
+export var RESET = 5;
+function getInitCheck(validate) {
+  return validate ? TOBEVALIDATE : DONE;
+}
+export function isDone(check) {
+  return check === DONE || check === DONEVALIDATED;
+}
+function logicSetValue(params) {
+  var environment = params.environment,
+    key = params.key,
+    initialValue = params.initialValue,
+    forceUpdate = params.forceUpdate,
+    validateOnChange = params.validateOnChange,
+    label = params.label;
+  var validate = undefined;
+  var firstSet = true;
+  var localId = getFieldId(key);
+  function getValidate() {
+    return validate;
+  }
+  var ref = {
+    check: INIT,
     isChecking: false
-  });
-  var setValue = React.useCallback(function (newValue) {
-    ref.current.value = newValue;
-    if (ref.current.check === 'DONE' && validate) {
-      ref.current.check = 'START';
+  };
+  var dataResult = {
+    value: initialValue,
+    error: undefined
+  };
+  function commitField(commitValue) {
+    if (commitValue === void 0) {
+      commitValue = true;
     }
-    commitValue(key, newValue, ref.current.check, environment);
+    commit(environment, function (store, form) {
+      var field = store.get(localId);
+      if (!field) {
+        field = store.create(localId).setValue(localId, 'id').setValue(label, 'label').setValue(key, 'key');
+        var entriesArray = form.getLinkedRecords('entries');
+        entriesArray.push(field);
+        form.setLinkedRecords(entriesArray, 'entries');
+      }
+      if (ref.check === VALIDATING) {
+        form.setValue(true, 'isValidating');
+      }
+      field.setValue(ref.check, 'check').setValue(dataResult.error, 'error');
+      if (commitValue) field.setValue(dataResult.value, 'value');
+    });
+  }
+  function setValidate(newValidate) {
+    if (validate === newValidate && !firstSet) {
+      // first set only needs this
+      return;
+    }
+    firstSet = false;
+    validate = newValidate;
+    // validation was called
+    if (ref.check === DONEVALIDATED && validate) {
+      ref.check = VALIDATING;
+    } else {
+      // reinit
+      ref.check = getInitCheck(validate);
+    }
+    commitField();
+  }
+  function getData() {
+    return dataResult;
+  }
+  function changeData(value, error) {
+    dataResult = {
+      value: value,
+      error: error
+    };
     forceUpdate();
-  }, [environment, key, validate, forceUpdate]);
-  React.useEffect(function () {
-    //commitResetField(environment, key);
-    commitValue(key, initialValue, ref.current.check, environment);
+  }
+  function setValue(newValue) {
+    setValueInternal(newValue);
+  }
+  function setValueInternal(newValue, error) {
+    if (ref.check === DONEVALIDATED) {
+      ref.check = VALIDATING;
+    }
+    changeData(newValue, error);
+    commitField();
+  }
+  function finalizeCheck(error) {
+    ref.isChecking = false;
+    ref.check = DONEVALIDATED;
+    if (dataResult.error !== error) {
+      changeData(dataResult.value, error);
+    }
+    commitField(false);
+  }
+  function internalValidate(value, validateFunction) {
+    ref.isChecking = true;
+    var result = validateFunction(value);
+    function internalFinalize(error) {
+      var validate = getValidate();
+      if (value !== dataResult.value || validate !== validateFunction) {
+        internalValidate(dataResult.value, validate);
+        return;
+      }
+      finalizeCheck(error);
+    }
+    if (isPromise(result)) {
+      result.then(internalFinalize).catch(internalFinalize);
+    } else {
+      internalFinalize(result);
+    }
+  }
+  function subscribe() {
     var snapshot = getSnapshot(environment, FragmentSet, key);
     var disposeSubscrition = environment.subscribe(snapshot, function (s) {
-      var check = s.data.check;
-      var isStart = check === 'START';
-      var isReset = check === 'RESET';
-      ref.current.check = check;
+      var data = s.data;
+      var dataCheck = data.check;
+      var isValidating = dataCheck === VALIDATING;
+      var isReset = dataCheck === RESET;
+      ref.check = dataCheck;
+      var validate = getValidate();
       if (isReset) {
-        ref.current.check = validate ? 'INIT' : 'DONE';
-        setValue(initialValue);
-      } else {
-        if (!validate) {
-          commitErrorIntoRelay(key, undefined, environment);
-          return;
-        }
-        if (isStart && !ref.current.isChecking) {
-          internalValidate(ref.current.value);
-        }
+        ref.check = getInitCheck(validate);
+        setValueInternal(initialValue);
+      } else if (isValidating && !ref.isChecking) {
+        internalValidate(dataResult.value, validate);
       }
     }).dispose;
     var dispose = function () {
       disposeSubscrition();
-      commitResetField(environment, key);
+      commit(environment, function (store, form) {
+        var entriesArray = form.getLinkedRecords('entries');
+        var newEntries = entriesArray.filter(function (value) {
+          return value.getDataID() != localId;
+        });
+        form.setLinkedRecords(newEntries, 'entries');
+        store.delete(localId);
+      });
     };
-    function finalizeCheck(error) {
-      ref.current.isChecking = false;
-      if (ref.current.error !== error) {
-        ref.current.error = error;
-        forceUpdate();
-      }
-      commitErrorIntoRelay(key, error, environment);
-    }
-    function internalValidate(value) {
-      ref.current.isChecking = true;
-      var result = validate(value);
-      function internalFinalize(error) {
-        if (value !== ref.current.value) {
-          internalValidate(ref.current.value);
-          return;
-        }
-        finalizeCheck(error);
-      }
-      if (isPromise(result)) {
-        result.then(internalFinalize).catch(internalFinalize);
-      } else {
-        internalFinalize(result);
-      }
-    }
     if (validateOnChange) {
-      internalValidate(initialValue);
+      internalValidate(initialValue, getValidate());
     }
     return dispose;
-  }, [environment, initialValue, key, setValue, validate, validateOnChange, forceUpdate]);
-  return [ref.current, setValue];
+  }
+  return {
+    subscribe: subscribe,
+    getData: getData,
+    setValue: setValue,
+    setValidate: setValidate
+  };
+}
+export function useFormSetValue(_a) {
+  var key = _a.key,
+    initialValue = _a.initialValue,
+    validate = _a.validate,
+    validateOnChange = _a.validateOnChange,
+    label = _a.label;
+  var forceUpdate = useForceUpdate();
+  var environment = useStore();
+  var resolver = React.useMemo(function () {
+    return logicSetValue({
+      environment: environment,
+      key: key,
+      label: label,
+      initialValue: initialValue,
+      forceUpdate: forceUpdate,
+      validateOnChange: validateOnChange
+    });
+  }, [environment, key, initialValue, forceUpdate, validateOnChange, label]);
+  resolver.setValidate(validate);
+  React.useEffect(function () {
+    return resolver.subscribe();
+  }, [resolver]);
+  return [resolver.getData(), resolver.setValue];
 }

package/lib/es/useFormState.d.ts

@@ -1,2 +1,12 @@
-import { FormStateReturn } from './RelayFormsTypes';
-export declare const useFormState: () => FormStateReturn;
+export declare const useFormState: () => {
+    readonly errors: readonly {
+        readonly check: number;
+        readonly error: string;
+        readonly id: string;
+        readonly key: string;
+        readonly label: string;
+    }[];
+    readonly isSubmitting: boolean;
+    readonly isValid: boolean;
+    readonly isValidating: boolean;
+};

package/lib/es/useFormState.js

@@ -1,49 +1,19 @@
 import React from 'react';
 import { useStore } from './relay/RelayStoreProvider';
-import { areEqual } from './relay/RelayStoreUtils';
-import { useForceUpdate } from './useForceUpdate';
 import { operationQueryErrorsForm } from './Utils';
 export var useFormState = function () {
-  var ref = React.useRef({
-    errors: undefined,
-    isValidating: false,
-    isSubmitting: false,
-    isValid: false
-  });
-  var forceUpdate = useForceUpdate();
   var environment = useStore();
+  var snapshot = React.useMemo(function () {
+    return environment.lookup(operationQueryErrorsForm.fragment);
+  }, [environment]);
+  var _a = React.useState(snapshot.data.form),
+    data = _a[0],
+    setData = _a[1];
   React.useEffect(function () {
-    function checkError(s) {
-      var data = s.data;
-      var form = data.form;
-      var entries = form.entries;
-      var current = ref.current;
-      var entryErrors = entries.filter(function (value) {
-        return !!value.error;
-      });
-      var entryValidated = entries.filter(function (value) {
-        return value.check === 'DONE';
-      });
-      var errors = entryErrors.length > 0 ? entryErrors : undefined;
-      var isValidating = form.isValidating;
-      var isSubmitting = form.isSubmitting;
-      var isValid = entries.length === entryValidated.length && (!errors || Object.keys(errors).length === 0);
-      var newState = {
-        errors: errors,
-        isValid: isValid,
-        isValidating: isValidating,
-        isSubmitting: isSubmitting
-      };
-      if (!areEqual(current, newState)) {
-        ref.current = newState;
-        forceUpdate();
-      }
-    }
-    var snapshot = environment.lookup(operationQueryErrorsForm.fragment);
-    checkError(snapshot);
     return environment.subscribe(snapshot, function (s) {
-      checkError(s);
+      setData(s.data.form);
     }).dispose;
-  }, [environment, forceUpdate]);
-  return ref.current;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [snapshot]);
+  return data;
 };

package/lib/es/useFormSubmit.js

@@ -1,105 +1,120 @@
 import React from 'react';
 import { useStore } from './relay/RelayStoreProvider';
 import { isPromise } from './relay/RelayStoreUtils';
-import { commitValidateEndRelay, commitValidateIntoRelay, commitSubmitEndRelay, operationQueryForm, commitResetIntoRelay } from './Utils';
-export var useFormSubmit = function (_a) {
-  var onSubmit = _a.onSubmit;
-  var environment = useStore();
-  React.useEffect(function () {
-    return environment.retain(operationQueryForm).dispose;
-  }, [environment]);
-  var ref = React.useRef({
-    isSubmitting: false,
-    isValidating: false,
-    error: undefined,
-    subscription: undefined
-  });
-  var internalValidate = React.useCallback(function (snapshot, isSubmitting) {
-    ref.current.isValidating = true;
-    var data = snapshot.data;
-    var filtered = data.form.entries.filter(function (value) {
-      return value.check === 'INIT';
-    });
-    commitValidateIntoRelay(filtered, isSubmitting, environment);
-  }, [environment]);
-  var execute = React.useCallback(function (environment, snapshot, dispose, onSubmit) {
+import { isDone, RESET, TOBEVALIDATE, VALIDATING } from './useFormSetValue';
+import { operationQueryForm, commit } from './Utils';
+function logicSubmit(environment, onSubmit) {
+  function dispose() {
+    subscription && subscription.dispose();
+    subscription = undefined;
+  }
+  var isSubmitting = false;
+  var subscription;
+  function execute(snapshot) {
+    var disposeSubmit = function () {
+      isSubmitting = false;
+      commit(environment, function (_, form) {
+        form.setValue(false, 'isSubmitting');
+      });
+    };
     var data = snapshot.data;
     var entries = data.form.entries;
     var filtered = entries.filter(function (value) {
-      return value.check === 'DONE';
+      return isDone(value.check);
+    });
+    var isValidating = filtered.length !== entries.length;
+    var errors = entries.filter(function (value) {
+      return !!value.error;
+    }).map(function (value) {
+      return value.id;
     });
-    if (filtered.length === entries.length) {
-      var errors = entries.filter(function (value) {
-        return !!value.error;
+    var isValid = !isValidating && errors.length === 0;
+    commit(environment, function (store, form) {
+      form.setValue(isValidating, 'isValidating').setValue(isValid, 'isValid');
+      var errorFields = [];
+      errors.forEach(function (id) {
+        errorFields.push(store.get(id));
       });
-      commitValidateEndRelay(environment);
-      ref.current.isValidating = false;
-      var internalDispose = function () {
-        dispose();
-        if (ref.current.isSubmitting) {
-          ref.current.isSubmitting = false;
-          commitSubmitEndRelay(environment);
-        }
-      };
-      if (ref.current.isSubmitting && onSubmit && errors.length === 0) {
-        var result_1 = {};
-        entries.forEach(function (entry) {
-          result_1[entry.key] = entry.value;
-        });
-        var submit_1 = onSubmit(result_1);
-        if (isPromise(submit_1)) {
-          submit_1.then(internalDispose).catch(internalDispose);
-          return;
-        }
+      form.setLinkedRecords(errorFields, 'errors');
+    });
+    if (isValid && isSubmitting) {
+      dispose();
+      var result_1 = {};
+      entries.forEach(function (entry) {
+        result_1[entry.key] = entry.value;
+      });
+      var submit_1 = onSubmit(result_1);
+      if (isPromise(submit_1)) {
+        submit_1.then(disposeSubmit).catch(disposeSubmit);
+        return;
       }
-      internalDispose();
-    }
-  }, []);
-  var reset = React.useCallback(function () {
-    var snapshot = environment.lookup(operationQueryForm.fragment);
-    if (ref.current.isValidating && ref.current.isSubmitting) {
-      return;
+    } else if (!isValidating) {
+      disposeSubmit();
     }
-    var data = snapshot.data;
-    commitResetIntoRelay(data.form.entries, environment);
-  }, [environment]);
-  var subscribe = React.useCallback(function (submit) {
-    if (submit === void 0) {
-      submit = false;
-    }
-    var snapshot = environment.lookup(operationQueryForm.fragment);
-    var subscription = ref.current.subscription;
-    subscription && subscription.dispose();
-    function dispose() {
-      subscription && subscription.dispose();
-      ref.current.subscription = null;
+  }
+  function reset() {
+    if (!isSubmitting) {
+      dispose();
+      commit(environment, function (_, form) {
+        form.setValue(false, 'isSubmitting').setValue(false, 'isValidating').setLinkedRecords([], 'errors').getLinkedRecords('entries').forEach(function (entry) {
+          return entry.setValue(RESET, 'check').setValue(undefined, 'error');
+        });
+      });
     }
-    ref.current.subscription = environment.subscribe(snapshot, function (s) {
-      return execute(environment, s, dispose, onSubmit);
+  }
+  function validate() {
+    commit(environment, function (_, form) {
+      var tobeValitating = form.setValue(isSubmitting, 'isSubmitting').getLinkedRecords('entries').filter(function (value) {
+        return value.getValue('check') === TOBEVALIDATE;
+      });
+      form.setValue(tobeValitating.length === 0, 'isValidating');
+      tobeValitating.forEach(function (entry) {
+        return entry.setValue(VALIDATING, 'check');
+      });
     });
-    internalValidate(snapshot, submit);
-    execute(environment, snapshot, dispose, onSubmit);
-  }, [environment, internalValidate, execute, onSubmit]);
-  var validate = React.useCallback(function () {
-    if (!ref.current.isValidating) {
-      subscribe(false);
-    }
-  }, [subscribe]);
-  var submit = React.useCallback(function (event) {
-    if (event) {
-      event.preventDefault();
+    var snapshot = environment.lookup(operationQueryForm.fragment);
+    if (!subscription) {
+      subscription = environment.subscribe(snapshot, function (s) {
+        return execute(s);
+      });
     }
-    if (!ref.current.isSubmitting) {
-      ref.current.isSubmitting = true;
-      subscribe(true);
+    execute(snapshot);
+  }
+  function submit(event) {
+    event && event.preventDefault();
+    if (!isSubmitting) {
+      isSubmitting = true;
+      validate();
     }
-  }, [subscribe]);
-  var result = React.useMemo(function () {
-    return {
-      submit: submit,
-      validate: validate,
-      reset: reset
+  }
+  function subscribe() {
+    var disposeRetain = environment.retain(operationQueryForm).dispose;
+    return function () {
+      dispose();
+      disposeRetain();
     };
-  }, [submit, validate, reset]);
-  return result;
+  }
+  var result = {
+    submit: submit,
+    validate: validate,
+    reset: reset
+  };
+  function getData() {
+    return result;
+  }
+  return {
+    subscribe: subscribe,
+    getData: getData
+  };
+}
+export var useFormSubmit = function (_a) {
+  var onSubmit = _a.onSubmit;
+  var environment = useStore();
+  var resolver = React.useMemo(function () {
+    return logicSubmit(environment, onSubmit);
+  }, [environment, onSubmit]);
+  React.useEffect(function () {
+    return resolver.subscribe();
+  }, [resolver]);
+  return resolver.getData();
 };

package/lib/es/useFormValue.js

@@ -14,6 +14,6 @@ export function useFormValue(key) {
     return environment.subscribe(snapshot, function (s) {
       setData(s.data);
     }).dispose;
-  }, [environment, snapshot, setData]);
+  }, [environment, snapshot]);
   return data;
 }

package/lib/relay/RelayRecordProxy.d.ts

@@ -22,6 +22,7 @@ export declare class RelayRecordProxy implements RecordProxy {
     constructor(source: any, mutator: any, dataID: any);
     getDataID(): string;
     setValue(value: any, name: string): this;
+    getValue(name: any): any;
     setLinkedRecord(record: RecordProxy, name: string): this;
     getLinkedRecords(name: string): Array<RecordProxy | null | undefined> | null | undefined;
     setLinkedRecords(records: any, name: string): RecordProxy;

package/lib/relay/RelayRecordProxy.js

@@ -33,6 +33,9 @@ var RelayRecordProxy = /** @class */function () {
     this._mutator.setValue(this._dataID, name, value);
     return this;
   };
+  RelayRecordProxy.prototype.getValue = function (name) {
+    return this._mutator.getValue(this._dataID, name);
+  };
   RelayRecordProxy.prototype.setLinkedRecord = function (record, name) {
     var linkedID = record.getDataID();
     this._mutator.setLinkedRecordID(this._dataID, name, linkedID);

package/lib/relay/RelayRecordSourceMutator.d.ts

@@ -29,6 +29,7 @@ export declare class RelayRecordSourceMutator {
     create(dataID: any): void;
     delete(dataID: any): void;
     getStatus(dataID: any): "EXISTENT" | "NONEXISTENT" | "UNKNOWN";
+    getValue(dataID: any, storageKey: string): any;
     setValue(dataID: any, storageKey: string, value: any): void;
     setLinkedRecordID(dataID: any, storageKey: any, linkedID: any): void;
     getLinkedRecordIDs(dataID: any, storageKey: string): any;

package/lib/relay/RelayRecordSourceMutator.js

@@ -50,6 +50,19 @@ var RelayRecordSourceMutator = /** @class */function () {
   RelayRecordSourceMutator.prototype.getStatus = function (dataID) {
     return this._sink.has(dataID) ? this._sink.getStatus(dataID) : this._base.getStatus(dataID);
   };
+  RelayRecordSourceMutator.prototype.getValue = function (dataID, storageKey) {
+    for (var ii = 0; ii < this.__sources.length; ii++) {
+      var record = this.__sources[ii].get(dataID);
+      if (record) {
+        var value = RelayModernRecord_1.RelayModernRecord.getValue(record, storageKey);
+        if (value !== undefined) {
+          return value;
+        }
+      } else if (record === null) {
+        return null;
+      }
+    }
+  };
   RelayRecordSourceMutator.prototype.setValue = function (dataID, storageKey, value) {
     var sinkRecord = this._getSinkRecord(dataID);
     RelayModernRecord_1.RelayModernRecord.setValue(sinkRecord, storageKey, value);

package/lib/relay/RelayTypes.d.ts

@@ -4,6 +4,7 @@ export declare type Disposable = {
 };
 export interface RecordProxy {
     getDataID(): string;
+    getValue(name: string): any;
     getLinkedRecords(name: string): Array<RecordProxy | null | undefined> | null | undefined;
     setLinkedRecord(record: RecordProxy, name: string): RecordProxy;
     setLinkedRecords(records: Array<RecordProxy>, name: string): RecordProxy;

package/lib/relay/queries.d.ts

@@ -1,12 +1,14 @@
 export declare type QueryErrorsData = {
     readonly form: {
-        readonly entries: ReadonlyArray<{
-            readonly check: string | null;
+        readonly errors: ReadonlyArray<{
+            readonly check: number | null;
             readonly error: string | null;
             readonly id: string;
             readonly key: string;
+            readonly label: string | null;
         } | null> | null;
         readonly isSubmitting: boolean | null;
+        readonly isValid: boolean | null;
         readonly isValidating: boolean | null;
     } | null;
 };
@@ -38,7 +40,7 @@ export declare const QueryErrors: {
 export declare type QueryFieldsData = {
     readonly form: {
         readonly entries: ReadonlyArray<{
-            readonly check: string | null;
+            readonly check: number | null;
             readonly error: string | null;
             readonly id: string;
             readonly key: string;
@@ -67,7 +69,7 @@ export declare const QueryFields: {
     };
 };
 export declare type FragmentSetData = {
-    readonly check: string | null;
+    readonly check: number | null;
     readonly id: string;
 };
 export declare const FragmentSet: {

package/lib/relay/queries.js

@@ -19,6 +19,9 @@ var error = {
 var value = {
   name: 'value'
 };
+var label = {
+  name: 'label'
+};
 var kindFragment = 'Fragment';
 exports.QueryErrors = {
   id: '1',
@@ -35,9 +38,9 @@ exports.QueryErrors = {
         name: 'isValidating'
       }, {
         kind: RelayStoreUtils_1.LINKED_FIELD,
-        name: 'entries',
+        name: 'errors',
         plural: true,
-        selections: [id, key, error, check]
+        selections: [id, key, error, check, label]
       }]
     }] /*: any*/
   }
@@ -69,5 +72,5 @@ exports.FragmentSet = {
 exports.FragmentValue = {
   kind: kindFragment,
   name: 'fragmentValue',
-  selections: [id, value, error]
+  selections: [id, value, error, label]
 };