intelicoreact 1.4.81 → 1.4.83

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

@@ -2,11 +2,21 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -19,21 +29,48 @@ var _FileLoaderLocal = _interopRequireDefault(require("../FileLoaderLocal/FileLo
 
 require("./FileLoaderDescription.scss");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _excluded = ["id", "testId", "fieldKey", "className", "onChange", "filesDescription", "documentName", "accordionTitle", "accordionListContent", "maxFilesCount", "isWithoutAccordion"];
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-const MAX_FILE_SIZE = 10 * 1024 * 1024;
-const ACCEPT_EXTENSIONS_DEFAULT = ".jpg, .jpeg, .png, .pdf";
-const RC = "file-loader-description";
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var RC = "file-loader-description";
+var UPLOAD_TRIGGER_KEY = 'uploadTrigger';
+var MAX_FILE_SIZE = 10 * 1024 * 1024;
+var ACCEPT_EXTENSIONS_DEFAULT = ".jpg, .jpeg, .png, .pdf";
+var uploadTriggerStucture = {
+  id: UPLOAD_TRIGGER_KEY,
+  isRequired: true,
+  value: "",
+  base64: "",
+  maxItemSizeBytes: MAX_FILE_SIZE,
+  error: "",
+  accept: ACCEPT_EXTENSIONS_DEFAULT
+};
+
+var getStructure = function getStructure(data) {
+  return _objectSpread({
+    value: "",
+    base64: "",
+    maxItemSizeBytes: MAX_FILE_SIZE,
+    error: "",
+    isRequired: false,
+    accept: ACCEPT_EXTENSIONS_DEFAULT
+  }, data);
+};
 
-const accordionData = (accordionTitle, accordionListContent) => {
+var accordionData = function accordionData(accordionTitle, accordionListContent) {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     testId: "accordion-title",
     className: "".concat(RC, "__accordion-title")
   }, accordionTitle), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__list")
-  }, accordionListContent === null || accordionListContent === void 0 ? void 0 : accordionListContent.map(item => {
+  }, accordionListContent === null || accordionListContent === void 0 ? void 0 : accordionListContent.map(function (item) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: item === null || item === void 0 ? void 0 : item.title,
       className: "".concat(RC, "__list-row")
@@ -47,43 +84,44 @@ const accordionData = (accordionTitle, accordionListContent) => {
   })));
 };
 
