relay-forms-nodeps 1.0.0 → 1.1.0

package/lib/umd/relay-forms-nodeps.js

@@ -223,14 +223,6 @@ function hasOverlappingIDs(seenRecords, updatedRecordIDs) {
   return false;
 }
 
-function useForceUpdate() {
-  var _a = React.useReducer(function (x) {
-      return x + 1;
-    }, 0),
-    forceUpdate = _a[1];
-  return forceUpdate;
-}
-
 var id = {
   name: 'id'
 };
@@ -246,6 +238,9 @@ var error = {
 var value = {
   name: 'value'
 };
+var label = {
+  name: 'label'
+};
 var kindFragment = 'Fragment';
 var QueryErrors = {
   id: '1',
@@ -262,9 +257,9 @@ var QueryErrors = {
         name: 'isValidating'
       }, {
         kind: LINKED_FIELD,
-        name: 'entries',
+        name: 'errors',
         plural: true,
-        selections: [id, key, error, check]
+        selections: [id, key, error, check, label]
       }]
     }] /*: any*/
   }
@@ -296,7 +291,7 @@ var FragmentSet = {
 var FragmentValue = {
   kind: kindFragment,
   name: 'fragmentValue',
-  selections: [id, value, error]
+  selections: [id, value, error, label]
 };
 
 /**
@@ -328,16 +323,6 @@ function createOperationDescriptor(request) {
 }
 
 var PREFIX_LOCAL_FORM = 'local:form';
-var internalCommitLocalUpdate = function (environment, updater) {
-  environment.commitUpdate(function (store) {
-    var localForm = store.get(PREFIX_LOCAL_FORM);
-    if (!localForm) {
-      localForm = store.create(PREFIX_LOCAL_FORM).setLinkedRecords([], 'entries');
-      store.getRoot().setLinkedRecord(localForm, 'form');
-    }
-    updater(store, localForm);
-  });
-};
 function getFieldId(key) {
   return PREFIX_LOCAL_FORM + '.' + key;
 }
@@ -347,291 +332,336 @@ function getSnapshot(environment, fragment, key) {
   };
   return environment.lookup(getSingularSelector(fragment, item));
 }
-var commitResetIntoRelay = function (entries, environment) {
-  internalCommitLocalUpdate(environment, function (store, form) {
-    form.setValue(false, 'isSubmitting');
-    form.setValue(false, 'isValidating');
-    entries.forEach(function (entry) {
-      return store.get(getFieldId(entry.key)).setValue('RESET', 'check');
-    });
-  });
-};
-var commitValidateIntoRelay = function (entries, isSubmitting, environment) {
-  internalCommitLocalUpdate(environment, function (store, form) {
-    form.setValue(isSubmitting, 'isSubmitting');
-    form.setValue(true, 'isValidating');
-    entries.forEach(function (entry) {
-      return store.get(getFieldId(entry.key)).setValue('START', 'check');
-    });
-  });
-};
-var commitSubmitEndRelay = function (environment) {
-  internalCommitLocalUpdate(environment, function (_, form) {
-    form.setValue(false, 'isSubmitting');
-  });
-};
-var commitValidateEndRelay = function (environment) {
-  internalCommitLocalUpdate(environment, function (_, form) {
-    form.setValue(false, 'isValidating');
-  });
-};
-var commitResetField = function (environment, key) {
-  var id = getFieldId(key);
-  internalCommitLocalUpdate(environment, function (store, form) {
-    var entriesArray = form.getLinkedRecords('entries');
-    var newEntries = entriesArray.filter(function (value) {
-      return value.getDataID() != id;
-    });
-    form.setLinkedRecords(newEntries, 'entries');
-    store.delete(id);
-  });
-};
-var commitValue = function (key, value, check, environment) {
-  var id = getFieldId(key);
-  internalCommitLocalUpdate(environment, function (store, form) {
-    var field = store.get(id);
-    if (!field) {
-      field = store.create(id);
-      var entriesArray = form.getLinkedRecords('entries');
-      entriesArray.push(field);
-      form.setLinkedRecords(entriesArray, 'entries');
+function commit(environment, updater) {
+  environment.commitUpdate(function (store) {
+    var localForm = store.get(PREFIX_LOCAL_FORM);
+    if (!localForm) {
+      localForm = store.create(PREFIX_LOCAL_FORM).setLinkedRecords([], 'entries').setLinkedRecords([], 'errors');
+      store.getRoot().setLinkedRecord(localForm, 'form');
     }
-    field.setValue(id, 'id').setValue(key, 'key').setValue(check, 'check').setValue(value, 'value');
-  });
-};
-var commitErrorIntoRelay = function (key, error, environment) {
-  internalCommitLocalUpdate(environment, function (store) {
-    store.get(getFieldId(key)).setValue(error, 'error').setValue('DONE', 'check');
+    updater(store, localForm);
   });
-};
+}
 var operationQueryForm = createOperationDescriptor(QueryFields);
 var operationQueryErrorsForm = createOperationDescriptor(QueryErrors);
 
 var useFormState = function () {
-  var ref = React__default["default"].useRef({
-    errors: undefined,
-    isValidating: false,
-    isSubmitting: false,
-    isValid: false
-  });
-  var forceUpdate = useForceUpdate();
   var environment = useStore();
+  var snapshot = React__default["default"].useMemo(function () {
+    return environment.lookup(operationQueryErrorsForm.fragment);
+  }, [environment]);
+  var _a = React__default["default"].useState(snapshot.data.form),
+    data = _a[0],
+    setData = _a[1];
   React__default["default"].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;
 };
 
-var useFormSubmit = function (_a) {
-  var onSubmit = _a.onSubmit;
-  var environment = useStore();
-  React__default["default"].useEffect(function () {
-    return environment.retain(operationQueryForm).dispose;
-  }, [environment]);
-  var ref = React__default["default"].useRef({
-    isSubmitting: false,
-    isValidating: false,
-    error: undefined,
-    subscription: undefined
-  });
-  var internalValidate = React__default["default"].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__default["default"].useCallback(function (environment, snapshot, dispose, onSubmit) {
-    var data = snapshot.data;
-    var entries = data.form.entries;
-    var filtered = entries.filter(function (value) {
-      return value.check === 'DONE';
-    });
-    if (filtered.length === entries.length) {
-      var errors = entries.filter(function (value) {
-        return !!value.error;
-      });
-      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;
-        }
-      }
-      internalDispose();
+function useForceUpdate() {
+  var _a = React.useReducer(function (x) {
+      return x + 1;
+    }, 0),
+    forceUpdate = _a[1];
+  return forceUpdate;
+}
+
+var INIT = 0;
+var TOBEVALIDATE = 1;
+var VALIDATING = 2;
+var DONE = 3;
+var DONEVALIDATED = 4;
+var RESET = 5;
+function getInitCheck(validate) {
+  return validate ? TOBEVALIDATE : DONE;
+}
+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 dataResult = {
+    value: initialValue,
+    error: undefined
+  };
+  function commitField(commitValue) {
+    if (commitValue === void 0) {
+      commitValue = true;
     }
-  }, []);
-  var reset = React__default["default"].useCallback(function () {
-    var snapshot = environment.lookup(operationQueryForm.fragment);
-    if (ref.current.isValidating && ref.current.isSubmitting) {
+    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;
     }
-    var data = snapshot.data;
-    commitResetIntoRelay(data.form.entries, environment);
-  }, [environment]);
-  var subscribe = React__default["default"].useCallback(function (submit) {
-    if (submit === void 0) {
-      submit = false;
+    firstSet = false;
+    validate = newValidate;
+    // validation was called
+    if (ref.check === DONEVALIDATED && validate) {
+      ref.check = VALIDATING;
+    } else {
+      // reinit
+      ref.check = getInitCheck(validate);
     }
-    var snapshot = environment.lookup(operationQueryForm.fragment);
-    var subscription = ref.current.subscription;
-    subscription && subscription.dispose();
-    function dispose() {
-      subscription && subscription.dispose();
-      ref.current.subscription = null;
+    commitField();
+  }
+  function getData() {
+    return dataResult;
+  }
+  function changeData(value, error) {
+    dataResult = {
+      value: value,
+      error: error
+    };
+    forceUpdate();
+  }
+  function setValue(newValue) {
+    setValueInternal(newValue);
+  }
+  function setValueInternal(newValue, error) {
+    if (ref.check === DONEVALIDATED) {
+      ref.check = VALIDATING;
     }
-    ref.current.subscription = environment.subscribe(snapshot, function (s) {
-      return execute(environment, s, dispose, onSubmit);
-    });
-    internalValidate(snapshot, submit);
-    execute(environment, snapshot, dispose, onSubmit);
-  }, [environment, internalValidate, execute, onSubmit]);
-  var validate = React__default["default"].useCallback(function () {
-    if (!ref.current.isValidating) {
-      subscribe(false);
+    changeData(newValue, error);
+    commitField();
+  }
+  function finalizeCheck(error) {
+    ref.isChecking = false;
+    ref.check = DONEVALIDATED;
+    if (dataResult.error !== error) {
+      changeData(dataResult.value, error);
     }
-  }, [subscribe]);
-  var submit = React__default["default"].useCallback(function (event) {
-    if (event) {
-      event.preventDefault();
+    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 (!ref.current.isSubmitting) {
-      ref.current.isSubmitting = true;
-      subscribe(true);
+    if (isPromise(result)) {
+      result.then(internalFinalize).catch(internalFinalize);
+    } else {
+      internalFinalize(result);
     }
-  }, [subscribe]);
-  var result = React__default["default"].useMemo(function () {
-    return {
-      submit: submit,
-      validate: validate,
-      reset: reset
+  }
+  function subscribe() {
+    var snapshot = getSnapshot(environment, FragmentSet, key);
+    var disposeSubscrition = environment.subscribe(snapshot, function (s) {
+      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.check = getInitCheck(validate);
+        setValueInternal(initialValue);
+      } else if (isValidating && !ref.isChecking) {
+        internalValidate(dataResult.value, validate);
+      }
+    }).dispose;
+    var dispose = function () {
+      disposeSubscrition();
+      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);
+      });
     };
-  }, [submit, validate, reset]);
-  return result;
-};
-
+    if (validateOnChange) {
+      internalValidate(initialValue, getValidate());
+    }
+    return dispose;
+  }
+  return {
+    subscribe: subscribe,
+    getData: getData,
+    setValue: setValue,
+    setValidate: setValidate
+  };
+}
 function useFormSetValue(_a) {
   var key = _a.key,
     initialValue = _a.initialValue,
     validate = _a.validate,
-    validateOnChange = _a.validateOnChange;
+    validateOnChange = _a.validateOnChange,
+    label = _a.label;
   var forceUpdate = useForceUpdate();
   var environment = useStore();
-  var ref = React__default["default"].useRef({
-    value: initialValue,
-    error: undefined,
-    check: validate ? 'INIT' : 'DONE',
-    isChecking: false
-  });
-  var setValue = React__default["default"].useCallback(function (newValue) {
-    ref.current.value = newValue;
-    if (ref.current.check === 'DONE' && validate) {
-      ref.current.check = 'START';
-    }
-    commitValue(key, newValue, ref.current.check, environment);
-    forceUpdate();
-  }, [environment, key, validate, forceUpdate]);
+  var resolver = React__default["default"].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__default["default"].useEffect(function () {
-    //commitResetField(environment, key);
-    commitValue(key, initialValue, ref.current.check, environment);
-    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;
-      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);
-        }
-      }
-    }).dispose;
-    var dispose = function () {
-      disposeSubscrition();
-      commitResetField(environment, key);
+    return resolver.subscribe();
+  }, [resolver]);
+  return [resolver.getData(), resolver.setValue];
+}
+
+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');
+      });
     };
-    function finalizeCheck(error) {
-      ref.current.isChecking = false;
-      if (ref.current.error !== error) {
-        ref.current.error = error;
-        forceUpdate();
+    var data = snapshot.data;
+    var entries = data.form.entries;
+    var filtered = entries.filter(function (value) {
+      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;
+    });
+    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));
+      });
+      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;
       }
-      commitErrorIntoRelay(key, error, environment);
+    } else if (!isValidating) {
+      disposeSubmit();
     }
-    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);
-      }
+  }
+  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');
+        });
+      });
     }
-    if (validateOnChange) {
-      internalValidate(initialValue);
+  }
+  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');
+      });
+    });
+    var snapshot = environment.lookup(operationQueryForm.fragment);
+    if (!subscription) {
+      subscription = environment.subscribe(snapshot, function (s) {
+        return execute(s);
+      });
     }
-    return dispose;
-  }, [environment, initialValue, key, setValue, validate, validateOnChange, forceUpdate]);
-  return [ref.current, setValue];
+    execute(snapshot);
+  }
+  function submit(event) {
+    event && event.preventDefault();
+    if (!isSubmitting) {
+      isSubmitting = true;
+      validate();
+    }
+  }
+  function subscribe() {
+    var disposeRetain = environment.retain(operationQueryForm).dispose;
+    return function () {
+      dispose();
+      disposeRetain();
+    };
+  }
+  var result = {
+    submit: submit,
+    validate: validate,
+    reset: reset
+  };
+  function getData() {
+    return result;
+  }
+  return {
+    subscribe: subscribe,
+    getData: getData
+  };
 }
+var useFormSubmit = function (_a) {
+  var onSubmit = _a.onSubmit;
+  var environment = useStore();
+  var resolver = React__default["default"].useMemo(function () {
+    return logicSubmit(environment, onSubmit);
+  }, [environment, onSubmit]);
+  React__default["default"].useEffect(function () {
+    return resolver.subscribe();
+  }, [resolver]);
+  return resolver.getData();
+};
 
 function useFormValue(key) {
   var environment = useStore();
@@ -645,7 +675,7 @@ function useFormValue(key) {
     return environment.subscribe(snapshot, function (s) {
       setData(s.data);
     }).dispose;
-  }, [environment, snapshot, setData]);
+  }, [environment, snapshot]);
   return data;
 }
 
@@ -1048,6 +1078,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.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.setValue(sinkRecord, storageKey, value);
@@ -1097,6 +1140,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);