diginet-core-ui 1.3.87 → 1.3.88

package/components/form-control/attachment/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { ButtonIcon, HelperText, Label, LinearProgress, List, ListItem, ListItemText, ModalSample, Notify, Popover, Popup, ScrollBar, Slider, SliderItem, Typography } from "../..";
@@ -65,61 +66,75 @@ const oldAttached = [];
 const allNewAttached = new FormData();
 const attached = [];
 const chosenItems = [];
+
 const getType = data => {
   if (data.type !== undefined) {
     var _type$match;
+
     const pattern = /word|sheet|presentation|pdf|image|compressed/i;
     let type = data.type;
+
     if (!type) {
       if (/rar/.test(data.name)) {
         type = 'compressed';
       }
     }
+
     return ((_type$match = type.match(pattern)) === null || _type$match === void 0 ? void 0 : _type$match[0]) || 'default';
   } else {
     var _data$FileName;
+
     const FileExt = (_data$FileName = data.FileName) === null || _data$FileName === void 0 ? void 0 : _data$FileName.slice(data.FileName.lastIndexOf('.'));
     return getFileType(FileExt, 'default');
   }
 };
+
 const getDateTime = date => {
   if (String(date) === 'Invalid Date') return 'unknown';
   return moment(date).format('DD/MM/YYYY, HH:mm:ss');
 };
+
 const getNewUnitSize = (sizeName, totalSize, num) => {
   if (sizeName === 'B' && num === 1 || sizeName === 'TB' && num === -1) return [sizeName, totalSize];
   const arraySize = ['TB', 'GB', 'MB', 'KB', 'B'];
   const index = arraySize.indexOf(sizeName);
-  const newTotalSize = totalSize * Math.pow(1024, num);
-  // newTotalSize = Math.round(newTotalSize*100)/100;
+  const newTotalSize = totalSize * Math.pow(1024, num); // newTotalSize = Math.round(newTotalSize*100)/100;
+
   return [arraySize[index + num], newTotalSize];
 };
+
 const getBit = (size, unit) => {
   switch (true) {
     case /^B$/i.test(unit):
       return size * 1;
+
     case /KB/i.test(unit):
       return size * 1024;
+
     case /MB/i.test(unit):
       return size * 1024 ** 2;
+
     case /GB/i.test(unit):
       return size * 1024 ** 3;
+
     case /TB/i.test(unit):
       return size * 1024 ** 4;
+
     default:
       return size * 1024 * 1024;
   }
 };
+
 const formatBytes = (bytes, decimals = 2) => {
   if (!+bytes) return '0 Bytes';
   const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const i = Math.floor(Math.log(bytes) / Math.log(k)); // return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 
-  // return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
   return [parseFloat((bytes / Math.pow(k, i)).toFixed(dm)), sizes[i]];
 };
+
 const divideSizeMap = new Map([['B', 1], ['KB', 1024], ['MB', 1024 ** 2], ['GB', 1024 ** 3], ['TB', 1024 ** 4]]);
 const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   accept,
@@ -173,12 +188,14 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [isEmpty, setIsEmpty] = useState(null);
   const [newDataState, setNewDataState] = useState([]);
   const isEnable = !readOnly && !disabled;
-  const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable);
 
