@widergy/energy-ui 3.172.1 → 3.172.3

package/dist/esm/components/UTAttachmentList/components/PreviewModal/index.js

@@ -1,52 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import { string, shape, func, bool } from 'prop-types';
-import UTDialog from '../../../../deprecated/UTDialog';
-import { isAudio, isImage, isVideo } from '../../utils';
-import { previewPropType } from '../../constants';
-import styles from './styles.module.scss';
-const PreviewModal = _ref => {
-  let {
-    closePreviewModal,
-    preview,
-    previewModalIsOpen,
-    previewProps = {}
-  } = _ref;
-  return /*#__PURE__*/React.createElement(UTDialog, {
-    classNames: {
-      container: styles.container,
-      content: styles.content
-    },
-    isOpen: previewModalIsOpen,
-    onRequestClose: () => closePreviewModal()
-  }, isImage(preview) && /*#__PURE__*/React.createElement("img", _extends({
-    src: preview.src,
-    className: styles.previewImage,
-    alt: ""
-  }, previewProps === null || previewProps === void 0 ? void 0 : previewProps.image)), isAudio(preview) && /*#__PURE__*/React.createElement("audio", _extends({
-    controls: true,
-    controlsList: "nodownload",
-    className: styles.previewAudio
-  }, previewProps === null || previewProps === void 0 ? void 0 : previewProps.audio), /*#__PURE__*/React.createElement("source", {
-    src: preview.src,
-    type: preview.type
-  })), isVideo(preview) && /*#__PURE__*/React.createElement("video", _extends({
-    controls: true,
-    disablePictureInPicture: true,
-    controlsList: "nodownload",
-    className: styles.previewVideo
-  }, previewProps === null || previewProps === void 0 ? void 0 : previewProps.video), /*#__PURE__*/React.createElement("source", {
-    src: preview.src,
-    type: preview.type
-  })));
-};
-PreviewModal.propTypes = {
-  closePreviewModal: func,
-  preview: shape({
-    src: string,
-    type: string
-  }),
-  previewModalIsOpen: bool,
-  previewProps: previewPropType
-};
-export default PreviewModal;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React from"react";import{string,shape,func,bool}from"prop-types";import UTDialog from"../../../../deprecated/UTDialog";import{isAudio,isImage,isVideo}from"../../utils";import{previewPropType}from"../../constants";import styles from"./styles.module.scss";const PreviewModal=_ref=>{let{closePreviewModal:closePreviewModal,preview:preview,previewModalIsOpen:previewModalIsOpen,previewProps:previewProps={}}=_ref;return React.createElement(UTDialog,{classNames:{container:styles.container,content:styles.content},isOpen:previewModalIsOpen,onRequestClose:()=>closePreviewModal()},isImage(preview)&&React.createElement("img",_extends({src:preview.src,className:styles.previewImage,alt:""},null==previewProps?void 0:previewProps.image)),isAudio(preview)&&React.createElement("audio",_extends({controls:!0,controlsList:"nodownload",className:styles.previewAudio},null==previewProps?void 0:previewProps.audio),React.createElement("source",{src:preview.src,type:preview.type})),isVideo(preview)&&React.createElement("video",_extends({controls:!0,disablePictureInPicture:!0,controlsList:"nodownload",className:styles.previewVideo},null==previewProps?void 0:previewProps.video),React.createElement("source",{src:preview.src,type:preview.type})))};PreviewModal.propTypes={closePreviewModal:func,preview:shape({src:string,type:string}),previewModalIsOpen:bool,previewProps:previewPropType};export default PreviewModal;

package/dist/esm/components/UTAttachmentList/constants.js

@@ -1,24 +1 @@
-import { object, shape } from 'prop-types';
-export const FORMAT_ERROR_TEXT = 'El formato no es compatible';
-export const SIZE_ERROR_TEXT = 'El archivo supera los ';
-export const ASPECT_RATIO_ERROR_TEXT = 'El formato de archivo es inválido. (Válidos:';
-export const FILE_NOT_FOUND_ERROR_TEXT = 'Hubo un error al cargar el archivo';
-export const DEFAULT_UPLOADING_TEXT = 'Cargando...';
-export const DEFAULT_ATTACHMENT_NAME = 'Adjunto';
-export const FORMAT_FILE_LABEL = 'Debe tener formato: ';
-export const MAX_SIZE_FILE_LABEL = 'No debe superar los ';
-export const UPLOAD_FILE = 'Subir archivo';
-export const INDICATIONS = 'Arrastra y suelta o';
-export const MB_LABEL = 'MB';
-export const MAX_FILES_ERROR = 'Se ha excedido el límite máximo de archivos permitidos ';
-export const DEFAULT_MAX_FILES = 1;
-export const ICON_SIZE = 32;
-export const PREVIEW_TYPES = {
-  ERROR: 'error',
-  LOADING: 'loading'
-};
-export const previewPropType = shape({
-  audio: object,
-  image: object,
-  video: object
-});
+import{object,shape}from"prop-types";export const FORMAT_ERROR_TEXT="El formato no es compatible";export const SIZE_ERROR_TEXT="El archivo supera los ";export const ASPECT_RATIO_ERROR_TEXT="El formato de archivo es inválido. (Válidos:";export const FILE_NOT_FOUND_ERROR_TEXT="Hubo un error al cargar el archivo";export const DEFAULT_UPLOADING_TEXT="Cargando...";export const DEFAULT_ATTACHMENT_NAME="Adjunto";export const FORMAT_FILE_LABEL="Debe tener formato: ";export const MAX_SIZE_FILE_LABEL="No debe superar los ";export const UPLOAD_FILE="Subir archivo";export const INDICATIONS="Arrastra y suelta o";export const MB_LABEL="MB";export const MAX_FILES_ERROR="Se ha excedido el límite máximo de archivos permitidos ";export const DEFAULT_MAX_FILES=1;export const ICON_SIZE=32;export const PREVIEW_TYPES={ERROR:"error",LOADING:"loading"};export const previewPropType=shape({audio:object,image:object,video:object});

