diginet-core-ui 1.3.85 → 1.3.86

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

@@ -5,17 +5,15 @@ import { ButtonIcon, HelperText, Label, LinearProgress, List, ListItem, ListItem
 import { getGlobal } from "../../../global";
 import { Another, Compressed, Image, Pdf, Presentation, Sheet, Word } from "../../../icons";
 import PropTypes from 'prop-types';
-import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { alignCenter, border, borderBox, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexRow, flexWrap, justifyBetween, justifyCenter, justifyStart, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { bgColor, border, borderRadius4px, borderRadius50, boxBorder, boxContent, cursorPointer, displayBlock, displayFlex, displayInlineBlock, displayNone, flexCol, flexRow, flexWrap, floatRight, gap, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, mg, mgb, mgl, mgr, mgx, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, textCenter, textRight, truncate, userSelectNone } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, date as moment, getFileType } from "../../../utils";
 const {
   colors: {
     system: {
       rest: systemRest,
-      white: systemWhite,
-      dark: systemDark
+      white: systemWhite
     },
     semantic: {
       success: semanticSuccess
@@ -31,13 +29,7 @@ const {
     text: {
       sub: textSub
     }
-  },
-  typography: {
-    paragraph1,
-    paragraph2,
-    paragraph3
-  },
-  spacing
+  }
 } = useTheme();
 const icons = {
   pdf: jsx(Pdf, {
@@ -92,15 +84,7 @@ const getType = data => {
 };
 const getDateTime = date => {
   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()));
+  return moment(date).format('DD/MM/YYYY, HH:mm:ss');
 };
 const getNewUnitSize = (sizeName, totalSize, num) => {
   if (sizeName === 'B' && num === 1 || sizeName === 'TB' && num === -1) return [sizeName, totalSize];
@@ -126,6 +110,17 @@ const getBit = (size, unit) => {
       return size * 1024 * 1024;
   }
 };
+const formatBytes = (bytes, decimals = 2) => {
+  if (!+bytes) return '0 Bytes';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  // return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+  return [parseFloat((bytes / Math.pow(k, i)).toFixed(dm)), sizes[i]];
+};
+const divideSizeMap = new Map([['B', 1], ['KB', 1024], ['MB', 1024 ** 2], ['GB', 1024 ** 3], ['TB', 1024 ** 4]]);
 const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   accept,
   allowSort,
@@ -149,12 +144,14 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onView: onViewProp,
   ownerName,
   readOnly,
+  //deprecated
   required,
   style,
   unitSize,
   uploadErrorInfo,
   viewType
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const attachTextRef = useRef(null);
   const attachmentHandleIconRef = useRef(null);
@@ -168,13 +165,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const removedAttachedRef = useRef([]);
   const prevent = useRef(null);
   const existClickOutOfItem = useRef(null);
-  const divideSize = useRef(null);
   const maxSize = useRef(Infinity);
   const timer = useRef(null);
   const [showModal, setShowModal] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
   const [viewTypeState, setViewTypeState] = useState(viewType);
   const [isEmpty, setIsEmpty] = useState(null);
+  const [newDataState, setNewDataState] = useState([]);
+  const isEnable = !readOnly && !disabled;
+  const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable);
 
   // Start handler
   const onSortElement = (e, type) => {
@@ -241,8 +240,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setIsEmpty(!length);
   };
   const onChangeFiles = async e => {
-    if (readOnly || disabled) return;
-    if (e.target && e.target.files && e.target.files.length) {
+    var _e$target, _e$target$files;
+    if (!isEnable) return;
+    e.persist();
+    if (e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && (_e$target$files = _e$target.files) !== null && _e$target$files !== void 0 && _e$target$files.length) {
       let files = e.target.files;
       const lengthAttached = attached.length;
       for (let i = 0; i < files.length; i++) {
@@ -272,18 +273,17 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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);
+          files[i].FileName = files[i].name;
+          attached.push(files[i]);
         }
+        setNewDataState([...newDataState, ...Array.from(files)]);
         for (let i = 0; i < length; i++) {
-          // if (files[i].size > maxSize) continue;
           files[i].URL = await onProgressing(files[i]);
-          files[i].FileName = files[i].name;
         }
       } else if (length) {
-        attachedRef.current.innerHTML = null;
         files[0].FileName = files[0].name;
-        addNewElement(files[0], lengthAttached);
+        setNewDataState([...newDataState, files[0]]);
+        attached.push(files[0]);
         files[0].URL = await onProgressing(files[0]);
       }
       insertAttached(files);
@@ -308,7 +308,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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 => {
@@ -326,102 +325,20 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     });
   };
-  const addNewElement = (file, lengthAttached) => {
-    const newAttach = getItemDetailHTML(file, lengthAttached + 1);
-    attached.push(file);
-    const newElement = document.createElement('div');
-    newElement.className = 'attachment-row';
-    ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
-  };
-  const getItemDetailHTML = (data, i) => {
-    const date = new Date();
-    data.CreateDate = date.toISOString();
-    const fileType = getType(data);
-    return jsx("div", {
-      css: AttachedItemCSS,
-      key: i,
-      onClick: e => onChooseItem(e),
-      onDoubleClick: e => onView(e.currentTarget.parentNode)
-    }, jsx("span", {
-      css: AttachedItemInfoCSS
-    }, jsx("span", {
-      css: AttachedItemInfoIconCSS,
-      className: 'new-file'
-    }, icons[fileType], jsx("span", {
-      className: 'filetype',
-      style: {
-        display: 'none'
-      }
-    }, fileType)), jsx("span", {
-      css: AttachedItemInfoNameCSS,
-      className: 'filename'
-    }, data.name)), jsx("span", {
-      css: AttachedItemOwnerCSS
-    }, jsx("span", {
-      className: 'detail-info'
-    }, jsx("span", {
-      className: 'username'
-    }, ownerName), jsx("span", {
-      className: 'datetime'
-    }, getDateTime(date)), jsx("span", {
-      className: 'filesize'
-    }, calculateSize(data.size))), jsx("span", {
-      css: AttachedLinearCSS
-    }, jsx(LinearProgress, {
-      className: `css-${AttachedLinearCSS.name}-attached`,
-      determinate: true,
-      percent: 0
-    }))));
-  };
-  const getItemHTMLFromData = (data, i) => {
-    const date = new Date(data.CreateDate);
-    const type = getType(data);
-    return jsx("div", {
-      css: AttachedItemCSS,
-      key: i,
-      onClick: e => onChooseItem(e),
-      onDoubleClick: e => onView(e.currentTarget.parentNode, data.AttachmentID)
-    }, jsx("span", {
-      css: AttachedItemInfoCSS
-    }, jsx("span", {
-      css: AttachedItemInfoIconCSS,
-      className: data.lastModifiedDate ? 'new-file' : ''
-    }, icons[type], jsx("span", {
-      className: 'filetype',
-      style: {
-        display: 'none'
-      }
-    }, type)), jsx("span", {
-      css: AttachedItemInfoNameCSS,
-      className: 'filename'
-    }, data.FileName)), jsx("span", {
-      css: AttachedItemOwnerCSS
-    }, jsx("span", {
-      className: 'detail-info'
-    }, jsx("span", {
-      className: 'username'
-    }, data.UserName || (data.lastModifiedDate ? ownerName : '')), jsx("span", {
-      className: 'datetime'
-    }, getDateTime(date)), jsx("span", {
-      className: 'filesize'
-    }, calculateSize(data.FileSize || data.size)))));
-  };
   const calculateSize = size => {
     if (!size && size !== 0) return 'unknown';
     let totalSize;
     let unitSizeName;
-    if (divideSize.current) {
-      totalSize = size / divideSize.current;
+    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 {
-      totalSize = size;
-      unitSizeName = 'B';
-      while (totalSize > 1024 && unitSizeName !== 'TB') {
-        [unitSizeName, totalSize] = getNewUnitSize(unitSizeName, totalSize, -1);
-      }
+      // auto-detect unit size name
+      [totalSize, unitSizeName] = formatBytes(size);
     }
     if (totalSize < 1000) {
       totalSize = Math.round(totalSize * 100) / 100;
@@ -526,23 +443,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }).catch(() => alert('File not found'));
     if (onDownloadProp) onDownloadProp(url);
   };
-
-  // const onRemove = (e, AttachmentID='') => {
-  //     const parent = e.currentTarget.parentNode.parentNode.parentNode;
-  //     const index = Array.from(attachedRef.current.children).indexOf(parent);
-  //     attached.splice(index, 1);
-  //     if (index < oldAttached.length) {
-  //         oldAttached.splice(index, 1);
-  //     } else {
-  //         removeFileOutInputFiles(index - oldAttached.length);
-  //     }
-  //     parent.remove();
-  //     if (!attached.length) {
-  //         afterChangeFile();
-  //     }
-  //     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) {
@@ -584,21 +484,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
     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('-');
@@ -802,13 +687,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: fileInfo.type,
     webkitRelativePath: fileInfo.webkitRelativePath
   });