-  // Start handler
+  const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable); // Start handler
+
+
   const onSortElement = (e, type) => {
     let multi = 1;
     const currentActive = popoverRef.current.querySelector('.DGN-Active');
+
     if (currentActive) {
       if (e.currentTarget.classList.contains('DGN-Active')) {
         if (e.currentTarget.classList.contains('DGN-Decrease')) {
@@ -192,11 +209,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         currentActive.classList.remove('DGN-Active');
       }
     }
+
     e.currentTarget.classList.add('DGN-Active');
     const attachedList = Array.from(attachedRef.current.querySelectorAll('.attachment-row'));
     attachedList.sort((a, b) => {
       let textA = a.querySelector('.' + (type === 'filesize' ? 'filename' : type)).textContent;
       let textB = b.querySelector('.' + (type === 'filesize' ? 'filename' : type)).textContent;
+
       if (type === 'datetime') {
         textA = textA.replace(/.{10}/, text => moment(text, 'DD/MM/YYYY').format('YYYY/MM/DD'));
         textB = textB.replace(/.{10}/, text => moment(text, 'DD/MM/YYYY').format('YYYY/MM/DD'));
@@ -206,12 +225,14 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         textA = (objA.size || objA.FileSize).toString();
         textB = (objB.size || objB.FileSize).toString();
       }
+
       return multi * textA.localeCompare(textB, 'en', {
         numeric: type === 'filesize'
       });
     });
     attached.sort((a, b) => {
       let valueA, valueB;
+
       if (type === 'filesize' || type === 'datetime') {
         if (type === 'filesize') {
           valueA = a.size || a.FileSize;
@@ -228,6 +249,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         valueA = a[type === 'filename' ? 'FileName' : 'UserName'] || ownerName;
         valueB = b[type === 'filename' ? 'FileName' : 'UserName'] || ownerName;
       }
+
       return multi * valueA.toString().localeCompare(valueB.toString(), 'en', {
         numeric: type === 'filesize' || type === 'datetime'
       });
@@ -236,47 +258,63 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       attachedRef.current.appendChild(el);
     });
   };
+
   const afterChangeFile = (length = 0) => {
     setIsEmpty(!length);
   };
+
   const onChangeFiles = async e => {
     var _e$target, _e$target$files;
+
     if (!isEnable) return;
     e.persist();
+
     if (e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && (_e$target$files = _e$target.files) !== null && _e$target$files !== void 0 && _e$target$files.length) {
       let files = e.target.files;
       const lengthAttached = attached.length;
+
       for (let i = 0; i < files.length; i++) {
         if (i + 1 > maxFile - lengthAttached || files[i].size > maxSize.current || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
           if (i + 1 > maxFile - lengthAttached) {
             var _files$i;
+
             notifyRef.current.instance.show(`${(_files$i = files[i]) === null || _files$i === void 0 ? void 0 : _files$i.name} - ${uploadErrorInfo['maxFile']}`);
           } else if (files[i].size > maxSize.current) {
             var _files$i2;
+
             notifyRef.current.instance.show(`${(_files$i2 = files[i]) === null || _files$i2 === void 0 ? void 0 : _files$i2.name} - ${uploadErrorInfo['maxSize']}`);
           } else if (!checkAcceptFileType(files[i])) {
             var _files$i3;
+
             notifyRef.current.instance.show(`${(_files$i3 = files[i]) === null || _files$i3 === void 0 ? void 0 : _files$i3.name} - ${uploadErrorInfo['fileType']}`);
           } else {
             var _files$i4;
+
             notifyRef.current.instance.show(`${(_files$i4 = files[i]) === null || _files$i4 === void 0 ? void 0 : _files$i4.name} - ${uploadErrorInfo['existingFile']}`);
           }
+
           files = removeFileOutInputFiles(i, true);
           i--;
         }
       }
+
       const length = files.length;
+
       if (!lengthAttached && !length) {
         afterChangeFile();
         return;
       }
+
       afterChangeFile(lengthAttached + length);
+
       if (multiple || inputProps && inputProps.multiple) {
         for (let i = 0; i < length; i++) {
           files[i].FileName = files[i].name;
           attached.push(files[i]);
         }
+
         setNewDataState([...newDataState, ...Array.from(files)]);
+
         for (let i = 0; i < length; i++) {
           files[i].URL = await onProgressing(files[i]);
         }
@@ -286,6 +324,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         attached.push(files[0]);
         files[0].URL = await onProgressing(files[0]);
       }
+
       insertAttached(files);
       stripDomain();
       if (onChange) onChange({
@@ -299,40 +338,49 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       afterChangeFile();
     }
   };
+
   const onProgressing = file => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
       let url;
       reader.readAsDataURL(file);
+
       reader.onload = e => {
         url = e.target.result;
       };
+
       reader.onloadstart = () => {
         attachedRef.current.querySelector(`.css-${AttachedLinearCSS.name}-attached`).childNodes[0].style.width = '0%';
       };
+
       reader.onprogress = e => {
         attachedRef.current.querySelector(`.css-${AttachedLinearCSS.name}-attached`).childNodes[0].style.width = e.loaded / e.total * 100 + '%';
       };
+
       reader.onloadend = () => {
         setTimeout(() => {
           attachedRef.current.querySelector(`.css-${AttachedLinearCSS.name}-attached`).parentNode.remove();
           resolve(url);
         }, 200);
       };
+
       reader.onerror = () => {
         console.log('Upload file fail');
         reject(false);
       };
     });
   };
+
   const calculateSize = size => {
     if (!size && size !== 0) return 'unknown';
     let totalSize;
     let unitSizeName;
     const divideSize = unitSize ? divideSizeMap.get(unitSize.toUpperCase()) : null;
+
     if (divideSize) {
       totalSize = size / divideSize;
       unitSizeName = unitSize.toUpperCase();
+
       while (totalSize < 0.01 && unitSizeName !== 'B') {
         [unitSizeName, totalSize] = getNewUnitSize(unitSizeName, totalSize, 1);
       }
@@ -340,27 +388,34 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // auto-detect unit size name
       [totalSize, unitSizeName] = formatBytes(size);
     }
+
     if (totalSize < 1000) {
       totalSize = Math.round(totalSize * 100) / 100;
     } else {
       totalSize = Math.round(totalSize);
     }
+
     return totalSize + ' ' + unitSizeName;
   };
+
   const onShowPopup = () => {
     setShowPopup(true);
   };
+
   const onClosePopup = () => {
     setShowPopup(false);
+
     if (isDeleteAll.current) {
       isDeleteAll.current = false;
       chosenItems.length = 0;
       removeActiveChosenItem();
     }
   };
+
   const onDownloadMultiple = () => {
     const index = chosenItems[0];
     let file;
+
     if (index < oldAttached.length) {
       file = mountDomain(oldAttached[index]);
       onDownload(file.URL, file.FileName);
@@ -370,6 +425,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onDownload(file.URL, file.name);
     }
   };
+
   const onRemoveMultiple = () => {
     const nodeList = attachedRef.current.querySelectorAll('.chosen');
     const recentRemovedAttached = [];
@@ -377,18 +433,22 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const parent = itemEl.parentNode;
       const index = Array.from(attachedRef.current.children).indexOf(parent);
       const deletedFile = attached.splice(index, 1)[0];
+
       if (Object.prototype.toString.call(deletedFile) === '[object File]') {
         removeFileOutInputFiles(allNewAttached.getAll('files').findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate));
       } else {
         oldAttached.splice(oldAttached.findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate), 1);
       }