package/dist/esm/components/UTAttachmentList/index.js

@@ -1,294 +1 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { func, arrayOf, string, shape, number, node, bool, objectOf, oneOfType, any } from 'prop-types';
-import { fileSignatureValidation, fileSizeValidation } from '@widergy/web-utils/lib/validate';
-import { resizeImage } from '@widergy/web-utils/lib/image';
-import { isIE } from '@widergy/web-utils/lib/browser';
-import isEmpty from 'lodash/isEmpty';
-import { buttonTypes } from '../../types/buttonTypes';
-import WithTheme from '../WithTheme';
-import { retrieveStyle } from './theme';
-import { FORMAT_ERROR_TEXT, SIZE_ERROR_TEXT, ASPECT_RATIO_ERROR_TEXT, MAX_FILES_ERROR, DEFAULT_MAX_FILES, PREVIEW_TYPES } from './constants';
-import Attachment from './layout';
-import { pdfAspectRatioValidation, isImage, isPDF, getSizeInMB, hasPreview, isDownloadable, getNotRepeatedFiles, getBlobFromUrl, getDefaultAttachment } from './utils';
-const AttachmentListContainer = _ref => {
-  var _field$configuration, _field$configuration2, _field$configuration3, _field$configuration4, _input$value;
-  let {
-    acceptedFileTypes: defaultAcceptedFileTypes,
-    actions,
-    allowedPDFUploadSizes,
-    classes,
-    containerClassname,
-    customValidation,
-    dataTestId,
-    deleteDataTestId,
-    disabled,
-    disableResize,
-    errorClassname,
-    field,
-    fieldTypes = [],
-    hideLabels,
-    icon,
-    input,
-    loadingTextClassname,
-    maxFileSize: defaultMaxFileSize = 99999999,
-    onLoaded,
-    notifyOnInitialLoad = true,
-    previewDataTestId,
-    readOnly = false,
-    resizeConfig,
-    sanitize,
-    titleVariant
-  } = _ref;
-  const helpText = field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.help_text;
-  const maxFileSize = (field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.max_file_size) || defaultMaxFileSize;
-  const acceptedFileTypes = (field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.accepted_file_types) || defaultAcceptedFileTypes;
-  const maxFiles = (field === null || field === void 0 || (_field$configuration4 = field.configuration) === null || _field$configuration4 === void 0 ? void 0 : _field$configuration4.max_files) || DEFAULT_MAX_FILES;
-  const [preview, setPreview] = useState([]);
-  const [error, setError] = useState(false);
-  const [errorText, setErrorText] = useState(FORMAT_ERROR_TEXT);
-  const fileInputRef = useRef(null);
-  const [updatedFiles, setUpdatedFiles] = useState((input === null || input === void 0 || (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.files) || []);
-  const removePreviewItem = fileName => {
-    if (fileName) setPreview(prevPreview => prevPreview.filter(item => item.name !== fileName));
-    setUpdatedFiles(prevFiles => {
-      const filteredFiles = Object.values(prevFiles).filter(item => item.name !== fileName);
-      if (input.onChange) input.onChange(isEmpty(filteredFiles) ? null : {
-        files: filteredFiles
-      });
-      return filteredFiles;
-    });
-    if (fileInputRef.current) {
-      fileInputRef.current.value = null;
-    }
-    setError(false);
-  };
-  const onFailValidation = (errorMessage, dynamicData) => {
-    setError(true);
-    setErrorText(dynamicData ? "".concat(errorMessage, "(").concat(dynamicData, ")") : errorMessage);
-  };
-  const buildPreviews = async files => {
-    const loadPreview = file => new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = e => {
-        if (hasPreview(file) || isDownloadable(file)) {
-          resolve({
-            src: e.target.result,
-            file
-          });
-        } else {
-          resolve({
-            src: null,
-            file
-          });
-        }
-      };
-      reader.onerror = e => reject(e);
-      reader.readAsDataURL(file);
-    });
-    const createPreviewItem = (src, item) => ({
-      ...item,
-      src
-    });
-    try {
-      const previews = await Promise.all(files.map(loadPreview));
-      const previewItems = previews.map(_ref2 => {
-        let {
-          src,
-          file
-        } = _ref2;
-        return createPreviewItem(src, {
-          type: file.type,
-          name: file.name,
-          size: getSizeInMB(file.size),
-          onClick: () => removePreviewItem(file.name)
-        });
-      });
-      setPreview(currentPreviews => getNotRepeatedFiles([...(currentPreviews || []).filter(item => item.type !== 'loading'), ...previewItems]));
-    } catch (e) {
-      setPreview(currentPreviews => (currentPreviews || []).filter(item => item.type !== 'loading'));
-      onFailValidation(e === null || e === void 0 ? void 0 : e.message);
-    }
-  };
-  const onChange = async ev => {
-    var _input$value2;
-    const prevFiles = ((_input$value2 = input.value) === null || _input$value2 === void 0 ? void 0 : _input$value2.files) || updatedFiles;
-    const files = Object.values(isEmpty(prevFiles) ? ev.target.files : getNotRepeatedFiles([...prevFiles, ...ev.target.files]));
-    const fileErrorTexts = {
-      formatError: FORMAT_ERROR_TEXT,
-      sizeError: "".concat(SIZE_ERROR_TEXT, " ").concat(getSizeInMB(maxFileSize), "MB."),
-      aspectRatioError: "".concat(ASPECT_RATIO_ERROR_TEXT, " ").concat(allowedPDFUploadSizes === null || allowedPDFUploadSizes === void 0 ? void 0 : allowedPDFUploadSizes.map(aspectRatio => aspectRatio.name).join(' - '), ")")
-    };
-    setError(false);
-    const processFiles = async index => {
-      if (index < files.length) {
-        if (maxFiles && files.length > maxFiles) {
-          onFailValidation(MAX_FILES_ERROR, maxFiles);
-          return;
-        }
-        let file = files[index];
-        if (file) {
-          let validation = !customValidation || (await customValidation(file, onFailValidation));
-          if (validation) {
-            validation = await fileSignatureValidation(file, fieldTypes, file.type);
-            if (validation) {
-              if (sanitize) file = await sanitize(file);
-              validation = fileSizeValidation(file, maxFileSize);
-              if (validation && isPDF(file) && !isEmpty(allowedPDFUploadSizes)) {
-                validation = await pdfAspectRatioValidation(file, allowedPDFUploadSizes);
-                if (!validation) {
-                  onFailValidation(fileErrorTexts.aspectRatioError);
-                  return;
-                }
-              }
-              if (!validation && !disableResize && isImage(file) && !isIE()) {
-                file = await resizeImage(file, resizeConfig);
-                validation = fileSizeValidation(file, maxFileSize);
-                files[index] = file;
-              }
-              if (!validation) {
-                onFailValidation(fileErrorTexts.sizeError);
-                return;
-              }
-            } else {
-              onFailValidation(fileErrorTexts.formatError);
-              return;
-            }
-          }
-        }
-        await processFiles(index + 1);
-      } else {
-        if (input.onChange) input.onChange({
-          files
-        });
-        setUpdatedFiles(files);
-        await buildPreviews(files);
-      }
-    };
-    await processFiles(0);
-  };
-  const loadDefaultValues = async function () {
-    var _input$value$index, _formattedImages$inde;
-    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    let accumulatedFiles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-    const length = Array.isArray(input.value) ? input.value.length : 1;
-    if (index === length) {
-      if (onLoaded) onLoaded();
-      if (notifyOnInitialLoad && input.onChange) input.onChange({
-        files: accumulatedFiles
-      });
-      setUpdatedFiles(accumulatedFiles);
-      buildPreviews(accumulatedFiles);
-      return;
-    }
-    const formattedImages = Array.isArray(input.value) ? input.value.flatMap(obj => Object.values(obj)[0]) : input.value;
-    const imageUrl = Array.isArray(input.value) ? ((_input$value$index = input.value[index]) === null || _input$value$index === void 0 ? void 0 : _input$value$index.url) || ((_formattedImages$inde = formattedImages[index]) === null || _formattedImages$inde === void 0 ? void 0 : _formattedImages$inde.url) : input.value;
-    getBlobFromUrl(imageUrl, async response => {
-      if (response) {
-        var _input$value$index2, _formattedImages$inde2;
-        const itemName = Array.isArray(input.value) ? ((_input$value$index2 = input.value[index]) === null || _input$value$index2 === void 0 ? void 0 : _input$value$index2.name) || ((_formattedImages$inde2 = formattedImages[index]) === null || _formattedImages$inde2 === void 0 ? void 0 : _formattedImages$inde2.name) : null;
-        const newFile = new File([response], itemName || getDefaultAttachment(response.type.substring(response.type.indexOf('/') + 1), index + 1), {
-          type: response.type
-        });
-        loadDefaultValues(index + 1, [...accumulatedFiles, newFile]);
-      } else {
-        setPreview(currentPreviews => {
-          let foundLoading = false;
-          return currentPreviews.map(previewElement => {
-            if (!foundLoading && previewElement.type === PREVIEW_TYPES.LOADING) {
-              foundLoading = true;
-              return {
-                ...previewElement,
-                type: PREVIEW_TYPES.ERROR
-              };
-            }
-            return previewElement;
-          });
-        });
-        loadDefaultValues(index + 1, accumulatedFiles);
-      }
-    });
-  };
-  useEffect(() => {
-    var _input$value3;
-    if (!isEmpty(updatedFiles)) buildPreviews(updatedFiles);else if (!isEmpty((_input$value3 = input.value) === null || _input$value3 === void 0 ? void 0 : _input$value3.files)) buildPreviews(input.value.files);
-    if (Array.isArray(input.value) && !isEmpty(input.value) || input.value && typeof input.value === 'string') {
-      if (isEmpty(preview)) {
-        const length = Array.isArray(input.value) ? input.value.length : 1;
-        setPreview(Array.from({
-          length
-        }, () => ({
-          type: PREVIEW_TYPES.LOADING
-        })));
-      }
-      loadDefaultValues();
-    }
-  }, [input]);
-  return /*#__PURE__*/React.createElement(Attachment, {
-    actions: actions,
-    acceptedFileTypes: acceptedFileTypes,
-    classes: classes,
-    containerClassname: containerClassname,
-    disabled: disabled,
-    dataTestId: dataTestId,
-    deleteDataTestId: deleteDataTestId,
-    error: error,
-    errorClassname: errorClassname,
-    errorText: errorText,
-    field: field,
-    fieldTypes: fieldTypes,
-    fileInputRef: fileInputRef,
-    helpText: helpText,
-    hideLabels: hideLabels,
-    icon: icon,
-    loadingTextClassname: loadingTextClassname,
-    maxFiles: maxFiles,
-    maxFileSize: getSizeInMB(maxFileSize),
-    onChange: onChange,
-    preview: preview,
-    previewDataTestId: previewDataTestId,
-    readOnly: readOnly,
-    titleVariant: titleVariant
-  });
-};
-AttachmentListContainer.propTypes = {
-  acceptedFileTypes: string,
-  actions: arrayOf(buttonTypes),
-  allowedPDFUploadSizes: arrayOf(shape({
-    name: string,
-    heightInPt: number,
-    widthInPt: number,
-    tolerance: number
-  })),
-  classes: objectOf(string),
-  containerClassname: string,
-  customValidation: func,
-  disabled: bool,
-  dataTestId: string,
-  deleteDataTestId: string,
-  disableResize: bool,
-  errorClassname: string,
-  field: any,
-  fieldTypes: arrayOf(string),
-  hideLabels: bool,
-  icon: node,
-  input: shape({
-    value: oneOfType([string, shape({
-      name: string,
-      type: string
-    })])
-  }),
-  loadingTextClassname: string,
-  maxFileSize: number,
-  onLoaded: func,
-  notifyOnInitialLoad: bool,
-  previewDataTestId: string,
-  readOnly: bool,
-  resizeConfig: shape({
-    type: string,
-    maxWidth: number,
-    maxHeight: number
-  }),
-  sanitize: func,
-  titleVariant: string
-};
-export default WithTheme(retrieveStyle)(AttachmentListContainer);
+import React,{useEffect,useRef,useState}from"react";import{func,arrayOf,string,shape,number,node,bool,objectOf,oneOfType,any}from"prop-types";import{fileSignatureValidation,fileSizeValidation}from"@widergy/web-utils/lib/validate";import{resizeImage}from"@widergy/web-utils/lib/image";import{isIE}from"@widergy/web-utils/lib/browser";import isEmpty from"lodash/isEmpty";import{buttonTypes}from"../../types/buttonTypes";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";import{FORMAT_ERROR_TEXT,SIZE_ERROR_TEXT,ASPECT_RATIO_ERROR_TEXT,MAX_FILES_ERROR,DEFAULT_MAX_FILES,PREVIEW_TYPES}from"./constants";import Attachment from"./layout";import{pdfAspectRatioValidation,isImage,isPDF,getSizeInMB,hasPreview,isDownloadable,getNotRepeatedFiles,getBlobFromUrl,getDefaultAttachment}from"./utils";const AttachmentListContainer=_ref=>{var _field$configuration,_field$configuration2,_field$configuration3,_field$configuration4,_input$value;let{acceptedFileTypes:defaultAcceptedFileTypes,actions:actions,allowedPDFUploadSizes:allowedPDFUploadSizes,classes:classes,containerClassname:containerClassname,customValidation:customValidation,dataTestId:dataTestId,deleteDataTestId:deleteDataTestId,disabled:disabled,disableResize:disableResize,errorClassname:errorClassname,field:field,fieldTypes:fieldTypes=[],hideLabels:hideLabels,icon:icon,input:input,loadingTextClassname:loadingTextClassname,maxFileSize:defaultMaxFileSize=99999999,onLoaded:onLoaded,notifyOnInitialLoad:notifyOnInitialLoad=!0,previewDataTestId:previewDataTestId,readOnly:readOnly=!1,resizeConfig:resizeConfig,sanitize:sanitize,titleVariant:titleVariant}=_ref;const helpText=null==field||null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.help_text,maxFileSize=(null==field||null===(_field$configuration2=field.configuration)||void 0===_field$configuration2?void 0:_field$configuration2.max_file_size)||defaultMaxFileSize,acceptedFileTypes=(null==field||null===(_field$configuration3=field.configuration)||void 0===_field$configuration3?void 0:_field$configuration3.accepted_file_types)||defaultAcceptedFileTypes,maxFiles=(null==field||null===(_field$configuration4=field.configuration)||void 0===_field$configuration4?void 0:_field$configuration4.max_files)||DEFAULT_MAX_FILES,[preview,setPreview]=useState([]),[error,setError]=useState(!1),[errorText,setErrorText]=useState(FORMAT_ERROR_TEXT),fileInputRef=useRef(null),[updatedFiles,setUpdatedFiles]=useState((null==input||null===(_input$value=input.value)||void 0===_input$value?void 0:_input$value.files)||[]),onFailValidation=(errorMessage,dynamicData)=>{setError(!0),setErrorText(dynamicData?"".concat(errorMessage,"(").concat(dynamicData,")"):errorMessage)},buildPreviews=async files=>{const loadPreview=file=>new Promise((resolve,reject)=>{const reader=new FileReader;reader.onload=e=>{hasPreview(file)||isDownloadable(file)?resolve({src:e.target.result,file:file}):resolve({src:null,file:file})},reader.onerror=e=>reject(e),reader.readAsDataURL(file)});try{const previewItems=(await Promise.all(files.map(loadPreview))).map(_ref2=>{let{src:src,file:file}=_ref2;return((src,item)=>({...item,src:src}))(src,{type:file.type,name:file.name,size:getSizeInMB(file.size),onClick:()=>{return(fileName=file.name)&&setPreview(prevPreview=>prevPreview.filter(item=>item.name!==fileName)),setUpdatedFiles(prevFiles=>{const filteredFiles=Object.values(prevFiles).filter(item=>item.name!==fileName);return input.onChange&&input.onChange(isEmpty(filteredFiles)?null:{files:filteredFiles}),filteredFiles}),fileInputRef.current&&(fileInputRef.current.value=null),void setError(!1);var fileName}})});setPreview(currentPreviews=>getNotRepeatedFiles([...(currentPreviews||[]).filter(item=>"loading"!==item.type),...previewItems]))}catch(e){setPreview(currentPreviews=>(currentPreviews||[]).filter(item=>"loading"!==item.type)),onFailValidation(null==e?void 0:e.message)}},loadDefaultValues=async function(){var _input$value$index,_formattedImages$inde;let index=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,accumulatedFiles=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];const length=Array.isArray(input.value)?input.value.length:1;if(index===length)return onLoaded&&onLoaded(),notifyOnInitialLoad&&input.onChange&&input.onChange({files:accumulatedFiles}),setUpdatedFiles(accumulatedFiles),void buildPreviews(accumulatedFiles);const formattedImages=Array.isArray(input.value)?input.value.flatMap(obj=>Object.values(obj)[0]):input.value,imageUrl=Array.isArray(input.value)?(null===(_input$value$index=input.value[index])||void 0===_input$value$index?void 0:_input$value$index.url)||(null===(_formattedImages$inde=formattedImages[index])||void 0===_formattedImages$inde?void 0:_formattedImages$inde.url):input.value;getBlobFromUrl(imageUrl,async response=>{if(response){var _input$value$index2,_formattedImages$inde2;const itemName=Array.isArray(input.value)?(null===(_input$value$index2=input.value[index])||void 0===_input$value$index2?void 0:_input$value$index2.name)||(null===(_formattedImages$inde2=formattedImages[index])||void 0===_formattedImages$inde2?void 0:_formattedImages$inde2.name):null,newFile=new File([response],itemName||getDefaultAttachment(response.type.substring(response.type.indexOf("/")+1),index+1),{type:response.type});loadDefaultValues(index+1,[...accumulatedFiles,newFile])}else setPreview(currentPreviews=>{let foundLoading=!1;return currentPreviews.map(previewElement=>foundLoading||previewElement.type!==PREVIEW_TYPES.LOADING?previewElement:(foundLoading=!0,{...previewElement,type:PREVIEW_TYPES.ERROR}))}),loadDefaultValues(index+1,accumulatedFiles)})};return useEffect(()=>{var _input$value3;if(isEmpty(updatedFiles)?isEmpty(null===(_input$value3=input.value)||void 0===_input$value3?void 0:_input$value3.files)||buildPreviews(input.value.files):buildPreviews(updatedFiles),Array.isArray(input.value)&&!isEmpty(input.value)||input.value&&"string"==typeof input.value){if(isEmpty(preview)){const length=Array.isArray(input.value)?input.value.length:1;setPreview(Array.from({length:length},()=>({type:PREVIEW_TYPES.LOADING})))}loadDefaultValues()}},[input]),React.createElement(Attachment,{actions:actions,acceptedFileTypes:acceptedFileTypes,classes:classes,containerClassname:containerClassname,disabled:disabled,dataTestId:dataTestId,deleteDataTestId:deleteDataTestId,error:error,errorClassname:errorClassname,errorText:errorText,field:field,fieldTypes:fieldTypes,fileInputRef:fileInputRef,helpText:helpText,hideLabels:hideLabels,icon:icon,loadingTextClassname:loadingTextClassname,maxFiles:maxFiles,maxFileSize:getSizeInMB(maxFileSize),onChange:async ev=>{var _input$value2;const prevFiles=(null===(_input$value2=input.value)||void 0===_input$value2?void 0:_input$value2.files)||updatedFiles,files=Object.values(isEmpty(prevFiles)?ev.target.files:getNotRepeatedFiles([...prevFiles,...ev.target.files])),fileErrorTexts={formatError:FORMAT_ERROR_TEXT,sizeError:"".concat(SIZE_ERROR_TEXT," ").concat(getSizeInMB(maxFileSize),"MB."),aspectRatioError:"".concat(ASPECT_RATIO_ERROR_TEXT," ").concat(null==allowedPDFUploadSizes?void 0:allowedPDFUploadSizes.map(aspectRatio=>aspectRatio.name).join(" - "),")")};setError(!1);const processFiles=async index=>{if(index<files.length){if(maxFiles&&files.length>maxFiles)return void onFailValidation(MAX_FILES_ERROR,maxFiles);let file=files[index];if(file){let validation=!customValidation||await customValidation(file,onFailValidation);if(validation){if(validation=await fileSignatureValidation(file,fieldTypes,file.type),!validation)return void onFailValidation(fileErrorTexts.formatError);if(sanitize&&(file=await sanitize(file)),validation=fileSizeValidation(file,maxFileSize),validation&&isPDF(file)&&!isEmpty(allowedPDFUploadSizes)&&(validation=await pdfAspectRatioValidation(file,allowedPDFUploadSizes),!validation))return void onFailValidation(fileErrorTexts.aspectRatioError);if(validation||disableResize||!isImage(file)||isIE()||(file=await resizeImage(file,resizeConfig),validation=fileSizeValidation(file,maxFileSize),files[index]=file),!validation)return void onFailValidation(fileErrorTexts.sizeError)}}await processFiles(index+1)}else input.onChange&&input.onChange({files:files}),setUpdatedFiles(files),await buildPreviews(files)};await processFiles(0)},preview:preview,previewDataTestId:previewDataTestId,readOnly:readOnly,titleVariant:titleVariant})};AttachmentListContainer.propTypes={acceptedFileTypes:string,actions:arrayOf(buttonTypes),allowedPDFUploadSizes:arrayOf(shape({name:string,heightInPt:number,widthInPt:number,tolerance:number})),classes:objectOf(string),containerClassname:string,customValidation:func,disabled:bool,dataTestId:string,deleteDataTestId:string,disableResize:bool,errorClassname:string,field:any,fieldTypes:arrayOf(string),hideLabels:bool,icon:node,input:shape({value:oneOfType([string,shape({name:string,type:string})])}),loadingTextClassname:string,maxFileSize:number,onLoaded:func,notifyOnInitialLoad:bool,previewDataTestId:string,readOnly:bool,resizeConfig:shape({type:string,maxWidth:number,maxHeight:number}),sanitize:func,titleVariant:string};export default WithTheme(retrieveStyle)(AttachmentListContainer);

