intelicoreact 1.8.10 → 1.8.12

package/dist/Functions/useFormTools/index.jsx

@@ -1,777 +0,0 @@
-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,
-  };
-}