intelicoreact 1.6.19 → 1.6.20

package/dist/Atomic/FormElements/FileLoader/partial/LoadedContent.js

@@ -1 +1,67 @@
-function e(e,t,n,r,o,a,c){try{var i=e[a](c),l=i.value}catch(e){n(e);return}i.done?t(l):Promise.resolve(l).then(r,o)}function t(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function n(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),o.forEach(function(n){t(e,n,r[n])})}return e}function r(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}import{jsx as o,jsxs as a,Fragment as c}from"react/jsx-runtime";import{useMemo as i}from"react";import l from"classnames";import{downloadFile as u}from"../../../../Functions/utils";import"../FileLoader.scss";export default function(s){var f,p,b=s.RC,y=s.value,m=s.onDelete,d=s.icon,h=s.isIconAfter,v=s.deleteIcon,O=s.isUseLinkTitle,g=s.isLinkTypeDownload,w={download:(f=function(e){return function(e,t){var n,r,o,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},c=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return c.next=i(0),c.throw=i(1),c.return=i(2),"function"==typeof Symbol&&(c[Symbol.iterator]=function(){return this}),c;function i(i){return function(l){var u=[i,l];if(n)throw TypeError("Generator is already executing.");for(;c&&(c=0,u[0]&&(a=0)),a;)try{if(n=1,r&&(o=2&u[0]?r.return:u[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,u[1])).done)return o;switch(r=0,o&&(u=[2&u[0],o.value]),u[0]){case 0:case 1:o=u;break;case 4:return a.label++,{value:u[1],done:!1};case 5:a.label++,r=u[1],u=[0];continue;case 7:u=a.ops.pop(),a.trys.pop();continue;default:if(!(o=(o=a.trys).length>0&&o[o.length-1])&&(6===u[0]||2===u[0])){a=0;continue}if(3===u[0]&&(!o||u[1]>o[0]&&u[1]<o[3])){a.label=u[1];break}if(6===u[0]&&a.label<o[1]){a.label=o[1],o=u;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(u);break}o[2]&&a.ops.pop(),a.trys.pop();continue}u=t.call(e,a)}catch(e){u=[6,e],r=0}finally{n=o=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}}}(this,function(t){return e.stopPropagation(),e.preventDefault(),u({url:("SPAN"===e.target.tagName||"svg"===e.target.tagName?e.target.parentNode:e.target).href,name:y.name}),[2]})},p=function(){var t=this,n=arguments;return new Promise(function(r,o){var a=f.apply(t,n);function c(t){e(a,r,o,c,i,"next",t)}function i(t){e(a,r,o,c,i,"throw",t)}c(void 0)})},function(e){return p.apply(this,arguments)})},j=i(function(){return r(n({},O?{title:g?"Download ".concat(y.name):y.path}:{},g?{onClick:w.download}:{target:"_blank"}),{key:"LoadedContent-isNotUseLinkTitle-".concat(O,"-isLinkTypeDownload-").concat(g)})},[O,g]);return a(c,{children:[a("a",r(n({},j),{href:y.path,rel:"noreferrer",className:l("".concat(b,"__value-link"),t({},"".concat(b,"__value-link_icon-after"),h)),children:[!h&&d,o("span",{className:l("".concat(b,"__value-name")),children:y.name}),h&&d]})),o("span",{className:l("".concat(b,"__delete-value-button")),onClick:m,children:v||"X"})]})}
+import React, { useMemo } from "react";
+
+import cn from "classnames";
+
+import { downloadFile } from "../../../../Functions/utils";
+
+import "../FileLoader.scss";
+
+const LoadedContent = (props) => {
+  const {
+    RC,
+    value,
+    onDelete,
+    icon,
+    isIconAfter,
+    deleteIcon,
+    isUseLinkTitle,
+    isLinkTypeDownload,
+  } = props;
+
+  const handle = {
+    download: async (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const target =
+        e.target.tagName === "SPAN" || e.target.tagName === "svg"
+          ? e.target.parentNode
+          : e.target;
+      downloadFile({ url: target.href, name: value.name });
+    },
+  };
+
+  const additionalProps = useMemo(
+    () => ({
+      ...(isUseLinkTitle
+        ? { title: isLinkTypeDownload ? `Download ${value.name}` : value.path }
+        : {}),
+      ...(isLinkTypeDownload
+        ? { onClick: handle.download }
+        : { target: "_blank" }),
+      key: `LoadedContent-isNotUseLinkTitle-${isUseLinkTitle}-isLinkTypeDownload-${isLinkTypeDownload}`,
+    }),
+    [isUseLinkTitle, isLinkTypeDownload],
+  );
+
+  return (
+    <>
+      <a
+        {...additionalProps}
+        href={value.path}
+        rel="noreferrer"
+        className={cn(`${RC}__value-link`, {
+          [`${RC}__value-link_icon-after`]: isIconAfter,
+        })}
+      >
+        {!isIconAfter && icon}
+        <span className={cn(`${RC}__value-name`)}>{value.name}</span>
+        {isIconAfter && icon}
+      </a>
+      <span className={cn(`${RC}__delete-value-button`)} onClick={onDelete}>
+        {deleteIcon || "X"}
+      </span>
+    </>
+  );
+};
+
+export default LoadedContent;