package/dist/esm/components/UTAttachmentList/layout.js

@@ -1,200 +1 @@
-import React, { Fragment, useState } from 'react';
-import { shape, string, bool, func, arrayOf, objectOf, elementType, instanceOf, number, object } from 'prop-types';
-import { inputFiles } from '@widergy/web-utils/lib/constants/files';
-import isEmpty from 'lodash/isEmpty';
-import download from 'downloadjs';
-import { buttonTypes } from '../../types/buttonTypes';
-import UTLabel from '../UTLabel';
-import UTButton from '../UTButton';
-import UTIcon from '../UTIcon';
-import UTFieldLabel from '../UTFieldLabel';
-import { DEFAULT_UPLOADING_TEXT, FILE_NOT_FOUND_ERROR_TEXT, FORMAT_FILE_LABEL, ICON_SIZE, INDICATIONS, MAX_SIZE_FILE_LABEL, MB_LABEL, PREVIEW_TYPES, UPLOAD_FILE, previewPropType } from './constants';
-import Preview from './components/Preview';
-import { getAvailableFileTypesLabel, isAudio, isDownloadable, isImage, isVideo } from './utils';
-import PreviewModal from './components/PreviewModal';
-import styles from './styles.module.scss';
-const AttachmentList = _ref => {
-  var _field$configuration;
-  let {
-    actions,
-    acceptedFileTypes,
-    classes,
-    dataTestId,
-    deleteDataTestId,
-    disabled,
-    error,
-    errorText,
-    field,
-    fieldTypes = [],
-    fileInputRef,
-    helpText,
-    hideLabels,
-    maxFiles,
-    maxFileSize,
-    onChange,
-    preview,
-    previewDataTestId,
-    readOnly,
-    RemoveIcon,
-    titleVariant
-  } = _ref;
-  const shouldShowUpperTitle = ((field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) || hideLabels) && (field === null || field === void 0 ? void 0 : field.title);
-  const fieldType = acceptedFileTypes || fieldTypes.map(type => inputFiles[type].inputType).join();
-  const Icon = RemoveIcon || 'IconTrash';
-  const previewIsEmpty = isEmpty(preview);
-  const isUploadFileAvailable = preview.length < maxFiles;
-  const [previewModalIsOpen, setPreviewModalIsOpen] = useState(false);
-  const [selectedPreview, setSelectedPreview] = useState(null);
-  const openPreviewModal = clickedPreview => {
-    setSelectedPreview(clickedPreview);
-    setPreviewModalIsOpen(true);
-  };
-  const closePreviewModal = () => setPreviewModalIsOpen(false);
-  return /*#__PURE__*/React.createElement(Fragment, null, shouldShowUpperTitle && /*#__PURE__*/React.createElement("div", {
-    className: styles.upperTitleContainer
-  }, /*#__PURE__*/React.createElement(UTFieldLabel, {
-    actions: actions,
-    readOnly: field.read_only,
-    size: titleVariant,
-    required: field.required
-  }, field === null || field === void 0 ? void 0 : field.title)), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.container, " ").concat(classes.container, " ").concat(error && classes.errorContainer, " ").concat(readOnly && classes.readOnlyContainer)
-  }, !previewIsEmpty && preview.map(previewItem => /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.previewContainer, " ").concat(classes.previewContainer),
-    "data-testid": previewDataTestId
-  }, previewItem.type === PREVIEW_TYPES.LOADING ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(UTIcon, {
-    name: "IconLoader",
-    className: styles.loaderIcon,
-    size: ICON_SIZE,
-    colorTheme: "accent"
-  }), /*#__PURE__*/React.createElement(UTLabel, {
-    className: styles.loadingText,
-    colorTheme: "gray",
-    variant: "small"
-  }, DEFAULT_UPLOADING_TEXT), /*#__PURE__*/React.createElement("div", null)) : previewItem.type === PREVIEW_TYPES.ERROR ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(UTIcon, {
-    name: "IconX",
-    colorTheme: "error",
-    size: ICON_SIZE
-  }), /*#__PURE__*/React.createElement(UTLabel, {
-    className: styles.errorText,
-    colorTheme: "error",
-    variant: "small"
-  }, FILE_NOT_FOUND_ERROR_TEXT), /*#__PURE__*/React.createElement("div", null)) : /*#__PURE__*/React.createElement(Fragment, null, previewItem.src ? /*#__PURE__*/React.createElement(Preview, {
-    classes: classes,
-    openPreviewModal: openPreviewModal,
-    preview: previewItem,
-    previewProps: preview.previewProps
-  }) : /*#__PURE__*/React.createElement(UTIcon, {
-    name: "IconCheck",
-    colorTheme: "accent",
-    size: ICON_SIZE
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.fileContainer
-  }, /*#__PURE__*/React.createElement(UTLabel, {
-    colorTheme: "gray",
-    variant: "small"
-  }, previewItem.name), /*#__PURE__*/React.createElement(UTLabel, {
-    colorTheme: "gray",
-    variant: "small"
-  }, previewItem.size, MB_LABEL)), (isAudio(previewItem) || isVideo(previewItem)) && /*#__PURE__*/React.createElement(UTButton, {
-    disabled: disabled,
-    Icon: "IconPlayerPlay",
-    onClick: () => {
-      setSelectedPreview(previewItem);
-      setPreviewModalIsOpen(true);
-    },
-    size: "small",
-    variant: "text"
-  }), (isDownloadable(previewItem) || readOnly && isImage(previewItem)) && previewItem.src && /*#__PURE__*/React.createElement(UTButton, {
-    Icon: "IconDownload",
-    onClick: () => download(previewItem.src, previewItem.name, previewItem.type),
-    size: "small",
-    variant: "text"
-  }), !readOnly && /*#__PURE__*/React.createElement(UTButton, {
-    dataTestId: deleteDataTestId,
-    disabled: disabled,
-    Icon: Icon,
-    onClick: previewItem.onClick,
-    size: "small",
-    variant: "text"
-  })))), !readOnly && previewIsEmpty && /*#__PURE__*/React.createElement(UTIcon, {
-    name: "IconCloudUpload",
-    className: "".concat(styles.filesIcon, " ").concat(classes.filesIcon),
-    colorTheme: "accent",
-    size: ICON_SIZE
-  }), !readOnly && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.labelAndInputContainer, " ").concat(!previewIsEmpty && styles.positionRelative)
-  }, previewIsEmpty && /*#__PURE__*/React.createElement(UTLabel, {
-    colorTheme: "accent"
-  }, INDICATIONS), /*#__PURE__*/React.createElement(UTButton, {
-    classNames: {
-      root: !previewIsEmpty && styles.uploadButtonFullWidth
-    },
-    colorTheme: "primary",
-    disabled: !isUploadFileAvailable,
-    Icon: "IconUpload",
-    variant: "semitransparent"
-  }, UPLOAD_FILE), isUploadFileAvailable && /*#__PURE__*/React.createElement("input", {
-    className: styles.input,
-    "data-testid": dataTestId,
-    accept: fieldType,
-    ref: fileInputRef,
-    type: "file",
-    onChange: onChange,
-    disabled: disabled,
-    multiple: true
-  })), !readOnly && /*#__PURE__*/React.createElement(UTLabel, {
-    colorTheme: "gray",
-    variant: "small",
-    className: styles.aclaration
-  }, "".concat(FORMAT_FILE_LABEL).concat(getAvailableFileTypesLabel(fieldType), "."), " ", /*#__PURE__*/React.createElement("br", null), "".concat(MAX_SIZE_FILE_LABEL).concat(maxFileSize, "MB"))), helpText && /*#__PURE__*/React.createElement(UTLabel, {
-    className: styles.helpText,
-    colorTheme: "gray",
-    variant: "small"
-  }, helpText), error && /*#__PURE__*/React.createElement("div", {
-    className: styles.errorLabelContainer
-  }, /*#__PURE__*/React.createElement(UTIcon, {
-    name: "IconX",
-    colorTheme: "error",
-    size: ICON_SIZE
-  }), /*#__PURE__*/React.createElement(UTLabel, {
-    className: styles.errorText,
-    colorTheme: "error",
-    variant: "small"
-  }, errorText)), previewModalIsOpen && /*#__PURE__*/React.createElement(PreviewModal, {
-    preview: selectedPreview,
-    previewProps: preview.previewProps,
-    previewModalIsOpen: previewModalIsOpen,
-    closePreviewModal: closePreviewModal
-  }));
-};
-AttachmentList.propTypes = {
-  acceptedFileTypes: string,
-  actions: arrayOf(buttonTypes),
-  classes: objectOf(string),
-  dataTestId: string,
-  deleteDataTestId: string,
-  disabled: bool,
-  error: bool,
-  errorText: string,
-  field: object,
-  fieldTypes: arrayOf(string),
-  fileInputRef: objectOf(shape({
-    current: instanceOf(Element)
-  })),
-  helpText: string,
-  hideLabels: bool,
-  maxFileSize: number,
-  maxFiles: number,
-  onChange: func,
-  preview: arrayOf(shape({
-    src: string,
-    type: string
-  })),
-  previewDataTestId: string,
-  previewProps: previewPropType,
-  readOnly: bool,
-  RemoveIcon: elementType,
-  titleVariant: string
-};
-export default AttachmentList;
+import React,{Fragment,useState}from"react";import{shape,string,bool,func,arrayOf,objectOf,elementType,instanceOf,number,object}from"prop-types";import{inputFiles}from"@widergy/web-utils/lib/constants/files";import isEmpty from"lodash/isEmpty";import download from"downloadjs";import{buttonTypes}from"../../types/buttonTypes";import UTLabel from"../UTLabel";import UTButton from"../UTButton";import UTIcon from"../UTIcon";import UTFieldLabel from"../UTFieldLabel";import{DEFAULT_UPLOADING_TEXT,FILE_NOT_FOUND_ERROR_TEXT,FORMAT_FILE_LABEL,ICON_SIZE,INDICATIONS,MAX_SIZE_FILE_LABEL,MB_LABEL,PREVIEW_TYPES,UPLOAD_FILE,previewPropType}from"./constants";import Preview from"./components/Preview";import{getAvailableFileTypesLabel,isAudio,isDownloadable,isImage,isVideo}from"./utils";import PreviewModal from"./components/PreviewModal";import styles from"./styles.module.scss";const AttachmentList=_ref=>{var _field$configuration;let{actions:actions,acceptedFileTypes:acceptedFileTypes,classes:classes,dataTestId:dataTestId,deleteDataTestId:deleteDataTestId,disabled:disabled,error:error,errorText:errorText,field:field,fieldTypes:fieldTypes=[],fileInputRef:fileInputRef,helpText:helpText,hideLabels:hideLabels,maxFiles:maxFiles,maxFileSize:maxFileSize,onChange:onChange,preview:preview,previewDataTestId:previewDataTestId,readOnly:readOnly,RemoveIcon:RemoveIcon,titleVariant:titleVariant}=_ref;const shouldShowUpperTitle=((null==field||null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.ignore_title)||hideLabels)&&(null==field?void 0:field.title),fieldType=acceptedFileTypes||fieldTypes.map(type=>inputFiles[type].inputType).join(),Icon=RemoveIcon||"IconTrash",previewIsEmpty=isEmpty(preview),isUploadFileAvailable=preview.length<maxFiles,[previewModalIsOpen,setPreviewModalIsOpen]=useState(!1),[selectedPreview,setSelectedPreview]=useState(null),openPreviewModal=clickedPreview=>{setSelectedPreview(clickedPreview),setPreviewModalIsOpen(!0)};return React.createElement(Fragment,null,shouldShowUpperTitle&&React.createElement("div",{className:styles.upperTitleContainer},React.createElement(UTFieldLabel,{actions:actions,readOnly:field.read_only,size:titleVariant,required:field.required},null==field?void 0:field.title)),React.createElement("div",{className:"".concat(styles.container," ").concat(classes.container," ").concat(error&&classes.errorContainer," ").concat(readOnly&&classes.readOnlyContainer)},!previewIsEmpty&&preview.map(previewItem=>React.createElement("div",{className:"".concat(styles.previewContainer," ").concat(classes.previewContainer),"data-testid":previewDataTestId},previewItem.type===PREVIEW_TYPES.LOADING?React.createElement(Fragment,null,React.createElement(UTIcon,{name:"IconLoader",className:styles.loaderIcon,size:ICON_SIZE,colorTheme:"accent"}),React.createElement(UTLabel,{className:styles.loadingText,colorTheme:"gray",variant:"small"},DEFAULT_UPLOADING_TEXT),React.createElement("div",null)):previewItem.type===PREVIEW_TYPES.ERROR?React.createElement(Fragment,null,React.createElement(UTIcon,{name:"IconX",colorTheme:"error",size:ICON_SIZE}),React.createElement(UTLabel,{className:styles.errorText,colorTheme:"error",variant:"small"},FILE_NOT_FOUND_ERROR_TEXT),React.createElement("div",null)):React.createElement(Fragment,null,previewItem.src?React.createElement(Preview,{classes:classes,openPreviewModal:openPreviewModal,preview:previewItem,previewProps:preview.previewProps}):React.createElement(UTIcon,{name:"IconCheck",colorTheme:"accent",size:ICON_SIZE}),React.createElement("div",{className:styles.fileContainer},React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},previewItem.name),React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},previewItem.size,MB_LABEL)),(isAudio(previewItem)||isVideo(previewItem))&&React.createElement(UTButton,{disabled:disabled,Icon:"IconPlayerPlay",onClick:()=>{setSelectedPreview(previewItem),setPreviewModalIsOpen(!0)},size:"small",variant:"text"}),(isDownloadable(previewItem)||readOnly&&isImage(previewItem))&&previewItem.src&&React.createElement(UTButton,{Icon:"IconDownload",onClick:()=>download(previewItem.src,previewItem.name,previewItem.type),size:"small",variant:"text"}),!readOnly&&React.createElement(UTButton,{dataTestId:deleteDataTestId,disabled:disabled,Icon:Icon,onClick:previewItem.onClick,size:"small",variant:"text"})))),!readOnly&&previewIsEmpty&&React.createElement(UTIcon,{name:"IconCloudUpload",className:"".concat(styles.filesIcon," ").concat(classes.filesIcon),colorTheme:"accent",size:ICON_SIZE}),!readOnly&&React.createElement("div",{className:"".concat(styles.labelAndInputContainer," ").concat(!previewIsEmpty&&styles.positionRelative)},previewIsEmpty&&React.createElement(UTLabel,{colorTheme:"accent"},INDICATIONS),React.createElement(UTButton,{classNames:{root:!previewIsEmpty&&styles.uploadButtonFullWidth},colorTheme:"primary",disabled:!isUploadFileAvailable,Icon:"IconUpload",variant:"semitransparent"},UPLOAD_FILE),isUploadFileAvailable&&React.createElement("input",{className:styles.input,"data-testid":dataTestId,accept:fieldType,ref:fileInputRef,type:"file",onChange:onChange,disabled:disabled,multiple:!0})),!readOnly&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small",className:styles.aclaration},"".concat(FORMAT_FILE_LABEL).concat(getAvailableFileTypesLabel(fieldType),".")," ",React.createElement("br",null),"".concat(MAX_SIZE_FILE_LABEL).concat(maxFileSize,"MB"))),helpText&&React.createElement(UTLabel,{className:styles.helpText,colorTheme:"gray",variant:"small"},helpText),error&&React.createElement("div",{className:styles.errorLabelContainer},React.createElement(UTIcon,{name:"IconX",colorTheme:"error",size:ICON_SIZE}),React.createElement(UTLabel,{className:styles.errorText,colorTheme:"error",variant:"small"},errorText)),previewModalIsOpen&&React.createElement(PreviewModal,{preview:selectedPreview,previewProps:preview.previewProps,previewModalIsOpen:previewModalIsOpen,closePreviewModal:()=>setPreviewModalIsOpen(!1)}))};AttachmentList.propTypes={acceptedFileTypes:string,actions:arrayOf(buttonTypes),classes:objectOf(string),dataTestId:string,deleteDataTestId:string,disabled:bool,error:bool,errorText:string,field:object,fieldTypes:arrayOf(string),fileInputRef:objectOf(shape({current:instanceOf(Element)})),helpText:string,hideLabels:bool,maxFileSize:number,maxFiles:number,onChange:func,preview:arrayOf(shape({src:string,type:string})),previewDataTestId:string,previewProps:previewPropType,readOnly:bool,RemoveIcon:elementType,titleVariant:string};export default AttachmentList;

