@reactables/forms 0.7.0-alpha.0 → 0.7.0-alpha.1

package/dist/index.js

@@ -39,18 +39,18 @@ var required = function (value) {
 };
 var email = function (value) {
     return value && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(value) ? { email: true } : { email: false };
-};
-var phoneNumber = function (value) {
-    return value && !/^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/.test(value)
-        ? { phoneNumber: true }
-        : { phoneNumber: false };
 };
 
+var Validators = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  required: required,
+  email: email
+});
+
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   required: required,
-  email: email,
-  phoneNumber: phoneNumber
+  email: email
 });
 
 /******************************************************************************
@@ -144,12 +144,18 @@ var generateKey = function (length) {
     return result;
 };
 
-var getErrors = function (control, value) {
-    var _a;
-    return ((_a = control.config.validators) === null || _a === void 0 ? void 0 : _a.reduce(function (acc, validator) { return (__assign(__assign({}, acc), validator(value))); }, {})) || {};
+var getErrors = function (control, value, _a) {
+    var _b;
+    var validators = _a.validators;
+    return ((_b = control.config.validators) === null || _b === void 0 ? void 0 : _b.reduce(function (acc, validator) {
+        if (!validators[validator]) {
+            throw "You have not provided a validator for \"".concat(validator, "\"");
+        }
+        return __assign(__assign({}, acc), validators[validator](value));
+    }, {})) || {};
 };
 
-var buildState = function (config, form, controlRef) {
+var buildState = function (config, form, controlRef, providers) {
     var _a;
     if (form === void 0) { form = { root: null }; }
     if (controlRef === void 0) { controlRef = []; }
@@ -164,40 +170,45 @@ var buildState = function (config, form, controlRef) {
         config: config,
         key: generateKey(5)
     };
-    var newForm = __assign(__assign({}, form), (_a = {}, _a[getFormKey(controlRef)] = __assign(__assign({}, control), { validatorErrors: getErrors(control, value) }), _a));
+    var newForm = __assign(__assign({}, form), (_a = {}, _a[getFormKey(controlRef)] = __assign(__assign({}, control), { validatorErrors: getErrors(control, value, providers) }), _a));
     var controls = config.controls;
     // Adding controls for Form Group
     if (controls && !(controls instanceof Array)) {
         newForm = Object.entries(config.controls).reduce(function (acc, _a) {
             var key = _a[0], controlConfig = _a[1];
-            return buildState(controlConfig, acc, controlRef.concat(key));
+            return buildState(controlConfig, acc, controlRef.concat(key), providers);
         }, newForm);
     }
     else if (controls && controls instanceof Array) {
         // Adding controls for Form Array
-        newForm = config.controls.reduce(function (acc, controlConfig, index) { return buildState(controlConfig, acc, controlRef.concat(index)); }, newForm);
+        newForm = config.controls.reduce(function (acc, controlConfig, index) {
+            return buildState(controlConfig, acc, controlRef.concat(index), providers);
+        }, newForm);
     }
     return newForm;
 };
-var buildFormState = function (config, form, controlRef) {
+var buildFormState = function (config, form, controlRef, providers) {
     if (form === void 0) { form = { root: null }; }
     if (controlRef === void 0) { controlRef = []; }
     return {
-        form: buildState(config, form, controlRef)
+        form: buildState(config, form, controlRef, providers)
     };
 };
 
-var getScopedEffectsForControl = function (formControl) {
+var getScopedEffectsForControl = function (formControl, providers) {
     var config = formControl.config, key = formControl.key;
     var asyncValidators = config.asyncValidators;
     var scopedEffects = [];
     if (asyncValidators && asyncValidators.length) {
-        scopedEffects = asyncValidators.reduce(function (acc, validator, validatorIndex) {
+        scopedEffects = asyncValidators.reduce(function (acc, asyncValidator, validatorIndex) {
             var effect = function (actions$) {
+                if (!providers.asyncValidators[asyncValidator]) {
+                    throw "You have not provided an asyncValidator for \"".concat(asyncValidator, "\"");
+                }
                 return actions$.pipe(operators.map(function (_a) {
                     var control = _a.payload;
                     return control;
-                }), validator, operators.map(function (errors) { return ({
+                }), providers.asyncValidators[asyncValidator], operators.map(function (errors) { return ({
                     type: 'asyncValidationResponseSuccess',
                     payload: {
                         key: key,
@@ -213,8 +224,8 @@ var getScopedEffectsForControl = function (formControl) {
 };
 var getAsyncValidationActions = function (formControls) {
     return formControls.reduce(function (acc, control) {
-        var effects = getScopedEffectsForControl(control);
-        if (!effects.length)
+        var _a;
+        if (!((_a = control.config.asyncValidators) === null || _a === void 0 ? void 0 : _a.length))
             return acc;
         var action = { type: 'asyncValidation', payload: control };
         return acc.concat(action);
@@ -237,7 +248,7 @@ var getControl = function (controlRef, form) {
 };
 
 var UPDATE_ANCESTOR_VALUES = 'UPDATE_ANCESTOR_VALUES';
-var updateAncestorValues = function (form, _a) {
+var updateAncestorValues = function (form, _a, providers) {
     var _b, _c;
     var _d = _a.payload, controlRef = _d.controlRef, value = _d.value;
     if (controlRef.length) {
@@ -256,11 +267,11 @@ var updateAncestorValues = function (form, _a) {
             // If parent is a Form Group
             newValue = __assign(__assign({}, parentControl.value), (_b = {}, _b[childKey_1] = value, _b));
         }
-        var newParentControl = __assign(__assign({}, parentControl), { validatorErrors: getErrors(parentControl, newValue), value: newValue, dirty: !isEqual__default["default"](newValue, parentControl.pristineValue) });
+        var newParentControl = __assign(__assign({}, parentControl), { validatorErrors: getErrors(parentControl, newValue, providers), value: newValue, dirty: !isEqual__default["default"](newValue, parentControl.pristineValue) });
         return updateAncestorValues(__assign(__assign({}, form), (_c = {}, _c[parentFormKey] = newParentControl, _c)), {
             type: UPDATE_ANCESTOR_VALUES,
             payload: { controlRef: parentRef, value: newValue }
-        });
+        }, providers);
     }
     return form;
 };
@@ -321,7 +332,7 @@ var getAncestorControls = function (controlRef, form, excludeSelf) {
 };
 
 var UPDATE_DESCENDANT_VALUES = 'UPDATE_DESCENDANT_VALUES';
-var updateDescendants = function (state, _a) {
+var updateDescendants = function (state, _a, providers) {
     var _b = _a.payload, controlRef = _b.controlRef, value = _b.value;
     var descendants = getDescendantControls(controlRef, state.form, true).map(function (control) { return [getFormKey(control.controlRef), control]; });
     var result = descendants.reduce(function (acc, _a) {
@@ -329,7 +340,7 @@ var updateDescendants = function (state, _a) {
         var key = _a[0], control = _a[1];
         if (isChildRef(control.controlRef, controlRef)) {
             var childValue = value[control.controlRef.at(-1)];
-            var validatorErrors = getErrors(control, value);
+            var validatorErrors = getErrors(control, value, providers);
             var newControl = __assign(__assign({}, control), { value: childValue, validatorErrors: validatorErrors, dirty: !isEqual__default["default"](childValue, control.pristineValue) });
             acc = {
                 form: __assign(__assign({}, acc.form), (_b = {}, _b[key] = newControl, _b)),
@@ -340,7 +351,7 @@ var updateDescendants = function (state, _a) {
                 acc = updateDescendants(acc, {
                     type: UPDATE_DESCENDANT_VALUES,
                     payload: { controlRef: control.controlRef, value: childValue }
-                });
+                }, providers);
             }
         }
         return acc;
@@ -352,19 +363,25 @@ var updateDescendants = function (state, _a) {
 };
 // Will only update child controls that are present.
 // Use AddControlPayload/RemoveControl action reducers to add/remove control
-var updateValues = function (_a, action, mergeChanges) {
+var updateValues = function (_a, action, providers, mergeChanges) {
     var _b, _c;
     var form = _a.form, _d = _a.changedControls, changedControls = _d === void 0 ? {} : _d, _e = _a.removedControls, removedControls = _e === void 0 ? {} : _e;
     if (mergeChanges === void 0) { mergeChanges = false; }
+    var normalizers = providers.normalizers;
     var _f = action.payload, controlRef = _f.controlRef, value = _f.value;
     // Update its own value
     var ctrlKey = getFormKey(controlRef);
     var newValue = value;
     var config = form[ctrlKey].config;
     if (config.normalizers) {
-        newValue = config.normalizers.reduce(function (acc, normalizer) { return normalizer(acc); }, value);
+        newValue = config.normalizers.reduce(function (acc, normalizer) {
+            if (!normalizers[normalizer]) {
+                throw "You have not provided a normalizer for \"".concat(normalizer, "\"");
+            }
+            return normalizers[normalizer](acc);
+        }, value);
     }
-    var validatorErrors = getErrors(form[ctrlKey], newValue);
+    var validatorErrors = getErrors(form[ctrlKey], newValue, providers);
     var newControl = __assign(__assign({}, form[ctrlKey]), { validatorErrors: validatorErrors, dirty: !isEqual__default["default"](value, form[ctrlKey].pristineValue), value: newValue });
     var result = {
         form: __assign(__assign({}, form), (_b = {}, _b[ctrlKey] = newControl, _b)),
@@ -379,14 +396,14 @@ var updateValues = function (_a, action, mergeChanges) {
                 controlRef: controlRef,
                 value: newValue
             }
-        });
+        }, providers);
     }
     // Update its Ancestors
     if (controlRef.length) {
         result = __assign(__assign({}, result), { form: updateAncestorValues(result.form, {
                 type: UPDATE_ANCESTOR_VALUES,
                 payload: { controlRef: controlRef, value: newValue }
-            }) });
+            }, providers) });
     }
     var changedAncestorControls = getAncestorControls(controlRef, result.form).reduce(function (acc, control) {
         var _a;
@@ -397,7 +414,7 @@ var updateValues = function (_a, action, mergeChanges) {
 };
 
 var UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL = 'UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL';
-var updateAncestorValuesRemoveControl = function (form, _a) {
+var updateAncestorValuesRemoveControl = function (form, _a, providers) {
     var _b;
     var controlRef = _a.payload;
     if (controlRef.length) {
@@ -415,16 +432,16 @@ var updateAncestorValuesRemoveControl = function (form, _a) {
             newValue = __assign({}, parentControl.value);
             delete newValue[childKey_1];
         }
-        var newParentControl = __assign(__assign({}, parentControl), { value: newValue, validatorErrors: getErrors(parentControl, newValue), dirty: !isEqual__default["default"](newValue, parentControl.pristineValue) });
+        var newParentControl = __assign(__assign({}, parentControl), { value: newValue, validatorErrors: getErrors(parentControl, newValue, providers), dirty: !isEqual__default["default"](newValue, parentControl.pristineValue) });
         return updateAncestorValues(__assign(__assign({}, form), (_b = {}, _b[parentFormKey] = newParentControl, _b)), {
             type: UPDATE_ANCESTOR_VALUES,
             payload: { controlRef: parentRef, value: newValue }
-        });
+        }, providers);
     }
     return form;
 };
 
-var removeControl = function (state, action, mergeChanges) {
+var removeControl = function (state, action, providers, mergeChanges) {
     var _a;
     if (mergeChanges === void 0) { mergeChanges = false; }
     var form = state.form;
@@ -473,7 +490,7 @@ var removeControl = function (state, action, mergeChanges) {
     var result = updateAncestorValuesRemoveControl(controlRemoved, {
         type: UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL,
         payload: controlRef
-    });
+    }, providers);
     var changedControls = __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), getAncestorControls(controlRef.slice(0, -1), result).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
@@ -518,7 +535,7 @@ var removeControl = function (state, action, mergeChanges) {
 };
 
 var UPDATE_ANCESTOR_VALUES_ADD_CONTROL = 'UPDATE_ANCESTOR_VALUES_ADD_CONTROL';
-var updateAncestorValuesAddControl = function (form, _a) {
+var updateAncestorValuesAddControl = function (form, _a, providers) {
     var _b, _c;
     var _d = _a.payload, controlRef = _d.controlRef, value = _d.value;
     if (controlRef.length) {
@@ -535,11 +552,11 @@ var updateAncestorValuesAddControl = function (form, _a) {
             // If parent is a Form Group
             newValue = __assign(__assign({}, form[parentFormKey].value), (_b = {}, _b[childKey] = value, _b));
         }
-        var newParentControl = __assign(__assign({}, parentControl), { value: newValue, validatorErrors: getErrors(parentControl, newValue), dirty: !isEqual__default["default"](newValue, parentControl.pristineValue) });
+        var newParentControl = __assign(__assign({}, parentControl), { value: newValue, validatorErrors: getErrors(parentControl, newValue, providers), dirty: !isEqual__default["default"](newValue, parentControl.pristineValue) });
         return updateAncestorValues(__assign(__assign({}, form), (_c = {}, _c[parentFormKey] = newParentControl, _c)), {
             type: UPDATE_ANCESTOR_VALUES,
             payload: { controlRef: parentRef, value: newValue }
-        });
+        }, providers);
     }
     return form;
 };
@@ -550,19 +567,19 @@ var getControlBranch = function (controlRef, form) {
     return ancestors.concat(childControls).sort(function (a, b) { return a.controlRef.length - b.controlRef.length; });
 };
 
-var addControl = function (state, action, mergeChanges) {
+var addControl = function (state, action, providers, mergeChanges) {
     if (mergeChanges === void 0) { mergeChanges = false; }
     var _a = action.payload, config = _a.config, controlRef = _a.controlRef;
     // If controlRef does not exist we are adding control to a Form Group
     if (!getControl(controlRef.slice(0, -1), state.form)) {
         throw 'You are attempting to add a control to a non-existent form group';
     }
-    var newForm = buildState(config, state.form, controlRef);
+    var newForm = buildState(config, state.form, controlRef, providers);
     var newValue = getControl(controlRef, newForm).value;
     var ancestorsUpdated = updateAncestorValuesAddControl(newForm, {
         type: UPDATE_ANCESTOR_VALUES_ADD_CONTROL,
         payload: { controlRef: controlRef, value: newValue }
-    });
+    }, providers);
     var changedControls = getControlBranch(controlRef, ancestorsUpdated).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
@@ -574,7 +591,7 @@ var addControl = function (state, action, mergeChanges) {
     };
 };
 
-var pushControl = function (state, action, mergeChanges) {
+var pushControl = function (state, action, providers, mergeChanges) {
     if (mergeChanges === void 0) { mergeChanges = false; }
     var newControlRef;
     var _a = action.payload, config = _a.config, controlRef = _a.controlRef;
@@ -588,12 +605,12 @@ var pushControl = function (state, action, mergeChanges) {
     else {
         throw 'You are attempting to push to a control that is not a Form Array';
     }
-    var newForm = buildState(config, state.form, newControlRef);
+    var newForm = buildState(config, state.form, newControlRef, providers);
     var newValue = getControl(newControlRef, newForm).value;
     var ancestorsUpdated = updateAncestorValuesAddControl(newForm, {
         type: UPDATE_ANCESTOR_VALUES_ADD_CONTROL,
         payload: { controlRef: newControlRef, value: newValue }
-    });
+    }, providers);
     var changedControls = getControlBranch(newControlRef, ancestorsUpdated).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
@@ -719,7 +736,7 @@ var markControlAsUntouched = function (state, action, mergeChanges) {
     };
 };
 
-var resetControl = function (state, action, mergeChanges) {
+var resetControl = function (state, action, providers, mergeChanges) {
     var _a;
     if (mergeChanges === void 0) { mergeChanges = false; }
     var form = state.form;
@@ -735,12 +752,12 @@ var resetControl = function (state, action, mergeChanges) {
         delete descendantsRemoved[key];
     });
     // Remove all descendants
-    var restoredControls = buildState(controlToReset.config, descendantsRemoved, controlToReset.controlRef);
+    var restoredControls = buildState(controlToReset.config, descendantsRemoved, controlToReset.controlRef, providers);
     var restoredControlValue = getControl(controlRef, restoredControls).value;
     var result = updateAncestorValues(restoredControls, {
         type: UPDATE_ANCESTOR_VALUES,
         payload: { controlRef: controlRef, value: restoredControlValue }
-    });
+    }, providers);
     var changedControls = __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), getControlBranch(controlRef, result).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
@@ -993,18 +1010,21 @@ var control = function (config) {
 };
 var array = function (config) { return config; };
 var group = function (config) { return config; };
-var reducerTools = {
+var reducerTools = function (providers) { return ({
     updateValues: function (state, payload) {
-        return updateValues(state, { payload: payload }, true);
+        return updateValues(state, { payload: payload }, providers, true);
     },
     removeControl: function (state, payload) {
-        return removeControl(state, { payload: payload }, true);
+        return removeControl(state, { payload: payload }, providers, true);
     },
     pushControl: function (state, payload) {
-        return pushControl(state, { payload: payload }, true);
+        return pushControl(state, { payload: payload }, providers, true);
     },
     addControl: function (state, payload) {
-        return addControl(state, { payload: payload }, true);
+        return addControl(state, { payload: payload }, providers, true);
+    },
+    resetControl: function (state, payload) {
+        return resetControl(state, { payload: payload }, providers, true);
     },
     markControlAsPristine: function (state, payload) {
         return markControlAsPristine(state, { payload: payload }, true);
@@ -1014,14 +1034,47 @@ var reducerTools = {
     },
     markControlAsUntouched: function (state, payload) {
         return markControlAsUntouched(state, { payload: payload }, true);
-    },
-    resetControl: function (state, payload) {
-        return resetControl(state, { payload: payload }, true);
     }
-};
+}); };
 var build = function (config, options) {
+    var _a, _b, _c;
     if (options === void 0) { options = {}; }
-    var initialState = buildFormState(config);
+    var providers = {
+        normalizers: __assign({}, (_a = options.providers) === null || _a === void 0 ? void 0 : _a.normalizers),
+        validators: __assign(__assign({}, Validators), (_b = options.providers) === null || _b === void 0 ? void 0 : _b.validators),
+        asyncValidators: __assign({}, (_c = options.providers) === null || _c === void 0 ? void 0 : _c.asyncValidators)
+    };
+    var initialState = buildFormState(config, undefined, undefined, providers);
+    return createReactable(initialState, options);
+};
+var load = function (state, options) {
+    if (options === void 0) { options = {}; }
+    var baseFormState = {
+        form: Object.entries(state).reduce(function (acc, _a) {
+            var _b;
+            var key = _a[0], control = _a[1];
+            return __assign(__assign({}, acc), (_b = {}, _b[key] = Object.entries(control)
+                .filter(function (_a) {
+                var key = _a[0];
+                return !Object.keys(DEFAULT_HUB2_FIELDS).includes(key);
+            })
+                .reduce(function (acc, _a) {
+                var _b;
+                var key = _a[0], value = _a[1];
+                return (__assign(__assign({}, acc), (_b = {}, _b[key] = value, _b)));
+            }, {}), _b));
+        }, {})
+    };
+    return createReactable(baseFormState, options);
+};
+var createReactable = function (initialBaseState, options, initialFormState) {
+    var _a, _b, _c;
+    if (options === void 0) { options = {}; }
+    var providers = {
+        normalizers: __assign({}, (_a = options.providers) === null || _a === void 0 ? void 0 : _a.normalizers),
+        validators: __assign(__assign({}, Validators), (_b = options.providers) === null || _b === void 0 ? void 0 : _b.validators),
+        asyncValidators: __assign({}, (_c = options.providers) === null || _c === void 0 ? void 0 : _c.asyncValidators)
+    };
     var reducers = options.reducers, otherOptions = __rest(options, ["reducers"]);
     var customReducers = Object.entries(reducers || {}).reduce(function (acc, _a) {
         var _b;
@@ -1031,22 +1084,32 @@ var build = function (config, options) {
         return __assign(__assign({}, acc), (_b = {}, _b[key] = {
             reducer: function (_a, action) {
                 var form = _a.form;
-                return _reducer(reducerTools, { form: form }, action);
+                return _reducer(reducerTools(providers), { form: form }, action);
             },
             effects: effects
         }, _b));
     }, {});
-    var _a = core.RxBuilder(__assign({ initialState: initialState, reducers: __assign({ updateValues: updateValues, removeControl: removeControl, addControl: addControl, pushControl: pushControl, markControlAsPristine: markControlAsPristine, markControlAsTouched: markControlAsTouched, markControlAsUntouched: markControlAsUntouched, resetControl: resetControl }, customReducers) }, otherOptions)), hub1State$ = _a[0], hub1Actions = _a[1];
+    var _d = core.RxBuilder(__assign({ initialState: initialBaseState, reducers: __assign({ updateValues: function (state, action, mergeChanges) {
+                return updateValues(state, action, providers, mergeChanges);
+            }, removeControl: function (state, action, mergeChanges) {
+                return removeControl(state, action, providers, mergeChanges);
+            }, addControl: function (state, action, mergeChanges) {
+                return addControl(state, action, providers, mergeChanges);
+            }, pushControl: function (state, action, mergeChanges) {
+                return pushControl(state, action, providers, mergeChanges);
+            }, resetControl: function (state, action, mergeChanges) {
+                return resetControl(state, action, providers, mergeChanges);
+            }, markControlAsPristine: markControlAsPristine, markControlAsTouched: markControlAsTouched, markControlAsUntouched: markControlAsUntouched }, customReducers) }, otherOptions)), hub1State$ = _d[0], hub1Actions = _d[1];
     var state$ = core.RxBuilder({
-        sources: [buildHub2Source(hub1State$)],
-        initialState: null,
+        sources: [buildHub2Source(hub1State$).pipe(operators.skip(initialFormState ? 1 : 0))],
+        initialState: initialFormState || null,
         reducers: {
             formChange: formChange,
             asyncValidation: {
                 reducer: asyncValidation,
                 effects: function (control) { return ({
                     key: control.key,
-                    effects: getScopedEffectsForControl(control)
+                    effects: getScopedEffectsForControl(control, providers)
                 }); }
             },
             asyncValidationResponseSuccess: asyncValidationResponseSuccess
@@ -1074,3 +1137,4 @@ exports.build = build;
 exports.control = control;
 exports.getArrayItems = getArrayItems;
 exports.group = group;
+exports.load = load;

package/package.json

@@ -14,7 +14,7 @@
   "author": "David Lai",
   "license": "ISC",
   "dependencies": {
-    "@reactables/core": "^0.7.0-alpha.0",
+    "@reactables/core": "^0.7.0-alpha.1",
     "lodash.isequal": "^4.5.0"
   },
   "peerDependencies": {
@@ -23,5 +23,5 @@
   "devDependencies": {
     "lodash.clonedeep": "^4.5.0"
   },
-  "version": "0.7.0-alpha.0"
+  "version": "0.7.0-alpha.1"
 }

package/dist/Helpers/FormBuilder.d.ts

@@ -1,10 +0,0 @@
-import { FormControlConfig, FormArrayConfig, FormGroupConfig, AbstractControlConfig } from '../Models/Configs';
-import { ValidatorFn, ValidatorAsyncFn } from '../Models/Validators';
-type FbControl<T> = [T, (ValidatorFn | ValidatorFn[])?, (ValidatorAsyncFn | ValidatorAsyncFn[])?];
-export declare const FormBuilder: {
-    control: <T>(config: FormControlConfig<T> | FbControl<T>) => FormControlConfig<T>;
-    array: (config: FormArrayConfig) => FormArrayConfig;
-    group: (config: FormGroupConfig) => FormGroupConfig;
-    build: (config: AbstractControlConfig, hub?: any) => any;
-};
-export {};