intelicoreact 1.8.2 → 1.8.4

package/dist/Functions/useFormTools/index.jsx

@@ -0,0 +1,777 @@
+import { createRef, useEffect, useState } from 'react';
+
+import ArrayWithObjects from './form-drivers/ArrayWithObjects';
+import ObjectWithIterableObjects from './form-drivers/ObjectWithIterableObjects';
+import ObjectWithNamedKeyObjects from './form-drivers/ObjectWithNamedKeyObjects';
+import General from './functions/General';
+import RenderFields from './functions/RenderFields';
+
+const DefaultFocusControllerProps = {
+  setAutoFocus: true,
+  onlyEmptyFieldAutoFocus: false,
+};
+
+export default function useFormTools({
+  form,
+  setForm,
+  FormType,
+  FormFields,
+  FormDataDriverName = 'ArrayWithObjects'
+    || 'ObjectWithIterableObjects'
+    || 'ObjectWithNamedKeyObjects',
+  FormDataDriver = null,
+  FocusControllerProps = DefaultFocusControllerProps,
+  goToNextFieldOnEnterPressed = true,
+} = {}) {
+  FocusControllerProps = {
+    ...DefaultFocusControllerProps,
+    ...FocusControllerProps,
+  };
+
+  const FormDataDrivers = {
+    ArrayWithObjects: {
+      handlers: ArrayWithObjects,
+      default: true,
+    },
+    ObjectWithIterableObjects: {
+      handlers: ObjectWithIterableObjects,
+    },
+    ObjectWithNamedKeyObjects: {
+      handlers: ObjectWithNamedKeyObjects,
+    },
+  };
+
+  const getFormDataDriver = (name) => {
+    return (
+      FormDataDriver
+      || FormDataDrivers[name]?.handlers
+      || Object.values(FormDataDrivers).find(df => df.default === true)?.handlers
+      || (() => ({}))
+    );
+  };
+  const getFormDataDriverInstance = (name, ...args) => {
+    return getFormDataDriver(name)(...args);
+  };
+
+  const { getFieldClassName, updateFormField } = General();
+
+  const {
+    getFieldData,
+    getFormField,
+    setFormFields,
+    setFormField,
+    getFormFieldsAsArray,
+    getFormFieldsKeys,
+    removeAllFormFields,
+    removeFormField,
+    removeFormFields,
+  } = getFormDataDriverInstance(FormDataDriverName, {
+    form,
+    setForm,
+    FormFields,
+  });
+
+  ///////////////////////////////////////////////////////////////
+  // --- OnChange Observer ---//--- START ---//
+  const [onChangeObservers, setOnChangeObservers] = useState({});
+  const addOnChangeObserver = (key, cb) => {
+    let observerId = null;
+
+    setOnChangeObservers((state) => {
+      // Set Default Value
+      if (!state[key]) state[key] = {};
+
+      observerId = state[key].length;
+
+      state[key][observerId] = cb;
+
+      return state;
+    });
+
+    return observerId;
+  };
+  const removeOnChangeObserver = (key, id) => {
+    setOnChangeObservers((state) => {
+      // Set Default Value
+      if (!state[key]) return state;
+
+      state[key] = Object.keys(state)
+        .filter(cbId => cbId !== id)
+        .map(cbId => state[key][cbId]);
+
+      return state;
+    });
+  };
+  const onChangeObserver = (key, value) => {
+    if (!onChangeObservers[key] || typeof onChangeObservers[key] !== 'object')
+      return;
+
+    const Observers = onChangeObservers[key];
+
+    Object.values(Observers).map((cb) => {
+      cb({ value, form });
+      return null;
+    });
+  };
+  const onFieldChange = (key, value) => {
+    if (value === getFormField(key)?.value) return false;
+
+    onChangeObserver(key, value);
+    setFormField(
+      field => ({
+        ...field,
+        error: '',
+        value,
+      }),
+      key,
+    );
+  };
+  // --- OnChange Observer ---//--- END ---//
+
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  // --- Form Submit Blocker ---//--- START ---//
+  const [formSubmitBlockers, setFormSubmitBlockers] = useState([]);
+  const toggleFormSubmitBlock = (key, value) => {
+    setFormSubmitBlockers(state =>
+      state.includes(key) || !value
+        ? [...state.filter(k => k !== key)]
+        : [...state, key],
+    );
+  };
+  const clearFormSubmitBlockers = () => setFormSubmitBlockers([]);
+  // --- Form Submit Blocker ---//--- END ---//
+
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  // --- Property Observer Blocker ---//--- START ---//
+  // const [propertyObservers, setPropertyObservers] = useState({});
+  // function addPropertyObserver () {
+  // };
+  // --- Property Observer Blocker ---//--- END ---//
+
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  // --- Render Fields Controller ---//--- START ---//
+  const [isFormFieldsAdded, setIsFormFieldsAdded] = useState(false);
+  const [renderFormFields, setRenderFormFieldsState] = useState([]);
+  const 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);
+  };
+  const addRenderFields = (fields) => {
+    setRenderFormFieldsState(state => [...state, ...fields]);
+  };
+  const removeRenderFields = (fields) => {
+    setRenderFormFieldsState(state =>
+      state.filter(field => !fields.includes(field)),
+    );
+  };
+
+  const [isFormRendered, setIsFormRendered] = useState(false);
+  const submitIsFormRendered = () => setIsFormRendered(true);
+  const resetIsFormRendered = () => setIsFormRendered(false);
+
+  const onEnterDown = async (e) => {
+    if (!goToNextFieldOnEnterPressed) return false;
+
+    const focusable = document.querySelectorAll(
+      'a, button, input, [tabindex]:not([tabindex="-1"])',
+    );
+    const currentIndex = await new Promise((resolve) => {
+      focusable.forEach((node, i) => {
+        if (node === e.target) resolve(i);
+      });
+    });
+
+    if (!currentIndex) return false;
+
+    const nextIndex = currentIndex + 1;
+
+    if (nextIndex >= focusable.length) return false;
+
+    const nextItem = focusable[nextIndex];
+
+    nextItem.focus();
+  };
+
+  const onKeyDown = (...args) => {
+    const event = args.reduce((e, item) => {
+      if (item?.nativeEvent instanceof KeyboardEvent) return item;
+      return e;
+    }, null);
+
+    if (!event) return false;
+
+    const { keyCode } = event;
+
+    switch (keyCode) {
+      // OnEnterDown
+      case 13:
+        onEnterDown(event);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  // On Type Change
+  useEffect(() => {
+    resetIsFormRendered();
+  }, [FormType]);
+
+  // On Render Fields Change
+  useEffect(() => {
+    if (isFormFieldsAdded) resetIsFormRendered(false);
+
+    // Add Form Fields
+    if (renderFormFields.length !== 0) {
+      setFormFields((fields) => {
+        return renderFormFields.reduce((result, key) => {
+          const fieldData = getFieldData(key);
+          const field = getFormField(key) ? getFormField(key) : fieldData;
+
+          if (
+            !field?.className
+            || field?.className?.indexOf(getFieldClassName(key, FormType)) === -1
+          ) {
+            field.className = `${field?.className} ${getFieldClassName(key, FormType)}`;
+          }
+
+          if (typeof fieldData?.label === 'object') {
+            field.label = fieldData.label[FormType] || fieldData.label.default;
+          }
+
+          field.ref = createRef();
+          field.wrapperRef = createRef();
+
+          field.isValueChangedByUser = false;
+
+          if (goToNextFieldOnEnterPressed) {
+            const onKeyDownProp = field.onKeyDown || (() => {});
+            field.onKeyDown = (...args) => {
+              onKeyDown(...args);
+              onKeyDownProp(...args);
+            };
+          }
+
+          // Is Field Value Changed By USER
+          // eslint-disable-next-line no-use-before-define
+          addOnFieldRenderedObserver(
+            key,
+            () => {
+              const element = getFormField(key)?.ref?.current?.querySelector(
+                field?.focusSelector || 'input',
+              );
+              const handler = () =>
+                setFormField({ isValueChangedByUser: true }, key);
+
+              element?.addEventListener('paste', handler, { once: true });
+              element?.addEventListener('keypress', handler, { once: true });
+            },
+            true,
+          );
+
+          return updateFormField(result, field, key);
+        }, fields);
+      });
+    }
+  }, [renderFormFields]);
+
+  const [onFormRenderObservers, setOnFormRenderObservers] = useState([]);
+  const addOnFormRenderObserver = (cb, { once = false } = {}) => {
+    setOnFormRenderObservers(state => [
+      ...state,
+      { cb, once, isWorkedOut: false },
+    ]);
+  };
+
+  const updateOnFormRenderObserver = (key, data) => {
+    setOnFormRenderObservers((state) => {
+      const copy = [...state];
+      copy[key] = { ...state[key], ...data };
+
+      return copy;
+    });
+  };
+  const removeOnFormRenderObserver = (key) => {
+    setOnFormRenderObservers(state =>
+      state.slice().filter((v, i) => i !== key),
+    );
+  };
+  const onFormRenderWorker = () => {
+    onFormRenderObservers.map(
+      ({ once, isWorkedOut, cb = () => {} } = {}, key) => {
+        if (once && isWorkedOut) return null;
+
+        cb(form);
+        if (once) removeOnFormRenderObserver(key);
+        else updateOnFormRenderObserver(key, { isWorkedOut: true });
+        return null;
+      },
+    );
+  };
+
+  // On Form Rendered
+  useEffect(() => {
+    if (!isFormRendered && onFormRenderObservers.length) {
+      const formFieldsKeys = getFormFieldsKeys(form);
+      const isAllFieldsRendered = renderFormFields.reduce((result, key) => {
+        if (!formFieldsKeys.includes(key)) result = false;
+
+        return result;
+      }, true);
+
+      if (isAllFieldsRendered) {
+        submitIsFormRendered(true);
+        onFormRenderWorker();
+      }
+    }
+  }, [form, renderFormFields, onFormRenderObservers]);
+  // --- Render Fields Controller ---//--- END ---//
+
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  // --- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- START ---//
+  const hightliteErrorLabels = () => {
+    const fields = getFormFieldsAsArray();
+
+    const filtered = fields?.reduce((result, field) => {
+      if (field?.errorLabelHightlite) {
+        result.push({
+          ...field,
+          className: getFieldClassName(field?.key, FormType),
+        });
+      }
+
+      return result;
+    }, []);
+
+    filtered?.map((field) => {
+      const formField = document.querySelector(`.${field?.className}`);
+
+      if (!formField) return null;
+
+      formField.classList.remove('errorLabelHightlite');
+
+      if (field?.error) {
+        formField.classList.add('errorLabelHightlite');
+      }
+
+      return null;
+    });
+  };
+  useEffect(() => {
+    hightliteErrorLabels();
+  }, [form]);
+  // --- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- END ---//
+
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  // --- Fields Focus Controller ---//--- START ---//
+  const [isInitFocused, setIsInitFocused] = useState(false);
+  const [autoFocusedField, setAutoFocusedField] = useState(null);
+
+  const setFirstFieldInitFocused = () => setIsInitFocused(true);
+  const resetIsInitFocused = () => setIsInitFocused(false);
+
+  const toggleFieldFocus = (
+    { key, cb = () => {}, form: argForm, field },
+    action = 'focus',
+  ) => {
+    if (!key && !field) return null;
+
+    if (!argForm) argForm = form;
+
+    const formField = field || getFormField(key, argForm);
+
+    if (!formField || !formField.ref) {
+      return false;
+    }
+
+    if (
+      action === 'focus'
+      && FocusControllerProps.onlyEmptyFieldAutoFocus
+      && Boolean(formField?.value)
+    ) {
+      return null;
+    }
+
+    setTimeout(() => {
+      formField.ref.current
+        ?.querySelector(formField?.focusSelector || 'input')
+        ?.[action]();
+      cb();
+    }, 50);
+  };
+
+  const setFieldFocus = ({ key, cb = () => {}, form: argForm, field }) =>
+    toggleFieldFocus({ key, cb, form: argForm, field }, 'focus');
+  const setFieldBlur = ({ key, cb = () => {}, form: argForm, field }) =>
+    toggleFieldFocus({ key, cb, form: argForm, field }, 'blur');
+
+  const setFirstFieldFocus = () => {
+    let field = null;
+
+    for (let i = 0; i < renderFormFields.length && !field; ++i) {
+      const key = renderFormFields[i];
+      const tmpField = getFormField(key);
+      if (tmpField && !tmpField?.disabled) field = tmpField;
+    }
+
+    if (!field) return false;
+
+    if (FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean(field?.value)) {
+      setFirstFieldInitFocused();
+      return false;
+    }
+
+    setAutoFocusedField(field.key);
+
+    const callback = () => {
+      setFormField({ value: field.value }, field.key);
+      setFirstFieldInitFocused();
+    };
+
+    setTimeout(() => setFieldFocus({ key: field.key, cb: callback, form }), 50);
+  };
+
+  const [onFieldFocusCallbacks, setOnFieldFocusCallbacks] = useState({});
+  const addOnFieldFocusCallback = (key, cb) => {
+    setOnFieldFocusCallbacks((state) => {
+      const stateCopy = { ...state };
+
+      if (!state[key]) stateCopy[key] = [];
+
+      stateCopy[key].push(cb);
+
+      return stateCopy;
+    });
+  };
+  const callOnFieldFocusCallbacks = (key) => {
+    if (!Array.isArray(onFieldFocusCallbacks[key])) return null;
+
+    onFieldFocusCallbacks[key]?.map(cb => cb());
+  };
+
+  const [focusOnRenderFields, setFocusOnRenderFields] = useState([]);
+  const addFocusFieldOnRender = (key, cb) => {
+    setFocusOnRenderFields(state => [...state, key]);
+
+    if (cb) addOnFieldFocusCallback(key, cb);
+  };
+  const removeFocusFieldOnRender = (key) => {
+    setFocusOnRenderFields(state => state.filter(field => field !== key));
+  };
+
+  useEffect(() => {
+    if (
+      FocusControllerProps.setAutoFocus
+      && !isInitFocused
+      && !autoFocusedField
+      && isFormRendered
+    ) {
+      setFirstFieldFocus();
+    }
+
+    if (focusOnRenderFields.length) {
+      getFormFieldsKeys(form)?.map((key) => {
+        if (
+          focusOnRenderFields.includes(key)
+          && getFormField(key)?.value?.length === 0
+        ) {
+          const cb = () => {
+            removeFocusFieldOnRender(key);
+            callOnFieldFocusCallbacks(key);
+          };
+
+          setFieldFocus({ key, form, cb });
+        }
+        return null;
+      });
+    }
+  }, [form, focusOnRenderFields, isInitFocused, isFormRendered]);
+
+  useEffect(() => {
+    setAutoFocusedField(null);
+  }, [isInitFocused]);
+
+  useEffect(() => {
+    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 ---//
+  const [onFieldRenderedObservers, setOnFieldRenderedObservers] = useState({});
+  const [isFieldObserversReset, setIsFieldObserversReset] = useState(false);
+
+  const resetOnFieldRenderObserversWorkedOut = () => {
+    if (!isFieldObserversReset && renderFormFields.length) {
+      renderFormFields.map((key) => {
+        setFormField({ isOnRenderObserversWorkedOut: false }, key);
+        return key;
+      });
+      setIsFieldObserversReset(true);
+    }
+  };
+  const addOnFieldRenderedObserver = (key, cb, isOnceCallable = true) => {
+    let observerId = null;
+
+    setOnFieldRenderedObservers((state) => {
+      // Set Default Value
+      if (!state[key]) state[key] = {};
+
+      observerId = Object.keys(state[key]).length || 0;
+
+      state[key][observerId] = {
+        f: cb,
+        isOnceCallable,
+      };
+
+      return state;
+    });
+
+    return observerId;
+  };
+  const updateOnFieldRenderedObserver = (key, id, data) => {
+    setOnFieldRenderedObservers((state) => {
+      // Set Default Value
+      if (!state[key]) return state;
+
+      state[key][id] = {
+        ...state[key][id],
+        ...data,
+      };
+
+      return state;
+    });
+  };
+  const removeOnFieldRenderedObserver = (key, id) => {
+    setOnFieldRenderedObservers((state) => {
+      // Set Default Value
+      if (!state[key]) return state;
+
+      state[key] = Object.keys(state)
+        .filter(cbId => cbId !== id)
+        .map(cbId => state[key][cbId]);
+
+      return state;
+    });
+  };
+  const onFieldRenderedObserver = (key, data) => {
+    if (
+      !onFieldRenderedObservers[key]
+      || typeof onFieldRenderedObservers[key] !== 'object'
+    ) {
+      return;
+    }
+
+    const Observers = onFieldRenderedObservers[key];
+    const FilteredObservers = Object.values(Observers).filter(
+      observer => !observer?.isObserverWorkedOut,
+    );
+
+    if (FilteredObservers.length === 0) return null;
+
+    setFormField({ isOnRenderObserversWorkedOut: true }, key);
+
+    FilteredObservers.map(({ f, isOnceCallable }, id) => {
+      f(data);
+      if (isOnceCallable)
+        updateOnFieldRenderedObserver(key, id, { isObserverWorkedOut: true });
+      return null;
+    });
+  };
+  const onRenderObserverWorker = () => {
+    return getFormFieldsKeys(form)?.map((key) => {
+      // OnFieldRendered
+      const fieldData = getFormField(key);
+      if (!fieldData?.isOnRenderObserversWorkedOut) {
+        onFieldRenderedObserver(key, fieldData);
+        return { key, isWorkedOut: true };
+      }
+
+      return { key, isWorkedOut: false };
+    });
+  };
+
+  useEffect(() => {
+    resetOnFieldRenderObserversWorkedOut();
+    onRenderObserverWorker();
+  }, [form]);
+
+  useEffect(() => {
+    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;
+  //     }, {});
+  //   });
+  // };
+
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  // --- WindowScrollController ---//--- START ---//
+  const scrollToField = ({ key = null, field = null, form: argForm }) => {
+    if (!key && !field) return false;
+    if (!argForm) argForm = form;
+
+    if (!field) field = getFormField(key, argForm);
+
+    const wrapperRef = field?.wrapperRef || field?.ref;
+
+    const { top: topOffset } = wrapperRef?.current?.getBoundingClientRect();
+    const scrollTop
+      = Math.abs(Math.abs(topOffset) - Math.abs(window.scrollY)) - 16;
+    window.scrollTo({ top: scrollTop });
+  };
+
+  // --- WindowScrollController ---//--- END ---//
+
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  const addErrorsToForm = (errors, argForm = form) => {
+    if (!argForm) argForm = form;
+
+    setFormFields((fields) => {
+      return errors.reduce(
+        (fields, { message: error, propertyPath: errKey }) => {
+          return updateFormField(fields, { error }, errKey);
+        },
+        fields,
+      );
+    });
+  };
+
+  return {
+    FormDataDrivers,
+
+    // OnChangeObserver
+    addOnChangeObserver,
+    removeOnChangeObserver,
+    onChangeObservers,
+
+    // OnChangeHandler
+    onFieldChange,
+
+    // Form Submit Blocker
+    toggleFormSubmitBlock,
+    clearFormSubmitBlockers,
+    isFormSubmitBlocked: Boolean(formSubmitBlockers.length),
+
+    // Property Observers
+    // addPropertyObserver,
+
+    // Render Fields
+    renderFormFields,
+    setRenderFormFields,
+    addRenderFields,
+    removeRenderFields,
+
+    getFieldClassName,
+
+    // Field Focus Controller
+    isInitFocused,
+    setFirstFieldInitFocused,
+    resetIsInitFocused,
+    setFieldFocus,
+    setFieldBlur,
+    setFirstFieldFocus,
+    autoFocusedField,
+
+    addFocusFieldOnRender,
+    removeFocusFieldOnRender,
+
+    // Field Render Controller
+    addOnFieldRenderedObserver,
+    removeOnFieldRenderedObserver,
+    onFieldRenderedObservers,
+
+    updateFormField,
+    addOnFormRenderObserver,
+    submitIsFormRendered,
+    resetIsFormRendered,
+    renderFields: ({
+      form: argForm = form,
+      fields: argFields = renderFormFields,
+      cols: argCols = 1,
+      RenderFieldComponent,
+    }) =>
+      RenderFields({
+        form: argForm,
+        fields: argFields,
+        cols: argCols,
+        RenderFieldComponent,
+        onFieldChange,
+        FormDataDriver: getFormDataDriver(FormDataDriverName),
+      }),
+
+    scrollToField,
+
+    getFieldData,
+    getFormField,
+    setFormFields,
+    setFormField: (data, key) => setFormField(data, key),
+    getFormFieldsAsArray,
+    getFormFieldsKeys,
+    removeAllFormFields,
+    removeFormField,
+    removeFormFields,
+    addErrorsToForm,
+  };
+}