diginet-core-ui 1.3.78 → 1.3.79

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useMemo, useEffect, useState, useRef, forwardRef, useImperativeHandle, Fragment } from 'react';
 import PropTypes from 'prop-types';
@@ -112,73 +111,59 @@ let prevent = false;
 let existClickOutOfItem = false;
 let maxSize = Infinity;
 let divideSize = null;
-
 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'; // const d = ('0' + date.getDate()).slice(-2);
+  if (String(date) === 'Invalid Date') return 'unknown';
+  // const d = ('0' + date.getDate()).slice(-2);
   // const m = ('0' + (date.getMonth() + 1)).slice(-2);
   // const y = date.getFullYear();
   // const t = date.toTimeString().slice(0, 8);
-
   return jsx(Fragment, null, moment(date).format('DD/MM/YYYY, HH:mm:ss'), ' ', jsx("span", {
     style: {
       display: 'none'
     }
   }, date.getMilliseconds()));
 };
-
 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 Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   accept,
   allowSort,
@@ -226,16 +211,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const popoverRef = useRef(null);
   const isDeleteAll = useRef(false);
   const PushNotify = useRef(null);
-  const removedAttachedRef = useRef([]); // Start handler
+  const removedAttachedRef = useRef([]);
 
+  // Start handler
   const onShowSortPopover = () => {
     setPopover(true);
   };
-
   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')) {
@@ -249,13 +233,11 @@ 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'));
@@ -265,14 +247,12 @@ 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;
@@ -289,7 +269,6 @@ 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'
       });
@@ -299,10 +278,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
     setPopover(false);
   };