-
-  // const parseStringify2 = (fileInfo, inData) =>
-  //     JSON.stringify({
-  //         name: fileInfo?.[inData ? 'FileName' : 'name'],
-  //         size: fileInfo?.[inData ? 'FileSize' : 'size'],
-  //     });
-
   const mountDomain = item => {
     if (!item) return item;
     const cloneItem = JSON.parse(JSON.stringify(item));
@@ -846,38 +724,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     setViewTypeState(viewType);
   }, [viewType]);
-  useEffect(() => {
-    attachmentInputRef.current.addEventListener('change', onChangeFiles);
-    return () => {
-      attachmentInputRef.current && attachmentInputRef.current.removeEventListener('change', onChangeFiles);
-    };
-  }, [readOnly, disabled, uploadErrorInfo, inputProps, isStripDomain, domain]);
-  useEffect(() => {
-    switch (true) {
-      case /^B$/i.test(unitSize):
-        divideSize.current = 1;
-        break;
-      case /KB/i.test(unitSize):
-        divideSize.current = 1024;
-        break;
-      case /MB/i.test(unitSize):
-        divideSize.current = 1024 ** 2;
-        break;
-      case /GB/i.test(unitSize):
-        divideSize.current = 1024 ** 3;
-        break;
-      case /TB/i.test(unitSize):
-        divideSize.current = 1024 ** 4;
-        break;
-      default:
-        divideSize.current = null;
-        break;
-    }
-    attachmentInputRef.current.addEventListener('change', onChangeFiles);
-    return () => {
-      attachmentInputRef.current && attachmentInputRef.current.removeEventListener('change', onChangeFiles);
-    };
-  }, [unitSize, onChange]);
   useEffect(() => {
     if (maxSizeProp) {
       if (!isNaN(maxSizeProp)) {
@@ -892,12 +738,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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.current = Infinity;
     };
   }, [maxFile, maxSizeProp, multiple, accept]);
@@ -909,7 +750,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // Load files data was uploaded
       const length = data.length;
       for (let i = 0; i < length; i++) {
-        const newAttach = getItemHTMLFromData(data[i], i);
         if (Object.prototype.toString.call(data[i]) === '[object File]') {
           allNewAttached.append('files', data[i]);
           newAttachedRef.current.push(data[i]);
@@ -919,32 +759,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           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 {
-    //             const newAttach = getItemHTMLFromData(item, i);
-    //             allNewAttached.append('files', item);
-    //             attached.push(item);
-    //             const newElement = document.createElement('div');
-    //             newElement.className = 'attachment-row';
-    //             ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
-    //         }
-    //     }
-    // }
     return () => {
-      if (attachedRef.current) {
-        attachedRef.current.innerHTML = null;
-      }
+      // if (attachedRef.current) {
+      //     attachedRef.current.innerHTML = null;
+      // }
+      setNewDataState([]);
       oldAttached.length = 0;
       attached.length = 0;
       chosenItems.length = 0;
@@ -987,134 +808,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   // End handler
 
-  // Start view
-  const AttachHeaderView = useMemo(() => jsx("div", {
-    css: AttachmentHeaderCSS,
-    className: 'DGN-UI-Attachment-Header'
-  }, jsx("div", {
-    css: AttachmentInfoCSS
-  }, jsx(Label, {
-    uppercase: true,
-    required: required,
-    disabled: disabled,
-    type: 'h5',
-    color: textSub,
-    ref: attachTextRef
-  }, 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: onDownloadMultiple
-  }), !readOnly ? jsx(ButtonIcon, {
-    viewType: 'ghost',
-    className: 'delete',
-    name: 'delete',
-    onClick: onShowPopup
-  }) : null), jsx("div", {
-    css: isEmpty ? AttachmentImageEmptyCSS : AttachmentImageCSS
-  }, !(readOnly || disabled) ? 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: systemRest
-  }, hintText) : null) : null), allowSort && !isEmpty ? jsx(Popover, {
-    ref: popoverRef,
-    anchor: jsx(ButtonIcon, {
-      viewType: 'ghost',
-      name: 'Sort',
-      style: {
-        marginRight: 8
-      }
-    }),
-    width: 'max-content',
-    removeAfterClose: false,
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'right'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'right'
-    }
-  }, jsx(List, null, jsx(ListItem, {
-    onClick: e => onSortElement(e, 'filename')
-  }, jsx(ListItemText, null, "By name")), jsx(ListItem, {
-    onClick: e => onSortElement(e, 'filetype')
-  }, jsx(ListItemText, null, "By type")), jsx(ListItem, {
-    onClick: e => onSortElement(e, 'filesize')
-  }, jsx(ListItemText, null, "By size")), jsx(ListItem, {
-    onClick: e => onSortElement(e, 'datetime')
-  }, jsx(ListItemText, null, "By date")), jsx(ListItem, {
-    onClick: e => onSortElement(e, 'username')
-  }, jsx(ListItemText, null, "By owner")))) : null, !isEmpty ? jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: viewTypeState === 'detail' ? 'IconView' : 'ListView',
-    onClick: () => setViewTypeState(viewTypeState === 'icon' ? 'detail' : 'icon')
-  }) : null)), [error, allowSort, disabled, readOnly, label, required, hintText, domain, viewTypeState, isEmpty]);
-  const AttachmentInputView = useMemo(() => jsx("div", {
-    css: AttachmentInputCSS,
-    className: 'DGN-UI-Attachment-Input'
-  }, jsx("input", {
-    type: "file",
-    ref: attachmentInputRef,
-    title: "",
-    onDrop: onDropInput,
-    onDragLeave: onDropInput,
-    onClick: e => e.target.value = null // Fix not fire onChange when select same file
-    ,
-    ...inputProps
-  })), [inputProps]);
-  const AttachedView = useMemo(() => jsx(ScrollBar, {
-    css: AttachmentListCSS,
-    className: 'DGN-UI-Attachment-List'
-  }, jsx("div", {
-    css: AttachedCSS,
-    ref: attachedRef,
-    className: viewTypeState === 'icon' ? 'icon-view' : ''
-  })), [viewTypeState]);
-  const PopupView = useMemo(() => jsx(Popup, {
-    open: showPopup,
-    ref: popupRef,
-    type: 'yesno',
-    description: deleteNotifyText,
-    pressESCToClose: true,
-    onClose: onClosePopup,
-    onConfirm: onRemoveMultiple,
-    onCancel: onClosePopup
-  }), [deleteNotifyText, onChange, onRemoveProp, showPopup]);
-  const ModalView = useMemo(() => {
-    if (!chosenItems.length) return setShowModal(false);
-    const index = chosenItems[0];
-    const data = mountDomain(attached[index]);
-    // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
-    return jsx(ModalSample, {
-      open: showModal,
-      title: data.FileName,
-      onClose: () => setShowModal(false)
-    }, jsx(Slider, null, jsx(SliderItem, {
-      url: data.URL
-    })));
-  }, [domain, showModal]);
-  // End view
-
   useImperativeHandle(reference, () => {
     stripDomain();
     const currentRef = ref.current || {};
@@ -1135,11 +828,210 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.openFileDialog = triggerClickInput;
     return currentRef;
   });