-const FileLoaderDescription = _ref => {
-  let {
-    fieldKey,
-    testId,
-    className,
-    onChange,
-    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 = [],
-    ...props
-  } = _ref;
-  const [fields, setFields] = (0, _react.useState)([{
-    id: 1,
-    value: "",
-    base64: "",
-    maxItemSizeBytes: MAX_FILE_SIZE,
-    error: "",
-    isRequired: false,
-    accept: ACCEPT_EXTENSIONS_DEFAULT
-  }]);
-  const uploadFieldTemplate = {
-    id: Number(fields.at(-1).id) + 1,
-    isRequired: true,
-    value: "",
-    base64: "",
-    maxItemSizeBytes: MAX_FILE_SIZE,
-    error: "",
-    accept: ACCEPT_EXTENSIONS_DEFAULT
-  };
-
-  const generateUniqueFileName = (files, name) => {
-    let fileName = name;
-    const [nameWithoutExtension, extension] = name.split(/(?=\.[^.]+$)/);
-    let count = 1;
-
-    while (files.some(file => file.value === fileName)) {
+var FileLoaderDescription = function FileLoaderDescription(_ref) {
+  var id = _ref.id,
+      testId = _ref.testId,
+      fieldKey = _ref.fieldKey,
+      className = _ref.className,
+      onChange = _ref.onChange,
+      _ref$filesDescription = _ref.filesDescription,
+      filesDescription = _ref$filesDescription === void 0 ? "Documents must be less than 10MB and must be in PDF, JPG, JPEG or PNG format." : _ref$filesDescription,
+      _ref$documentName = _ref.documentName,
+      documentName = _ref$documentName === void 0 ? "Document name" : _ref$documentName,
+      _ref$accordionTitle = _ref.accordionTitle,
+      accordionTitle = _ref$accordionTitle === void 0 ? "There is a list of documents that we accept:" : _ref$accordionTitle,
+      _ref$accordionListCon = _ref.accordionListContent,
+      accordionListContent = _ref$accordionListCon === void 0 ? [] : _ref$accordionListCon,
+      _ref$maxFilesCount = _ref.maxFilesCount,
+      maxFilesCount = _ref$maxFilesCount === void 0 ? 10 : _ref$maxFilesCount,
+      isWithoutAccordion = _ref.isWithoutAccordion,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var uniqueFileLoaderDescriptionId = "".concat(id || testId || fieldKey || "component-".concat(_utils.uuid === null || _utils.uuid === void 0 ? void 0 : (0, _utils.uuid)()));
+
+  var _useState = (0, _react.useState)([(0, _utils.clone)(uploadTriggerStucture)]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      fields = _useState2[0],
+      setFields = _useState2[1];
+
+  var generateUniqueFileName = function generateUniqueFileName(files, name) {
+    var fileName = name;
+
+    var _name$split = name.split(/(?=\.[^.]+$)/),
+        _name$split2 = (0, _slicedToArray2.default)(_name$split, 2),
+        nameWithoutExtension = _name$split2[0],
+        extension = _name$split2[1];
+
+    var count = 1;
+
+    while (files.some(function (file) {
+      return file.value === fileName;
+    })) {
       fileName = "".concat(nameWithoutExtension, "(").concat(count, ")").concat(extension);
       count += 1;
     }
@@ -91,67 +129,101 @@ const FileLoaderDescription = _ref => {
     return fileName;
   };
 
-  const handle = {
-    change: _ref2 => {
-      let {
-        name,
-        id,
-        error,
-        file
-      } = _ref2;
-      const changedField = fields.find(item => item.id === id);
-
-      if (error) {
-        changedField.value = name;
-        changedField.error = error;
-        setFields([...fields]);
-      } else if (name && !error) {
-        const uniqueFileName = generateUniqueFileName(fields, name);
-        (0, _utils.getBase64)(file).then(result => {
-          changedField.value = uniqueFileName;
-          changedField.base64 = result;
-          changedField.error = "";
-          setFields([...fields]);
+  var handle = {
+    checkOverflow: function checkOverflow(fields) {
+      var error = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      return fields.length < maxFilesCount ? [].concat((0, _toConsumableArray2.default)(fields), [_objectSpread(_objectSpread({}, (0, _utils.clone)(uploadTriggerStucture)), {}, {
+        error: error
+      })]) : fields;
+    },
+    applyFields: function applyFields(newFields) {
+      setFields(handle.checkOverflow(newFields));
+      onChange(newFields);
+    },
+    change: function change(_ref2) {
+      var name = _ref2.name,
+          id = _ref2.id,
+          _ref2$error = _ref2.error,
+          error = _ref2$error === void 0 ? '' : _ref2$error,
+          file = _ref2.file;
+      //? Работаем с филдами БЕЗ плашки добавления
+      var output = (0, _utils.clone)(fields).filter(function (item) {
+        return item.value && item.base64;
+      }).map(function (item) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          error: ''
         });
+      });
+      var changedField = output.find(function (item) {
+        return id.includes(item.id);
+      });
+
+      if (!file) {
+        //? Нет файла - значит это экшн удаления
+        handle.applyFields(output.filter(function (item) {
+          return item.id !== (changedField === null || changedField === void 0 ? void 0 : changedField.id);
+        }));
+      } else if (error) {
+        //? Есть ошибка - не должны менять содержание, только назначить ошибку
+        if (changedField) output = output.map(function (item) {
+          return id.includes(item.id) ? _objectSpread(_objectSpread({}, item), {}, {
+            error: error
+          }) : item;
+        }); //? Установка в локальный стейт БЕЗ верхнего onChange (файл по итогу НЕ загрузили, НЕ мутируем верхнее велью)
+
+        setFields(handle.checkOverflow(output, !changedField ? error : null));
       } else {
-        const filteredFields = fields.filter(item => item.id !== id);
-        setFields([...filteredFields]);
+        //? Во всех остальных случаях - происходит добавленеи/изменение содержимого
+        var uniqueFileName = generateUniqueFileName(output, name);
+        var uniqueId = _utils.uuid === null || _utils.uuid === void 0 ? void 0 : (0, _utils.uuid)();
+        (0, _utils.getBase64)(file).then(function (result) {
+          var newItem = getStructure({
+            id: uniqueId,
+            value: uniqueFileName,
+            base64: result,
+            error: ''
+          }); //? Либо меняем, либо добавляем
+
+          output = !!changedField ? output.map(function (item) {
+            return item.id === changedField.id ? newItem : item;
+          }) : [].concat((0, _toConsumableArray2.default)(output), [newItem]);
+          handle.applyFields(output);
+        });
       }
     }
   };
-  (0, _react.useEffect)(() => {
-    if (fields.every(item => item.value) && fields.length < 10) {
-      setFields([...fields, uploadFieldTemplate]);
-    }
-  }, [fields]);
-  (0, _react.useEffect)(() => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(fields.filter(item => item.value && item.base64));
-  }, [fields]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "".concat(RC, "-").concat(testId),
+    id: uniqueFileLoaderDescriptionId,
+    testId: uniqueFileLoaderDescriptionId,
+    "data-testid": "".concat(RC, "-").concat(uniqueFileLoaderDescriptionId),
     className: (0, _classnames.default)(RC, className),
     role: "combobox"
   }, /*#__PURE__*/_react.default.createElement("span", {
     title: documentName,
     className: "".concat(RC, "__title")
-  }, documentName), /*#__PURE__*/_react.default.createElement(_AccordionText.default, {
+  }, documentName), !isWithoutAccordion && /*#__PURE__*/_react.default.createElement(_AccordionText.default, {
     isForcedAlwaysAccordion: true,
     className: (0, _classnames.default)("".concat(RC, "__accordion")),
     text: accordionData(accordionTitle, accordionListContent)
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(RC, "__file-descr"),
     title: filesDescription
-  }, filesDescription), fields.map(field => {
+  }, filesDescription), fields.map(function (field) {
     return /*#__PURE__*/_react.default.createElement(_FileLoaderLocal.default, {
       className: "".concat(RC, "__list-item"),
-      key: "".concat(fieldKey !== null && fieldKey !== void 0 ? fieldKey : Date.now(), "/").concat(field.id),
-      id: field.id,
+      key: field.id,
+      id: "loader-".concat(uniqueFileLoaderDescriptionId, "-field-").concat(field.id) // key={`${fieldKey ?? Date.now()}/${field.id}`}
+      // fieldKey={`${fieldKey ?? Date.now()}/${field.id}`}
+      // id={field.id}
+      ,
       error: field.error,
       label: "Upload document",
       accept: field.accept,
       value: field.value,
       maxItemSizeBytes: field.maxItemSizeBytes,
-      onChange: value => handle.change(value),
+      onChange: function onChange(value) {
+        return handle.change(value);
+      },
       isRequired: fields.length <= 1,
       isNoTrashIcon: false
     });

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

@@ -19,32 +19,32 @@ var _utils = require("../../../Functions/utils");
 
 require("./FileLoaderLocal.scss");
 
-const MAX_FILE_SIZE = 10 * 1024 * 1024;
-
-const FileLoaderLocal = _ref => {
-  let {
-    groupId,
-    id,
-    fieldKey,
-    label,
-    error,
-    isRequired,
-    accept,
-    onChange,
-    className,
-    value,
-    isNoTrashIcon = false,
-    maxItemSizeBytes,
-    testId,
-    attributesOfNativeInput = {}
-  } = _ref;
-
-  const getFileName = value => {
-    const result = value.match(/[^\\]+$/);
+var MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+var FileLoaderLocal = function FileLoaderLocal(_ref) {
+  var groupId = _ref.groupId,
+      id = _ref.id,
+      fieldKey = _ref.fieldKey,
+      label = _ref.label,
+      error = _ref.error,
+      isRequired = _ref.isRequired,
+      accept = _ref.accept,
+      onChange = _ref.onChange,
+      className = _ref.className,
+      value = _ref.value,
+      _ref$isNoTrashIcon = _ref.isNoTrashIcon,
+      isNoTrashIcon = _ref$isNoTrashIcon === void 0 ? false : _ref$isNoTrashIcon,
+      maxItemSizeBytes = _ref.maxItemSizeBytes,
+      testId = _ref.testId,
+      _ref$attributesOfNati = _ref.attributesOfNativeInput,
+      attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati;
+
+  var getFileName = function getFileName(value) {
+    var result = value.match(/[^\\]+$/);
     return result === null || result === void 0 ? void 0 : result[0];
   };
 
-  const renderRequiredLabel = () => {
+  var renderRequiredLabel = function renderRequiredLabel() {
     if (!value) {
       if (isRequired) return /*#__PURE__*/_react.default.createElement("div", {
         className: "file-loader-local--required"
@@ -54,55 +54,55 @@ const FileLoaderLocal = _ref => {
     }
   };
 
-  const isFileSizeOutOfLimit = file => {
+  var isFileSizeOutOfLimit = function isFileSizeOutOfLimit(file) {
     var _ref2;
 
     return (_ref2 = file.size > maxItemSizeBytes) !== null && _ref2 !== void 0 ? _ref2 : MAX_FILE_SIZE;
   };
 
-  const checkExtension = valueExtension => {
+  var checkExtension = function checkExtension(valueExtension) {
     return accept.includes(valueExtension);
   };
 
-  const handle = {
-    change: e => {
+  var handle = {
+    change: function change(e) {
       var _name$match, _e$target, _e$target$files, _e$target2, _e$target2$files;
 
-      const name = getFileName(e.target.value);
-      const valueExtension = name === null || name === void 0 ? void 0 : (_name$match = name.match(/[^\.]+$/)) === null || _name$match === void 0 ? void 0 : _name$match[0];
-      const file = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : (_e$target$files = _e$target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0];
+      var name = getFileName(e.target.value);
+      var valueExtension = name === null || name === void 0 ? void 0 : (_name$match = name.match(/[^\.]+$/)) === null || _name$match === void 0 ? void 0 : _name$match[0];
+      var file = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : (_e$target$files = _e$target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0];
 
       if (isFileSizeOutOfLimit((_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : (_e$target2$files = _e$target2.files) === null || _e$target2$files === void 0 ? void 0 : _e$target2$files[0])) {
         onChange({
-          id,
-          name,
-          valueExtension,
-          e,
-          file,
-          groupId,
+          id: id,
+          name: name,
+          valueExtension: valueExtension,
+          e: e,
+          file: file,
+          groupId: groupId,
           error: "Max file size is ".concat((0, _utils.renderFileSize)(maxItemSizeBytes))
         });
       } else if (!checkExtension(valueExtension)) {
         var _accept$replace;
 
-        const allowedExtensions = (accept === null || accept === void 0 ? void 0 : (_accept$replace = accept.replace(/\./g, "")) === null || _accept$replace === void 0 ? void 0 : _accept$replace.toUpperCase()) || "JPG, PNG, PDF";
-        const uniqExts = (0, _utils.getUniqueFileExtensions)(allowedExtensions);
+        var allowedExtensions = (accept === null || accept === void 0 ? void 0 : (_accept$replace = accept.replace(/\./g, "")) === null || _accept$replace === void 0 ? void 0 : _accept$replace.toUpperCase()) || "JPG, PNG, PDF";
+        var uniqExts = (0, _utils.getUniqueFileExtensions)(allowedExtensions);
         onChange({
-          id,
-          groupId,
-          name,
-          valueExtension,
-          e,
-          file,
+          id: id,
+          groupId: groupId,
+          name: name,
+          valueExtension: valueExtension,
+          e: e,
+          file: file,
           error: "Only ".concat(uniqExts, " are allowed")
         });
       } else onChange({
-        id,
-        groupId,
-        name,
-        valueExtension,
-        e,
-        file
+        id: id,
+        groupId: groupId,
+        name: name,
+        valueExtension: valueExtension,
+        e: e,
+        file: file
       });
     }
   };
@@ -112,14 +112,14 @@ const FileLoaderLocal = _ref => {
   }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
     onChange: handle.change,
     className: "file-loader-local__file-input",
-    id: fieldKey !== null && fieldKey !== void 0 ? fieldKey : "file-input-".concat(id).concat(groupId ? "-".concat(groupId) : ""),
+    id: fieldKey || "file-input-".concat(id).concat(groupId ? "-".concat(groupId) : ""),
     type: "file",
-    name: fieldKey !== null && fieldKey !== void 0 ? fieldKey : id,
+    name: fieldKey || id,
     required: isRequired,
     accept: accept
   }, attributesOfNativeInput)), /*#__PURE__*/_react.default.createElement("label", {
     className: "file-loader-local__label-box",
-    htmlFor: fieldKey !== null && fieldKey !== void 0 ? fieldKey : "file-input-".concat(id).concat(groupId ? "-".concat(groupId) : "")
+    htmlFor: fieldKey || "file-input-".concat(id).concat(groupId ? "-".concat(groupId) : "")
   }, !value && /*#__PURE__*/_react.default.createElement(_reactFeather.Download, {
     className: "file-loader-local__upload-icon"
   }), value && /*#__PURE__*/_react.default.createElement(_reactFeather.Paperclip, {
@@ -137,10 +137,12 @@ const FileLoaderLocal = _ref => {
     className: "file-loader-local__error"
   }, error))), value && !isNoTrashIcon && /*#__PURE__*/_react.default.createElement(_reactFeather.Trash2, {
     className: "file-loader-local__trash-icon",
-    onClick: () => onChange({
-      id,
-      groupId
-    })
+    onClick: function onClick() {
+      return onChange({
+        id: id,
+        groupId: groupId
+      });
+    }
   }), renderRequiredLabel()));
 };