package/dist/esm/components/UTAttachmentList/theme.js

@@ -1,21 +1 @@
-export const retrieveStyle = _ref => {
-  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5;
-  let {
-    theme
-  } = _ref;
-  return {
-    container: {
-      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['03'],
-      border: "1px dashed ".concat(((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.actions) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.accent) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2['04']) || theme.Palette.accent['04'])
-    },
-    errorContainer: {
-      border: "2px solid ".concat((_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.error['04'])
-    },
-    previewContainer: {
-      backgroundColor: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.light['01']
-    },
-    readOnlyContainer: {
-      border: "1px solid ".concat((_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['04'])
-    }
-  };
-};
+export const retrieveStyle=_ref=>{var _theme$Palette,_theme$Palette2,_theme$Palette3,_theme$Palette4,_theme$Palette5;let{theme:theme}=_ref;return{container:{backgroundColor:null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.light["03"],border:"1px dashed ".concat((null===(_theme$Palette2=theme.Palette)||void 0===_theme$Palette2||null===(_theme$Palette2=_theme$Palette2.actions)||void 0===_theme$Palette2||null===(_theme$Palette2=_theme$Palette2.accent)||void 0===_theme$Palette2?void 0:_theme$Palette2["04"])||theme.Palette.accent["04"])},errorContainer:{border:"2px solid ".concat(null===(_theme$Palette3=theme.Palette)||void 0===_theme$Palette3?void 0:_theme$Palette3.error["04"])},previewContainer:{backgroundColor:null===(_theme$Palette4=theme.Palette)||void 0===_theme$Palette4?void 0:_theme$Palette4.light["01"]},readOnlyContainer:{border:"1px solid ".concat(null===(_theme$Palette5=theme.Palette)||void 0===_theme$Palette5?void 0:_theme$Palette5.light["04"])}}};