+
+  // Start view
+  const AttachHeaderView = useMemo(() => {
+    return jsx("div", {
+      css: AttachmentHeaderCSS,
+      className: 'DGN-UI-Attachment-Header'
+    }, jsx("div", {
+      css: AttachmentInfoCSS
+    }, jsx(Label, {
+      uppercase: true,
+      required: required,
+      type: 'h5',
+      color: textSub,
+      ref: attachTextRef
+    }, 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: onDownloadMultiple
+    }), isEnable ? jsx(ButtonIcon, {
+      viewType: 'ghost',
+      className: 'delete',
+      name: 'delete',
+      onClick: onShowPopup
+    }) : null), jsx("div", {
+      css: isEmpty ? AttachmentImageEmptyCSS : AttachmentImageCSS
+    }, 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: systemRest
+    }, hintText) : null) : isEmpty ? jsx(Typography, {
+      css: userSelectNone,
+      type: 'p3',
+      color: systemRest
+    }, getGlobal('noFileText')) : null)), allowSort && !isEmpty ? 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 ? jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: viewTypeState === 'detail' ? 'IconView' : 'ListView',
+      onClick: () => setViewTypeState(viewTypeState === 'icon' ? 'detail' : 'icon')
+    }) : null));
+  }, [allowSort, disabled, domain, error, hintText, label, readOnly, required, isEmpty, viewTypeState]);
+  const AttachmentInputView = useMemo(() => {
+    return jsx("div", {
+      css: AttachmentInputCSS,
+      className: 'DGN-UI-Attachment-Input'
+    }, jsx("input", {
+      type: "file",
+      ref: attachmentInputRef,
+      title: "",
+      onDrop: onDropInput,
+      onDragLeave: onDropInput,
+      onClick: e => e.target.value = null // Fix not fire onChange when select same file
+      ,
+      onChange: onChangeFiles,
+      ...inputProps
+    }));
+  }, [accept, disabled, domain, inputProps, isStripDomain, maxFile, multiple, onChange, readOnly, uploadErrorInfo, newDataState]);
+  const renderAttachmentItem = (item, idx, isNew = false) => {
+    const isViewTypeIcon = viewTypeState === 'icon';
+    const date = isNew ? new Date() : new Date(item.CreateDate);
+    if (isNew) item.CreateDate = date.toISOString();
+    const type = getType(item);
+    const name = isNew ? item.name : item.FileName;
+    return jsx("div", {
+      key: idx,
+      className: 'attachment-row'
+    }, jsx("div", {
+      css: AttachedItemCSS,
+      onClick: e => onChooseItem(e),
+      onDoubleClick: e => onView(e.currentTarget.parentNode, isNew ? null : item.AttachmentID)
+    }, jsx("span", {
+      css: AttachedItemInfoCSS
+    }, jsx("span", {
+      css: AttachedItemInfoIconCSS,
+      className: classNames((item.lastModifiedDate || isNew) && 'new-file')
+    }, icons[type], jsx("span", {
+      className: 'filetype',
+      style: {
+        display: 'none'
+      }
+    }, type)), jsx(Typography, {
+      className: 'filename',
+      css: [isViewTypeIcon ? mg([0, 2]) : mgl([3])],
+      type: isViewTypeIcon ? 'p3' : 'p1',
+      lineClamp: isViewTypeIcon ? 2 : 1
+    }, name)), jsx("span", {
+      css: AttachedItemOwnerCSS
+    }, !isViewTypeIcon ? jsx("span", {
+      css: DetailInfoCSS,
+      className: 'detail-info'
+    }, jsx(Typography, {
+      className: 'username',
+      type: 'p2',
+      color: textSub
+    }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx(Typography, {
+      className: 'datetime',
+      type: 'p2',
+      color: textSub
+    }, getDateTime(date)), jsx(Typography, {
+      className: 'filesize',
+      type: 'p2',
+      color: textSub
+    }, calculateSize(item.FileSize || item.size))) : null, isNew ? jsx("span", {
+      css: AttachedLinearCSS
+    }, jsx(LinearProgress, {
+      className: `css-${AttachedLinearCSS.name}-attached`,
+      determinate: true,
+      percent: 0
+    })) : null)));
+  };
+  const AttachedView = useMemo(() => {
+    const isViewTypeIcon = viewTypeState === 'icon';
+    return jsx(ScrollBar, {
+      css: AttachmentListCSS,
+      className: 'DGN-UI-Attachment-List'
+    }, jsx("div", {
+      css: AttachedCSS,
+      ref: attachedRef,
+      className: classNames(isViewTypeIcon && 'icon-view')
+    }, data.map((item, idx) => {
+      return renderAttachmentItem(item, idx);
+    }), newDataState.map((item, idx) => {
+      return renderAttachmentItem(item, (data === null || data === void 0 ? void 0 : data.length) + idx, true);
+    })));
+  }, [data, onViewProp, unitSize, newDataState, viewTypeState]);
+  const PopupView = useMemo(() => {
+    return jsx(Popup, {
+      open: showPopup,
+      ref: popupRef,
+      type: 'yesno',
+      description: deleteNotifyText,
+      pressESCToClose: true,
+      onClose: onClosePopup,
+      onConfirm: onRemoveMultiple,
+      onCancel: onClosePopup
+    });
+  }, [deleteNotifyText, onChange, onRemoveProp, showPopup]);
+  const ModalView = useMemo(() => {
+    if (!chosenItems.length) return setShowModal(false);
+    const index = chosenItems[0];
+    const data = mountDomain(attached[index]);
+    // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
+    return jsx(ModalSample, {
+      open: showModal,
+      title: data.FileName,
+      onClose: () => setShowModal(false)
+    }, jsx(Slider, null, jsx(SliderItem, {
+      url: data.URL
+    })));
+  }, [domain, showModal]);
+  // End view
+
   return jsx("div", {
     ref: ref,
-    css: AttachmentRootCSS,
+    css: _AttachmentRootCSS,
     id: id,
-    className: classNames('DGN-UI-Attachment', disabled && 'disabled', className),
+    className: classNames('DGN-UI-Attachment', className),
     style: style,
     onDragEnter: onDragFileStart
   }, AttachHeaderView, AttachmentInputView, AttachedView, PopupView, ModalView, jsx(Notify, {
@@ -1152,32 +1044,32 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const AttachmentHandleIconCSS = css`
     ${displayNone};
     ${parseHeight(24)};
-    margin-right: ${spacing([2])};
+    ${mgr([2])};
     border-right: 1px solid ${lineNormal};
     button {
-        margin-right: ${spacing([2])};
+        ${mgr([2])};
     }
 `;
 const AttachmentHeaderCSS = css`
-    ${flexRow};
-    ${alignCenter};
+    ${displayFlex};
+    ${itemsCenter};
     ${justifyBetween};
-    ${borderBox};
+    ${boxBorder};
     ${parseWidth('100%')};
-    padding: ${spacing([4, 4])};
+    ${pd([4, 4])};
 `;
 const AttachmentInfoCSS = css`
-    ${flexRow};
-    gap: ${spacing([2])};
+    ${displayFlex};
+    ${gap([2])};
 `;
 const AttachmentHeaderIconCSS = css`
-    ${flexRow};
-    ${alignCenter};
+    ${displayFlex};
+    ${itemsCenter};
 `;
 const AttachmentInputCSS = css`
     ${displayNone};
     ${positionAbsolute};
-    ${parseWidthHeight('100%', '100%')};
+    ${parseWidthHeight('100%')};
     top: 0;
     left: 0;
     input {
@@ -1187,183 +1079,154 @@ const AttachmentInputCSS = css`
     }
 `;
 const AttachmentImageCenterCSS = css`
+    ${displayFlex};
     ${flexCol};
     ${justifyCenter};
-    ${alignCenter};
-    ${parseWidthHeight('100%', '100%')};
+    ${itemsCenter};
+    ${parseWidthHeight('100%')};
 `;
 const ButtonAttachmentCSS = css`
     border: 1px dashed ${lineNormal} !important;
-    margin: ${spacing([0, 'auto', 4])};
+    ${mg([0, 'auto', 4])};
 `;
 const AttachmentImageCSS = css`
-    margin-right: ${spacing([2])};
+    ${mgr([2])};
 `;
 const AttachmentImageEmptyCSS = css`
     ${positionAbsolute};
-    ${parseWidthHeight('100%', '100%')};
+    ${parseWidthHeight('100%')};
     top: 0;
     left: 0;
 `;
 const AttachedItemInfoCSS = css`
-    ${flexRow};
-    ${alignCenter};
+    ${displayFlex};
+    ${itemsCenter};
     ${borderRadius4px};
     ${userSelectNone};
     ${parseMinWidth('calc(50% - 10px)')};
-    margin-right: ${spacing([2])};
+    ${mgr([2])};
 `;
 const AttachedItemInfoIconCSS = css`
     ${flexRow};
     ${positionRelative};
+    ${boxContent};
     ${parseMaxWidthHeight(14, 16)};
-    padding: ${spacing([1, 1.25])};
-    box-sizing: content-box;
+    ${pd([1, 1.25])};
     &.new-file:after {
         content: '';
         ${positionAbsolute};
         ${borderRadius50};
         ${parseWidthHeight(4, 4)};
+        ${bgColor(semanticSuccess)};
         top: 4.5px;
         left: -2px;
-        background: ${semanticSuccess};
     }
 `;
-const AttachedItemInfoNameCSS = css`
-    ${paragraph1};
-    ${ellipsis};
-    color: ${systemDark};
-    margin-left: ${spacing([3])};
-    padding-top: ${spacing([0.25])};
-    box-sizing: content-box;
-`;
 const AttachedItemOwnerCSS = css`
-    ${paragraph2};
-    ${flexRow};
+    ${displayFlex};
     ${positionRelative};
-    ${alignCenter};
+    ${itemsCenter};
     ${userSelectNone};
     ${parseHeight('100%')};
     color: ${textSub};
-    .detail-info {
-        ${flexRow};
-        ${parseMinWidth(333)};
-        .username {
-            ${displayInlineBlock};
-            ${ellipsis};
-            ${parseMinWidth(120)};
-            ${parseMaxWidth(120)};
-        }
-        .datetime {
-            ${displayInlineBlock};
-            ${parseMinWidth('max-content')};
-            ${parseMaxWidth('max-content')};
-        }
-        .filesize {
-            float: right;
-            text-align: right;
-            margin-left: auto;
-        }
+`;
+const DetailInfoCSS = css`
+    ${displayFlex};
+    ${parseMinWidth(333)};
+    .username {
+        ${displayInlineBlock};
+        ${truncate};
+        ${parseMinWidth(120)};
+        ${parseMaxWidth(120)};
+    }
+    .datetime {
+        ${displayInlineBlock};
+        ${parseMinWidth('max-content')};
+        ${parseMaxWidth('max-content')};
+    }
+    .filesize {
+        ${floatRight};
+        ${textRight};
+        ${mgl(['auto'])};
     }
 `;
 const AttachedLinearCSS = css`
-    ${flexRow};
+    ${displayFlex};
     ${positionAbsolute};
-    ${alignCenter};
-    ${parseWidthHeight('100%', '100%')};
+    ${itemsCenter};
+    ${bgColor(systemWhite)};
+    ${parseWidthHeight('100%')};
     top: 0;
-    background: ${systemWhite};
 `;
 const AttachedItemCSS = css`
-    ${flexRow};
+    ${displayFlex};
     ${justifyBetween};
     ${positionRelative};
     ${borderRadius4px};
     ${cursorPointer};
     ${parseHeight(24)};
-    padding: ${spacing([0, 2])};
+    ${pd([0, 2])};
     transition: padding 0.5s ease;
 `;
 const AttachedCSS = css`
     ${positionRelative};
     ${parseHeight('100%')};
-    ${parseMaxHeight(152)};
-    margin-left: ${spacing([2])};
-    margin-right: ${spacing([2])};
-    z-index: 1;
+    ${mgx([2])};
     overflow-y: visible;
     .attachment-row {
         ${displayBlock};
-        margin-bottom: ${spacing([2])};
+        ${mgb([2])};
         &:last-child {
-            margin-bottom: 0;
+            ${mgb(0)};
         }
     }
     &.icon-view {
-        ${flexRow};
+        ${displayFlex};
         ${flexWrap};
         ${justifyBetween};
         &::after {
             content: '';
             flex: auto;
         }
-        ${parseMaxHeight(200)};
+        ${parseMaxWidthHeight('calc(100% - 26px)', 200)};
         ${parseWidth('max-content')};
-        ${parseMaxWidth('calc(100% - 26px)')};
-        margin-left: 0;
+        ${mgl(0)};
         .attachment-row {
             ${positionRelative};
-            margin-left: ${spacing([4])};
+            ${mgl([4])};
             overflow-y: visible;
         }
         .css-${AttachedItemCSS.name} {
             ${displayBlock};
-            ${parseWidthHeight(80, 80)};
-            padding: 0;
-            position: initial;
+            ${parseWidthHeight(80)};
+            ${pd(0)};
             .css-${AttachedItemInfoCSS.name} {
                 ${displayBlock};
                 ${positionRelative};
                 ${textCenter};
-                ${ellipsis};
+                ${truncate};
                 ${parseWidth('max-content')};
                 ${parseMaxWidth(80)};
                 ${parseMinWidth(70)};
-                margin-left: auto;
-                margin-right: auto;
+                ${mgx(['auto'])};
                 .css-${AttachedItemInfoIconCSS.name} {
                     ${displayBlock};
-                    ${parseWidthHeight(40, 40)};
-                    ${parseMaxWidthHeight(40, 40)};
-                    margin: ${spacing([1, 'auto', 0.5])};
-                    padding: 0;
+                    ${parseWidthHeight(40)};
+                    ${parseMaxWidthHeight(40)};
+                    ${mg([1, 'auto', 0.5])};
+                    ${pd(0)};
                     &.new-file:after {
-                        ${parseWidthHeight(8, 8)};
+                        ${parseWidthHeight(8)};
                         top: -1px;
                         left: -7px;
                     }
                 }
-                .css-${AttachedItemInfoNameCSS.name} {
-                    ${paragraph3};
-                    ${textCenter};
-                    ${breakWord};
-                    ${parseMaxWidth('100%')};
-                    margin: ${spacing([0, 2])};
-                    display: -webkit-box;
-                    white-space: pre-wrap;
-                    -webkit-line-clamp: 2;
-                    -webkit-box-orient: vertical;
-                }
             }
             .css-${AttachedItemOwnerCSS.name} {
-                ${paragraph3};
+                ${parseHeight('auto')};
                 position: inherit;
-                height: auto;
-                .detail-info {
-                    ${displayNone};
-                }
                 .css-${AttachedLinearCSS.name} {
-                    height: auto;
+                    ${parseHeight('auto')};
                     bottom: 0;
                     top: unset;
                     background: none;
@@ -1372,54 +1235,47 @@ const AttachedCSS = css`
         }
     }
     &:not(.icon-view) {
-        min-width: 684px;
+        ${parseMinWidth(684)};
     }
 `;
 const AttachmentListCSS = css`
-    ${borderBox};
-    margin-right: ${spacing([1.25])};
-    padding: ${spacing([0, 1.75, 0])};
+    ${boxBorder};
+    ${mgr([1.25])};
+    ${pd([0, 1.75, 0])};
     overflow-y: overlay;
 `;
-const AttachmentRootCSS = css`
+const AttachmentRootCSS = (isEmpty, isEnable) => css`
+    ${displayFlex};
     ${flexCol};
-    ${flexWrap};
     ${justifyStart};
     ${positionRelative};
     ${borderRadius4px};
-    ${borderBox};
+    ${boxBorder};
     ${border(1, lineNormal)};
-    ${parseMinHeight(280)};
-    background-color: ${systemWhite};
+    ${parseHeight(isEmpty && !isEnable ? 120 : 280)};
+    ${bgColor(systemWhite)};
     .css-${AttachedCSS.name} {
-        &:not(.disabled) {
-            .css-${AttachedItemCSS.name} {
-                &:hover {
-                    background-color: ${fillHover};
-                    .css-${AttachedLinearCSS.name} {
-                        background-color: ${fillHover};
-                    }
+        .css-${AttachedItemCSS.name} {
+            &:hover {
+                ${bgColor(fillHover)};
+                .css-${AttachedLinearCSS.name} {
+                    ${bgColor(fillHover)};
                 }
-                &:active {
-                    background-color: ${fillPressed};
-                    .css-${AttachedLinearCSS.name} {
-                        background-color: ${fillPressed};
-                    }
+            }
+            &:active {
+                ${bgColor(fillPressed)};
+                .css-${AttachedLinearCSS.name} {
+                    ${bgColor(fillPressed)};
                 }
-                &.chosen {
-                    background-color: ${fillFocus};
-                    .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
-                        background-color: ${fillFocus};
-                    }
+            }
+            &.chosen {
+                ${bgColor(fillFocus)};
+                .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
+                    ${bgColor(fillFocus)};
                 }
             }
         }
     }
-    &.disabled {
-        .css-${AttachedItemCSS.name} {
-            ${pointerEventsNone};
-        }
-    }
     @media (max-width: 716px) {
         .css-${AttachedCSS.name}:not(.icon-view) {
             ${parseMinWidth(575)};
@@ -1439,7 +1295,7 @@ Attachment.defaultProps = {
   label: getGlobal('attachText'),
   maxFile: Infinity,
   multiple: true,
-  readOnly: false,
+  style: {},
   uploadErrorInfo: {
     maxFile: getGlobal(['errorDefault', 'maxFile']),
     maxSize: getGlobal(['errorDefault', 'maxSize']),
@@ -1509,12 +1365,12 @@ Attachment.propTypes = {
   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,
+  /** 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. */