intelicoreact 0.1.18 → 0.1.21

package/dist/Functions/useFormTools/index.js

@@ -0,0 +1,759 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFormTools;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _General2 = _interopRequireDefault(require("./functions/General"));
+
+var _ArrayWithObjects = _interopRequireDefault(require("./form-drivers/ArrayWithObjects"));
+
+var _ObjectWithIterableObjects = _interopRequireDefault(require("./form-drivers/ObjectWithIterableObjects"));
+
+var _ObjectWithNamedKeyObjects = _interopRequireDefault(require("./form-drivers/ObjectWithNamedKeyObjects"));
+
+var _RenderFields = _interopRequireDefault(require("./functions/RenderFields"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var DefaultFocusControllerProps = {
+  setAutoFocus: true,
+  onlyEmptyFieldAutoFocus: false
+};
+
+function useFormTools() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      form = _ref.form,
+      setForm = _ref.setForm,
+      FormType = _ref.FormType,
+      FormFields = _ref.FormFields,
+      _ref$FormDataDriverNa = _ref.FormDataDriverName,
+      FormDataDriverName = _ref$FormDataDriverNa === void 0 ? 'ArrayWithObjects' : _ref$FormDataDriverNa,
+      _ref$FormDataDriver = _ref.FormDataDriver,
+      FormDataDriver = _ref$FormDataDriver === void 0 ? null : _ref$FormDataDriver,
+      _ref$FocusControllerP = _ref.FocusControllerProps,
+      FocusControllerProps = _ref$FocusControllerP === void 0 ? DefaultFocusControllerProps : _ref$FocusControllerP;
+
+  FocusControllerProps = _objectSpread(_objectSpread({}, DefaultFocusControllerProps), FocusControllerProps);
+  var FormDataDrivers = {
+    ArrayWithObjects: {
+      handlers: _ArrayWithObjects.default,
+      default: true
+    },
+    ObjectWithIterableObjects: {
+      handlers: _ObjectWithIterableObjects.default
+    },
+    ObjectWithNamedKeyObjects: {
+      handlers: _ObjectWithNamedKeyObjects.default
+    }
+  };
+
+  var getFormDataDriver = function getFormDataDriver(name) {
+    var _FormDataDrivers$name, _Object$values$find;
+
+    return FormDataDriver || ((_FormDataDrivers$name = FormDataDrivers[name]) === null || _FormDataDrivers$name === void 0 ? void 0 : _FormDataDrivers$name.handlers) || ((_Object$values$find = Object.values(FormDataDrivers).find(function (df) {
+      return df.default === true;
+    })) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.handlers) || function () {
+      return {};
+    };
+  };
+
+  var getFormDataDriverInstance = function getFormDataDriverInstance(name) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return getFormDataDriver(name).apply(void 0, args);
+  };
+
+  var _General = (0, _General2.default)(),
+      getFieldClassName = _General.getFieldClassName,
+      updateFormField = _General.updateFormField;
+
+  var _getFormDataDriverIns = getFormDataDriverInstance(FormDataDriverName, {
+    form: form,
+    setForm: setForm,
+    FormFields: FormFields
+  }),
+      getFieldData = _getFormDataDriverIns.getFieldData,
+      getFormField = _getFormDataDriverIns.getFormField,
+      setFormFields = _getFormDataDriverIns.setFormFields,
+      setFormField = _getFormDataDriverIns.setFormField,
+      getFormFieldsAsArray = _getFormDataDriverIns.getFormFieldsAsArray,
+      getFormFieldsKeys = _getFormDataDriverIns.getFormFieldsKeys,
+      removeAllFormFields = _getFormDataDriverIns.removeAllFormFields; ///////////////////////////////////////////////////////////////
+  //--- OnChange Observer ---//--- START ---//
+
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      onChangeObservers = _useState2[0],
+      setOnChangeObservers = _useState2[1];
+
+  var addOnChangeObserver = function addOnChangeObserver(key, cb) {
+    var observerId = null;
+    setOnChangeObservers(function (state) {
+      //Set Default Value
+      if (!state[key]) state[key] = {};
+      observerId = state[key].length;
+      state[key][observerId] = cb;
+      return state;
+    });
+    return observerId;
+  };
+
+  var removeOnChangeObserver = function removeOnChangeObserver(key, id) {
+    setOnChangeObservers(function (state) {
+      //Set Default Value
+      if (!state[key]) return state;
+      state[key] = Object.keys(state).filter(function (cbId) {
+        return cbId !== id;
+      }).map(function (cbId) {
+        return state[key][cbId];
+      });
+      return state;
+    });
+  };
+
+  var onChangeObserver = function onChangeObserver(key, value) {
+    if (!onChangeObservers[key] || (0, _typeof2.default)(onChangeObservers[key]) !== 'object') return;
+    var Observers = onChangeObservers[key];
+    Object.values(Observers).map(function (cb) {
+      cb({
+        value: value,
+        form: form
+      });
+      return null;
+    });
+  };
+
+  var onFieldChange = function onFieldChange(key, value) {
+    // if (value === getFormField(key)?.value) return false;
+    onChangeObserver(key, value);
+    setFormField(function (field) {
+      return _objectSpread(_objectSpread({}, field), {}, {
+        error: '',
+        value: value
+      });
+    }, key); // eslint-disable-next-line no-use-before-define
+    // if (autoFocusedField === key) {
+    //   setTimeout(() => {
+    //     // eslint-disable-next-line no-use-before-define
+    //     setFieldFocus({key, form});
+    //     // eslint-disable-next-line no-use-before-define
+    //     setAutoFocusedField(null);
+    //   }, 1);
+    // }
+  }; //--- OnChange Observer ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- Form Submit Blocker ---//--- START ---//
+
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      formSubmitBlockers = _useState4[0],
+      setFormSubmitBlockers = _useState4[1];
+
+  var toggleFormSubmitBlock = function toggleFormSubmitBlock(key, value) {
+    setFormSubmitBlockers(function (state) {
+      return state.includes(key) || !value ? (0, _toConsumableArray2.default)(state.filter(function (k) {
+        return k !== key;
+      })) : [].concat((0, _toConsumableArray2.default)(state), [key]);
+    });
+  };
+
+  var clearFormSubmitBlockers = function clearFormSubmitBlockers() {
+    return setFormSubmitBlockers([]);
+  }; //--- Form Submit Blocker ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- Property Observer Blocker ---//--- START ---//
+  // const [propertyObservers, setPropertyObservers] = useState({});
+  // function addPropertyObserver () {
+  // };
+  //--- Property Observer Blocker ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- Render Fields Controller ---//--- START ---//
+
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isFormFieldsAdded = _useState6[0],
+      setIsFormFieldsAdded = _useState6[1];
+
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      renderFormFields = _useState8[0],
+      setRenderFormFieldsState = _useState8[1];
+
+  var setRenderFormFields = function setRenderFormFields(data) {
+    setIsFormFieldsAdded(true); // eslint-disable-next-line no-use-before-define
+
+    removeRenderFields(renderFormFields); // eslint-disable-next-line no-use-before-define
+
+    resetIsInitFocused();
+    setRenderFormFieldsState(data);
+  };
+
+  var addRenderFields = function addRenderFields(fields) {
+    setRenderFormFieldsState(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), (0, _toConsumableArray2.default)(fields));
+    });
+  };
+
+  var removeRenderFields = function removeRenderFields(fields) {
+    setRenderFormFieldsState(function (state) {
+      return state.filter(function (field) {
+        return !fields.includes(field);
+      });
+    });
+  };
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isFormRendered = _useState10[0],
+      setIsFormRendered = _useState10[1]; //On Render Fields Change
+
+
+  (0, _react.useEffect)(function () {
+    if (isFormFieldsAdded) setIsFormRendered(false); //Add Form Fields
+
+    if (renderFormFields.length === 0) return null;
+    setFormFields(function (fields) {
+      return renderFormFields.reduce(function (result, key) {
+        var _field$className;
+
+        var fieldData = getFieldData(key);
+        var field = !getFormField(key) ? fieldData : getFormField(key); // eslint-disable-next-line no-use-before-define
+
+        if (!(field !== null && field !== void 0 && field.className) || (field === null || field === void 0 ? void 0 : (_field$className = field.className) === null || _field$className === void 0 ? void 0 : _field$className.indexOf(getFieldClassName(key, FormType))) === -1) {
+          // eslint-disable-next-line no-use-before-define
+          field.className = "".concat(field === null || field === void 0 ? void 0 : field.className, " ").concat(getFieldClassName(key, FormType));
+        }
+
+        if ((0, _typeof2.default)(fieldData === null || fieldData === void 0 ? void 0 : fieldData.label) === 'object') {
+          field.label = fieldData.label[FormType] || fieldData.label.default;
+        }
+
+        field.ref = /*#__PURE__*/(0, _react.createRef)();
+        field.isValueChangedByUser = false; //Is Field Value Changed By USER
+        // eslint-disable-next-line no-use-before-define
+
+        addOnFieldRenderedObserver(key, function () {
+          var _getFormField, _getFormField$ref, _getFormField$ref$cur;
+
+          var element = (_getFormField = getFormField(key)) === null || _getFormField === void 0 ? void 0 : (_getFormField$ref = _getFormField.ref) === null || _getFormField$ref === void 0 ? void 0 : (_getFormField$ref$cur = _getFormField$ref.current) === null || _getFormField$ref$cur === void 0 ? void 0 : _getFormField$ref$cur.querySelector((field === null || field === void 0 ? void 0 : field.focusSelector) || 'input');
+
+          var handler = function handler() {
+            return setFormField({
+              isValueChangedByUser: true
+            }, key);
+          };
+
+          element === null || element === void 0 ? void 0 : element.addEventListener('paste', handler, {
+            once: true
+          });
+          element === null || element === void 0 ? void 0 : element.addEventListener('keypress', handler, {
+            once: true
+          });
+        }, true);
+        return updateFormField(result, field, key);
+      }, fields);
+    });
+  }, [renderFormFields]);
+
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      onFormRenderObservers = _useState12[0],
+      setOnFormRenderObservers = _useState12[1];
+
+  var addOnFormRenderObserver = function addOnFormRenderObserver(cb) {
+    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref2$once = _ref2.once,
+        once = _ref2$once === void 0 ? false : _ref2$once;
+
+    setOnFormRenderObservers(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), [{
+        cb: cb,
+        once: once,
+        isWorkedOut: false
+      }]);
+    });
+  };
+
+  var updateOnFormRenderObserver = function updateOnFormRenderObserver(key, data) {
+    setOnFormRenderObservers(function (state) {
+      var copy = (0, _toConsumableArray2.default)(state);
+      copy[key] = _objectSpread(_objectSpread({}, state[key]), data);
+      return copy;
+    });
+  };
+
+  var onFormRenderWorker = function onFormRenderWorker() {
+    onFormRenderObservers.map(function (_ref3, key) {
+      var cb = _ref3.cb,
+          once = _ref3.once,
+          isWorkedOut = _ref3.isWorkedOut;
+      if (once && isWorkedOut) return null;
+      cb(form);
+      updateOnFormRenderObserver(key, {
+        isWorkedOut: true
+      });
+      return null;
+    });
+  }; //On Form Rendered
+
+
+  (0, _react.useEffect)(function () {
+    if (isFormRendered || !onFormRenderObservers.length) return null;
+
+    if (getFormFieldsKeys(form).length === renderFormFields.length) {
+      setIsFormRendered(true);
+      onFormRenderWorker();
+    }
+  }, [form, renderFormFields]); //--- Render Fields Controller ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- START ---//
+
+  var hightliteErrorLabels = function hightliteErrorLabels() {
+    var fields = getFormFieldsAsArray();
+    var filtered = fields === null || fields === void 0 ? void 0 : fields.reduce(function (result, field) {
+      if (field !== null && field !== void 0 && field.errorLabelHightlite) {
+        // eslint-disable-next-line no-use-before-define
+        result.push(_objectSpread(_objectSpread({}, field), {}, {
+          className: getFieldClassName(field === null || field === void 0 ? void 0 : field.key, FormType)
+        }));
+      }
+
+      return result;
+    }, []);
+    filtered === null || filtered === void 0 ? void 0 : filtered.map(function (field) {
+      var formField = document.querySelector(".".concat(field === null || field === void 0 ? void 0 : field.className));
+      if (!formField) return null;
+      formField.classList.remove('errorLabelHightlite');
+
+      if (field !== null && field !== void 0 && field.error) {
+        formField.classList.add('errorLabelHightlite');
+      }
+
+      return null;
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    hightliteErrorLabels();
+  }, [form]); //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- Fields Focus Controller ---//--- START ---//
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      isInitFocused = _useState14[0],
+      setIsInitFocused = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(null),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      autoFocusedField = _useState16[0],
+      setAutoFocusedField = _useState16[1];
+
+  var setFirstFieldInitFocused = function setFirstFieldInitFocused() {
+    return setIsInitFocused(true);
+  };
+
+  var resetIsInitFocused = function resetIsInitFocused() {
+    return setIsInitFocused(false);
+  };
+
+  var toggleFieldFocus = function toggleFieldFocus(_ref4) {
+    var key = _ref4.key,
+        _ref4$cb = _ref4.cb,
+        cb = _ref4$cb === void 0 ? function () {} : _ref4$cb,
+        argForm = _ref4.form,
+        field = _ref4.field;
+    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'focus';
+    if (!key) return null;
+    if (!argForm) argForm = form;
+    var formField = field || getFormField(key, argForm);
+
+    if (!formField || !formField.ref) {
+      return false;
+    }
+
+    if (action === 'focus' && FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean(formField === null || formField === void 0 ? void 0 : formField.value)) return null;
+    setTimeout(function () {
+      var _formField$ref$curren, _formField$ref$curren2;
+
+      (_formField$ref$curren = formField.ref.current) === null || _formField$ref$curren === void 0 ? void 0 : (_formField$ref$curren2 = _formField$ref$curren.querySelector((formField === null || formField === void 0 ? void 0 : formField.focusSelector) || 'input')) === null || _formField$ref$curren2 === void 0 ? void 0 : _formField$ref$curren2[action]();
+      cb();
+    }, 50);
+  };
+
+  var setFieldFocus = function setFieldFocus(_ref5) {
+    var key = _ref5.key,
+        _ref5$cb = _ref5.cb,
+        cb = _ref5$cb === void 0 ? function () {} : _ref5$cb,
+        argForm = _ref5.form,
+        field = _ref5.field;
+    return toggleFieldFocus({
+      key: key,
+      cb: cb,
+      form: argForm,
+      field: field
+    }, 'focus');
+  };
+
+  var setFieldBlur = function setFieldBlur(_ref6) {
+    var key = _ref6.key,
+        _ref6$cb = _ref6.cb,
+        cb = _ref6$cb === void 0 ? function () {} : _ref6$cb,
+        argForm = _ref6.form,
+        field = _ref6.field;
+    return toggleFieldFocus({
+      key: key,
+      cb: cb,
+      form: argForm,
+      field: field
+    }, 'blur');
+  };
+
+  var setFirstFieldFocus = function setFirstFieldFocus() {
+    var _field;
+
+    var field = null;
+
+    for (var i = 0; i < renderFormFields.length && !field; ++i) {
+      var key = renderFormFields[i];
+      var tmpField = getFormField(key);
+      if (tmpField && !(tmpField !== null && tmpField !== void 0 && tmpField.disabled)) field = tmpField;
+    }
+
+    if (!field) return false;
+
+    if (FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean((_field = field) === null || _field === void 0 ? void 0 : _field.value)) {
+      setFirstFieldInitFocused();
+      return false;
+    }
+
+    setAutoFocusedField(field.key);
+
+    var callback = function callback() {
+      setFormField({
+        value: field.value
+      }, field.key);
+      setFirstFieldInitFocused();
+    };
+
+    setTimeout(function () {
+      return setFieldFocus({
+        key: field.key,
+        cb: callback,
+        form: form
+      });
+    }, 50);
+  };
+
+  var _useState17 = (0, _react.useState)({}),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      onFieldFocusCallbacks = _useState18[0],
+      setOnFieldFocusCallbacks = _useState18[1];
+
+  var addOnFieldFocusCallback = function addOnFieldFocusCallback(key, cb) {
+    setOnFieldFocusCallbacks(function (state) {
+      var stateCopy = _objectSpread({}, state);
+
+      if (!state[key]) stateCopy[key] = [];
+      stateCopy[key].push(cb);
+      return stateCopy;
+    });
+  };
+
+  var callOnFieldFocusCallbacks = function callOnFieldFocusCallbacks(key) {
+    var _onFieldFocusCallback;
+
+    if (!Array.isArray(onFieldFocusCallbacks[key])) return null;
+    (_onFieldFocusCallback = onFieldFocusCallbacks[key]) === null || _onFieldFocusCallback === void 0 ? void 0 : _onFieldFocusCallback.map(function (cb) {
+      return cb();
+    });
+  };
+
+  var _useState19 = (0, _react.useState)([]),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      focusOnRenderFields = _useState20[0],
+      setFocusOnRenderFields = _useState20[1];
+
+  var addFocusFieldOnRender = function addFocusFieldOnRender(key, cb) {
+    setFocusOnRenderFields(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), [key]);
+    });
+    if (cb) addOnFieldFocusCallback(key, cb);
+  };
+
+  var removeFocusFieldOnRender = function removeFocusFieldOnRender(key) {
+    setFocusOnRenderFields(function (state) {
+      return state.filter(function (field) {
+        return field !== key;
+      });
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    if (FocusControllerProps.setAutoFocus && !isInitFocused && !autoFocusedField) setFirstFieldFocus();
+
+    if (focusOnRenderFields.length) {
+      var _getFormFieldsKeys;
+
+      (_getFormFieldsKeys = getFormFieldsKeys(form)) === null || _getFormFieldsKeys === void 0 ? void 0 : _getFormFieldsKeys.map(function (key) {
+        var _getFormField2, _getFormField2$value;
+
+        if (focusOnRenderFields.includes(key) && ((_getFormField2 = getFormField(key)) === null || _getFormField2 === void 0 ? void 0 : (_getFormField2$value = _getFormField2.value) === null || _getFormField2$value === void 0 ? void 0 : _getFormField2$value.length) === 0) {
+          var cb = function cb() {
+            removeFocusFieldOnRender(key);
+            callOnFieldFocusCallbacks(key);
+          };
+
+          setFieldFocus({
+            key: key,
+            form: form,
+            cb: cb
+          });
+        }
+
+        return null;
+      });
+    }
+  }, [form, focusOnRenderFields, isInitFocused]);
+  (0, _react.useEffect)(function () {
+    setAutoFocusedField(null);
+  }, [isInitFocused]);
+  (0, _react.useEffect)(function () {
+    resetIsInitFocused();
+  }, [FormType]); //Remove Focus From Autocomplete field !!! TODO
+  // useEffect(() => {
+  //   if (!autoFocusedField) return null;
+  //   const field = getFormField(autoFocusedField);
+  //   if (field?.value !== '' && !field?.isValueChangedByUser) {
+  //     setFieldBlur({key: autoFocusedField, form});
+  //   }
+  // }, [autoFocusedField, form]);
+  //--- Fields Focus Controller ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- OnFieldRendered Observer ---//--- START ---//
+
+  var _useState21 = (0, _react.useState)({}),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      onFieldRenderedObservers = _useState22[0],
+      setOnFieldRenderedObservers = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      isFieldObserversReset = _useState24[0],
+      setIsFieldObserversReset = _useState24[1];
+
+  var resetOnFieldRenderObserversWorkedOut = function resetOnFieldRenderObserversWorkedOut() {
+    if (!isFieldObserversReset && renderFormFields.length) {
+      renderFormFields.map(function (key) {
+        setFormField({
+          isOnRenderObserversWorkedOut: false
+        }, key);
+        return key;
+      });
+      setIsFieldObserversReset(true);
+    }
+  };
+
+  var addOnFieldRenderedObserver = function addOnFieldRenderedObserver(key, cb) {
+    var isOnceCallable = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var observerId = null;
+    setOnFieldRenderedObservers(function (state) {
+      //Set Default Value
+      if (!state[key]) state[key] = {};
+      observerId = Object.keys(state[key]).length || 0;
+      state[key][observerId] = {
+        f: cb,
+        isOnceCallable: isOnceCallable
+      };
+      return state;
+    });
+    return observerId;
+  };
+
+  var updateOnFieldRenderedObserver = function updateOnFieldRenderedObserver(key, id, data) {
+    setOnFieldRenderedObservers(function (state) {
+      //Set Default Value
+      if (!state[key]) return state;
+      state[key][id] = _objectSpread(_objectSpread({}, state[key][id]), data);
+      return state;
+    });
+  };
+
+  var removeOnFieldRenderedObserver = function removeOnFieldRenderedObserver(key, id) {
+    setOnFieldRenderedObservers(function (state) {
+      //Set Default Value
+      if (!state[key]) return state;
+      state[key] = Object.keys(state).filter(function (cbId) {
+        return cbId !== id;
+      }).map(function (cbId) {
+        return state[key][cbId];
+      });
+      return state;
+    });
+  };
+
+  var onFieldRenderedObserver = function onFieldRenderedObserver(key, data) {
+    if (!onFieldRenderedObservers[key] || (0, _typeof2.default)(onFieldRenderedObservers[key]) !== 'object') return;
+    var Observers = onFieldRenderedObservers[key];
+    var FilteredObservers = Object.values(Observers).filter(function (observer) {
+      return !(observer !== null && observer !== void 0 && observer.isObserverWorkedOut);
+    });
+    if (FilteredObservers.length === 0) return null;
+    setFormField({
+      isOnRenderObserversWorkedOut: true
+    }, key);
+    FilteredObservers.map(function (_ref7, id) {
+      var f = _ref7.f,
+          isOnceCallable = _ref7.isOnceCallable;
+      f(data);
+      if (isOnceCallable) updateOnFieldRenderedObserver(key, id, {
+        isObserverWorkedOut: true
+      });
+      return null;
+    });
+  };
+
+  var onRenderObserverWorker = function onRenderObserverWorker() {
+    var _getFormFieldsKeys2;
+
+    return (_getFormFieldsKeys2 = getFormFieldsKeys(form)) === null || _getFormFieldsKeys2 === void 0 ? void 0 : _getFormFieldsKeys2.map(function (key) {
+      //OnFieldRendered
+      var fieldData = getFormField(key);
+
+      if (!(fieldData !== null && fieldData !== void 0 && fieldData.isOnRenderObserversWorkedOut)) {
+        onFieldRenderedObserver(key, fieldData);
+        return {
+          key: key,
+          isWorkedOut: true
+        };
+      }
+
+      return {
+        key: key,
+        isWorkedOut: false
+      };
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    resetOnFieldRenderObserversWorkedOut();
+    onRenderObserverWorker();
+  }, [form]);
+  (0, _react.useEffect)(function () {
+    setIsFieldObserversReset(false);
+  }, [FormType]); //--- OnFieldRendered Observer ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //Detect What Changed || TRY TO DO
+  // const compare = async (prev, current) => {
+  //   if (!prev) return current;
+  //   return new Promise((resolve) => {
+  //     Object.keys(current).reduce((result, key, i, arr) => {
+  //       //If PROPERTY is NOT EXISTS BEFORE
+  //       if ([null, undefined].includes(prev[key])) {
+  //         result[key] = current[key];
+  //       }
+  //       //If PROPERTY is AN OBJECT
+  //       else if (typeof current[key] === 'object') {
+  //         //If PROPERTY is EXISTS BEFORE
+  //         const innerCompare = compare(prev[key], current[key]);
+  //         // //If SOMETHING CHANGED
+  //         if (innerCompare?.length) result[key] = innerCompare;
+  //       }
+  //       //If PROPERTY is AN SIMPLE VALUE and PROPERTY CHANGED
+  //       else if (prev[key] !== current[key]) {
+  //         result[key] = current[key];
+  //       }
+  //       if (i === arr.length-1) {
+  //         resolve(result);
+  //       }
+  //       return result;
+  //     }, {});
+  //   });
+  // };
+
+  return {
+    FormDataDrivers: FormDataDrivers,
+    //OnChangeObserver
+    addOnChangeObserver: addOnChangeObserver,
+    removeOnChangeObserver: removeOnChangeObserver,
+    onChangeObservers: onChangeObservers,
+    //OnChangeHandler
+    onFieldChange: onFieldChange,
+    //Form Submit Blocker
+    toggleFormSubmitBlock: toggleFormSubmitBlock,
+    clearFormSubmitBlockers: clearFormSubmitBlockers,
+    isFormSubmitBlocked: Boolean(formSubmitBlockers.length),
+    //Property Observers
+    // addPropertyObserver,
+    //Render Fields
+    renderFormFields: renderFormFields,
+    setRenderFormFields: setRenderFormFields,
+    addRenderFields: addRenderFields,
+    removeRenderFields: removeRenderFields,
+    getFieldClassName: getFieldClassName,
+    //Field Focus Controller
+    isInitFocused: isInitFocused,
+    setFirstFieldInitFocused: setFirstFieldInitFocused,
+    resetIsInitFocused: resetIsInitFocused,
+    setFieldFocus: setFieldFocus,
+    setFieldBlur: setFieldBlur,
+    setFirstFieldFocus: setFirstFieldFocus,
+    autoFocusedField: autoFocusedField,
+    addFocusFieldOnRender: addFocusFieldOnRender,
+    removeFocusFieldOnRender: removeFocusFieldOnRender,
+    //Field Render Controller
+    addOnFieldRenderedObserver: addOnFieldRenderedObserver,
+    removeOnFieldRenderedObserver: removeOnFieldRenderedObserver,
+    onFieldRenderedObservers: onFieldRenderedObservers,
+    setFormField: setFormField,
+    setFormFields: setFormFields,
+    removeAllFormFields: removeAllFormFields,
+    updateFormField: updateFormField,
+    addOnFormRenderObserver: addOnFormRenderObserver,
+    renderFields: function renderFields(_ref8) {
+      var _ref8$form = _ref8.form,
+          argForm = _ref8$form === void 0 ? form : _ref8$form,
+          _ref8$fields = _ref8.fields,
+          argFields = _ref8$fields === void 0 ? renderFormFields : _ref8$fields,
+          _ref8$cols = _ref8.cols,
+          argCols = _ref8$cols === void 0 ? 1 : _ref8$cols,
+          RenderFieldComponent = _ref8.RenderFieldComponent;
+      return (0, _RenderFields.default)({
+        form: argForm,
+        fields: argFields,
+        cols: argCols,
+        RenderFieldComponent: RenderFieldComponent,
+        onFieldChange: onFieldChange,
+        FormDataDriver: getFormDataDriver(FormDataDriverName)
+      });
+    }
+  };
+}