diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,1537 +0,0 @@
-/* eslint-disable no-prototype-builtins */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Grid, HelperText, Icon, Image, Label, LinearProgress, List, ListItem, ListItemText, ModalSample, Notify, Popover, Popup, ScrollBar, Slider, SliderItem, Typography } from "../..";
-import { getGlobal } from "../../../global";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { aspectSquare, bgColor, border, borderDashed, borderRadius4px, borderRadius50, borderRight, bottom, boxBorder, cursorPointer, displayFlex, displayInlineBlock, displayNone, flexCol, floatRight, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, left, overflowHidden, parseHeight, parseMaxWidth, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, positionAbsolute, positionRelative, textCenter, textColor, textLeft, textRight, top, truncate, userSelectNone } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, getFileType, getProp, date as moment } from "../../../utils";
-const oldAttached = [];
-const allNewAttached = new FormData();
-const attached = []; // attached = [...dataState, ...newDataState]
-const chosenItems = [];
-const getType = data => {
-  if (!data) return null;
-  if (data !== null && data !== void 0 && data.type) {
-    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 (!(date instanceof Date && !isNaN(date))) return 'unknown';
-  const formatter = new Intl.DateTimeFormat('en-GB', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  });
-  return formatter.format(date); // 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;
-  return [arraySize[index + num], newTotalSize];
-};
-const getBit = (size, unit) => {
-  const units = {
-    B: 1,
-    KB: 1024,
-    MB: 1024 ** 2,
-    GB: 1024 ** 3,
-    TB: 1024 ** 4
-  };
-  const normalizedUnit = unit.toUpperCase();
-  const multiplier = units[normalizedUnit] || 1024 * 1024;
-  return size * multiplier;
-};
-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));
-  return [parseFloat((bytes / Math.pow(k, i)).toFixed(dm)), sizes[i]];
-};
-const isBase64URL = url => {
-  if (typeof url !== 'string') return false;
-  // Check if the URL is a valid data URL with base64 encoding
-  const dataPrefix = 'data:';
-  const base64Prefix = 'base64,';
-  if (url.startsWith(dataPrefix)) {
-    const base64Index = url.indexOf(base64Prefix);
-    if (base64Index !== -1) {
-      const base64Data = url.slice(base64Index + base64Prefix.length);
-      const base64Chars = /^[A-Za-z0-9+/=]+$/;
-      return base64Chars.test(base64Data) && base64Data.length % 4 === 0;
-    }
-  }
-  return false;
-};
-const cloneFile = file => {
-  const clonedFile = new File([file], (file === null || file === void 0 ? void 0 : file.name) || (file === null || file === void 0 ? void 0 : file.FileName), {
-    type: file.type,
-    lastModified: file.lastModified
-  });
-
-  // Copy custom properties
-  for (const prop in file) {
-    if (file.hasOwnProperty(prop) && !clonedFile.hasOwnProperty(prop)) {
-      clonedFile[prop] = file[prop];
-    }
-  }
-  return clonedFile;
-};
-const handleDownload = (url, name, onDownload) => {
-  if (!url) {
-    console.error('Invalid URL');
-    return;
-  }
-  fetch(url).then(resp => resp.blob()).then(blob => {
-    const objectURL = window.URL.createObjectURL(blob);
-    const downloadLink = document.createElement('a');
-    downloadLink.style.display = 'none';
-    downloadLink.href = objectURL;
-    downloadLink.download = name;
-    document.body.appendChild(downloadLink);
-    downloadLink.click();
-    document.body.removeChild(downloadLink);
-    window.URL.revokeObjectURL(objectURL);
-  }).catch(error => {
-    console.error('Error downloading file:', error);
-    alert('File download failed');
-  });
-  if (onDownload) {
-    onDownload(url);
-  }
-};
-const divideSizeMap = new Map([['B', 1], ['KB', 1024], ['MB', 1024 ** 2], ['GB', 1024 ** 3], ['TB', 1024 ** 4]]);
-const viewTypeIconMap = new Map([['detail', 'ListView'], ['icon', 'IconView'], ['picture', 'ModuleView']]);
-const viewTypeSwitchMap = new Map([['detail', 'icon'], ['icon', 'picture'], ['picture', 'detail']]);
-const Attachment = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    spacing
-  } = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Attachment'
-  });
-  const {
-    accept,
-    allowDelete,
-    allowSort,
-    className,
-    data,
-    deleteNotifyText: deleteNotifyTextProp,
-    disabled,
-    domain: domainProp,
-    error,
-    height,
-    hintText: hintTextProp,
-    id,
-    inputProps,
-    isStripDomain,
-    label: labelProp,
-    maxFile,
-    maxSize: maxSizeProp,
-    multiple: multipleProp,
-    onChange,
-    onDownload,
-    onRemove: onRemoveProp,
-    onView: onViewProp,
-    ownerName,
-    readOnly,
-    //deprecated
-    required,
-    style,
-    unitSize,
-    uploadErrorInfo: uploadErrorInfoProp,
-    viewType
-  } = props;
-  let domain = domainProp;
-  const multiple = maxFile === 1 ? false : multipleProp;
-  const deleteNotifyText = deleteNotifyTextProp || getGlobal('deleteNotifyText');
-  const hintText = hintTextProp || getGlobal('dropFileHere');
-  const label = labelProp || getGlobal('attachText');
-  const maxSize = maxSizeProp || getGlobal('maxSizeUpload');
-  const uploadErrorInfo = uploadErrorInfoProp || {
-    maxFile: getGlobal(['errorDefault', 'maxFile']),
-    maxSize: getGlobal(['errorDefault', 'maxSize']),
-    fileType: getGlobal(['errorDefault', 'fileType']),
-    existingFile: getGlobal(['errorDefault', 'existingFile'])
-  };
-  const ref = useRef(null);
-  const attachmentHandleIconRef = useRef(null);
-  const attachmentInputRef = useRef(null);
-  const attachedRef = useRef(null);
-  const popupRef = useRef(null);
-  const popoverRef = useRef(null);
-  const isDeleteAll = useRef(false);
-  const notifyRef = useRef(null);
-  const removedAttachedRef = useRef([]);
-  const prevent = useRef(null);
-  const existClickOutOfItem = useRef(null);
-  const maxSizeRef = useRef(Infinity);
-  const timer = useRef(null);
-  const [showModal, setShowModal] = useState(false);
-  const [showPopup, setShowPopup] = useState(false);
-  const [viewTypeState, setViewTypeState] = useState(viewType);
-  const [newDataState, setNewDataState] = useState([]);
-  const [dataState, setDataState] = useState([]);
-  const [sizeByHeight, setSizeByHeight] = useState(true);
-  const isSpecialCase = viewTypeState === 'picture' && maxFile === 1;
-  const isEnable = !readOnly && !disabled;
-  const isEmpty = !((dataState === null || dataState === void 0 ? void 0 : dataState.length) + (newDataState === null || newDataState === void 0 ? void 0 : newDataState.length));
-  const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable, height, theme);
-  const _AttachmentHandleIconCSS = AttachmentHandleIconCSS(theme);
-  const _ButtonAttachmentCSS = ButtonAttachmentCSS(theme);
-  const _DotNewFileDetailCSS = DotNewFileDetailCSS(theme);
-  const _DotNewFileIconCSS = DotNewFileIconCSS(theme);
-  const _AttachedItemOwnerCSS = AttachedItemOwnerCSS(theme);
-  const _AttachedLinearCSS = AttachedLinearCSS(theme);
-  const _AttachedItemCSS = AttachedItemCSS(theme);
-  const _AttachedItemPictureCSS = AttachedItemPictureCSS(theme);
-  const _ItemPictureInfoCSS = ItemPictureInfoCSS(theme);
-  const _AttachmentInfoCSS = AttachmentInfoCSS(theme);
-  const _AttachedItemInfoCSS = AttachedItemInfoCSS(theme);
-  const _AttachmentListCSS = AttachmentListCSS(theme);
-
-  // Start handler
-  const onSortElement = (e, type) => {
-    const _attached = [...dataState, ...newDataState];
-    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')) {
-          e.currentTarget.classList.remove('DGN-Decrease');
-        } else {
-          multi = -1;
-          e.currentTarget.classList.add('DGN-Decrease');
-        }
-      } else {
-        currentActive.classList.remove('DGN-Decrease');
-        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'));
-      } else if (type === 'filesize') {
-        const objA = _attached.find(attach => attach.FileName === textA);
-        const objB = _attached.find(attach => attach.FileName === textB);
-        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;
-          valueB = b.size || b.FileSize;
-        } else {
-          valueA = new Date(a.CreateDate).getTime();
-          valueB = new Date(b.CreateDate).getTime();
-        }
-      } else if (type === 'filetype') {
-        // filetype
-        valueA = getType(a);
-        valueB = getType(b);
-      } else {
-        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'
-      });
-    });
-    attachedList.forEach(el => {
-      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) {
-      var _ref;
-      let files = e.target.files;
-      // const lengthAttached = attached.length;
-      const lengthAttached = (_ref = [...dataState, ...newDataState]) === null || _ref === void 0 ? void 0 : _ref.length;
-      for (let i = 0; i < files.length; i++) {
-        if (i + 1 > maxFile - lengthAttached && !isSpecialCase || files[i].size > maxSizeRef.current || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
-          if (i + 1 > maxFile - lengthAttached && !isSpecialCase) {
-            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 > maxSizeRef.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]);
-        }
-      } else if (length) {
-        files[0].FileName = files[0].name;
-        if (isSpecialCase) attached.splice(0, 1);
-        attached.push(files[0]);
-        files[0].URL = await onProgressing(files[0]);
-      }
-      insertAttached(files);
-      stripDomain();
-      if (onChange) onChange({
-        element: e.target,
-        attached: isSpecialCase ? Array.from(files) : [...dataState, ...newDataState, ...Array.from(files)],
-        oldAttached,
-        newAttached: files,
-        allNewAttached: [...newDataState, ...Array.from(files)]
-      });
-      if (maxFile === 1) updateSize();
-    }
-    // else if (!attached.length) {
-    //     afterChangeFile();
-    // }
-  };
-  const onProgressing = file => {
-    const key = (file === null || file === void 0 ? void 0 : file.lastModified) + (file === null || file === void 0 ? void 0 : file.size);
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      let url;
-      reader.readAsDataURL(file);
-      reader.onload = e => {
-        url = e.target.result;
-      };
-      reader.onloadstart = () => {
-        const LinearProgressEl = attachedRef.current.querySelector(`.DGN-UI-LinearProgress-${key}`);
-        if (LinearProgressEl) {
-          LinearProgressEl.parentNode.style.display = 'flex';
-          LinearProgressEl.childNodes[0].style.width = '0%';
-        }
-      };
-      reader.onprogress = e => {
-        const LinearProgressEl = attachedRef.current.querySelector(`.DGN-UI-LinearProgress-${key}`);
-        if (LinearProgressEl) {
-          LinearProgressEl.childNodes[0].style.width = e.loaded / e.total * 100 + '%';
-        }
-      };
-      reader.onloadend = () => {
-        const LinearProgressEl = attachedRef.current.querySelector(`.DGN-UI-LinearProgress-${key}`);
-        if (LinearProgressEl) {
-          LinearProgressEl.parentNode.style.display = 'none';
-        }
-        resolve(url);
-      };
-      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);
-      }
-    } else {
-      // 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 _onDownload = () => {
-    var _ref2;
-    console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
-    const index = chosenItems[0];
-    const file = mountDomain((_ref2 = [...dataState, ...newDataState]) === null || _ref2 === void 0 ? void 0 : _ref2[index]);
-    handleDownload(file === null || file === void 0 ? void 0 : file.URL, file === null || file === void 0 ? void 0 : file.FileName, onDownload);
-  };
-  const onRemoveMultiple = () => {
-    const attachedItems = [...dataState, ...newDataState];
-    const nodeList = attachedRef.current.querySelectorAll('.chosen');
-    const recentRemovedAttached = [];
-    const tempDataState = [...dataState];
-    const tempNewDataState = [...newDataState];
-    nodeList.forEach(itemEl => {
-      const index = Array.from(attachedRef.current.children).indexOf(itemEl.parentNode);
-      const deletedFile = attachedItems[index];
-      removedAttachedRef.current.push(deletedFile);
-      recentRemovedAttached.push(deletedFile);
-      if (Object.prototype.toString.call(deletedFile) === '[object File]' && tempNewDataState !== null && tempNewDataState !== void 0 && tempNewDataState.length) {
-        removeFileOutInputFiles(tempNewDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)));
-        tempNewDataState.splice(tempNewDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
-        setNewDataState(tempNewDataState);
-      } else {
-        oldAttached.splice(oldAttached.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
-        tempDataState.splice(tempDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
-        setDataState(tempDataState);
-      }
-    });
-    const tempAttachedItems = [...tempDataState, ...tempNewDataState];
-    // if (tempAttachedItems.length < 2) {
-    //     afterChangeFile(tempAttachedItems?.length || 0);
-    // }
-    stripDomain();
-    if (onChange) onChange({
-      element: nodeList,
-      attached: tempAttachedItems,
-      recentRemovedAttached,
-      removedAttached: removedAttachedRef.current,
-      oldAttached,
-      allNewAttached: tempNewDataState
-    });
-    !!onRemoveProp && onRemoveProp(recentRemovedAttached);
-    onClosePopup();
-  };
-  const clearAllAttached = (confirmPopup = false) => {
-    const allAttachEl = Array.from(attachedRef.current.querySelectorAll('.attachment-row')).map(item => item.firstChild);
-    if (allAttachEl && allAttachEl.length) {
-      allAttachEl.forEach(attachEl => attachEl.classList.add('chosen'));
-      isDeleteAll.current = true;
-      confirmPopup ? onShowPopup() : onRemoveMultiple();
-    }
-  };
-  const onGetViewItem = (i = 0) => {
-    var _attached$index;
-    const index = chosenItems[i];
-    const node = attachedRef.current.childNodes[index];
-    const AttachmentID = ((_attached$index = attached[index]) === null || _attached$index === void 0 ? void 0 : _attached$index.AttachmentID) || null;
-    onView(node, AttachmentID);
-  };
-  const onView = (node, AttachmentID) => {
-    const index = Array.from(attachedRef.current.children).indexOf(node === null || node === void 0 ? void 0 : node.parentNode);
-    if (onViewProp) onViewProp(AttachmentID, index);else {
-      setShowModal(true);
-    }
-  };
-  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);
-      allNewAttached.delete('files');
-      files.forEach(file => allNewAttached.append('files', file));
-    }
-    attachmentInputRef.current.files = dt.files;
-    return dt.files;
-  };
-  const insertAttached = files => {
-    if (multiple || inputProps && inputProps.multiple) {
-      let tempArr = [];
-      for (let file of files) {
-        allNewAttached.append('files', file);
-        tempArr.push(file);
-      }
-      setNewDataState([...newDataState, ...tempArr]);
-    } else if (files[0]) {
-      allNewAttached.delete('files');
-      allNewAttached.append('files', files[0]);
-      if (isSpecialCase) setDataState([]);
-      setTimeout(() => {
-        setNewDataState(files[0] ? [files[0]] : []);
-      });
-    }
-    // attachmentInputRef.current.files = allNewAttached.getAll('files');
-  };
-  const checkExistingFile = newFile => {
-    const files = [...dataState, ...newDataState];
-    return files.some(file => ((file === null || file === void 0 ? void 0 : file.FileName) || (file === null || file === void 0 ? void 0 : file.name)) === ((newFile === null || newFile === void 0 ? void 0 : newFile.FileName) || (newFile === null || newFile === void 0 ? void 0 : newFile.name)) && ((file === null || file === void 0 ? void 0 : file.FileSize) || (file === null || file === void 0 ? void 0 : file.size)) === ((newFile === null || newFile === void 0 ? void 0 : newFile.FileSize) || (newFile === null || newFile === void 0 ? void 0 : newFile.size)));
-  };
-  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, idx) => {
-    const ctrlKey = e.ctrlKey;
-    const shiftKey = e.shiftKey;
-    const itemEl = e.currentTarget.firstChild;
-    // timer.current = setTimeout(() => {
-    if (!prevent.current) {
-      if (shiftKey && !ctrlKey) {
-        let startIndex = chosenItems[chosenItems.length - 1] || 0;
-        let endIndex = idx;
-        if (startIndex > endIndex) {
-          endIndex = startIndex;
-          startIndex = idx;
-        }
-        chosenItems.length = 0;
-        attachedRef.current.querySelectorAll(`.DGN-UI-Attachment-List-Attached-Row`).forEach((itemEl, indexEl) => {
-          const _itemEl = itemEl.firstChild;
-          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] !== idx) {
-          chosenItems.shift();
-          chosenItems.push(idx);
-        }
-      } else if (!ctrlKey) {
-        chosenItems.length = 0;
-        removeActiveChosenItem();
-        chosenItems.push(idx);
-        itemEl.classList.add('chosen');
-      } else if (itemEl.classList.contains('chosen')) {
-        chosenItems.splice(chosenItems.indexOf(idx));
-        itemEl.classList.remove('chosen');
-        if (!chosenItems.length) {
-          setTimeout(() => {
-            removeAllChosenItems();
-          }, 0);
-        }
-      } else {
-        chosenItems.push(idx);
-        itemEl.classList.add('chosen');
-      }
-      // 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';
-    } else if (chosenItems.length === 1 && actionIcons[0].style.display === 'none') {
-      actionIcons[0].style.display = null;
-      actionIcons[1].style.display = null;
-    }
-  };
-  const onKeyDown = event => {
-    const key = event.key;
-    if (key === 'Delete') {
-      // Press Delete key to delete item(s)
-      onShowPopup();
-    } else if (key === 'Enter') {
-      if (popupRef.current.style.display !== 'flex') {
-        onGetViewItem(chosenItems.length - 1);
-      }
-    } else if (/a/i.test(key) && event.ctrlKey) {
-      chosenItems.length = 0;
-      const allAttachEl = Array.from(attachedRef.current.querySelectorAll('.attachment-row')).map(item => item.firstChild);
-      if (allAttachEl && allAttachEl.length) {
-        allAttachEl.forEach((attachEl, index) => chosenItems.push(index) & attachEl.classList.add('chosen'));
-      }
-      event.preventDefault();
-      return false;
-    } else if (/Arrow/.test(key)) {
-      // Press Arrow key to select another item
-      event.preventDefault();
-      const itemsNode = Array.from(attachedRef.current.querySelectorAll('.attachment-row')).map(item => item.firstChild);
-      const chosenItemsNode = Array.from(itemsNode).filter(el => el.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].classList.contains('chosen')) {
-            index = id;
-            break;
-          }
-        }
-        if (index === length - 1) {
-          if (chosenItemsNode.length !== 1 && !event.shiftKey) {
-            chosenItemsNode.forEach((node, i) => {
-              if (i !== index) {
-                node.classList.remove('chosen');
-              }
-            });
-            chosenItems.length = 0;
-            chosenItems.push(index);
-            Array.from(itemsNode)[index].scrollIntoView({
-              block: 'center',
-              behavior: 'smooth'
-            });
-          }
-          return;
-        }
-        Array.from(itemsNode)[index + 1].scrollIntoView({
-          block: 'center',
-          behavior: 'smooth'
-        });
-        if (!event.shiftKey) {
-          itemsNode.forEach(node => {
-            node.classList.remove('chosen');
-          });
-        }
-        itemsNode[index + 1].classList.add('chosen');
-        chosenItems.push(index + 1);
-      } else if (key === 'ArrowUp' || key === 'ArrowLeft') {
-        index = Array.from(itemsNode).findIndex(el => el.classList.contains('chosen'));
-        if (index === 0) {
-          if (chosenItemsNode.length !== 1 && !event.shiftKey) {
-            chosenItemsNode.forEach((node, i) => {
-              if (i !== index) {
-                node.classList.remove('chosen');
-              }
-            });
-            chosenItems.length = 0;
-            chosenItems.push(index);
-            Array.from(itemsNode)[index].scrollIntoView({
-              block: 'center',
-              behavior: 'smooth'
-            });
-          }
-          return;
-        }
-        Array.from(itemsNode)[index - 1].scrollIntoView({
-          block: 'center',
-          behavior: 'smooth'
-        });
-        if (!event.shiftKey) {
-          chosenItemsNode.forEach(node => {
-            node.classList.remove('chosen');
-          });
-        }
-        itemsNode[index - 1].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;
-    attachmentHandleIconRef.current.style.display = null;
-    document.removeEventListener('keydown', onKeyDown);
-    document.removeEventListener('click', clickOutOfItem);
-  };
-  const mountDomain = item => {
-    if (!item) return item;
-    const cloneItem = cloneFile(item);
-    if (domain) {
-      if (!/\/$/.test(domain)) {
-        domain = domain + '/';
-      }
-      if (cloneItem !== null && cloneItem !== void 0 && cloneItem.URL && !isBase64URL(cloneItem === null || cloneItem === void 0 ? void 0 : cloneItem.URL)) {
-        const hasDomain = /^(?:https?:\/\/)?[^\s/$.?#]+\.[^\s]+$/.test(cloneItem.URL);
-        cloneItem.URL = hasDomain ? cloneItem.URL : domain + 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 !== null && attached !== void 0 && attached.length) {
-      attached.length = 0;
-    }
-    return () => {
-      existClickOutOfItem.current = false;
-    };
-  }, []);
-  useEffect(() => {
-    setViewTypeState(viewType);
-  }, [viewType]);
-  useEffect(() => {
-    if (maxSize) {
-      if (!isNaN(maxSize)) {
-        maxSizeRef.current = maxSize * 1024 * 1024;
-      } else {
-        const [numberSize = ''] = maxSize.match(/\d+/) || [];
-        const [unitMaxSize = ''] = maxSize.match(/\D+/) || [];
-        maxSizeRef.current = getBit(numberSize, unitMaxSize);
-      }
-    }
-    return () => {
-      maxSizeRef.current = Infinity;
-    };
-  }, [maxSize]);
-  useEffect(() => {
-    if (multiple && maxFile > 1) attachmentInputRef.current.multiple = multiple;
-  }, [multiple, maxFile]);
-  useEffect(() => {
-    if (accept && typeof accept === 'string') {
-      attachmentInputRef.current.accept = `${accept}/*`.replace('/*/*', '/*');
-    }
-  }, [accept]);
-  useEffect(() => {
-    oldAttached.length = 0;
-    // afterChangeFile((data?.length || 0) + (newDataState?.length || 0));
-    if (data !== null && data !== void 0 && data.length && !(dataState !== null && dataState !== void 0 && dataState.length) && !(newDataState !== null && newDataState !== void 0 && newDataState.length)) {
-      // 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]);
-          attached.push(data[i]);
-        } else {
-          const item = mountDomain(data[i]);
-          oldAttached.push(item);
-          attached.push(item);
-        }
-      }
-      setDataState(data);
-      setTimeout(() => {
-        setNewDataState([]);
-      });
-    } else if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
-      setDataState([]);
-      setTimeout(() => {
-        setNewDataState([]);
-      });
-    }
-    return () => {
-      oldAttached.length = 0;
-      attached.length = 0;
-      chosenItems.length = 0;
-      allNewAttached.delete('files');
-      if (attachmentInputRef.current) {
-        attachmentInputRef.current.value = '';
-      }
-    };
-  }, [data]);
-  useEffect(() => {
-    if (inputProps && Object.keys(inputProps).length) {
-      Object.keys(inputProps).forEach(name => {
-        if (typeof inputProps[name] === 'boolean') {
-          attachmentInputRef.current[name] = inputProps[name];
-        } else {
-          attachmentInputRef.current.setAttribute(name, inputProps[name]);
-        }
-      });
-      return () => {
-        if (attachmentInputRef.current) {
-          Object.keys(inputProps).forEach(name => {
-            if (typeof inputProps[name] === 'boolean') {
-              attachmentInputRef.current[name] = false;
-            } else {
-              attachmentInputRef.current.removeAttribute(name);
-            }
-          });
-        }
-      };
-    }
-  }, [inputProps]);
-  const triggerClickInput = () => {
-    attachmentInputRef.current.click();
-  };
-  const onDragFileStart = () => {
-    attachmentInputRef.current.style.display = 'block';
-  };
-  const onDropInput = e => {
-    attachmentInputRef.current.style.display = 'none';
-    e.target.value = null; // Fix not fire onChange when select same file
-  };
-  // End handler
-
-  useImperativeHandle(reference, () => {
-    stripDomain();
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      oldAttached: oldAttached,
-      allNewAttached: newDataState,
-      attached: isSpecialCase ? newDataState : [...dataState, ...newDataState],
-      clear: confirmPopup => clearAllAttached(confirmPopup),
-      openFileDialog: triggerClickInput
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    currentRef.oldAttached = oldAttached;
-    currentRef.allNewAttached = newDataState;
-    currentRef.attached = [...dataState, ...newDataState];
-    currentRef.clear = confirmPopup => clearAllAttached(confirmPopup);
-    currentRef.openFileDialog = triggerClickInput;
-    return currentRef;
-  });
-
-  // Start view
-  const AttachHeaderView = jsx("div", {
-    css: AttachmentHeaderCSS(theme),
-    className: 'DGN-UI-Attachment-Header'
-  }, jsx("div", {
-    css: _AttachmentInfoCSS
-  }, jsx(Label, {
-    uppercase: true,
-    required: required,
-    type: 'h5',
-    color: 'text/sub'
-  }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
-    css: AttachmentHeaderIconCSS
-  }, jsx("div", {
-    css: _AttachmentHandleIconCSS,
-    ref: attachmentHandleIconRef
-  }, jsx(ButtonIcon, {
-    viewType: 'ghost',
-    className: 'view',
-    name: 'view',
-    onClick: () => onGetViewItem()
-  }), jsx(ButtonIcon, {
-    viewType: 'ghost',
-    className: 'download',
-    name: 'download',
-    onClick: _onDownload
-  }), allowDelete && isEnable ? jsx(ButtonIcon, {
-    viewType: 'ghost',
-    className: 'delete',
-    name: 'delete',
-    onClick: onShowPopup
-  }) : null), jsx("div", {
-    css: isEmpty ? AttachmentImageEmptyCSS : css`
-                                      margin-right: ${spacing([isSpecialCase ? 0 : 2])};
-                                  `
-  }, jsx("div", {
-    css: [AttachmentImageCenterCSS, !isEnable && [parseHeight('calc(100% - 32px)'), justifyEnd]]
-  }, isEnable ? jsx("div", {
-    css: AttachmentImageCenterCSS
-  }, jsx(ButtonIcon, {
-    css: isEmpty && _ButtonAttachmentCSS,
-    circular: isEmpty,
-    viewType: isEmpty ? 'text' : 'ghost',
-    name: 'Attachment',
-    size: isEmpty ? 'extraGiant' : 'medium',
-    onClick: triggerClickInput
-  }), isEmpty ? jsx(Typography, {
-    css: userSelectNone,
-    type: 'p3',
-    color: 'system/rest'
-  }, hintText) : null) : isEmpty ? jsx(Typography, {
-    css: userSelectNone,
-    type: 'p3',
-    color: 'system/rest'
-  }, getGlobal('noFileText')) : null)), allowSort && !isEmpty && !isSpecialCase ? jsx(Popover, {
-    ref: popoverRef,
-    anchor: jsx(ButtonIcon, {
-      viewType: 'ghost',
-      name: 'Sort',
-      style: {
-        marginRight: 8
-      }
-    }),
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'right'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'right'
-    }
-  }, jsx(List, null, jsx(ListItem, {
-    onClick: e => onSortElement(e, 'filename')
-  }, jsx(ListItemText, null, getGlobal('byName'))), jsx(ListItem, {
-    onClick: e => onSortElement(e, 'filetype')
-  }, jsx(ListItemText, null, getGlobal('byType'))), jsx(ListItem, {
-    onClick: e => onSortElement(e, 'filesize')
-  }, jsx(ListItemText, null, getGlobal('bySize'))), jsx(ListItem, {
-    onClick: e => onSortElement(e, 'datetime')
-  }, jsx(ListItemText, null, getGlobal('byDate'))), jsx(ListItem, {
-    onClick: e => onSortElement(e, 'username')
-  }, jsx(ListItemText, null, getGlobal('byOwner'))))) : null, !isEmpty && !isSpecialCase ? jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: viewTypeIconMap.get(viewTypeState),
-    onClick: () => setViewTypeState(viewTypeSwitchMap.get(viewTypeState))
-  }) : null));
-  const AttachmentInputView = jsx("input", {
-    ref: attachmentInputRef,
-    type: "file",
-    style: {
-      display: 'none'
-    },
-    css: css`
-                    ${positionAbsolute};
-                    ${parseWidthHeight('100%')};
-                    opacity: 0;
-                `,
-    className: 'DGN-UI-Attachment-Input',
-    title: "",
-    onDrop: onDropInput,
-    onDragLeave: onDropInput,
-    onClick: e => e.target.value = null // Fix not fire onChange when select same file
-    ,
-    onChange: onChangeFiles,
-    ...inputProps
-  });
-  const renderAttachmentItemDetail = (item, idx, isNew) => {
-    const date = isNew ? new Date() : new Date(item.CreateDate);
-    if (isNew) item.CreateDate = date.toISOString();
-    const type = getType(item);
-    const name = isNew ? item.name : item.FileName;
-    const key = (item === null || item === void 0 ? void 0 : item.lastModified) + (item === null || item === void 0 ? void 0 : item.size);
-    return jsx(Grid, {
-      item: true,
-      xs: 12,
-      key: idx,
-      onClick: e => onChooseItem(e, idx),
-      onDoubleClick: e => onView(e.currentTarget, isNew ? null : item.AttachmentID),
-      className: classNames('DGN-UI-Attachment-List-Attached-Row', 'attachment-row')
-    }, jsx("div", {
-      css: [_AttachedItemCSS, AttachedItemDetailCSS(theme)]
-    }, jsx("span", {
-      css: _AttachedItemInfoCSS
-    }, jsx(Icon, {
-      css: (item.lastModifiedDate || isNew) && _DotNewFileDetailCSS,
-      width: 16,
-      height: 16,
-      name: type === 'default' ? 'another' : type
-    }), jsx("span", {
-      css: displayNone,
-      className: 'filetype'
-    }, type), jsx(Typography, {
-      className: 'filename',
-      css: css`
-                                    margin-left: ${spacing([3])};
-                                `,
-      type: 'p1',
-      lineClamp: 1
-    }, name)), jsx("span", {
-      css: _AttachedItemOwnerCSS
-    }, jsx("span", {
-      css: DetailInfoCSS
-    }, jsx(Typography, {
-      className: 'username',
-      type: 'p2',
-      color: 'text/sub'
-    }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx(Typography, {
-      className: 'datetime',
-      type: 'p2',
-      color: 'text/sub'
-    }, getDateTime(date)), jsx(Typography, {
-      className: 'filesize',
-      type: 'p2',
-      color: 'text/sub'
-    }, calculateSize(item.FileSize || item.size))), isNew ? jsx("span", {
-      css: [_AttachedLinearCSS, displayNone]
-    }, jsx(LinearProgress, {
-      className: `DGN-UI-LinearProgress-${key}`,
-      determinate: true,
-      percent: 0
-    })) : null)));
-  };
-  const renderAttachmentItemIcon = (item, idx, isNew) => {
-    const date = isNew ? new Date() : new Date(item.CreateDate);
-    if (isNew) item.CreateDate = date.toISOString();
-    const type = getType(item);
-    const name = isNew ? item.name : item.FileName;
-    const key = (item === null || item === void 0 ? void 0 : item.lastModified) + (item === null || item === void 0 ? void 0 : item.size);
-    return jsx(Grid, {
-      item: true,
-      xs: 'auto',
-      key: idx,
-      onClick: e => onChooseItem(e, idx),
-      onDoubleClick: e => onView(e.currentTarget, isNew ? null : item.AttachmentID),
-      className: classNames('DGN-UI-Attachment-List-Attached-Row', 'attachment-row')
-    }, jsx("div", {
-      css: _AttachedItemCSS
-    }, jsx("span", {
-      css: AttachedItemIconInfoCSS(theme)
-    }, jsx(Icon, {
-      css: [(item.lastModifiedDate || isNew) && _DotNewFileIconCSS],
-      width: 40,
-      height: 40,
-      name: type === 'default' ? 'another' : type
-    }), jsx(Typography, {
-      className: 'filename',
-      css: [textLeft, parseMaxWidth(64)],
-      type: 'p3',
-      lineClamp: 2
-    }, name), jsx("span", {
-      css: displayNone,
-      className: 'filetype'
-    }, type), jsx("span", {
-      css: displayNone,
-      className: 'username'
-    }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx("span", {
-      css: displayNone,
-      className: 'datetime'
-    }, getDateTime(date)), jsx("span", {
-      css: displayNone,
-      className: 'filesize'
-    }, calculateSize(item.FileSize || item.size))), isNew ? jsx("span", {
-      css: [_AttachedLinearCSS, displayNone]
-    }, jsx(LinearProgress, {
-      className: `DGN-UI-LinearProgress-${key}`,
-      determinate: true,
-      percent: 0
-    })) : null));
-  };
-  const updateSize = () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    timer.current = setTimeout(() => {
-      if (ref.current) {
-        setSizeByHeight(ref.current.offsetHeight < ref.current.offsetWidth);
-      }
-    }, 300);
-  };
-  useLayoutEffect(() => {
-    window.addEventListener('resize', updateSize);
-    updateSize();
-    return () => window.removeEventListener('resize', updateSize);
-  }, []);
-  const renderAttachmentItemPicture = (item, idx, isNew) => {
-    const date = isNew ? new Date() : new Date(item.CreateDate);
-    if (isNew) item.CreateDate = date.toISOString();
-    const type = getType(item);
-    const name = isNew ? item.name : item.FileName;
-    const key = (item === null || item === void 0 ? void 0 : item.lastModified) + (item === null || item === void 0 ? void 0 : item.size);
-    const isTypeImage = type === 'image';
-    const isSpecialByHeight = sizeByHeight && isSpecialCase;
-    const specialBreakpointColumn = isSpecialByHeight ? 'auto' : 12;
-    return jsx(Grid, {
-      item: true,
-      xs: isSpecialCase ? specialBreakpointColumn : 6,
-      sm: isSpecialCase ? specialBreakpointColumn : 4,
-      md: isSpecialCase ? specialBreakpointColumn : 3,
-      lg: isSpecialCase ? specialBreakpointColumn : 2,
-      xl: isSpecialCase ? specialBreakpointColumn : 2,
-      key: idx,
-      onClick: e => onChooseItem(e, idx),
-      onDoubleClick: e => onView(e.currentTarget, isNew ? null : item.AttachmentID),
-      className: classNames('DGN-UI-Attachment-List-Attached-Row', 'attachment-row')
-    }, jsx("div", {
-      css: [_AttachedItemPictureCSS, !isTypeImage && AttachedItemPictureImageCSS, isSpecialByHeight && parseWidthHeight(height - 56 - 8 - 2)]
-    }, isTypeImage ? jsx(Image, {
-      square: true,
-      src: item.URL,
-      width: isSpecialByHeight ? 'auto' : '100%',
-      height: isSpecialByHeight ? '100%' : 'auto'
-    }) : jsx(Icon, {
-      css: parseWidthHeight('100%'),
-      name: type === 'default' ? 'another' : type,
-      width: '50%',
-      height: '50%'
-    }), jsx(Typography, {
-      css: _ItemPictureInfoCSS,
-      type: 'p2',
-      color: 'text/tooltip',
-      lineClamp: 10,
-      className: 'DGN-UI-Attachment-Item-Picture-Info'
-    }, name), jsx("span", {
-      css: displayNone,
-      className: 'filetype'
-    }, type), jsx("span", {
-      css: displayNone,
-      className: 'filename'
-    }, name), jsx("span", {
-      css: displayNone,
-      className: 'username'
-    }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx("span", {
-      css: displayNone,
-      className: 'datetime'
-    }, getDateTime(date)), jsx("span", {
-      css: displayNone,
-      className: 'filesize'
-    }, calculateSize(item.FileSize || item.size)), isNew ? jsx("span", {
-      css: [_AttachedLinearCSS, displayNone]
-    }, jsx(LinearProgress, {
-      className: `DGN-UI-LinearProgress-${key}`,
-      determinate: true,
-      percent: 0
-    })) : null));
-  };
-  const renderAttachmentItem = (item, idx, isNew = false) => {
-    if (!item) return;
-    const date = isNew ? new Date() : new Date(item.CreateDate);
-    if (isNew) item.CreateDate = date.toISOString();
-    return viewTypeState === 'detail' ? renderAttachmentItemDetail(item, idx, isNew) : viewTypeState === 'icon' ? renderAttachmentItemIcon(item, idx, isNew) : renderAttachmentItemPicture(item, idx, isNew);
-  };
-  const AttachedView = useMemo(() => {
-    return jsx(ScrollBar, {
-      css: _AttachmentListCSS,
-      className: 'DGN-UI-Attachment-List'
-    }, jsx(Grid, {
-      container: true,
-      css: isSpecialCase && justifyCenter,
-      ref: attachedRef,
-      className: classNames('DGN-UI-Attachment-List-Attached'),
-      spacing: 2
-    }, dataState.map((item, idx) => {
-      return renderAttachmentItem(mountDomain(item), idx);
-    }), newDataState.map((item, idx) => {
-      return renderAttachmentItem(mountDomain(item), (dataState === null || dataState === void 0 ? void 0 : dataState.length) + idx, true);
-    })));
-  }, [data, domain, onViewProp, unitSize, dataState, newDataState, viewTypeState, sizeByHeight, theme]);
-  const PopupView = jsx(Popup, {
-    open: showPopup,
-    ref: popupRef,
-    type: 'yesno',
-    description: deleteNotifyText,
-    pressESCToClose: true,
-    onClose: onClosePopup,
-    onConfirm: onRemoveMultiple,
-    onCancel: onClosePopup
-  });
-  const ModalView = useMemo(() => {
-    if (!chosenItems.length) return setShowModal(false);
-    const index = chosenItems[0];
-    const data = mountDomain([...dataState, ...newDataState][index]);
-    const dataType = getType(data);
-    if (isBase64URL(data === null || data === void 0 ? void 0 : data.URL) && !['image', 'pdf'].includes(dataType)) setShowModal(false);
-
-    // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
-    return jsx(ModalSample, {
-      open: showModal,
-      title: data === null || data === void 0 ? void 0 : data.FileName,
-      onClose: () => setShowModal(false)
-    }, jsx(Slider, null, jsx(SliderItem, {
-      dataType: dataType,
-      url: data === null || data === void 0 ? void 0 : data.URL
-    })));
-  }, [domain, showModal]);
-  const NotifyView = jsx(Notify, {
-    ref: notifyRef,
-    progressing: true,
-    autoDisappear: true,
-    color: 'danger'
-  });
-  // End view
-
-  return jsx("div", {
-    ref: ref,
-    css: _AttachmentRootCSS,
-    id: id,
-    className: classNames('DGN-UI-Attachment', className),
-    style: style,
-    onDragEnter: onDragFileStart
-  }, AttachHeaderView, AttachedView, AttachmentInputView, PopupView, ModalView, NotifyView);
-}));
-const AttachmentHandleIconCSS = ({
-  colors,
-  spacing
-}) => css`
-    ${displayNone};
-    ${parseHeight(24)};
-    margin-right: ${spacing([2])};
-    ${borderRight(1, getProp(colors, 'line/normal'))};
-    button {
-        margin-right: ${spacing([2])};
-    }
-`;
-const AttachmentHeaderCSS = ({
-  spacing
-}) => css`
-    ${displayFlex};
-    ${itemsCenter};
-    ${justifyBetween};
-    ${boxBorder};
-    ${parseWidth('100%')};
-    padding: ${spacing([4, 4])};
-`;
-const AttachmentInfoCSS = ({
-  spacing
-}) => css`
-    ${displayFlex};
-    gap: ${spacing([2])};
-`;
-const AttachmentHeaderIconCSS = css`
-    ${displayFlex};
-    ${itemsCenter};
-`;
-const AttachmentImageCenterCSS = css`
-    ${displayFlex};
-    ${flexCol};
-    ${justifyCenter};
-    ${itemsCenter};
-    ${parseWidthHeight('100%')};
-`;
-const ButtonAttachmentCSS = ({
-  colors,
-  spacing
-}) => css`
-    ${border(1, getProp(colors, 'line/normal'))};
-    ${borderDashed};
-    margin: ${spacing([0, 'auto', 4])};
-`;
-const AttachmentImageEmptyCSS = css`
-    ${positionAbsolute};
-    ${parseWidthHeight('100%')};
-    ${top(0)};
-    ${left(0)};
-`;
-const AttachedItemInfoCSS = ({
-  spacing
-}) => css`
-    ${displayFlex};
-    ${itemsCenter};
-    ${userSelectNone};
-    ${parseMinWidth('calc(50% - 10px)')};
-    margin-right: ${spacing([2])};
-`;
-const DotNewFileDetailCSS = ({
-  colors
-}) => css`
-    :after {
-        content: '';
-        ${positionAbsolute};
-        ${borderRadius50};
-        ${parseWidthHeight(4, 4)};
-        ${bgColor(getProp(colors, 'semantic/success'))};
-        ${top(0)};
-        ${left(4)};
-    }
-`;
-const DotNewFileIconCSS = ({
-  colors
-}) => css`
-    :after {
-        content: '';
-        ${positionAbsolute};
-        ${borderRadius50};
-        ${parseWidthHeight(6, 6)};
-        ${bgColor(getProp(colors, 'semantic/success'))};
-        ${top(3)};
-        ${left(14)};
-    }
-`;
-const AttachedItemOwnerCSS = ({
-  colors
-}) => css`
-    ${displayFlex};
-    ${positionRelative};
-    ${itemsCenter};
-    ${userSelectNone};
-    ${parseHeight('100%')};
-    ${textColor(getProp(colors, 'text/sub'))};
-`;
-const DetailInfoCSS = css`
-    ${displayFlex};
-    ${parseMinWidth(333)};
-    .username {
-        ${displayInlineBlock};
-        ${truncate};
-        ${parseMinWidth(120)};
-        ${parseMaxWidth(120)};
-    }
-    .datetime {
-        ${displayInlineBlock};
-        ${parseMinWidth('max-content')};
-        ${parseMaxWidth('max-content')};
-    }
-    .filesize {
-        ${floatRight};
-        ${textRight};
-        margin-left: auto;
-    }
-`;
-const AttachedLinearCSS = ({
-  colors
-}) => css`
-    ${displayFlex};
-    ${positionAbsolute};
-    ${itemsCenter};
-    ${bgColor(getProp(colors, 'system/standard'))};
-    ${parseWidthHeight('100%')};
-    ${top(0)};
-`;
-const AttachedItemCSS = ({
-  colors
-}) => css`
-    ${positionRelative};
-    ${borderRadius4px};
-    ${cursorPointer};
-    transition: padding 0.5s ease;
-    &:hover {
-        ${bgColor(getProp(colors, 'fill/hover'))};
-    }
-    &:active {
-        ${bgColor(getProp(colors, 'fill/pressed'))};
-    }
-    &.chosen {
-        ${bgColor(getProp(colors, 'fill/focus'))};
-    }
-`;
-const AttachedItemDetailCSS = ({
-  spacing
-}) => css`
-    ${displayFlex};
-    ${justifyBetween};
-    ${itemsCenter};
-    ${parseMinHeight(24)};
-    padding: ${spacing([0, 2])};
-`;
-const AttachedItemIconInfoCSS = ({
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexCol};
-    ${itemsCenter};
-    ${positionRelative};
-    ${textCenter};
-    padding: ${spacing([1, 2])};
-`;
-const AttachmentListCSS = ({
-  spacing
-}) => css`
-    ${boxBorder};
-    margin-right: ${spacing([1.25])};
-    padding: ${spacing([0, 1, 2, 4])};
-    overflow-y: scroll;
-`;
-const AttachmentRootCSS = (isEmpty, isEnable, height, {
-  colors
-}) => css`
-    ${displayFlex};
-    ${flexCol};
-    ${justifyStart};
-    ${positionRelative};
-    ${borderRadius4px};
-    ${boxBorder};
-    ${border(1, getProp(colors, 'line/normal'))};
-    ${parseMinHeight(isEmpty && !isEnable ? 120 : isEmpty ? 280 : null)};
-    ${parseHeight(height)};
-    ${bgColor(getProp(colors, 'system/standard'))};
-`;
-const AttachedItemPictureCSS = ({
-  colors
-}) => css`
-    ${displayFlex};
-    ${positionRelative};
-    ${boxBorder};
-    ${borderRadius4px};
-    ${cursorPointer};
-    ${overflowHidden};
-    ${userSelectNone};
-    ${border(1, getProp(colors, 'line/category'))};
-    &:focus,
-    &:active,
-    &.chosen {
-        ${border(2, getProp(colors, 'line/focus'))};
-    }
-    &:not(:hover) {
-        .DGN-UI-Attachment-Item-Picture-Info {
-            ${displayNone};
-        }
-    }
-`;
-const AttachedItemPictureImageCSS = css`
-    ${itemsCenter};
-    ${justifyCenter};
-    ${aspectSquare};
-`;
-const ItemPictureInfoCSS = ({
-  colors,
-  spacing
-}) => css`
-    ${positionAbsolute};
-    ${boxBorder};
-    ${bottom(0)};
-    ${left(0)};
-    padding: ${spacing([1, 2])};
-    ${bgColor(getProp(colors, 'fill/tooltip'))};
-    ${parseWidth('100%')};
-`;
-
-// Attachment.defaultProps = {
-//     allowDelete: true,
-//     allowSort: true,
-//     className: '',
-//     data: [],
-//     disabled: false,
-//     height: 280,
-//     maxFile: Infinity,
-//     multiple: true,
-//     style: {},
-//     viewType: 'detail',
-// };
-
-Attachment.propTypes = {
-  /** File types that can be accepted. */
-  accept: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  /** If `true`, allow delete attachment. */
-  allowDelete: PropTypes.bool,
-  /** 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/demo.jpg",<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,
-  /** Height of the component. */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** 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.oneOfType([PropTypes.string, PropTypes.number]),
-  /** 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/>
-   * }
-   */
-  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', 'picture'])
-};
-export default Attachment;