diginet-core-ui 1.4.10-beta.3 → 1.4.11

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

@@ -1,12 +1,51 @@
 /** @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 { ButtonIcon, HelperText, Label, LinearProgress, List, ListItem, ListItemText, ModalSample, Notify, Popover, Popup, ScrollBar, Slider, SliderItem, Typography } from "../..";
 import { getGlobal } from "../../../global";
+import { Another, Compressed, Image, Pdf, Presentation, Sheet, Word } from "../../../icons";
 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, gap, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, left, mg, mgl, mgr, overflowHidden, parseHeight, parseMaxWidth, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, textCenter, textColor, textLeft, textRight, top, truncate, userSelectNone } from "../../../styles/general";
-import { classNames, getFileType, date as moment } from "../../../utils";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { bgColor, border, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, cursorPointer, displayBlock, displayFlex, displayInlineBlock, displayNone, flexCol, flexRow, flexWrap, floatRight, gap, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, left, mg, mgb, mgl, mgr, mgx, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, textCenter, textColor, textRight, top, truncate, userSelectNone } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { classNames, date as moment, getFileType } from "../../../utils";
+const {
+  colors: {
+    line: {
+      normal: lineNormal
+    }
+  }
+} = useTheme();
+const icons = {
+  pdf: jsx(Pdf, {
+    width: '100%',
+    height: '100%'
+  }),
+  word: jsx(Word, {
+    width: '100%',
+    height: '100%'
+  }),
+  sheet: jsx(Sheet, {
+    width: '100%',
+    height: '100%'
+  }),
+  presentation: jsx(Presentation, {
+    width: '100%',
+    height: '100%'
+  }),
+  image: jsx(Image, {
+    width: '100%',
+    height: '100%'
+  }),
+  compressed: jsx(Compressed, {
+    width: '100%',
+    height: '100%'
+  }),
+  default: jsx(Another, {
+    width: '100%',
+    height: '100%'
+  })
+};
 const oldAttached = [];
 const allNewAttached = new FormData();
 const attached = []; // attached = [...dataState, ...newDataState]
@@ -25,22 +64,13 @@ const getType = data => {
   } 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';
+    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
+  if (String(date) === 'Invalid Date') return 'unknown';
+  return moment(date).format('DD/MM/YYYY, HH:mm:ss');
 };
-
 const getNewUnitSize = (sizeName, totalSize, num) => {
   if (sizeName === 'B' && num === 1 || sizeName === 'TB' && num === -1) return [sizeName, totalSize];
   const arraySize = ['TB', 'GB', 'MB', 'KB', 'B'];
@@ -50,16 +80,20 @@ const getNewUnitSize = (sizeName, totalSize, num) => {
   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;
+  switch (true) {
+    case /^B$/i.test(unit):
+      return size * 1;
+    case /KB/i.test(unit):
+      return size * 1024;
+    case /MB/i.test(unit):
+      return size * 1024 ** 2;
+    case /GB/i.test(unit):
+      return size * 1024 ** 3;
+    case /TB/i.test(unit):
+      return size * 1024 ** 4;
+    default:
+      return size * 1024 * 1024;
+  }
 };
 const formatBytes = (bytes, decimals = 2) => {
   if (!+bytes) return '0 Bytes';
@@ -72,8 +106,6 @@ const formatBytes = (bytes, decimals = 2) => {
   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 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(({
   accept,
   allowSort,
@@ -83,7 +115,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   domain,
   error,
-  height,
   hintText,
   id,
   inputProps,
@@ -106,7 +137,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType
 }, reference) => {
   if (!reference) reference = useRef(null);
-  if (maxFile === 1) multiple = false;
   const ref = useRef(null);
   const attachTextRef = useRef(null);
   const attachmentHandleIconRef = useRef(null);
@@ -127,11 +157,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [viewTypeState, setViewTypeState] = useState(viewType);
   const [newDataState, setNewDataState] = useState([]);
   const [dataState, setDataState] = useState([]);
-  const [sizeByHeight, setSizeByHeight] = useState([]);
-  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);
+  const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable);
 
   // Start handler
   const onSortElement = (e, type) => {
@@ -204,13 +232,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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;
+      const lengthAttached = attached.length;
       for (let i = 0; i < files.length; i++) {
-        if (i + 1 > maxFile - lengthAttached && !isSpecialCase || files[i].size > maxSize.current || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
-          if (i + 1 > maxFile - lengthAttached && !isSpecialCase) {
+        if (i + 1 > maxFile - lengthAttached || files[i].size > maxSize.current || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
+          if (i + 1 > maxFile - lengthAttached) {
             var _files$i;
             notifyRef.current.instance.show(`${(_files$i = files[i]) === null || _files$i === void 0 ? void 0 : _files$i.name} - ${uploadErrorInfo['maxFile']}`);
           } else if (files[i].size > maxSize.current) {
@@ -238,13 +264,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           files[i].FileName = files[i].name;
           attached.push(files[i]);
         }
-        // setNewDataState([...newDataState, ...Array.from(files)]);
+        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);
+        setNewDataState([...newDataState, files[0]]);
         attached.push(files[0]);
         files[0].URL = await onProgressing(files[0]);
       }
@@ -257,7 +283,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         newAttached: files,
         allNewAttached: allNewAttached.getAll('files')
       });
-      if (maxFile === 1) updateSize();
     }
     // else if (!attached.length) {
     //     afterChangeFile();
@@ -265,7 +290,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   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;
@@ -274,24 +298,16 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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%';
-        }
+        attachedRef.current.querySelector(`.css-${AttachedLinearCSS.name}-attached`).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 + '%';
-        }
+        attachedRef.current.querySelector(`.css-${AttachedLinearCSS.name}-attached`).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);
+        setTimeout(() => {
+          attachedRef.current.querySelector(`.css-${AttachedLinearCSS.name}-attached`).parentNode.remove();
+          resolve(url);
+        }, 200);
       };
       reader.onerror = () => {
         console.log('Upload file fail');
@@ -351,7 +367,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const tempDataState = [...dataState];
     const tempNewDataState = [...newDataState];
     nodeList.forEach(itemEl => {
-      const index = Array.from(attachedRef.current.children).indexOf(itemEl.parentNode);
+      const parent = itemEl.parentNode;
+      const index = Array.from(attachedRef.current.children).indexOf(parent);
       const deletedFile = attachedItems[index];
       removedAttachedRef.current.push(deletedFile);
       recentRemovedAttached.push(deletedFile);
@@ -382,9 +399,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClosePopup();
   };
   const clearAllAttached = (confirmPopup = false) => {
-    const allAttachEl = Array.from(attachedRef.current.querySelectorAll('.attachment-row')).map(item => item.firstChild);
+    const allAttachEl = attachedRef.current.querySelectorAll('.attachment-row');
     if (allAttachEl && allAttachEl.length) {
-      allAttachEl.forEach(attachEl => attachEl.classList.add('chosen'));
+      allAttachEl.forEach(attachEl => attachEl.firstChild.classList.add('chosen'));
       isDeleteAll.current = true;
       confirmPopup ? onShowPopup() : onRemoveMultiple();
     }
@@ -396,10 +413,17 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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 (timer.current) {
+      prevent.current = true;
+      clearTimeout(timer.current);
+    }
+    const index = Array.from(attachedRef.current.children).indexOf(node);
     if (onViewProp) onViewProp(AttachmentID, index);else {
       setShowModal(true);
     }
+    setTimeout(() => {
+      prevent.current = false;
+    }, 110);
   };
   const onDownload = (url, name) => {
     if (!url) return;
@@ -448,10 +472,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       allNewAttached.delete('files');
       allNewAttached.append('files', files[0]);
       // newAttachedRef.current = [files[0]];
-      if (isSpecialCase) setDataState([]);
-      setTimeout(() => {
-        setNewDataState([files[0]]);
-      });
+      setNewDataState([files[0]]);
     }
     // attachmentInputRef.current.files = allNewAttached.getAll('files');
   };
@@ -479,65 +500,64 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const extFile = newFile.name.slice(newFile.name.lastIndexOf('.') + 1);
     return accept.join('-').includes(extFile);
   };
-  const onChooseItem = (e, idx) => {
+  const onChooseItem = e => {
     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');
+    const itemEl = e.currentTarget;
+    timer.current = setTimeout(() => {
+      if (!prevent.current) {
+        const index = Array.from(attachedRef.current.children).indexOf(itemEl.parentNode);
+        if (shiftKey && !ctrlKey) {
+          let startIndex = chosenItems[chosenItems.length - 1] || 0;
+          let endIndex = index;
+          if (startIndex > endIndex) {
+            endIndex = startIndex;
+            startIndex = index;
+          }
+          chosenItems.length = 0;
+          attachedRef.current.querySelectorAll(`.css-${AttachedItemCSS.name}`).forEach((itemEl, indexEl) => {
+            if (startIndex <= indexEl && indexEl <= endIndex) {
+              if (!itemEl.classList.contains('chosen')) {
+                itemEl.classList.add('chosen');
+              }
+              chosenItems.push(indexEl);
+            } else if (itemEl.classList.contains('chosen')) {
+              itemEl.classList.remove('chosen');
             }
-            chosenItems.push(indexEl);
-          } else if (_itemEl.classList.contains('chosen')) {
-            _itemEl.classList.remove('chosen');
+          });
+          if (chosenItems[chosenItems.length - 1] !== index) {
+            chosenItems.shift();
+            chosenItems.push(index);
           }
-        });
-        if (chosenItems[chosenItems.length - 1] !== idx) {
-          chosenItems.shift();
-          chosenItems.push(idx);
+        } else if (!ctrlKey) {
+          chosenItems.length = 0;
+          removeActiveChosenItem();
+          chosenItems.push(index);
+          itemEl.classList.add('chosen');
+        } else if (itemEl.classList.contains('chosen')) {
+          chosenItems.splice(chosenItems.indexOf(index));
+          itemEl.classList.remove('chosen');
+          if (!chosenItems.length) {
+            setTimeout(() => {
+              removeAllChosenItems();
+            }, 0);
+          }
+        } else {
+          chosenItems.push(index);
+          itemEl.classList.add('chosen');
         }
-      } 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);
+        // 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);
         }
-      } 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();
       }
-      checkChosenMultiple();
-    }
-    prevent.current = false;
-    // }, 100);
+      prevent.current = false;
+    }, 100);
   };
-
   const removeActiveChosenItem = () => {
     attachedRef.current.querySelectorAll('.chosen').forEach(itemEl => {
       itemEl.classList.remove('chosen');
@@ -564,22 +584,22 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     } else if (/a/i.test(key) && event.ctrlKey) {
       chosenItems.length = 0;
-      const allAttachEl = Array.from(attachedRef.current.querySelectorAll('.attachment-row')).map(item => item.firstChild);
+      const allAttachEl = attachedRef.current.querySelectorAll('.attachment-row');
       if (allAttachEl && allAttachEl.length) {
-        allAttachEl.forEach((attachEl, index) => chosenItems.push(index) & attachEl.classList.add('chosen'));
+        allAttachEl.forEach((attachEl, index) => chosenItems.push(index) & attachEl.firstChild.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 itemsNode = attachedRef.current.querySelectorAll('.attachment-row');
+      const chosenItemsNode = Array.from(itemsNode).filter(el => el.firstChild.classList.contains('chosen'));
       const length = itemsNode.length;
       let index;
       if (key === 'ArrowDown' || key === 'ArrowRight') {
         for (let id = length - 1; id >= 0; id--) {
-          if (Array.from(itemsNode)[id].classList.contains('chosen')) {
+          if (Array.from(itemsNode)[id].firstChild.classList.contains('chosen')) {
             index = id;
             break;
           }
@@ -588,7 +608,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           if (chosenItemsNode.length !== 1 && !event.shiftKey) {
             chosenItemsNode.forEach((node, i) => {
               if (i !== index) {
-                node.classList.remove('chosen');
+                node.firstChild.classList.remove('chosen');
               }
             });
             chosenItems.length = 0;
@@ -606,18 +626,18 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
         if (!event.shiftKey) {
           itemsNode.forEach(node => {
-            node.classList.remove('chosen');
+            node.firstChild.classList.remove('chosen');
           });
         }
-        itemsNode[index + 1].classList.add('chosen');
+        itemsNode[index + 1].firstChild.classList.add('chosen');
         chosenItems.push(index + 1);
       } else if (key === 'ArrowUp' || key === 'ArrowLeft') {
-        index = Array.from(itemsNode).findIndex(el => el.classList.contains('chosen'));
+        index = Array.from(itemsNode).findIndex(el => el.firstChild.classList.contains('chosen'));
         if (index === 0) {
           if (chosenItemsNode.length !== 1 && !event.shiftKey) {
             chosenItemsNode.forEach((node, i) => {
               if (i !== index) {
-                node.classList.remove('chosen');
+                node.firstChild.classList.remove('chosen');
               }
             });
             chosenItems.length = 0;
@@ -635,10 +655,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
         if (!event.shiftKey) {
           chosenItemsNode.forEach(node => {
-            node.classList.remove('chosen');
+            node.firstChild.classList.remove('chosen');
           });
         }
-        itemsNode[index - 1].classList.add('chosen');
+        itemsNode[index - 1].firstChild.classList.add('chosen');
         chosenItems.push(index - 1);
       }
       if (!event.shiftKey) {
@@ -718,23 +738,19 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (!isNaN(maxSizeProp)) {
         maxSize.current = maxSizeProp * 1024 * 1024;
       } else {
-        const [numberSize = ''] = maxSizeProp.match(/\d+/) || [];
-        const [unitMaxSize = ''] = maxSizeProp.match(/\D+/) || [];
+        const numberSize = maxSizeProp.match(/\d+/g);
+        const unitMaxSize = maxSizeProp.match(/\D+/g);
         maxSize.current = getBit(numberSize, unitMaxSize);
       }
     }
-    return () => {
-      maxSize.current = Infinity;
-    };
-  }, [maxSizeProp]);
-  useEffect(() => {
-    if (multiple && maxFile > 1) attachmentInputRef.current.multiple = multiple;
-  }, [multiple, maxFile]);
-  useEffect(() => {
+    attachmentInputRef.current.multiple = multiple;
     if (accept && typeof accept === 'string') {
       attachmentInputRef.current.accept = `${accept}/*`.replace('/*/*', '/*');
     }
-  }, [accept]);
+    return () => {
+      maxSize.current = Infinity;
+    };
+  }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
     oldAttached.length = 0;
     // afterChangeFile((data?.length || 0) + (newDataState?.length || 0));
@@ -753,11 +769,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
       setDataState(data);
-      setTimeout(() => {
-        setNewDataState([]);
-      });
     }
     return () => {
+      // if (attachedRef.current) {
+      //     attachedRef.current.innerHTML = null;
+      // }
       oldAttached.length = 0;
       attached.length = 0;
       chosenItems.length = 0;
@@ -767,6 +783,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [data]);
+  useEffect(() => {
+    setNewDataState([]);
+  }, [dataState]);
   useEffect(() => {
     if (inputProps && Object.keys(inputProps).length) {
       Object.keys(inputProps).forEach(name => {
@@ -793,11 +812,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     attachmentInputRef.current.click();
   };
   const onDragFileStart = () => {
-    attachmentInputRef.current.style.display = 'block';
+    attachmentInputRef.current.parentNode.style.display = 'block';
   };
-  const onDropInput = e => {
-    attachmentInputRef.current.style.display = 'none';
-    e.target.value = null; // Fix not fire onChange when select same file
+  const onDropInput = () => {
+    attachmentInputRef.current.parentNode.style.display = null;
   };
   // End handler
 
@@ -856,7 +874,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       name: 'delete',
       onClick: onShowPopup
     }) : null), jsx("div", {
-      css: isEmpty ? AttachmentImageEmptyCSS : mgr([isSpecialCase ? 0 : 2])
+      css: isEmpty ? AttachmentImageEmptyCSS : AttachmentImageCSS
     }, jsx("div", {
       css: [AttachmentImageCenterCSS, !isEnable && [parseHeight('calc(100% - 32px)'), justifyEnd]]
     }, isEnable ? jsx("div", {
@@ -876,7 +894,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: userSelectNone,
       type: 'p3',
       color: 'system/rest'
-    }, getGlobal('noFileText')) : null)), allowSort && !isEmpty && !isSpecialCase ? jsx(Popover, {
+    }, getGlobal('noFileText')) : null)), allowSort && !isEmpty ? jsx(Popover, {
       ref: popoverRef,
       anchor: jsx(ButtonIcon, {
         viewType: 'ghost',
@@ -903,25 +921,19 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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, {
+    }, jsx(ListItemText, null, getGlobal('byOwner'))))) : null, !isEmpty ? jsx(ButtonIcon, {
       viewType: 'ghost',
-      name: viewTypeIconMap.get(viewTypeState),
-      onClick: () => setViewTypeState(viewTypeSwitchMap.get(viewTypeState))
+      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("input", {
-      ref: attachmentInputRef,
+    return jsx("div", {
+      css: AttachmentInputCSS,
+      className: 'DGN-UI-Attachment-Input'
+    }, jsx("input", {
       type: "file",
-      style: {
-        display: 'none'
-      },
-      css: css`
-                            ${positionAbsolute};
-                            ${parseWidthHeight('100%')};
-                            opacity: 0;
-                        `,
-      className: 'DGN-UI-Attachment-Input',
+      ref: attachmentInputRef,
       title: "",
       onDrop: onDropInput,
       onDragLeave: onDropInput,
@@ -929,214 +941,76 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ,
       onChange: onChangeFiles,
       ...inputProps
-    });
+    }));
   }, [accept, disabled, domain, inputProps, isStripDomain, maxFile, multiple, onChange, readOnly, uploadErrorInfo, newDataState]);
-  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 (
-      // <div key={idx} className={classNames('DGN-UI-Attachment-List-Attached-Row', 'attachment-row')}>
-      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]
-      }, 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: [mgl([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)))
-      // </div>
-    );
-  };
-
-  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 (
-      // <div key={idx} className={classNames('DGN-UI-Attachment-List-Attached-Row', 'attachment-row')}>
-      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
-      }, 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))
-      // </div>
-    );
-  };
-
-  const updateSize = () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    timer.current = setTimeout(() => {
-      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 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;
-    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,
+    return jsx("div", {
       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')
+      className: '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,
+      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: 'text/sub'
+    }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx(Typography, {
+      className: 'datetime',
       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]
+      color: 'text/sub'
+    }, getDateTime(date)), jsx(Typography, {
+      className: 'filesize',
+      type: 'p2',
+      color: 'text/sub'
+    }, calculateSize(item.FileSize || item.size))) : null, isNew ? jsx("span", {
+      css: AttachedLinearCSS
     }, jsx(LinearProgress, {
-      className: `DGN-UI-LinearProgress-${key}`,
+      className: `css-${AttachedLinearCSS.name}-attached`,
       determinate: true,
       percent: 0
-    })) : null));
-  };
-  const renderAttachmentItem = (item, idx, isNew = false) => {
-    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);
+    })) : null)));
   };
   const AttachedView = useMemo(() => {
+    const isViewTypeIcon = viewTypeState === 'icon';
     return jsx(ScrollBar, {
       css: AttachmentListCSS,
       className: 'DGN-UI-Attachment-List'
-    }, jsx(Grid, {
-      container: true,
-      css: isSpecialCase && justifyCenter,
+    }, jsx("div", {
+      css: AttachedCSS,
       ref: attachedRef,
-      className: classNames('DGN-UI-Attachment-List-Attached'),
-      spacing: 2
+      className: classNames(isViewTypeIcon && 'icon-view')
     }, dataState.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, dataState, newDataState, viewTypeState, sizeByHeight]);
+  }, [data, onViewProp, unitSize, dataState, newDataState, viewTypeState]);
   const PopupView = useMemo(() => {
     return jsx(Popup, {
       open: showPopup,
@@ -1153,7 +1027,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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,
@@ -1172,7 +1045,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: classNames('DGN-UI-Attachment', className),
     style: style,
     onDragEnter: onDragFileStart
-  }, AttachHeaderView, AttachedView, AttachmentInputView, PopupView, ModalView, jsx(Notify, {
+  }, AttachHeaderView, AttachmentInputView, AttachedView, PopupView, ModalView, jsx(Notify, {
     ref: notifyRef,
     progressing: true,
     autoDisappear: true,
@@ -1183,7 +1056,7 @@ const AttachmentHandleIconCSS = css`
     ${displayNone};
     ${parseHeight(24)};
     ${mgr([2])};
-    ${borderRight(1, 'line/normal')};
+    border-right: 1px solid ${lineNormal};
     button {
         ${mgr([2])};
     }
@@ -1204,6 +1077,18 @@ const AttachmentHeaderIconCSS = css`
     ${displayFlex};
     ${itemsCenter};
 `;
+const AttachmentInputCSS = css`
+    ${displayNone};
+    ${positionAbsolute};
+    ${parseWidthHeight('100%')};
+    ${top(0)};
+    ${left(0)};
+    input {
+        ${positionRelative};
+        ${parseWidthHeight('100%', 'calc(100% + 20px)')};
+        opacity: 0;
+    }
+`;
 const AttachmentImageCenterCSS = css`
     ${displayFlex};
     ${flexCol};
@@ -1212,10 +1097,12 @@ const AttachmentImageCenterCSS = css`
     ${parseWidthHeight('100%')};
 `;
 const ButtonAttachmentCSS = css`
-    ${border(1, 'line/normal')};
-    ${borderDashed};
+    border: 1px dashed ${lineNormal} !important;
     ${mg([0, 'auto', 4])};
 `;
+const AttachmentImageCSS = css`
+    ${mgr([2])};
+`;
 const AttachmentImageEmptyCSS = css`
     ${positionAbsolute};
     ${parseWidthHeight('100%')};
@@ -1225,30 +1112,26 @@ const AttachmentImageEmptyCSS = css`
 const AttachedItemInfoCSS = css`
     ${displayFlex};
     ${itemsCenter};
+    ${borderRadius4px};
     ${userSelectNone};
     ${parseMinWidth('calc(50% - 10px)')};
     ${mgr([2])};
 `;
-const DotNewFileDetailCSS = css`
-    :after {
+const AttachedItemInfoIconCSS = css`
+    ${displayFlex};
+    ${flexRow};
+    ${positionRelative};
+    ${boxContent};
+    ${parseMaxWidthHeight(14, 16)};
+    ${pd([1, 1.25])};
+    &.new-file:after {
         content: '';
         ${positionAbsolute};
         ${borderRadius50};
         ${parseWidthHeight(4, 4)};
         ${bgColor('semantic/success')};
-        ${top(0)};
-        ${left(4)};
-    }
-`;
-const DotNewFileIconCSS = css`
-    :after {
-        content: '';
-        ${positionAbsolute};
-        ${borderRadius50};
-        ${parseWidthHeight(6, 6)};
-        ${bgColor('semantic/success')};
-        ${top(3)};
-        ${left(14)};
+        ${top(4.5)};
+        ${left(-2)};
     }
 `;
 const AttachedItemOwnerCSS = css`
@@ -1288,52 +1171,92 @@ const AttachedLinearCSS = css`
     ${top(0)};
 `;
 const AttachedItemCSS = css`
+    ${displayFlex};
+    ${justifyBetween};
     ${positionRelative};
     ${borderRadius4px};
     ${cursorPointer};
+    ${parseHeight(24)};
+    ${pd([0, 2])};
     transition: padding 0.5s ease;
-    &:hover {
-        ${bgColor('fill/hover')};
+`;
+const AttachedCSS = css`
+    ${positionRelative};
+    ${parseHeight('100%')};
+    ${mgx([2])};
+    overflow-y: visible;
+    .attachment-row {
+        ${displayBlock};
+        ${mgb([2])};
+        &:last-child {
+            ${mgb(0)};
+        }
     }
-    &:active {
-        ${bgColor('fill/pressed')};
+    &.icon-view {
+        ${displayFlex};
+        ${flexWrap};
+        ${justifyBetween};
+        &::after {
+            content: '';
+            flex: auto;
+        }
+        ${parseMaxWidthHeight('calc(100% - 26px)', 200)};
+        ${parseWidth('max-content')};
+        ${mgl(0)};
+        .attachment-row {
+            ${positionRelative};
+            ${mgl([4])};
+            overflow-y: visible;
+        }
+        .css-${AttachedItemCSS.name} {
+            ${displayBlock};
+            ${parseWidthHeight(80)};
+            ${pd(0)};
+            .css-${AttachedItemInfoCSS.name} {
+                ${displayBlock};
+                ${positionRelative};
+                ${textCenter};
+                ${truncate};
+                ${parseWidth('max-content')};
+                ${parseMaxWidth(80)};
+                ${parseMinWidth(70)};
+                ${mgx(['auto'])};
+                .css-${AttachedItemInfoIconCSS.name} {
+                    ${displayBlock};
+                    ${parseWidthHeight(40)};
+                    ${parseMaxWidthHeight(40)};
+                    ${mg([1, 'auto', 0.5])};
+                    ${pd(0)};
+                    &.new-file:after {
+                        ${parseWidthHeight(8)};
+                        ${top(-1)};
+                        ${left(-7)};
+                    }
+                }
+            }
+            .css-${AttachedItemOwnerCSS.name} {
+                ${parseHeight('auto')};
+                position: inherit;
+                .css-${AttachedLinearCSS.name} {
+                    ${parseHeight('auto')};
+                    ${bottom(0)};
+                    top: unset;
+                    background: none;
+                }
+            }
+        }
     }
-    &.chosen {
-        ${bgColor('fill/focus')};
+    &:not(.icon-view) {
+        ${parseMinWidth(684)};
     }
 `;
-const AttachedItemDetailCSS = css`
-    ${displayFlex};
-    ${justifyBetween};
-    ${itemsCenter};
-    ${parseMinHeight(24)};
-    ${pd([0, 2])};
-`;
-const AttachedItemIconInfoCSS = css`
-    ${displayFlex};
-    ${flexCol};
-    ${itemsCenter};
-    ${positionRelative};
-    ${textCenter};
-    ${pd([1, 2])};
-`;
-
-// const AttachedCSS = css`
-//     ${displayFlex};
-//     ${positionRelative};
-//     ${parseHeight('100%')};
-//     ${gap([2])};
-//     ${flexWrap};
-//     overflow-y: visible;
-// `;
-
 const AttachmentListCSS = css`
     ${boxBorder};
     ${mgr([1.25])};
-    ${pd([0, 1, 2, 4])};
-    overflow-y: scroll;
+    ${pd([0, 1.75, 0])};
+    overflow-y: overlay;
 `;
-const AttachmentRootCSS = (isEmpty, isEnable, height) => css`
+const AttachmentRootCSS = (isEmpty, isEnable) => css`
     ${displayFlex};
     ${flexCol};
     ${justifyStart};
@@ -1341,44 +1264,39 @@ const AttachmentRootCSS = (isEmpty, isEnable, height) => css`
     ${borderRadius4px};
     ${boxBorder};
     ${border(1, 'line/normal')};
-    ${parseMinHeight(isEmpty && !isEnable ? 120 : isEmpty ? 280 : null)};
-    ${parseHeight(height)};
+    ${parseHeight(isEmpty && !isEnable ? 120 : 280)};
     ${bgColor('system/white')};
-`;
-const AttachedItemPictureCSS = css`
-    ${displayFlex};
-    ${positionRelative};
-    ${boxBorder};
-    ${borderRadius4px};
-    ${cursorPointer};
-    ${overflowHidden};
-    ${userSelectNone};
-    ${border(1, 'line/category')};
-    &:focus,
-    &:active,
-    &.chosen {
-        ${border(2, 'line/focus')};
+    .css-${AttachedCSS.name} {
+        .css-${AttachedItemCSS.name} {
+            &:hover {
+                ${bgColor('fill/hover')};
+                .css-${AttachedLinearCSS.name} {
+                    ${bgColor('fill/hover')};
+                }
+            }
+            &:active {
+                ${bgColor('fill/pressed')};
+                .css-${AttachedLinearCSS.name} {
+                    ${bgColor('fill/pressed')};
+                }
+            }
+            &.chosen {
+                ${bgColor('fill/focus')};
+                .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
+                    ${bgColor('fill/focus')};
+                }
+            }
+        }
     }
-    &:not(:hover) {
-        .DGN-UI-Attachment-Item-Picture-Info {
-            ${displayNone};
+    @media (max-width: 716px) {
+        .css-${AttachedCSS.name}:not(.icon-view) {
+            ${parseMinWidth(575)};
+        }
+        .css-${AttachedItemInfoCSS.name} {
+            ${parseMaxWidth('calc(40% - 10px)')};
         }
     }
 `;
-const AttachedItemPictureImageCSS = css`
-    ${itemsCenter};
-    ${justifyCenter};
-    ${aspectSquare};
-`;
-const ItemPictureInfoCSS = css`
-    ${positionAbsolute};
-    ${boxBorder};
-    ${bottom(0)};
-    ${left(0)};
-    ${pd([1, 2])};
-    ${bgColor('fill/tooltip')};
-    ${parseWidth('100%')};
-`;
 Attachment.defaultProps = {
   deleteNotifyText: getGlobal('deleteNotifyText'),
   hintText: getGlobal('dropFileHere'),
@@ -1390,7 +1308,6 @@ Attachment.defaultProps = {
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
   },
-  height: 280,
   ...getGlobal(['components', 'attachment', 'defaultProps'])
 };
 Attachment.propTypes = {
@@ -1421,8 +1338,6 @@ Attachment.propTypes = {
   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. */
@@ -1466,6 +1381,6 @@ Attachment.propTypes = {
   /** Errors show up when the file upload is corrupted. */
   uploadErrorInfo: PropTypes.object,
   /** The view type of files. */
-  viewType: PropTypes.oneOf(['detail', 'icon', 'picture'])
+  viewType: PropTypes.oneOf(['detail', 'icon'])
 };
 export default Attachment;