intelicoreact 0.1.16 → 0.1.17

package/dist/Functions/useFormTools.js

@@ -0,0 +1,429 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+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; }
+
+function useFormTools(_ref) {
+  var form = _ref.form,
+      setForm = _ref.setForm,
+      FormType = _ref.FormType,
+      FormFields = _ref.FormFields;
+
+  ///////////////////////////////////////////////////////////////
+  //--- 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) {
+    var _form$fields$key;
+
+    if (value === (form === null || form === void 0 ? void 0 : (_form$fields$key = form.fields[key]) === null || _form$fields$key === void 0 ? void 0 : _form$fields$key.value)) return false;
+    onChangeObserver(key, value);
+    setForm(function (form) {
+      return _objectSpread(_objectSpread({}, form), {}, {
+        fields: _objectSpread(_objectSpread({}, form.fields), {}, (0, _defineProperty2.default)({}, key, _objectSpread(_objectSpread({}, form.fields[key]), {}, {
+          error: '',
+          value: value
+        })))
+      });
+    });
+  }; //--- 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)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      renderFormFields = _useState6[0],
+      setRenderFormFields = _useState6[1];
+
+  var addRenderFields = function addRenderFields(fields) {
+    setForm(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        fields: _objectSpread(_objectSpread({}, state.fields), fields.reduce(function (result, fieldKey) {
+          result[fieldKey] = FormFields[fieldKey];
+          return result;
+        }, {}))
+      });
+    });
+    setRenderFormFields(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), (0, _toConsumableArray2.default)(fields));
+    });
+  };
+
+  var removeRenderFields = function removeRenderFields(fields) {
+    setRenderFormFields(function (state) {
+      return state.filter(function (field) {
+        return !fields.includes(field);
+      });
+    });
+  }; //On Render Fields Change
+
+
+  (0, _react.useEffect)(function () {
+    //Add Form Fields
+    setForm(function (state) {
+      var fields = _objectSpread({}, state.fields);
+
+      renderFormFields.forEach(function (key) {
+        var _FormFields$key2;
+
+        if (!fields[key]) {
+          var _fields$key$className;
+
+          fields[key] = FormFields[key]; // eslint-disable-next-line no-use-before-define
+
+          if (!fields[key].className || ((_fields$key$className = fields[key].className) === null || _fields$key$className === void 0 ? void 0 : _fields$key$className.indexOf(getFieldClassName(key, FormType))) === -1) {
+            var _FormFields$key;
+
+            fields[key].className = "".concat((_FormFields$key = FormFields[key]) === null || _FormFields$key === void 0 ? void 0 : _FormFields$key.className, " ").concat(getFieldClassName(key, FormType));
+          }
+        }
+
+        if ((0, _typeof2.default)((_FormFields$key2 = FormFields[key]) === null || _FormFields$key2 === void 0 ? void 0 : _FormFields$key2.label) === 'object') {
+          fields[key].label = FormFields[key].label[FormType] || FormFields[key].label.default;
+        } // (node, key) => { refs.current[key] = node); }
+
+
+        fields[key].ref = /*#__PURE__*/(0, _react.createRef)();
+      });
+      return _objectSpread(_objectSpread({}, state), {}, {
+        fields: fields
+      });
+    });
+  }, [renderFormFields]); //--- Render Fields Controller ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- START ---//
+
+  var hightliteErrorLabels = function hightliteErrorLabels() {
+    var filtered = Object.keys(form.fields).reduce(function (result, field) {
+      var _form$fields$field;
+
+      if ((_form$fields$field = form.fields[field]) !== null && _form$fields$field !== void 0 && _form$fields$field.errorLabelHightlite) {
+        // eslint-disable-next-line no-use-before-define
+        result.push(_objectSpread(_objectSpread({}, form.fields[field]), {}, {
+          className: getFieldClassName(field, FormType)
+        }));
+      }
+
+      return result;
+    }, []);
+    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 _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isInitFocused = _useState8[0],
+      setIsInitFocused = _useState8[1];
+
+  var initFocused = function initFocused() {
+    return setIsInitFocused(true);
+  };
+
+  var resetIsInitFocused = function resetIsInitFocused() {
+    return setIsInitFocused(false);
+  };
+
+  var setFieldFocus = function setFieldFocus(_ref2) {
+    var key = _ref2.key,
+        _ref2$cb = _ref2.cb,
+        cb = _ref2$cb === void 0 ? function () {} : _ref2$cb,
+        argForm = _ref2.form;
+    if (!key) return null;
+    if (!argForm) argForm = form;
+    var formField = argForm.fields[key];
+
+    if (!formField || !formField.ref) {
+      return false;
+    }
+
+    setTimeout(function () {
+      formField.ref.current.querySelector((formField === null || formField === void 0 ? void 0 : formField.focusSelector) || 'input').focus();
+      cb();
+    }, 1);
+  };
+
+  var setFirstFieldFocus = function setFirstFieldFocus() {
+    var _renderFormFields = (0, _slicedToArray2.default)(renderFormFields, 1),
+        firstField = _renderFormFields[0];
+
+    setFieldFocus({
+      key: firstField,
+      cb: initFocused,
+      form: form
+    });
+  };
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      focusOnRenderFields = _useState10[0],
+      setFocusOnRenderFields = _useState10[1];
+
+  var addFocusFieldOnRender = function addFocusFieldOnRender(key) {
+    setFocusOnRenderFields(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), [key]);
+    });
+  };
+
+  var removeFocusFieldOnRender = function removeFocusFieldOnRender(key) {
+    setFocusOnRenderFields(function (state) {
+      return state.filter(function (field) {
+        return field !== key;
+      });
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    Object.keys(form === null || form === void 0 ? void 0 : form.fields).map(function (field) {
+      if (focusOnRenderFields.includes(field)) {
+        setFieldFocus({
+          key: field,
+          form: form,
+          cb: function cb() {
+            return removeFocusFieldOnRender(field);
+          }
+        });
+      }
+
+      return null;
+    });
+  }, [form.fields]); //--- Fields Focus Controller ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- OnFieldRendered Observer ---//--- START ---//
+
+  var _useState11 = (0, _react.useState)({}),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      onFieldRenderedObservers = _useState12[0],
+      setOnFieldRenderedObservers = _useState12[1];
+
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      workedOutFieldRenderedObservers = _useState14[0],
+      setWorkedOutFieldRenderedObservers = _useState14[1];
+
+  var addWorkedOutField = function addWorkedOutField(key) {
+    return setWorkedOutFieldRenderedObservers(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), [key]);
+    });
+  };
+
+  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 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) {
+    if (!onFieldRenderedObservers[key] || (0, _typeof2.default)(onFieldRenderedObservers[key]) !== 'object') return;
+    var Observers = onFieldRenderedObservers[key];
+    Object.values(Observers).map(function (_ref3) {
+      var f = _ref3.f,
+          isOnceCallable = _ref3.isOnceCallable;
+      f();
+      if (isOnceCallable) addWorkedOutField(key);
+      return null;
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    Object.keys(form.fields).map(function (key) {
+      //OnFieldRendered
+      if (!workedOutFieldRenderedObservers.includes(key)) onFieldRenderedObserver(key);
+      return null;
+    });
+  }, [form.fields]); //--- OnFieldRendered Observer ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  var getFieldClassName = function getFieldClassName(key, type) {
+    return "form-".concat(type, "_field-").concat(key);
+  }; //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 {
+    //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,
+    initFocused: initFocused,
+    resetIsInitFocused: resetIsInitFocused,
+    setFieldFocus: setFieldFocus,
+    setFirstFieldFocus: setFirstFieldFocus,
+    addFocusFieldOnRender: addFocusFieldOnRender,
+    removeFocusFieldOnRender: removeFocusFieldOnRender,
+    //Field Render Controller
+    addOnFieldRenderedObserver: addOnFieldRenderedObserver,
+    removeOnFieldRenderedObserver: removeOnFieldRenderedObserver,
+    onFieldRenderedObservers: onFieldRenderedObservers
+  };
+}

package/dist/Functions/useLocationParams.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLocationParams;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+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; }
+
+function useLocationParams() {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      params = _useState2[0],
+      setParams = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setParams(function (state) {
+      var arr = window.location.search.replace('?', '').split('&');
+      return _objectSpread(_objectSpread({}, state), arr.reduce(function (obj, item) {
+        var keyVal = item.split('=');
+        var key = keyVal[0];
+        var value = keyVal[1];
+        return _objectSpread(_objectSpread({}, obj), {}, (0, _defineProperty2.default)({}, key, value));
+      }, {}));
+    });
+  }, [window.location.search]);
+  return params;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.16",
-  "description": "add postfix in dropdown",
+  "version": "0.1.17",
+  "description": "add useFormTools hook",
   "main": "dist/index.js",
   "files": ["dist/*", "node_modules/anme/*", "node_modules/moment/*", "node_modules/moment-timezone/*"],
   "scripts": {