intelicoreact 1.8.8 → 1.8.10

package/dist/Molecular/FormWithDependOn/FormWithDependOn.jsx

@@ -1 +1,161 @@
-function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function t(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){var n;n=r[t],t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n})}return e}function r(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r})(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}),e}import{jsx as n}from"react/jsx-runtime";import o from"classnames";import{useEffect as i,useState as a}from"react";import f from"../../Functions/hooks/useFormFieldsChangesManager";import{clone as l,getIsOnlyAnObject as u}from"../../Functions/utils";import{getDependOnStarter as c}from"./partials/_utils";export default function(s){s.ref;var y,p=s.form,d=s.formId,m=s.setForm,b=s.getActualForm,g=s.onChange,O=s.renderField,h=s.getAnotherActions,v=s.className,j=s.isInitializeByDependOn,F=s.isFormDisabled,A=s.typeOfUse,w=void 0===A?"default":A,P=(y=a(l(p)),function(e){if(Array.isArray(e))return e}(y)||function(e,t){var r,n,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var i=[],a=!0,f=!1;try{for(o=o.call(e);!(a=(r=o.next()).done)&&(i.push(r.value),i.length!==t);a=!0);}catch(e){f=!0,n=e}finally{try{a||null==o.return||o.return()}finally{if(f)throw n}}return i}}(y,1)||function(t,r){if(t){if("string"==typeof t)return e(t,1);var n=Object.prototype.toString.call(t).slice(8,-1);if("Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,r)}}(y,1)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())[0],I="function"==typeof m?m:function(){},S="function"==typeof g?g:function(){},K="function"==typeof b?b:function(){return p},k=f({form:Array.isArray(p)?p:[],setForm:I}).assignChangesToField,C="function"==typeof h?h({setForm:m,assign:k,getActualForm:K}):{},D=function(e,n){return r(t({formId:d,actions:C,isInit:!0},u(n)?n:{}),{onChange:e,setForm:I,assign:k,getActualForm:K,initialForm:P,typeOfUse:w})},x=c({assign:k,getActualForm:K}),E=function(e,n,o,i){var a=u(i)?i:{},f=a.updatedForm,c=void 0===f?null:f,s=a.isMakeChangesAnyway,y=a.isUseActualForm,d=l(void 0!==y&&y?K():Array.isArray(c)?c:p),m=l(d.find(function(e){return e.key===n}));if((m[o||"value"]!==e||void 0!==s&&s)&&(S(e,n,o,r(t({},i),{updatedForm:d})),x({newValue:e,fieldKey:n,propKey:o,field:m,form:d,additional:D(E,i)}),"function"==typeof C.all&&C.all({newValue:e,fieldKey:n,propKey:o,field:m,form:d,additional:D(E,i)}),n in C&&"function"==typeof C[n])){var b=C[n]({newValue:e,fieldKey:n,propKey:o,field:m,form:d,additional:D(E,i)});b&&k(b,n)}};return i(function(){j&&"function"==typeof m&&"function"==typeof g&&p.forEach(function(e){x({newValue:e.value,fieldKey:e.key,field:e,form:p,additional:r(t({},D(E)),{isInitialization:!0,isInit:!1})})})},[j]),n("div",r(t({},d?{id:d}:{}),{className:o("form-with-depend-on",v),children:"function"==typeof O?p.map(function(e){return O(r(t({},D(E)),{field:r(t({},e),{disabled:!!(F||e.disabled)})}))}):null}))}
+import cn from 'classnames';
+
+// global
+import { useEffect, useState } from 'react';
+
+import useFormFieldsChangesManager from '../../Functions/hooks/useFormFieldsChangesManager';
+import { clone, getIsOnlyAnObject } from '../../Functions/utils';
+
+// local functions
+import { getDependOnStarter } from './partials/_utils';
+
+const RC = 'form-with-depend-on';
+
+function FormWithDependOn({ ref, form, formId, setForm, getActualForm: getActualFormOuter, onChange, renderField, getAnotherActions, className, isInitializeByDependOn, isFormDisabled, typeOfUse = 'default' }) {
+  // ? Прихраниваем состояние формы на момент входа
+  const [initialForm] = useState(clone(form));
+
+  const safelySetForm = typeof setForm === 'function' ? setForm : () => {};
+  const safelyOnChange = typeof onChange === 'function' ? onChange : () => {};
+
+  const getActualForm = typeof getActualFormOuter === 'function' ? getActualFormOuter : () => form;
+
+  const { assignChangesToField } = useFormFieldsChangesManager({
+    form: Array.isArray(form) ? form : [],
+    setForm: safelySetForm,
+  });
+
+  const assign = assignChangesToField;
+
+  // ***** handlers *****
+
+  const anotherActions = typeof getAnotherActions === 'function'
+    ? getAnotherActions({ setForm, assign, getActualForm })
+    : {};
+
+  const getMainOfAdditional = (onChange, additionalOfOnChange) => ({
+    formId,
+    actions: anotherActions,
+    isInit: true,
+    ...(getIsOnlyAnObject(additionalOfOnChange) ? additionalOfOnChange : {}),
+    onChange,
+    setForm: safelySetForm,
+    assign,
+    getActualForm,
+    initialForm,
+    typeOfUse,
+  });
+
+  const startDependOn = getDependOnStarter({ assign, getActualForm });
+
+  // ? Местный handleChange добавляет логику dependOn к верхнему onChange,
+  // ? а так же запускает прочие экшены, из объекта методов, возвращаемым getAnotherActions
+  const handleChange = (
+    newValue,
+    fieldKey,
+    propKey,
+    additionalOfOnChange,
+  ) => {
+    const {
+      updatedForm = null,
+      isMakeChangesAnyway = false,
+      isUseActualForm = false,
+    } = getIsOnlyAnObject(additionalOfOnChange) ? additionalOfOnChange : {};
+
+    const currentForm = clone(
+      (() => {
+        if (isUseActualForm) return getActualForm();
+        return Array.isArray(updatedForm) ? updatedForm : form;
+      })(),
+    );
+
+    const currField = clone(currentForm.find(field => field.key === fieldKey));
+
+    // ? Защита от дублирующих вызовов onChange снизу
+    // ? "Если newValue такое же как уже есть и нет флага "применять изменения всегда""
+    // ! (*) - Важно !
+    // ! Отключайте прямую мутацию на уровне проектного FormItem (в каждом филде указать isNotUseInnerHandler: true)
+    // ! т.к. тот хендлер запускатся раньше и сюда филд доходит с измененным значением,
+    // ! а значит не пройдет эту if-ку
+    if (currField[propKey || 'value'] === newValue && !isMakeChangesAnyway) return;
+
+    // ? Сразу же мутируем
+    safelyOnChange(newValue, fieldKey, propKey, { ...additionalOfOnChange, updatedForm: currentForm });
+
+    // ? Механика dependOn (обработка зависимостей)
+    // ? В текущей реализации отделил от экшена all.
+
+    startDependOn({
+      newValue,
+      fieldKey,
+      propKey,
+      field: currField,
+      form: currentForm,
+      additional: getMainOfAdditional(handleChange, additionalOfOnChange),
+    });
+
+    // ? Если в объекте методов возвращаемом getAnotherActions есть метод all, то он запускается отдельно
+    if (typeof anotherActions.all === 'function') {
+      anotherActions.all({
+        newValue,
+        fieldKey,
+        propKey,
+        field: currField,
+        form: currentForm,
+        additional: getMainOfAdditional(handleChange, additionalOfOnChange),
+      });
+    }
+
+    if (fieldKey in anotherActions && typeof anotherActions[fieldKey] === 'function') {
+      const postChanges = anotherActions[fieldKey]({
+        newValue,
+        fieldKey,
+        propKey,
+        field: currField,
+        form: currentForm,
+        additional: getMainOfAdditional(handleChange, additionalOfOnChange),
+      });
+
+      if (postChanges) assign(postChanges, fieldKey);
+    }
+  };
+
+  // ***** useEffects *****
+
+  useEffect(() => {
+    if (isInitializeByDependOn && typeof setForm === 'function' && typeof onChange === 'function') {
+      form.forEach((field) => {
+        startDependOn({
+          newValue: field.value,
+          fieldKey: field.key,
+          field,
+          form,
+          additional: {
+            ...getMainOfAdditional(handleChange),
+            isInitialization: true,
+            isInit: false,
+          },
+        });
+      });
+    }
+  }, [isInitializeByDependOn]);
+
+  // ***** output *****
+  return (
+    <div {...(formId ? { id: formId } : {})} className={cn(RC, className)}>
+      {typeof renderField === 'function'
+        ? form.map(field =>
+            renderField({
+              ...getMainOfAdditional(handleChange),
+              field: {
+                ...field,
+                disabled: Boolean(isFormDisabled || field.disabled),
+              },
+            }),
+          )
+        : null}
+    </div>
+  );
+}
+
+export default FormWithDependOn;