+
       removedAttachedRef.current.push(deletedFile);
       recentRemovedAttached.push(deletedFile);
       parent.remove();
     });
+
     if (attached.length < 2) {
       afterChangeFile(attached.length);
     }
+
     stripDomain();
     if (onChange) onChange({
       element: nodeList,
@@ -401,25 +461,30 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!onRemoveProp && onRemoveProp(recentRemovedAttached);
     onClosePopup();
   };
+
   const clearAllAttached = (confirmPopup = false) => {
     const allAttachEl = attachedRef.current.querySelectorAll('.attachment-row');
+
     if (allAttachEl && allAttachEl.length) {
       allAttachEl.forEach(attachEl => attachEl.firstChild.classList.add('chosen'));
       isDeleteAll.current = true;
       confirmPopup ? onShowPopup() : onRemoveMultiple();
     }
   };
+
   const onGetViewItem = (i = 0) => {
     const index = chosenItems[i];
     const node = attachedRef.current.childNodes[index];
     const AttachmentID = attached[index].AttachmentID;
     onView(node, AttachmentID);
   };
+
   const onView = (node, AttachmentID) => {
     if (timer.current) {
       prevent.current = true;
       clearTimeout(timer.current);
     }
+
     const index = Array.from(attachedRef.current.children).indexOf(node);
     if (onViewProp) onViewProp(AttachmentID, index);else {
       setShowModal(true);
@@ -428,14 +493,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       prevent.current = false;
     }, 110);
   };