package/dist/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.js

@@ -1 +1,247 @@
-function e(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=Array(r);t<r;t++)n[t]=e[t];return n}function r(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.forEach(function(r){var n;n=t[r],r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n})}return e}function t(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):(function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t})(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}),e}function n(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t,n,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var i=[],c=!0,a=!1;try{for(o=o.call(e);!(c=(t=o.next()).done)&&(i.push(t.value),!r||i.length!==r);c=!0);}catch(e){a=!0,n=e}finally{try{c||null==o.return||o.return()}finally{if(a)throw n}}return i}}(e,r)||i(e,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(r){return function(r){if(Array.isArray(r))return e(r)}(r)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(r)||i(r)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(r,t){if(r){if("string"==typeof r)return e(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.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(r,t)}}import{jsx as c,jsxs as a}from"react/jsx-runtime";import{useEffect as l,useMemo as u,useState as s}from"react";import d from"classnames";import{clone as f,compare as m,getBase64 as p,uuid as y}from"../../../Functions/utils";import b from"../../UI/AccordionText/AccordionText";import v from"../FileLoaderLocal/FileLoaderLocal";import"./FileLoaderDescription.scss";var h="file-loader-description",g="uploadTrigger",O=".jpg, .jpeg, .png, .pdf, .JPG, .JPEG, .PNG, .PDF",j={id:g,isRequired:!0,value:"",base64:"",maxItemSizeBytes:0xa00000,error:"",accept:O},P=function(e){return r({value:"",base64:"",maxItemSizeBytes:0xa00000,error:"",isRequired:!1,accept:O},e)},_=function(e,r){if(!Array.isArray(e))return[];var t=f(e);return"number"==typeof r&&t.length>r&&(t=t.slice(0,r)),t.map(P)},x=function(e,n,i){var c=i||{},a=c.error,l=c.outerError;return"number"==typeof n&&e.length<n?o(e).concat([t(r({},f(j)),{error:void 0===a?"":a,outerError:void 0===l?"":l})]):e};export default function(e){var i,O,N=e.id,S=e.testId,w=e.fieldKey,A=e.files,I=e.onChange,E=e.className,F=e.filesDescription,D=void 0===F?"Documents must be less than 10MB and must be in PDF, JPG, JPEG or PNG format.":F,T=e.documentName,C=void 0===T?"Document name":T,L=e.accordionTitle,G=e.accordionListContent,B=e.maxFilesCount,z=void 0===B?10:B,J=e.isWithoutAccordion,k=e.error;!function(e,r){if(null!=e){var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],!(r.indexOf(t)>=0)&&Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}}(e,["id","testId","fieldKey","files","onChange","className","filesDescription","documentName","accordionTitle","accordionListContent","maxFilesCount","isWithoutAccordion","error"]);var q="".concat(N||(void 0===S?"file-loader-description":S)||w||"component-".concat(null==y?void 0:y())),R=u(function(){return _(A,z)},[A,z]),U=n(s(R.length?x(R,z):[f(j)]),2),K=U[0],M=U[1],W=function(e,r){for(var t=r,o=n(r.split(/(?=\.[^.]+$)/),2),i=o[0],c=o[1],a=1;e.some(function(e){return e.value===t});)t="".concat(i,"(").concat(a,")").concat(c),a+=1;return t},$={applyFields:function(e){M(x(e,z)),I(e)},change:function(e){var n=e.name,i=e.id,c=e.error,a=void 0===c?"":c,l=e.file,u=f(K).filter(function(e){return e.value&&e.base64}).map(function(e){return t(r({},e),{error:""})}),s=u.find(function(e){return i===e.id});if(l)if(a)s&&(u=u.map(function(e){return i.includes(e.id)?t(r({},e),{error:a}):e})),M(x(u,z,{error:s?null:a}));else{var d=W(u,n),m=null==y?void 0:y();p(l).then(function(e){var r=P({id:m,value:d,base64:e,error:""});u=s?u.map(function(e){return e.id===s.id?r:e}):o(u).concat([r]),$.applyFields(u)})}else $.applyFields(u.filter(function(e){return e.id!==(null==s?void 0:s.id)}))}};return l(function(){M(x(K.filter(function(e){return e.id!==g}),z,{outerError:k}))},[k]),l(function(){m(R,f(K).filter(function(e){return e.id!==g}))||M(x(R,z,{outerError:k}))},[A,z]),a("div",{id:q,"data-testid":h,className:d(h,E),role:"combobox",children:[!!C&&c("span",{title:C,className:"".concat(h,"__title"),children:C}),!J&&c(b,{isForcedAlwaysAccordion:!0,className:d("".concat(h,"__accordion")),text:(i=void 0===L?"There is a list of documents that we accept:":L,O=void 0===G?[]:G,a("div",{"data-testid":"accordion",children:[c("div",{className:"".concat(h,"__accordion-title"),children:i}),c("div",{className:"".concat(h,"__list"),children:null==O?void 0:O.map(function(e){return a("div",{className:"".concat(h,"__list-row"),children:[c("div",{className:"".concat(h,"__list-bullet")}),a("div",{children:[c("div",{className:"".concat(h,"__list-title"),children:e.title}),c("div",{className:"".concat(h,"__list-descr"),children:e.description})]})]},null==e?void 0:e.title)})})]}))}),!!D&&c("span",{className:"".concat(h,"__file-descr"),title:D,children:D}),K.map(function(e,r){return c(v,{className:"".concat(h,"__list-item"),fieldId:e.id,id:"loader-".concat(q,"-field-").concat(e.id),error:e.error,outerError:e.outerError,label:"Upload document",accept:e.accept,value:e.value,maxItemSizeBytes:e.maxItemSizeBytes,onChange:function(e){return $.change(e)},isRequired:K.length<=1,isNoTrashIcon:!1},"".concat(e.id,"-").concat(r))})]})}
+import React, { useEffect, useMemo, useState } from "react";
+
+import cn from "classnames";
+
+import { clone, compare, getBase64, uuid } from "../../../Functions/utils";
+import AccordionText from "../../UI/AccordionText/AccordionText";
+import FileLoaderLocal from "../FileLoaderLocal/FileLoaderLocal";
+
+import "./FileLoaderDescription.scss";
+
+const RC = "file-loader-description";
+
+const UPLOAD_TRIGGER_KEY = "uploadTrigger";
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+const ACCEPT_EXTENSIONS_DEFAULT =
+  ".jpg, .jpeg, .png, .pdf, .JPG, .JPEG, .PNG, .PDF";
+
+const uploadTriggerStucture = {
+  id: UPLOAD_TRIGGER_KEY,
+  isRequired: true,
+  value: "",
+  base64: "",
+  maxItemSizeBytes: MAX_FILE_SIZE,
+  error: "",
+  accept: ACCEPT_EXTENSIONS_DEFAULT,
+};
+
+const getStructure = (data) => ({
+  //? Расчет на то, что data донесет свой id и перетрёт пустые велью
+  value: "",
+  base64: "",
+  maxItemSizeBytes: MAX_FILE_SIZE,
+  error: "",
+  isRequired: false,
+  accept: ACCEPT_EXTENSIONS_DEFAULT,
+  ...data,
+});
+
+const accordionData = (accordionTitle, accordionListContent) => {
+  return (
+    <div data-testid="accordion">
+      <div className={`${RC}__accordion-title`}>{accordionTitle}</div>
+      <div className={`${RC}__list`}>
+        {accordionListContent?.map((item) => {
+          return (
+            <div key={item?.title} className={`${RC}__list-row`}>
+              <div className={`${RC}__list-bullet`}></div>
+              <div>
+                <div className={`${RC}__list-title`}>{item.title}</div>
+                <div className={`${RC}__list-descr`}>{item.description}</div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const getSafelyInitFiles = (initFiles, maxFilesCount) => {
+  if (!Array.isArray(initFiles)) return [];
+
+  let output = clone(initFiles);
+  if (typeof maxFilesCount === 'number' && output.length > maxFilesCount) {
+    output = output.slice(0, maxFilesCount);
+  }
+
+  return output.map(getStructure);
+};
+
+const checkOverflow = (files, maxFilesCount, additional) => {
+  const { error = "", outerError = "" } = additional || {};
+
+  return typeof maxFilesCount === "number" && files.length < maxFilesCount
+    ? [...files, { ...clone(uploadTriggerStucture), error, outerError }]
+    : files;
+};
+
+const FileLoaderDescription = ({
+  //? Для корректности работы стоит пробрасывать какой-то из id
+  id,
+  testId = "file-loader-description",
+  fieldKey,
+
+  files: initFiles,
+  onChange,
+
+  className,
+  filesDescription = "Documents must be less than 10MB and must be in PDF, JPG, JPEG or PNG format.",
+  documentName = "Document name",
+  accordionTitle = "There is a list of documents that we accept:",
+  accordionListContent = [],
+
+  maxFilesCount = 10,
+  isWithoutAccordion,
+
+  error: outerError,
+
+  ...props
+}) => {
+  const uniqueFileLoaderDescriptionId = `${id || testId || fieldKey || `component-${uuid?.()}`}`;
+  const safelyInitFiles = useMemo(
+    () => getSafelyInitFiles(initFiles, maxFilesCount),
+    [initFiles, maxFilesCount],
+  );
+
+  const [files, setFiles] = useState(
+    (() => {
+      if (!safelyInitFiles.length) return [clone(uploadTriggerStucture)];
+      return checkOverflow(safelyInitFiles, maxFilesCount);
+    })(),
+  );
+
+  const generateUniqueFileName = (files, name) => {
+    let fileName = name;
+    const [nameWithoutExtension, extension] = name.split(/(?=\.[^.]+$)/);
+    let count = 1;
+
+    while (files.some((file) => file.value === fileName)) {
+      fileName = `${nameWithoutExtension}(${count})${extension}`;
+      count += 1;
+    }
+
+    return fileName;
+  };
+
+  const handle = {
+    applyFields: (newFields) => {
+      setFiles(checkOverflow(newFields, maxFilesCount));
+      onChange(newFields);
+    },
+
+    change: ({ name, id, error = "", file }) => {
+      //? Работаем с филдами БЕЗ плашки добавления
+      let output = clone(files)
+        .filter((item) => item.value && item.base64)
+        .map((item) => ({ ...item, error: "" }));
+      const changedField = output.find((item) => id === item.id);
+
+      if (!file) {
+        //? Нет файла - значит это экшн удаления
+        handle.applyFields(
+          output.filter((item) => item.id !== changedField?.id),
+        );
+      } else if (error) {
+        //? Есть ошибка - не должны менять содержание, только назначить ошибку
+        if (changedField)
+          output = output.map((item) =>
+            id.includes(item.id) ? { ...item, error } : item,
+          );
+        //? Установка в локальный стейт БЕЗ верхнего onChange (файл по итогу НЕ загрузили, НЕ мутируем верхнее велью)
+        setFiles(checkOverflow(output, maxFilesCount, { error: !changedField ? error : null }));
+      } else {
+        //? Во всех остальных случаях - происходит добавленеи/изменение содержимого
+        const uniqueFileName = generateUniqueFileName(output, name);
+        const uniqueId = uuid?.();
+
+        getBase64(file).then((result) => {
+          const newItem = getStructure({
+            id: uniqueId,
+            value: uniqueFileName,
+            base64: result,
+            error: "",
+          });
+          //? Либо меняем, либо добавляем
+          output = changedField
+            ? output.map((item) =>
+                item.id === changedField.id ? newItem : item,
+              )
+            : [...output, newItem];
+          handle.applyFields(output);
+        });
+      }
+    },
+  };
+
+  useEffect(() => {
+    setFiles(checkOverflow(files.filter((item) => item.id !== UPLOAD_TRIGGER_KEY), maxFilesCount, { outerError }));
+  }, [outerError]);
+
+  //? Обеспечивает чтобы верхний стейт был доминирующим
+  //? Осознанно и намерянно в зависимости стоит initFiles, но расчеты идут от safelyInitFiles
+  useEffect(() => {
+    //? Если изменились верхние филды и они отличаются от локальных (без триггера) - перезаписать
+    if (
+      !compare(
+        safelyInitFiles,
+        clone(files).filter((item) => item.id !== UPLOAD_TRIGGER_KEY),
+      )
+    ) {
+      setFiles(checkOverflow(safelyInitFiles, maxFilesCount, { outerError }));
+    }
+  }, [initFiles, maxFilesCount]);
+
+  return (
+    <div
+      id={uniqueFileLoaderDescriptionId}
+      data-testid={RC}
+      className={cn(RC, className)}
+      role="combobox"
+    >
+      {!!documentName && (
+        <span title={documentName} className={`${RC}__title`}>
+        {documentName}
+      </span>
+      )}
+
+
+      {!isWithoutAccordion && (
+        <AccordionText
+          isForcedAlwaysAccordion
+          className={cn(`${RC}__accordion`)}
+          text={accordionData(accordionTitle, accordionListContent)}
+        />
+      )}
+
+      {!!filesDescription && (
+      <span className={`${RC}__file-descr`} title={filesDescription}>
+      {filesDescription}
+      </span>
+      )}
+
+
+      {files.map((field, i) => {
+        return (
+          <FileLoaderLocal
+            className={`${RC}__list-item`}
+            key={`${field.id}-${i}`}
+            fieldId={field.id}
+            id={`loader-${uniqueFileLoaderDescriptionId}-field-${field.id}`}
+            error={field.error}
+            outerError={field.outerError}
+            label={"Upload document"}
+            accept={field.accept}
+            value={field.value}
+            maxItemSizeBytes={field.maxItemSizeBytes}
+            onChange={(value) => handle.change(value)}
+            isRequired={files.length <= 1}
+            isNoTrashIcon={false}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default FileLoaderDescription;

package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js

@@ -1 +1,160 @@
-function e(e,l,a){return l in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}import{jsx as l,jsxs as a}from"react/jsx-runtime";import"react";import r from"classnames";import{Download as o,Paperclip as i,Trash2 as t}from"react-feather";import{getUniqueFileExtensions as n,renderFileSize as c}from"../../../Functions/utils";import"./FileLoaderLocal.scss";export default function(s){var d=s.groupId,u=s.id,f=s.fieldId,p=s.fieldKey,m=s.label,v=s.error,_=s.outerError,g=s.isRequired,b=s.accept,h=s.onChange,N=s.className,y=s.value,x=s.isNoTrashIcon,I=s.maxItemSizeBytes,O=s.testId,j=s.attributesOfNativeInput,F=function(e){var l=e.match(/[^\\]+$/);return null==l?void 0:l[0]},P=function(e){var l;return l=e.size>I,l};return a("div",{"data-testid":void 0===O?"file-loader-local":O,className:r("file-loader-local",N,e({},"file-loader-local_outer-error",!!_)),children:[("uploadTrigger"===f||!y)&&l("input",function(l){for(var a=1;a<arguments.length;a++){var r=null!=arguments[a]?arguments[a]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),o.forEach(function(a){e(l,a,r[a])})}return l}({onChange:function(e){var l=F(e.target.value),a=null==l||null==(i=l.match(/[^\.]+$/))?void 0:i[0],r=null==(t=l.split("."))?void 0:t[0],o=null==(f=e.target)||null==(s=f.files)?void 0:s[0];if(P(null==(m=e.target)||null==(p=m.files)?void 0:p[0]))h({id:u,name:l,valueExtension:a,e:e,file:o,groupId:d,error:"Max file size is ".concat(c(I))});else if(b.includes(a))/^[A-Za-z\u00C0-\u00FF0-9!@#\$%\^\&*\)\(+=._-\s]+$/.test(r)?h({id:u,groupId:d,name:l,valueExtension:a,e:e,file:o}):h({id:u,groupId:d,name:l,valueExtension:a,e:e,file:o,error:"File name must be Latin characters only."});else{var i,t,s,f,p,m,v,_=n((null==b||null==(v=b.replace(/\./g,""))?void 0:v.toUpperCase())||"JPG, PNG, PDF");h({id:u,groupId:d,name:l,valueExtension:a,e:e,file:o,error:"Only ".concat(_," are allowed")})}},className:"file-loader-local__file-input",id:p||"file-input-".concat(u).concat(d?"-".concat(d):""),type:"file",name:p||u,required:g,accept:b},void 0===j?{}:j),u),a("label",{className:r("file-loader-local__label-box",{"file-loader-local__label-box--upload-trigger":"uploadTrigger"===f||!y}),htmlFor:p||"file-input-".concat(u).concat(d?"-".concat(d):""),children:[!y&&l(o,{className:"file-loader-local__upload-icon"}),y&&l(i,{className:"file-loader-local__upload-icon"}),l("div",{title:y||m,className:"file-loader-local__label-wrapper",children:a("div",{className:r("file-loader-local__label",{"file-loader-local__label-filled":y}),children:[l("span",{className:"file-loader-local__label-text",children:y||m}),v&&l("span",{className:"file-loader-local__error",children:v}),"string"==typeof _&&l("span",{className:"file-loader-local__error",children:_})]})}),y&&!(void 0!==x&&x)&&l(t,{className:"file-loader-local__trash-icon",onClick:function(){return h({id:f,groupId:d})}}),function(){if(!y)if(g)return l("div",{className:"file-loader-local--required",children:"Required"});else return l("div",{className:"file-loader-local--optional",children:"Optional"})}()]})]})}
+import React from "react";
+
+import cn from "classnames";
+import { Download, Paperclip, Trash2 } from "react-feather";
+
+import {
+  getUniqueFileExtensions,
+  renderFileSize,
+} from "../../../Functions/utils";
+
+import "./FileLoaderLocal.scss";
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+const FileLoaderLocal = ({
+  groupId,
+  id,
+  fieldId,
+  fieldKey,
+  label,
+  error,
+  outerError,
+  isRequired,
+  accept,
+  onChange,
+  className,
+  value,
+  isNoTrashIcon = false,
+  maxItemSizeBytes,
+  testId = "file-loader-local",
+  attributesOfNativeInput = {},
+}) => {
+  const getFileName = (value) => {
+    const result = value.match(/[^\\]+$/);
+    return result?.[0];
+  };
+
+  const renderRequiredLabel = () => {
+    if (!value) {
+      if (isRequired)
+        return <div className="file-loader-local--required">Required</div>;
+      else return <div className="file-loader-local--optional">Optional</div>;
+    }
+  };
+
+  const isFileSizeOutOfLimit = (file) => {
+    return file.size > maxItemSizeBytes ?? MAX_FILE_SIZE;
+  };
+
+  const checkExtension = (valueExtension) => {
+    return accept.includes(valueExtension);
+  };
+
+  const handle = {
+    change: (e) => {
+      const name = getFileName(e.target.value);
+      const valueExtension = name?.match(/[^\.]+$/)?.[0];
+      const fileName = name.split(".")?.[0];
+      const latinRegex = /^[A-Za-z\u00C0-\u00FF0-9!@#\$%\^\&*\)\(+=._-\s]+$/;
+      const file = e.target?.files?.[0];
+
+      if (isFileSizeOutOfLimit(e.target?.files?.[0])) {
+        onChange({
+          id,
+          name,
+          valueExtension,
+          e,
+          file,
+          groupId,
+          error: `Max file size is ${renderFileSize(maxItemSizeBytes)}`,
+        });
+      } else if (!checkExtension(valueExtension)) {
+        const allowedExtensions =
+          accept?.replace(/\./g, "")?.toUpperCase() || "JPG, PNG, PDF";
+        const uniqExts = getUniqueFileExtensions(allowedExtensions);
+
+        onChange({
+          id,
+          groupId,
+          name,
+          valueExtension,
+          e,
+          file,
+          error: `Only ${uniqExts} are allowed`,
+        });
+      } else if (!latinRegex.test(fileName)) {
+        onChange({
+          id,
+          groupId,
+          name,
+          valueExtension,
+          e,
+          file,
+          error: `File name must be Latin characters only.`,
+        });
+      } else onChange({ id, groupId, name, valueExtension, e, file });
+    },
+  };
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn("file-loader-local", className, {
+        ["file-loader-local_outer-error"]: Boolean(outerError),
+      })}
+    >
+      {(fieldId === "uploadTrigger" || !value) && (
+        <input
+          key={id}
+          onChange={handle.change}
+          className="file-loader-local__file-input"
+          id={fieldKey || `file-input-${id}${groupId ? `-${groupId}` : ""}`}
+          type="file"
+          name={fieldKey || id}
+          required={isRequired}
+          accept={accept}
+          {...attributesOfNativeInput}
+        />
+      )}
+      <label
+        className={cn("file-loader-local__label-box", {
+          "file-loader-local__label-box--upload-trigger":
+            fieldId === "uploadTrigger" || !value,
+        })}
+        htmlFor={fieldKey || `file-input-${id}${groupId ? `-${groupId}` : ""}`}
+      >
+        {!value && <Download className="file-loader-local__upload-icon" />}
+        {value && <Paperclip className="file-loader-local__upload-icon" />}
+        <div
+          title={value || label}
+          className="file-loader-local__label-wrapper"
+        >
+          <div
+            className={cn("file-loader-local__label", {
+              "file-loader-local__label-filled": value,
+            })}
+          >
+            <span className="file-loader-local__label-text">
+              {value || label}
+            </span>
+            {error && <span className="file-loader-local__error">{error}</span>}
+            {typeof outerError === "string" && (
+              <span className="file-loader-local__error">{outerError}</span>
+            )}
+          </div>
+        </div>
+
+        {value && !isNoTrashIcon && (
+          <Trash2
+            className="file-loader-local__trash-icon"
+            onClick={() => onChange({ id: fieldId, groupId })}
+          />
+        )}
+        {renderRequiredLabel()}
+      </label>
+    </div>
+  );
+};
+
+export default FileLoaderLocal;