-
   const afterChangeFile = (length = 0) => {
     var _sortIconRef$current;
-
     if (!length) {
       if (!attachmentImageRef.current.classList.contains('hint-center')) {
         attachmentImageRef.current.classList.add('hint-center');
@@ -310,7 +287,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else {
       attachmentImageRef.current.classList.remove('hint-center');
     }
-
     if ((_sortIconRef$current = sortIconRef.current) !== null && _sortIconRef$current !== void 0 && _sortIconRef$current.element) {
       if (length > 1) {
         sortIconRef.current.element.style.display = null;
@@ -319,54 +295,41 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
-
   const onChangeFiles = async e => {
     if (readOnly || disabled) return;
-
     if (e.target && e.target.files && 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 || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
           if (i + 1 > maxFile - lengthAttached) {
             var _files$i;
-
             PushNotify.current(`${(_files$i = files[i]) === null || _files$i === void 0 ? void 0 : _files$i.name} - ${uploadErrorInfo['maxFile']}`);
           } else if (files[i].size > maxSize) {
             var _files$i2;
-
             PushNotify.current(`${(_files$i2 = files[i]) === null || _files$i2 === void 0 ? void 0 : _files$i2.name} - ${uploadErrorInfo['maxSize']}`);
           } else if (!checkAcceptFileType(files[i])) {
             var _files$i3;
-
             PushNotify.current(`${(_files$i3 = files[i]) === null || _files$i3 === void 0 ? void 0 : _files$i3.name} - ${uploadErrorInfo['fileType']}`);
           } else {
             var _files$i4;
-
             PushNotify.current(`${(_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++) {
           // if (files[i].size > maxSize) continue;
           addNewElement(files[i], lengthAttached);
         }
-
         for (let i = 0; i < length; i++) {
           // if (files[i].size > maxSize) continue;
           files[i].URL = await onProgressing(files[i]);
@@ -378,7 +341,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         addNewElement(files[0], lengthAttached);
         files[0].URL = await onProgressing(files[0]);
       }
-
       insertAttached(files);
       stripDomain();
       if (onChange) onChange({
@@ -392,40 +354,33 @@ 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 = () => {
         // console.log(attachedRef.current.querySelector(`.css-${AttachedLinear.name}-attached`).parentNode.parentNode.querySelector('.filesize').offsetWidth);
         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 addNewElement = (file, lengthAttached) => {
     const newAttach = getItemDetailHTML(file, lengthAttached + 1);
     attached.push(file);
@@ -433,7 +388,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     newElement.className = 'attachment-row';
     ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
   };
-
   const getItemDetailHTML = (data, i) => {
     const date = new Date();
     data.CreateDate = date.toISOString();
@@ -474,7 +428,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       percent: 0
     }))));
   };
-
   const getItemHTMLFromData = (data, i) => {
     const date = new Date(data.CreateDate);
     const type = getType(data);
@@ -508,55 +461,44 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'filesize'
     }, calculateSize(data.FileSize || data.size)))));
   };
-
   const calculateSize = size => {
     if (!size && size !== 0) return 'unknown';
     let totalSize;
     let unitSizeName;
-
     if (divideSize) {
       totalSize = size / divideSize;
       unitSizeName = unitSize.toUpperCase();
-
       while (totalSize < 0.01 && unitSizeName !== 'B') {
         [unitSizeName, totalSize] = getNewUnitSize(unitSizeName, totalSize, 1);
       }
     } else {
       totalSize = size;
       unitSizeName = 'B';
-
       while (totalSize > 1024 && unitSizeName !== 'TB') {
         [unitSizeName, totalSize] = getNewUnitSize(unitSizeName, totalSize, -1);
       }
     }
-
     if (totalSize < 1000) {
       totalSize = Math.round(totalSize * 100) / 100;
     } else {
       totalSize = Math.round(totalSize);
     }
-
     return totalSize + ' ' + unitSizeName;
   };
-
   const onShowPopup = () => {
     setPopup(true);
   };
-
   const onClosePopup = () => {
     setPopup(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);
@@ -566,7 +508,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onDownload(file.URL, file.name);
     }
   };
-
   const onRemoveMultiple = () => {
     const nodeList = attachedRef.current.querySelectorAll('.chosen');
     const recentRemovedAttached = [];
@@ -574,22 +515,18 @@ 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,
@@ -602,28 +539,25 @@ 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) {
       prevent = true;
-      clearTimeout(timer); // if (existClickOutOfItem) {
+      clearTimeout(timer);
+      // if (existClickOutOfItem) {
       //     removeAllChosenItems();
       //     attachedRef.current.querySelectorAll('.chosen').forEach(itemEl => {
       //         itemEl.classList.remove('chosen');
@@ -639,22 +573,23 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       prevent = 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();
       window.URL.revokeObjectURL(url);
     }).catch(() => alert('File not found'));
     if (onDownloadProp) onDownloadProp(url);
-  }; // const onRemove = (e, AttachmentID='') => {
+  };
+
+  // const onRemove = (e, AttachmentID='') => {
   //     const parent = e.currentTarget.parentNode.parentNode.parentNode;
   //     const index = Array.from(attachedRef.current.children).indexOf(parent);
   //     attached.splice(index, 1);
@@ -670,16 +605,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     if (onRemoveItem) onRemoveItem({index, element: parent, oldAttached, allNewAttached: allNewAttached.getAll('files'), AttachmentID});
   // }
 
-
   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);
@@ -687,11 +619,9 @@ 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) {
@@ -702,51 +632,40 @@ 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 checkExistingFileInData = newFile => {
     const files = data;
-
     if (files && files.length) {
       const length = files.length;
-
       for (let i = 0; i < length; i++) {
         if (parseStringify2(newFile) === parseStringify2(files[i], true)) 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;
@@ -754,29 +673,24 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     timer = setTimeout(() => {
       if (!prevent) {
         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);
@@ -789,7 +703,6 @@ 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();
@@ -798,32 +711,26 @@ 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) {
           existClickOutOfItem = true;
           attachmentHandleIconRef.current.style.display = 'block';
           document.addEventListener('keydown', onKeyDown);
           document.addEventListener('click', clickOutOfItem);
         }
-
         checkChosenMultiple();
       }
-
       prevent = 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';
@@ -832,10 +739,8 @@ 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();
@@ -846,11 +751,9 @@ 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)) {
@@ -860,7 +763,6 @@ 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')) {
@@ -868,7 +770,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             break;
           }
         }
-
         if (index === length - 1) {
           if (chosenItemsNode.length !== 1 && !event.shiftKey) {
             chosenItemsNode.forEach((node, i) => {
@@ -883,26 +784,21 @@ 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) => {
@@ -917,46 +813,37 @@ 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 = false;
@@ -964,7 +851,6 @@ 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,
@@ -973,57 +859,46 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: fileInfo.type,
     webkitRelativePath: fileInfo.webkitRelativePath
   });
-
   const parseStringify2 = (fileInfo, inData) => JSON.stringify({
     name: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo[inData ? 'FileName' : 'name'],
     size: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo[inData ? 'FileSize' : 'size']
   });
-
   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 = false;
     };
   }, []);
   useEffect(() => {
     let el = null;
-
     if (error) {
       attachTextRef.current.style.color = danger;
       ref.current.style.borderColor = danger;
@@ -1032,13 +907,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       el.innerHTML = error;
       attachTextRef.current.parentNode.insertAdjacentElement('afterend', el);
     }
-
     return () => {
       if (attachTextRef.current && ref.current) {
         attachTextRef.current.style.color = null;
         ref.current.style.borderColor = null;
       }
-
       if (el) {
         el.remove();
       }
@@ -1058,28 +931,22 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       case /^B$/i.test(unitSize):
         divideSize = 1;
         break;
-
       case /KB/i.test(unitSize):
         divideSize = 1024;
         break;
-
       case /MB/i.test(unitSize):
         divideSize = 1024 ** 2;
         break;
-
       case /GB/i.test(unitSize):
         divideSize = 1024 ** 3;
         break;
-
       case /TB/i.test(unitSize):
         divideSize = 1024 ** 4;
         break;
-
       default:
         divideSize = null;
         break;
     }
-
     attachmentInputRef.current.addEventListener('change', onChangeFiles);
     return () => {
       attachmentInputRef.current && attachmentInputRef.current.removeEventListener('change', onChangeFiles);
@@ -1095,57 +962,45 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         maxSize = getBit(numberSize, unitMaxSize);
       }
     }
-
     attachmentInputRef.current.multiple = multiple;
-
     if (accept && typeof accept === 'string') {
       attachmentInputRef.current.accept = `${accept}/*`.replace('/*/*', '/*');
     }
-
     attachmentInputRef.current.addEventListener('change', onChangeFiles);
     return () => {
       if (attachmentInputRef.current) {
         attachmentInputRef.current.removeEventListener('change', onChangeFiles);
         attachmentInputRef.current.accept = null;
       }
-
       maxSize = 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++) {
         const item = mountDomain(data[i]);
         const newAttach = getItemHTMLFromData(item, i);
-
         if (Object.prototype.toString.call(item) === '[object File]') {
           allNewAttached.append('files', item);
           newAttachedRef.current.push(item);
         } else {
           oldAttached.push(item);
         }
-
         attached.push(item);
         const newElement = document.createElement('div');
         newElement.className = 'attachment-row';
         ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
       }
     }
-
     if (newAttachedRef.current) {
       const length = newAttachedRef.current.length;
-
       for (let i = length - 1; i >= 0; i--) {
         const item = newAttachedRef.current[i];
-
         if (checkExistingFileInData(item)) {
           newAttachedRef.current.splice(i, 1);
         } else {
@@ -1158,17 +1013,14 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
     }
-
     return () => {
       if (attachedRef.current) {
         attachedRef.current.innerHTML = null;
       }
-
       oldAttached.length = 0;
       attached.length = 0;
       chosenItems.length = 0;
       allNewAttached.delete('files');
-
       if (attachmentInputRef.current) {
         attachmentInputRef.current.value = '';
       }
@@ -1196,21 +1048,18 @@ 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
-  // Start view
-
+  };
+  // End handler
 
+  // Start view
   const AttachHeaderView = useMemo(() => jsx("div", {
     css: AttachmentHeaderCSS,
     className: 'DGN-UI-Attachment-Header'
@@ -1355,8 +1204,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ModalView = useMemo(() => {
     if (!chosenItems.length) return setOpen(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: open,
       title: data.FileName,
@@ -1364,7 +1213,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Slider, null, jsx(SliderItem, {
       url: data.URL
     })));
-  }, [domain, open]); // End view
+  }, [domain, open]);
+  // End view
 
   useImperativeHandle(reference, () => {
     stripDomain();
@@ -1377,16 +1227,12 @@ 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;
   });
@@ -1784,13 +1630,10 @@ 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 />
@@ -1804,46 +1647,32 @@ Attachment.propTypes = {
    * }, ...]
    */
   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)
    *
@@ -1856,25 +1685,18 @@ Attachment.propTypes = {
    * }
    */
   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,
-
   /** If `true`, the component is readOnly. */
   readOnly: PropTypes.bool,
-
   /** At least one attachment is required. */
   required: PropTypes.bool,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Errors show up when the file upload is corrupted. */
   uploadErrorInfo: PropTypes.object,
-
   /** The view type of files. */
   viewType: PropTypes.oneOf(['detail', 'icon'])
 };