+
   const onDownload = (url, name) => {
     if (!url) return;
     fetch(url).then(resp => resp.blob()).then(blob => {
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.style.display = 'none';
-      a.href = url;
-      // the filename you want
+      a.href = url; // the filename you want
+
       a.download = name;
       document.body.appendChild(a);
       a.click();
@@ -443,13 +509,16 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }).catch(() => alert('File not found'));
     if (onDownloadProp) onDownloadProp(url);
   };
+
   const removeFileOutInputFiles = (index, keeping) => {
     const dt = new DataTransfer();
+
     for (let file of attachmentInputRef.current.files) {
       if (file !== attachmentInputRef.current.files[index]) {
         dt.items.add(file);
       }
     }
+
     if (!keeping) {
       const files = allNewAttached.getAll('files');
       files.splice(index, 1);
@@ -457,9 +526,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       files.forEach(file => allNewAttached.append('files', file));
       newAttachedRef.current = files || [];
     }
+
     attachmentInputRef.current.files = dt.files;
     return dt.files;
   };
+
   const insertAttached = files => {
     if (multiple || inputProps && inputProps.multiple) {
       for (let file of files) {
@@ -470,30 +541,37 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       allNewAttached.delete('files');
       allNewAttached.append('files', files[0]);
       newAttachedRef.current = [files[0]];
-    }
-    // attachmentInputRef.current.files = allNewAttached.getAll('files');
+    } // attachmentInputRef.current.files = allNewAttached.getAll('files');
+
   };
 
   const checkExistingFile = newFile => {
     const files = allNewAttached.getAll('files');
+
     if (files && files.length) {
       const length = files.length;
+
       for (let i = 0; i < length; i++) {
         if (parseStringify(newFile) === parseStringify(files[i])) return true;
       }
     }
+
     return false;
   };
+
   const checkAcceptFileType = newFile => {
     if (!accept || !accept.length) return true;
     const type = typeof accept === 'string' ? accept : accept.join('-');
+
     if (typeof accept === 'string') {
       const acceptType = type.replace('/*', '');
       return newFile.type.includes(acceptType);
     }
+
     const extFile = newFile.name.slice(newFile.name.lastIndexOf('.') + 1);
     return accept.join('-').includes(extFile);
   };
+
   const onChooseItem = e => {
     const ctrlKey = e.ctrlKey;
     const shiftKey = e.shiftKey;
@@ -501,24 +579,29 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     timer.current = setTimeout(() => {
       if (!prevent.current) {
         const index = Array.from(attachedRef.current.children).indexOf(itemEl.parentNode);
+
         if (shiftKey && !ctrlKey) {
           let startIndex = chosenItems[chosenItems.length - 1] || 0;
           let endIndex = index;
+
           if (startIndex > endIndex) {
             endIndex = startIndex;
             startIndex = index;
           }
+
           chosenItems.length = 0;
           attachedRef.current.querySelectorAll(`.css-${AttachedItemCSS.name}`).forEach((itemEl, indexEl) => {
             if (startIndex <= indexEl && indexEl <= endIndex) {
               if (!itemEl.classList.contains('chosen')) {
                 itemEl.classList.add('chosen');
               }
+
               chosenItems.push(indexEl);
             } else if (itemEl.classList.contains('chosen')) {
               itemEl.classList.remove('chosen');
             }
           });
+
           if (chosenItems[chosenItems.length - 1] !== index) {
             chosenItems.shift();
             chosenItems.push(index);
@@ -531,6 +614,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         } else if (itemEl.classList.contains('chosen')) {
           chosenItems.splice(chosenItems.indexOf(index));
           itemEl.classList.remove('chosen');
+
           if (!chosenItems.length) {
             setTimeout(() => {
               removeAllChosenItems();
@@ -539,26 +623,32 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         } else {
           chosenItems.push(index);
           itemEl.classList.add('chosen');
-        }
-        // Add event listener click out of item
+        } // Add event listener click out of item
+
+
         if (!existClickOutOfItem.current) {
           existClickOutOfItem.current = true;
           attachmentHandleIconRef.current.style.display = 'block';
           document.addEventListener('keydown', onKeyDown);
           document.addEventListener('click', clickOutOfItem);
         }
+
         checkChosenMultiple();
       }
+
       prevent.current = false;
     }, 100);
   };
+
   const removeActiveChosenItem = () => {
     attachedRef.current.querySelectorAll('.chosen').forEach(itemEl => {
       itemEl.classList.remove('chosen');
     });
   };
+
   const checkChosenMultiple = () => {
     const actionIcons = attachmentHandleIconRef.current.childNodes;
+
     if (chosenItems.length > 1 && actionIcons[0].style.display !== 'none') {
       actionIcons[0].style.display = 'none';
       actionIcons[1].style.display = 'none';
@@ -567,8 +657,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       actionIcons[1].style.display = null;
     }
   };
+
   const onKeyDown = event => {
     const key = event.key;
+
     if (key === 'Delete') {
       // Press Delete key to delete item(s)
       onShowPopup();
@@ -579,9 +671,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else if (/a/i.test(key) && event.ctrlKey) {
       chosenItems.length = 0;
       const allAttachEl = attachedRef.current.querySelectorAll('.attachment-row');
+
       if (allAttachEl && allAttachEl.length) {
         allAttachEl.forEach((attachEl, index) => chosenItems.push(index) & attachEl.firstChild.classList.add('chosen'));
       }
+
       event.preventDefault();
       return false;
     } else if (/Arrow/.test(key)) {
@@ -591,6 +685,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const chosenItemsNode = Array.from(itemsNode).filter(el => el.firstChild.classList.contains('chosen'));
       const length = itemsNode.length;
       let index;
+
       if (key === 'ArrowDown' || key === 'ArrowRight') {
         for (let id = length - 1; id >= 0; id--) {
           if (Array.from(itemsNode)[id].firstChild.classList.contains('chosen')) {
@@ -598,6 +693,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             break;
           }
         }
+
         if (index === length - 1) {
           if (chosenItemsNode.length !== 1 && !event.shiftKey) {
             chosenItemsNode.forEach((node, i) => {
@@ -612,21 +708,26 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               behavior: 'smooth'
             });
           }
+
           return;
         }
+
         Array.from(itemsNode)[index + 1].scrollIntoView({
           block: 'center',
           behavior: 'smooth'
         });
+
         if (!event.shiftKey) {
           itemsNode.forEach(node => {
             node.firstChild.classList.remove('chosen');
           });
         }
+
         itemsNode[index + 1].firstChild.classList.add('chosen');
         chosenItems.push(index + 1);
       } else if (key === 'ArrowUp' || key === 'ArrowLeft') {
         index = Array.from(itemsNode).findIndex(el => el.firstChild.classList.contains('chosen'));
+
         if (index === 0) {
           if (chosenItemsNode.length !== 1 && !event.shiftKey) {
             chosenItemsNode.forEach((node, i) => {
@@ -641,37 +742,46 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               behavior: 'smooth'
             });
           }
+
           return;
         }
+
         Array.from(itemsNode)[index - 1].scrollIntoView({
           block: 'center',
           behavior: 'smooth'
         });
+
         if (!event.shiftKey) {
           chosenItemsNode.forEach(node => {
             node.firstChild.classList.remove('chosen');
           });
         }
+
         itemsNode[index - 1].firstChild.classList.add('chosen');
         chosenItems.push(index - 1);
       }
+
       if (!event.shiftKey) {
         chosenItems.length = 1;
       }
     }
   };
+
   const clickOutOfItem = e => {
     var _popupRef$current, _popupRef$current$sty;
+
     if (!attachedRef || !attachedRef.current) {
       document.removeEventListener('keydown', onKeyDown);
       document.removeEventListener('click', clickOutOfItem);
       return;
     }
+
     if (!(attachedRef.current.contains(e.target) && attachedRef.current !== e.target) && !attachmentHandleIconRef.current.contains(e.target) && !isDeleteAll.current && (((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : (_popupRef$current$sty = _popupRef$current.style) === null || _popupRef$current$sty === void 0 ? void 0 : _popupRef$current$sty.display) !== 'flex' || popupRef.current.querySelector('button.filled.info').contains(e.target))) {
       removeAllChosenItems();
       removeActiveChosenItem();
     }
   };
+
   const removeAllChosenItems = () => {
     chosenItems.length = 0;
     existClickOutOfItem.current = false;
@@ -679,6 +789,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     document.removeEventListener('keydown', onKeyDown);
     document.removeEventListener('click', clickOutOfItem);
   };
+
   const parseStringify = fileInfo => JSON.stringify({
     lastModified: fileInfo.lastModified,
     lastModifiedDate: fileInfo.lastModifiedDate,
@@ -687,36 +798,45 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: fileInfo.type,
     webkitRelativePath: fileInfo.webkitRelativePath
   });
+
   const mountDomain = item => {
     if (!item) return item;
     const cloneItem = JSON.parse(JSON.stringify(item));
+
     if (domain) {
       if (!/\/$/.test(domain)) {
         domain = domain + '/';
       }
+
       if (cloneItem !== null && cloneItem !== void 0 && cloneItem.URL) {
         cloneItem.URL = cloneItem.URL.indexOf('http') < 0 ? domain + cloneItem.URL : cloneItem.URL;
       }
     }
+
     return cloneItem;
   };
+
   const stripDomain = () => {
     if (isStripDomain && domain) {
       const re = new RegExp(domain + '/?');
       attached.forEach(item => {
         var _item$URL;
+
         item.URL = (item === null || item === void 0 ? void 0 : (_item$URL = item.URL) === null || _item$URL === void 0 ? void 0 : _item$URL.replace(re, '')) || '';
       });
       oldAttached.forEach(item => {
         var _item$URL2;
+
         item.URL = (item === null || item === void 0 ? void 0 : (_item$URL2 = item.URL) === null || _item$URL2 === void 0 ? void 0 : _item$URL2.replace(re, '')) || '';
       });
     }
   };
+
   useEffect(() => {
     if (attached.length) {
       attached.length = 0;
     }
+
     return () => {
       existClickOutOfItem.current = false;
     };
@@ -734,21 +854,27 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         maxSize.current = getBit(numberSize, unitMaxSize);
       }
     }
+
     attachmentInputRef.current.multiple = multiple;
+
     if (accept && typeof accept === 'string') {
       attachmentInputRef.current.accept = `${accept}/*`.replace('/*/*', '/*');
     }
+
     return () => {
       maxSize.current = Infinity;
     };
   }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
     var _newAttachedRef$curre;
+
     oldAttached.length = 0;
     afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + (((_newAttachedRef$curre = newAttachedRef.current) === null || _newAttachedRef$curre === void 0 ? void 0 : _newAttachedRef$curre.length) || 0));
+
     if (data) {
       // Load files data was uploaded
       const length = data.length;
+
       for (let i = 0; i < length; i++) {
         if (Object.prototype.toString.call(data[i]) === '[object File]') {
           allNewAttached.append('files', data[i]);
@@ -761,6 +887,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
     }
+
     return () => {
       // if (attachedRef.current) {
       //     attachedRef.current.innerHTML = null;
@@ -770,6 +897,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       attached.length = 0;
       chosenItems.length = 0;
       allNewAttached.delete('files');
+
       if (attachmentInputRef.current) {
         attachmentInputRef.current.value = '';
       }
@@ -797,16 +925,19 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [inputProps]);
+
   const triggerClickInput = () => {
     attachmentInputRef.current.click();
   };
+
   const onDragFileStart = () => {
     attachmentInputRef.current.parentNode.style.display = 'block';
   };
+
   const onDropInput = () => {
     attachmentInputRef.current.parentNode.style.display = null;
-  };
-  // End handler
+  }; // End handler
+
 
   useImperativeHandle(reference, () => {
     stripDomain();
@@ -819,17 +950,20 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       clear: confirmPopup => clearAllAttached(confirmPopup),
       openFileDialog: triggerClickInput
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     currentRef.oldAttached = oldAttached;
     currentRef.allNewAttached = allNewAttached;
     currentRef.attached = attached;
+
     currentRef.clear = confirmPopup => clearAllAttached(confirmPopup);
+
     currentRef.openFileDialog = triggerClickInput;
     return currentRef;
-  });
+  }); // Start view
 
-  // Start view
   const AttachHeaderView = useMemo(() => {
     return jsx("div", {
       css: AttachmentHeaderCSS,
@@ -932,6 +1066,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...inputProps
     }));
   }, [accept, disabled, domain, inputProps, isStripDomain, maxFile, multiple, onChange, readOnly, uploadErrorInfo, newDataState]);
+
   const renderAttachmentItem = (item, idx, isNew = false) => {
     const isViewTypeIcon = viewTypeState === 'icon';
     const date = isNew ? new Date() : new Date(item.CreateDate);
@@ -985,6 +1120,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       percent: 0
     })) : null)));
   };
+
   const AttachedView = useMemo(() => {
     const isViewTypeIcon = viewTypeState === 'icon';
     return jsx(ScrollBar, {
@@ -1015,8 +1151,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ModalView = useMemo(() => {
     if (!chosenItems.length) return setShowModal(false);
     const index = chosenItems[0];
-    const data = mountDomain(attached[index]);
-    // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
+    const data = mountDomain(attached[index]); // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
+
     return jsx(ModalSample, {
       open: showModal,
       title: data.FileName,
@@ -1024,8 +1160,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Slider, null, jsx(SliderItem, {
       url: data.URL
     })));
-  }, [domain, showModal]);
-  // End view
+  }, [domain, showModal]); // End view
 
   return jsx("div", {
     ref: ref,
@@ -1244,6 +1379,7 @@ const AttachmentListCSS = css`
     ${pd([0, 1.75, 0])};
     overflow-y: overlay;
 `;
+
 const AttachmentRootCSS = (isEmpty, isEnable) => css`
     ${displayFlex};
     ${flexCol};
@@ -1285,6 +1421,7 @@ const AttachmentRootCSS = (isEmpty, isEnable) => css`
         }
     }
 `;
+
 Attachment.defaultProps = {
   allowSort: true,
   className: '',
@@ -1306,73 +1443,97 @@ Attachment.defaultProps = {
 Attachment.propTypes = {
   /** File types that can be accepted. */
   accept: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+
   /** If `true`, allow sort. */
   allowSort: PropTypes.bool,
+
   /** Class for component. */
   className: PropTypes.string,
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
+
   /** The message to display when deleting files. */
   deleteNotifyText: PropTypes.string,
+
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** Domain of attachments. */
   domain: PropTypes.string,
+
   /** Error of attachment. */
   error: PropTypes.string,
+
   /** Suggested passage attached. */
   hintText: PropTypes.string,
+
   /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
   inputProps: PropTypes.object,
+
   /** If `true`, strip domain of attachments. */
   isStripDomain: PropTypes.bool,
+
   /** Label of the component. */
   label: PropTypes.string,
+
   /** Limit the number of uploaded files. */
   maxFile: PropTypes.number,
+
   /** Limit the size of uploaded files. */
   maxSize: PropTypes.string,
+
   /** Allows to attach multiple files. */
   multiple: PropTypes.bool,
+
   /** Callback fired when the files attached is changed. */
   onChange: PropTypes.func,
+
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
+
   /** View attached event, if not it will use default. */
   onView: PropTypes.func,
+
   /** Name of the person who attached the file when uploading the file. */
   ownerName: PropTypes.string,
+
   /** At least one attachment is required. */
   required: PropTypes.bool,
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Unit size name, default auto-detect. */
   unitSize: PropTypes.string,
+
   /** Errors show up when the file upload is corrupted. */
   uploadErrorInfo: PropTypes.object,
+
   /** The view type of files. */
   viewType: PropTypes.oneOf(['detail', 'icon'])
 };