diginet-core-ui 1.3.56 → 1.3.57

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

@@ -5,14 +5,47 @@ import { memo, useMemo, useEffect, useState, useRef, forwardRef, useImperativeHa
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { jsx, css } from '@emotion/core';
-import { color as colors } from '../../../styles/colors';
-import { typography } from '../../../styles/typography';
-import { ModalSample, Popup, Popover, List, ListItem, ListItemText, Slider, SliderItem, ScrollBar, LinearProgress, ButtonIcon } from '../../';
-import { Pdf, Word, Sheet, Presentation, Compressed, Image, Another, Info, View, Download, Delete, Attachment as AttachmentIcon } from '../../../icons';
+import { ModalSample, Popup, Popover, List, ListItem, ListItemText, Slider, SliderItem, ScrollBar, LinearProgress, ButtonIcon, Notify } from '../../';
+import { Pdf, Word, Sheet, Presentation, Compressed, Image, Another, View, Download, Delete, Attachment as AttachmentIcon } from '../../../icons';
 import { date as moment, getFileType } from '../../../utils';
 import { getGlobal } from '../../../global';
 import { useTheme, makeStyles } from '../../../theme';
+import { alignCenter, border, borderBox, borderRadius4px, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexRow, flexWrap, justifyBetween, justifyCenter, justifyStart, parseHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textUppercase, userSelectNone } from '../../../styles/general';
 const theme = useTheme();
+const {
+  colors: {
+    system: {
+      active,
+      rest,
+      white,
+      dark
+    },
+    semantic: {
+      success,
+      danger
+    },
+    fill: {
+      hover: fillHover,
+      pressed,
+      focus
+    },
+    line: {
+      normal,
+      hover: lineHover
+    },
+    text: {
+      sub
+    }
+  },
+  typography: {
+    heading5,
+    paragraph1,
+    paragraph2,
+    paragraph3
+  },
+  spacing // zIndex: zIndexCORE,
+
+} = theme;
 const useStyles = makeStyles({
   listItem: {
     '&.DGN-UI-List-Item': {
@@ -41,7 +74,6 @@ const useStyles = makeStyles({
     }
   }
 });
-const classes = useStyles();
 const icons = {
   pdf: jsx(Pdf, {
     width: '100%',
@@ -81,38 +113,6 @@ let prevent = false;
 let existClickOutOfItem = false;
 let maxSize = Infinity;
 let divideSize = null;
-const errorDefault = getGlobal('errorDefault');
-const {
-  heading5,
-  paragraph1,
-  paragraph2,
-  paragraph3
-} = typography;
-const {
-  system: {
-    active,
-    rest,
-    white,
-    dark
-  },
-  semantic: {
-    success,
-    danger,
-    info
-  },
-  fill: {
-    hover: fillHover,
-    pressed,
-    focus
-  },
-  line: {
-    normal,
-    hover: lineHover
-  },
-  text: {
-    sub
-  }
-} = colors;
 const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   label,
@@ -127,7 +127,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onView: onViewItem,
   onDownload: onDownloadItem,
   onChange,
-  onUploadError,
   data,
   maxFile,
   maxSize: maxSizeProp,
@@ -137,15 +136,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   domain,
   isStripDomain,
   style,
-  inputStyle,
   inputProps,
-  refs,
   required,
   error,
-  errorStyle,
   readOnly,
-  ...props
+  id
 }, reference) => {
+  const classes = useStyles();
   const ref = useRef(null);
   const [open, setOpen] = useState(false);
   const [popup, setPopup] = useState(false);
@@ -162,450 +159,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const popupRef = useRef(null);
   const popoverRef = useRef(null);
   const isDeleteAll = useRef(false);
-  const ViewAttachType = css`
-                cursor: pointer;
-                height: 24px;
-                color: ${rest};
-                &:hover {
-                    color: ${active};
-                }
-            `;
-  const attachmentHandleIcon = css`
-                display: none;
-                height: 24px;
-                margin-right: 10px;
-                border-right: 1px solid ${normal};
-                span {
-                    margin-right: 10px;
-                    color: ${rest};
-                    cursor: pointer;
-                    &:hover {
-                        color: ${active};
-                    }
-                }
-            `;
-  const AttachmentHeader = css`
-                /* position: relative; */
-                height: 48px;
-                display: flex;
-                padding: 16px 24px;
-                align-items: center;
-                /* margin-bottom: 10px; */
-                box-sizing: border-box;
-                justify-content: space-between;
-                .css-${attachmentHandleIcon.name}, .css-${ViewAttachType.name} {
-                    z-index: 1;
-                }
-            `;
-  const AttachmentInfo = css`
-                display: flex;
-                position: relative;
-                align-items: center;
-                margin: 0;
-                & + p.attachment-error {
-                    color: ${danger};
-                }
-                span {
-                    display: none;
-                    color: ${danger};
-                    margin: 10px;
-                    cursor: help;
-                    opacity: 0;
-                    ${paragraph1};
-                    span {
-                        display: block;
-                        position: absolute;
-                        opacity: 1;
-                        transform: scaleX(0) translateY(-50%);
-                        left: 80px;
-                        z-index: 4;
-                        width: max-content;
-                        height: max-content;
-                        max-height: 72px;
-                        overflow: auto;
-                        border: 1px solid ${danger};
-                        border-radius: 4px;
-                        padding: 5px 8px;
-                        transition: transform 0.3s linear 0.3s;
-                        transform-origin: left;
-                        &::-webkit-scrollbar {
-                            width: 4px;
-                            background-color: white !important;
-                            border-radius: 4px;
-                        }
-                        &::-webkit-scrollbar-thumb {
-                            border-radius: 10px;
-                            mix-blend-mode: normal;
-                            background-color: ${danger} !important;
-                            background-clip: content-box;
-                        }
-                        ul {
-                            display: contents;
-                            li {
-                                list-style: none;
-                            }
-                        }
-                    }
-                    &:hover {
-                        span {
-                            transform: scaleX(1) translateY(-50%);
-                            transition-delay: 0s;
-                        }
-                    }
-                }
-            `;
-  const AttachmentText = css`
-                ${heading5};
-                text-transform: uppercase;
-                color: ${sub};
-                user-select: none;
-            `;
-  const AttachmentHeaderIcon = css`
-                display: flex;
-                align-items: center;
-            `;
-  const AttachmentInput = css`
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-                z-index: 4;
-                display: none;
-                input {
-                    position: relative;
-                    opacity: 0;
-                    top: -20px;
-                    font-size: 0px;
-                    width: 100%;
-                    height: calc(100% + 20px);
-                }
-            `;
-  const AttachmentImageCenter = css`
-                width: 100%;
-                height: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            `;
-  const AttachmentImageContent = css`
-                display: grid;
-                text-align: center;
-            `;
-  const AttachmentImageIcon = css`
-                margin-bottom: 0;
-                z-index: 3;
-                width: 24px;
-                height: 24px;
-                svg {
-                    color: ${rest};
-                }
-                &:hover {
-                    border-color: ${lineHover};
-                    svg {
-                        color: ${active};
-                    }
-                }
-            `;
-  const AttachmentImageText = css`
-                display: none;
-                ${paragraph3};
-                color: ${rest};
-                user-select: none;
-            `;
-  const AttachmentImage = css`
-                margin-right: 10px;
-                &.hint-center {
-                    position: absolute;
-                    width: 100%;
-                    height: 100%;
-                    top: 0;
-                    left: 0;
-                    margin-right: 0;
-                    z-index: 1;
-                    .css-${AttachmentImageText.name} {
-                        display: block;
-                    }
-                    .css-${AttachmentImageIcon.name} {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        width: 64px;
-                        height: 64px;
-                        margin: 0 auto 8px auto;
-                        border: 1px dashed ${normal};
-                        border-radius: 50%;
-                        svg {
-                            width: 40px;
-                            height: 40px;
-                        }
-                        &:hover {
-                            border-color: ${lineHover};
-                            background-color: ${fillHover};
-                        }
-                    }
-                }
-            `;
-  const AttachedItemInfo = css`
-                /* width: 40%; */
-                /* max-width: 350px; */
-                border-radius: 4px;
-                min-width: 104px;
-                display: flex;
-                align-items: center;
-                user-select: none;
-                margin-right: 10px;
-                min-width: calc(50% - 10px);
-            `;
-  const AttachedItemInfoIcon = css`
-                display: flex;
-                position: relative;
-                max-height: 16px;
-                max-width: 14px;
-                padding: 4px 5px;
-                cursor: pointer;
-                box-sizing: content-box;
-                &.new-file:after {
-                    content: '';
-                    position: absolute;
-                    top: 4.5px;
-                    left: -2px;
-                    width: 4px;
-                    height: 4px;
-                    border-radius: 50%;
-                    background: ${success};
-                }
-            `;
-  const AttachedItemInfoName = css`
-                ${paragraph1};
-                color: ${dark};
-                margin-left: 12px;
-                padding-top: 1px;
-                cursor: pointer;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                box-sizing: content-box;
-            `;
-  const AttachedItemOwner = css`
-                display: flex;
-                position: relative;
-                /* max-width: 50%; */
-                height: 100%;
-                align-items: center;
-                ${paragraph2};
-                color: ${sub};
-                cursor: pointer;
-                user-select: none;
-                .detail-info {
-                    display: flex;
-                    min-width: 333px;
-                    .username {
-                        display: inline-block;
-                        /* width: 35%; */
-                        min-width: 120px;
-                        max-width: 120px;
-                        overflow: hidden;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                    }
-                    .datetime {
-                        display: inline-block;
-                        /* width: 45%; */
-                        min-width: max-content;
-                        max-width: max-content;
-                    }
-                    .filesize {
-                        /* width: 20%; */
-                        float: right;
-                        text-align: right;
-                        margin-left: auto;
-                    }
-                }
-            `;
-  const AttachedLinear = css`
-                position: absolute;
-                width: 100%;
-                top: 0;
-                background: #fff;
-                height: 100%;
-                display: flex;
-                align-items: center;
-            `;
-  const AttachedItem = css`
-                height: 24px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 0 8px;
-                position: relative;
-                transition: padding 0.5s ease;
-                border-radius: 4px;
-            `;
-  const Attached = css`
-                position: relative;
-                /* width: calc(100% - 10px); */
-                height: 100%;
-                max-height: 152px;
-                margin-left: 8px;
-                margin-right: 8px;
-                /* scroll-snap-type: mandatory;
-        scroll-snap-type: y mandatory;
-        scroll-snap-points-y: repeat(16px); */
-                z-index: 1;
-                /* transition: margin 0.5s ease; */
-                overflow-y: visible;
-                .attachment-row {
-                    display: block;
-                    margin-bottom: 8px;
-                    /* scroll-snap-align: start; */
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
-                    /* overflow-y: hidden; */
-                }
-                &.icon-view {
-                    display: flex;
-                    flex-wrap: wrap;
-                    justify-content: space-between;
-                    &::after {
-                        content: '';
-                        flex: auto;
-                    }
-                    /* grid-template-columns: repeat(auto-fill, minmax(136px, auto)); */
-                    max-height: 200px;
-                    margin-left: 0;
-                    /* padding-left: 10px; */
-                    /* padding-right: 10px; */
-                    width: max-content;
-                    max-width: calc(100% - 26px);
-                    .attachment-row {
-                        position: relative;
-                        margin-left: 16px;
-                        overflow-y: visible;
-                    }
-                    .css-${AttachedItem.name} {
-                        display: block;
-                        height: 80px;
-                        width: 80px;
-                        padding: 0;
-                        position: initial;
-                        .css-${AttachedItemInfo.name} {
-                            position: relative;
-                            display: block;
-                            width: max-content;
-                            text-align: center;
-                            max-width: 80px;
-                            overflow: hidden;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            margin-left: auto;
-                            margin-right: auto;
-                            min-width: 70px;
-                            .css-${AttachedItemInfoIcon.name} {
-                                height: 40px;
-                                width: 40px;
-                                max-height: 40px;
-                                max-width: 40px;
-                                margin: 4px auto 2px;
-                                padding: 0;
-                                display: block;
-                                &.new-file:after {
-                                    top: -1px;
-                                    left: -7px;
-                                    width: 8px;
-                                    height: 8px;
-                                }
-                            }
-                            .css-${AttachedItemInfoName.name} {
-                                ${paragraph3};
-                                margin: 0 8px;
-                                display: -webkit-box;
-                                word-break: break-word;
-                                max-width: 100%;
-                                white-space: pre-wrap;
-                                -webkit-line-clamp: 2;
-                                -webkit-box-orient: vertical;
-                                text-align: center;
-                            }
-                        }
-                        .css-${AttachedItemOwner.name} {
-                            position: inherit;
-                            height: auto;
-                            ${paragraph3};
-                            .detail-info {
-                                display: none;
-                            }
-                            .css-${AttachedLinear.name} {
-                                /* position: initial; */
-                                /* width: 100%; */
-                                height: auto;
-                                bottom: 0;
-                                top: unset;
-                                background: none;
-                            }
-                        }
-                    }
-                }
-                &:not(.icon-view) {
-                    min-width: 684px;
-                }
-            `;
-  const AttachmentRoot = css`
-                border: 1px solid ${normal};
-                display: block;
-                position: relative;
-                flex-wrap: wrap;
-                min-height: 165px;
-                flex-direction: column;
-                padding-bottom: 20px;
-                justify-content: start;
-                background-color: ${white};
-                border-radius: 4px;
-                &:hover:not(.disabled) {
-                    .css-${AttachmentImageIcon.name} {
-                        cursor: pointer;
-                    }
-                }
-                .css-${Attached.name} {
-                    &:not(.disabled) {
-                        .css-${AttachedItem.name} {
-                            &:hover {
-                                background-color: ${fillHover};
-                                .css-${AttachedLinear.name} {
-                                    background-color: ${fillHover};
-                                }
-                            }
-                            &:active {
-                                background-color: ${pressed};
-                                .css-${AttachedLinear.name} {
-                                    background-color: ${pressed};
-                                }
-                            }
-                            &.chosen {
-                                background-color: ${focus};
-                                .css-${AttachedItemInfo.name}, .css-${AttachedItemOwner.name} {
-                                    background-color: ${focus};
-                                }
-                            }
-                        }
-                    }
-                }
-                &.disabled {
-                    .css-${AttachedItem.name} {
-                        pointer-events: none;
-                    }
-                }
-                @media (max-width: 716px) {
-                    .css-${Attached.name}:not(.icon-view) {
-                        min-width: 575px;
-                    }
-                    .css-${AttachedItemInfo.name} {
-                        max-width: calc(40% - 10px);
-                    }
-                }
-            `; // End style
-  // Start handler
+  const PushNotify = useRef(null); // Start handler
 
   const onShowSortPopover = () => {
     setPopover(true);
@@ -676,18 +230,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     attachedList.forEach(el => {
       attachedRef.current.appendChild(el);
     });
-  };
-
-  const onChangeViewAttachType = (e, viewAttachType2) => {
-    const type = viewAttachType2 || viewTypeState;
-
-    if (type === 'detail') {
-      setViewTypeState('icon');
-      attachedRef.current.classList.add('icon-view');
-    } else {
-      setViewTypeState('detail');
-      attachedRef.current.classList.remove('icon-view');
-    }
+    setPopover(false);
   };
 
   const afterChangeFile = (length = 0) => {
@@ -708,59 +251,31 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const setError = (errorList, type) => {
-    if (errorList[type]) {
-      errorList[type]++;
-    } else {
-      errorList[type] = 1;
-    }
-  };
-
-  const notifyError = errorList => {
-    const errorInfoIcon = attachTextRef.current.parentNode.childNodes[1];
-
-    if (JSON.stringify(errorList) !== '{}') {
-      if (!errorInfoIcon.style.opacity) {
-        errorInfoIcon.style.opacity = 1;
-        errorInfoIcon.style.display = 'flex';
-      } else if (errorInfoIcon.style.color === 'rgb(0, 149, 255)') {
-        errorInfoIcon.style.color = danger;
-      }
-
-      if (onUploadError) {
-        onUploadError(errorList);
-      }
-
-      Object.keys(errorList).forEach(key => {
-        const quantity = `${errorList[key]} file${errorList[key] > 1 ? 's' : ''}`;
-        const error = uploadErrorInfo[key] ? `${uploadErrorInfo[key]} (${quantity})` : quantity + errorDefault[key];
-        const el = document.createElement('li');
-        el.innerHTML = error;
-        attachTextRef.current.parentNode.querySelector('ul').insertAdjacentElement('afterBegin', el);
-      });
-    } else if (errorInfoIcon.style.opacity === '1') {
-      errorInfoIcon.style.color = info;
-    }
-  };
-
   const onChangeFiles = async e => {
     if (readOnly || disabled) return;
 
     if (e.target && e.target.files && e.target.files.length) {
       let files = e.target.files;
-      const errorList = {};
       const lengthAttached = attached.length;
 
       for (let i = 0; i < files.length; i++) {
         if (i + 1 > maxFile - lengthAttached || files[i].size > maxSize || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
           if (i + 1 > maxFile - lengthAttached) {
-            setError(errorList, 'maxFile');
+            var _files$i;
+
+            PushNotify.current(`${(_files$i = files[i]) === null || _files$i === void 0 ? void 0 : _files$i.name} - ${uploadErrorInfo['maxFile']}`);
           } else if (files[i].size > maxSize) {
-            setError(errorList, 'maxSize');
+            var _files$i2;
+
+            PushNotify.current(`${(_files$i2 = files[i]) === null || _files$i2 === void 0 ? void 0 : _files$i2.name} - ${uploadErrorInfo['maxSize']}`);
           } else if (!checkAcceptFileType(files[i])) {
-            setError(errorList, 'fileType');
+            var _files$i3;
+
+            PushNotify.current(`${(_files$i3 = files[i]) === null || _files$i3 === void 0 ? void 0 : _files$i3.name} - ${uploadErrorInfo['fileType']}`);
           } else {
-            setError(errorList, 'existingFile');
+            var _files$i4;
+
+            PushNotify.current(`${(_files$i4 = files[i]) === null || _files$i4 === void 0 ? void 0 : _files$i4.name} - ${uploadErrorInfo['existingFile']}`);
           }
 
           files = removeFileOutInputFiles(i, true);
@@ -768,7 +283,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
 
-      notifyError(errorList);
       const length = files.length;
 
       if (!lengthAttached && !length) {
@@ -822,16 +336,16 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       reader.onloadstart = () => {
         // console.log(attachedRef.current.querySelector(`.css-${AttachedLinear.name}-attached`).parentNode.parentNode.querySelector('.filesize').offsetWidth);
-        attachedRef.current.querySelector(`.css-${AttachedLinear.name}-attached`).childNodes[0].style.width = '0%';
+        attachedRef.current.querySelector(`.css-${AttachedLinearCSS.name}-attached`).childNodes[0].style.width = '0%';
       };
 
       reader.onprogress = e => {
-        attachedRef.current.querySelector(`.css-${AttachedLinear.name}-attached`).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 = () => {
         setTimeout(() => {
-          attachedRef.current.querySelector(`.css-${AttachedLinear.name}-attached`).parentNode.remove();
+          attachedRef.current.querySelector(`.css-${AttachedLinearCSS.name}-attached`).parentNode.remove();
           resolve(url);
         }, 200);
       };
@@ -878,14 +392,14 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     data.CreateDate = date.toISOString();
     const fileType = getType(data);
     return jsx("div", {
-      css: AttachedItem,
+      css: AttachedItemCSS,
       key: i,
       onClick: e => onChooseItem(e),
       onDoubleClick: e => onView(e.currentTarget.parentNode)
     }, jsx("span", {
-      css: AttachedItemInfo
+      css: AttachedItemInfoCSS
     }, jsx("span", {
-      css: AttachedItemInfoIcon,
+      css: AttachedItemInfoIconCSS,
       className: 'new-file'
     }, icons[fileType], jsx("span", {
       className: 'filetype',
@@ -893,10 +407,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     }, fileType)), jsx("span", {
-      css: AttachedItemInfoName,
+      css: AttachedItemInfoNameCSS,
       className: 'filename'
     }, data.name)), jsx("span", {
-      css: AttachedItemOwner
+      css: AttachedItemOwnerCSS
     }, jsx("span", {
       className: 'detail-info'
     }, jsx("span", {
@@ -906,9 +420,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, getDateTime(date)), jsx("span", {
       className: 'filesize'
     }, calculateSize(data.size))), jsx("span", {
-      css: AttachedLinear
+      css: AttachedLinearCSS
     }, jsx(LinearProgress, {
-      className: `css-${AttachedLinear.name}-attached`,
+      className: `css-${AttachedLinearCSS.name}-attached`,
       determinate: true,
       percent: 0
     }))));
@@ -918,14 +432,14 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const date = new Date(data.CreateDate);
     const type = getType(data);
     return jsx("div", {
-      css: AttachedItem,
+      css: AttachedItemCSS,
       key: i,
       onClick: e => onChooseItem(e),
       onDoubleClick: e => onView(e.currentTarget.parentNode, data.AttachmentID)
     }, jsx("span", {
-      css: AttachedItemInfo
+      css: AttachedItemInfoCSS
     }, jsx("span", {
-      css: AttachedItemInfoIcon,
+      css: AttachedItemInfoIconCSS,
       className: data.lastModifiedDate ? 'new-file' : ''
     }, icons[type], jsx("span", {
       className: 'filetype',
@@ -933,10 +447,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     }, type)), jsx("span", {
-      css: AttachedItemInfoName,
+      css: AttachedItemInfoNameCSS,
       className: 'filename'
     }, data.FileName)), jsx("span", {
-      css: AttachedItemOwner
+      css: AttachedItemOwnerCSS
     }, jsx("span", {
       className: 'detail-info'
     }, jsx("span", {
@@ -1084,13 +598,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClosePopup();
   };
 
-  const clearAllAttached = () => {
+  const clearAllAttached = (confirmPopup = false) => {
     const allAttachEl = attachedRef.current.querySelectorAll('.attachment-row');
 
     if (allAttachEl && allAttachEl.length) {
       allAttachEl.forEach(attachEl => attachEl.firstChild.classList.add('chosen'));
       isDeleteAll.current = true;
-      onShowPopup();
+      confirmPopup ? onShowPopup() : onRemoveMultiple();
     }
   };
 
@@ -1246,7 +760,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
 
           chosenItems.length = 0;
-          attachedRef.current.querySelectorAll(`.css-${AttachedItem.name}`).forEach((itemEl, indexEl) => {
+          attachedRef.current.querySelectorAll(`.css-${AttachedItemCSS.name}`).forEach((itemEl, indexEl) => {
             if (startIndex <= indexEl && indexEl <= endIndex) {
               if (!itemEl.classList.contains('chosen')) {
                 itemEl.classList.add('chosen');
@@ -1494,8 +1008,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   useEffect(() => {
-    if (refs) refs(ref);
-
     if (attached.length) {
       attached.length = 0;
     }
@@ -1505,15 +1017,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, []);
   useEffect(() => {
-    attachTextRef.current.innerHTML = label + (required ? `<b style="color: ${theme.colors.danger}"> *</b>` : '');
     let el = null;
 
     if (error) {
       attachTextRef.current.style.color = danger;
-      ref.current.style.borderColor = errorStyle && errorStyle.borderColor || danger;
+      ref.current.style.borderColor = danger;
       el = document.createElement('p');
       el.classList.add('attachment-error');
-      Object.assign(el.style, errorStyle);
       el.innerHTML = error;
       attachTextRef.current.parentNode.insertAdjacentElement('afterEnd', el);
     }
@@ -1528,9 +1038,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         el.remove();
       }
     };
-  }, [required, error]);
+  }, [error]);
   useEffect(() => {
-    onChangeViewAttachType(null, viewType === 'icon' ? 'detail' : 'icon');
+    setViewTypeState(viewType);
   }, [viewType]);
   useEffect(() => {
     switch (true) {
@@ -1648,15 +1158,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [inputProps]);
-  useEffect(() => {
-    if (disabled) {
-      ref.current.classList.add('disabled');
-    } else if (ref.current.classList.contains('disabled')) {
-      ref.current.classList.remove('disabled');
-    }
-
-    attachmentInputRef.current.disabled = disabled || inputProps && inputProps.disabled;
-  }, [disabled]);
   useEffect(() => {
     if (maxSizeProp) {
       if (!isNaN(maxSizeProp)) {
@@ -1700,20 +1201,21 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 
   const AttachHeaderView = useMemo(() => jsx("div", {
-    css: AttachmentHeader
+    css: AttachmentHeaderCSS,
+    className: 'DGN-UI-Attachment-Header'
   }, jsx("div", {
-    css: AttachmentInfo
+    css: AttachmentInfoCSS
   }, jsx("p", {
-    css: AttachmentText,
+    css: AttachmentTextCSS,
     ref: attachTextRef
-  }), jsx("span", null, jsx(Info, {
-    width: '18',
-    height: '18',
-    bgColor: 'currentColor'
-  }), jsx("span", null, ' ', jsx("ul", null, " "), ' '))), jsx("div", {
-    css: AttachmentHeaderIcon
+  }, label, required && jsx("span", {
+    style: {
+      color: danger
+    }
+  }, " *"))), jsx("div", {
+    css: AttachmentHeaderIconCSS
   }, jsx("div", {
-    css: attachmentHandleIcon,
+    css: AttachmentHandleIconCSS,
     ref: attachmentHandleIconRef
   }, jsx("span", {
     className: 'view',
@@ -1734,22 +1236,22 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     color: 'currentColor',
     viewBox: true
   }))), jsx("div", {
-    css: AttachmentImage,
+    css: AttachmentImageCSS,
     ref: attachmentImageRef
   }, !(readOnly || disabled) && jsx("div", {
-    css: AttachmentImageCenter
+    css: AttachmentImageCenterCSS
   }, jsx("div", {
-    css: AttachmentImageContent
+    css: AttachmentImageContentCSS
   }, jsx("span", {
-    css: AttachmentImageIcon,
+    css: AttachmentImageIconCSS,
     ref: attachmentImageIconRef,
     onClick: triggerClickInput
   }, jsx(AttachmentIcon, {
     viewBox: true,
     color: 'currentColor'
   })), jsx("span", {
-    css: AttachmentImageText
-  }, hintText || getGlobal('dropFileHere'))))), allowSort && jsx(ButtonIcon, {
+    css: AttachmentImageTextCSS
+  }, hintText)))), allowSort && jsx(ButtonIcon, {
     viewType: 'ghost',
     name: 'Sort',
     ref: sortIconRef,
@@ -1761,19 +1263,21 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }), jsx(ButtonIcon, {
     viewType: 'ghost',
     name: viewTypeState === 'detail' ? 'IconView' : 'ListView',
-    onClick: onChangeViewAttachType
-  }))), [allowSort, readOnly, viewTypeState]);
+    onClick: () => setViewTypeState(viewTypeState === 'icon' ? 'detail' : 'icon')
+  }))), [allowSort, disabled, readOnly, label, required, hintText, viewTypeState]);
   const AttachmentInputView = useMemo(() => jsx("div", {
-    css: AttachmentInput
-  }, jsx("input", { ...inputProps,
+    css: AttachmentInputCSS,
+    className: 'DGN-UI-Attachment-Input'
+  }, jsx("input", {
     type: "file",
     ref: attachmentInputRef,
     title: "",
-    style: inputStyle,
     onDrop: onDropInput,
-    onDragLeave: onDropInput
-  })), [inputStyle]);
+    onDragLeave: onDropInput,
+    ...inputProps
+  })), [inputProps]);
   const AttachedView = useMemo(() => jsx(ScrollBar, {
+    className: 'DGN-UI-Attachment-List',
     style: {
       marginRight: 5,
       paddingTop: 0,
@@ -1782,9 +1286,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       overflowY: 'overlay'
     }
   }, jsx("div", {
-    css: Attached,
-    ref: attachedRef
-  })), []);
+    css: AttachedCSS,
+    ref: attachedRef,
+    className: viewTypeState === 'icon' ? 'icon-view' : ''
+  })), [viewTypeState]);
   const PopoverView = useMemo(() => {
     return jsx(Popover, {
       open: popover,
@@ -1835,7 +1340,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClose: onClosePopup,
     onConfirm: onRemoveMultiple,
     onCancel: onClosePopup
-  }), [popup]);
+  }), [deleteNotifyText, popup]);
   const ModalView = useMemo(() => {
     if (!chosenItems.length) return setOpen(false);
     const index = chosenItems[0];
@@ -1852,26 +1357,415 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   useImperativeHandle(reference, () => {
     stripDomain();
-    ref.current.oldAttached = oldAttached;
-    ref.current.allNewAttached = allNewAttached;
-    ref.current.attached = attached;
-    ref.current.clear = clearAllAttached;
-    ref.current.openFileDialog = triggerClickInput;
-    return ref.current;
+    const currentRef = ref.current || {};
+    const _instance = {
+      oldAttached: oldAttached,
+      allNewAttached: allNewAttached,
+      attached: attached,
+      clear: confirmPopup => clearAllAttached(confirmPopup),
+      openFileDialog: triggerClickInput
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    currentRef.oldAttached = oldAttached;
+    currentRef.allNewAttached = allNewAttached;
+    currentRef.attached = attached;
+
+    currentRef.clear = confirmPopup => clearAllAttached(confirmPopup);
+
+    currentRef.openFileDialog = triggerClickInput;
+    return currentRef;
   });
-  return jsx("div", { ...props,
-    css: AttachmentRoot,
-    className: ('DGN-UI-Attachment ' + className).trim(),
-    style: style,
+  return jsx("div", {
     ref: ref,
+    css: AttachmentRootCSS,
+    id: id,
+    className: [`DGN-UI-Attachment ${disabled ? 'disabled' : ''}`, className].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
     onDragEnter: onDragFileStart
-  }, AttachHeaderView, AttachmentInputView, AttachedView, PopoverView, PopupView, ModalView);
+  }, AttachHeaderView, AttachmentInputView, AttachedView, PopoverView, PopupView, ModalView, jsx(Notify, {
+    getAddNotify: func => PushNotify.current = func,
+    progressing: true,
+    autoDisappear: true,
+    position: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    color: 'danger'
+  }));
 }));
+const ViewAttachTypeCSS = css`
+    ${cursorPointer};
+    ${parseHeight(24)};
+    color: ${rest};
+    &:hover {
+        color: ${active};
+    }
+`;
+const AttachmentHandleIconCSS = css`
+    ${displayNone};
+    ${parseHeight(24)};
+    margin-right: 10px;
+    border-right: 1px solid ${normal};
+    span {
+        ${cursorPointer};
+        margin-right: 10px;
+        color: ${rest};
+        &:hover {
+            color: ${active};
+        }
+    }
+`;
+const AttachmentHeaderCSS = css`
+    ${flexRow};
+    ${alignCenter};
+    ${justifyBetween};
+    ${borderBox};
+    ${parseHeight(48)};
+    padding: ${spacing([4, 4])};
+    .css-${AttachmentHandleIconCSS.name}, .css-${ViewAttachTypeCSS.name} {
+        z-index: 1;
+    }
+`;
+const AttachmentInfoCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${alignCenter};
+    margin: 0;
+    & + p.attachment-error {
+        color: ${danger};
+    }
+`;
+const AttachmentTextCSS = css`
+    ${userSelectNone};
+    ${textUppercase};
+    ${heading5};
+    color: ${sub};
+`;
+const AttachmentHeaderIconCSS = css`
+    ${flexRow};
+    ${alignCenter};
+`;
+const AttachmentInputCSS = css`
+    ${displayNone};
+    ${positionAbsolute};
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 4;
+    input {
+        ${positionRelative};
+        opacity: 0;
+        top: -20px;
+        font-size: 0px;
+        width: 100%;
+        height: calc(100% + 20px);
+    }
+`;
+const AttachmentImageCenterCSS = css`
+    ${flexRow};
+    ${justifyCenter};
+    ${alignCenter};
+    width: 100%;
+    height: 100%;
+`;
+const AttachmentImageContentCSS = css`
+    ${textCenter};
+    display: grid;
+`;
+const AttachmentImageIconCSS = css`
+    ${parseWidthHeight(24, 24)};
+    margin-bottom: 0;
+    z-index: 3;
+    svg {
+        color: ${rest};
+    }
+    &:hover {
+        border-color: ${lineHover};
+        svg {
+            color: ${active};
+        }
+    }
+`;
+const AttachmentImageTextCSS = css`
+    ${displayNone};
+    ${userSelectNone};
+    ${paragraph3};
+    color: ${rest};
+`;
+const AttachmentImageCSS = css`
+    margin-right: 10px;
+    &.hint-center {
+        ${positionAbsolute};
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        margin-right: 0;
+        z-index: 1;
+        .css-${AttachmentImageTextCSS.name} {
+            ${displayBlock};
+        }
+        .css-${AttachmentImageIconCSS.name} {
+            ${flexRow};
+            ${justifyCenter};
+            ${alignCenter};
+            ${parseWidthHeight(64, 64)};
+            margin: 0 auto 8px auto;
+            border: 1px dashed ${normal};
+            border-radius: 50%;
+            svg {
+                ${parseWidthHeight(40, 40)};
+            }
+            &:hover {
+                border-color: ${lineHover};
+                background-color: ${fillHover};
+            }
+        }
+    }
+`;
+const AttachedItemInfoCSS = css`
+    ${flexRow};
+    ${alignCenter};
+    ${borderRadius4px};
+    ${userSelectNone};
+    min-width: 104px;
+    margin-right: 10px;
+    min-width: calc(50% - 10px);
+`;
+const AttachedItemInfoIconCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${cursorPointer};
+    max-height: 16px;
+    max-width: 14px;
+    padding: 4px 5px;
+    box-sizing: content-box;
+    &.new-file:after {
+        content: '';
+        ${positionAbsolute};
+        top: 4.5px;
+        left: -2px;
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background: ${success};
+    }
+`;
+const AttachedItemInfoNameCSS = css`
+    ${paragraph1};
+    ${cursorPointer};
+    ${ellipsis};
+    color: ${dark};
+    margin-left: 12px;
+    padding-top: 1px;
+    box-sizing: content-box;
+`;
+const AttachedItemOwnerCSS = css`
+    ${paragraph2};
+    ${flexRow};
+    ${positionRelative};
+    ${alignCenter};
+    ${cursorPointer};
+    ${userSelectNone};
+    height: 100%;
+    color: ${sub};
+    .detail-info {
+        ${flexRow};
+        min-width: 333px;
+        .username {
+            ${displayInlineBlock};
+            ${ellipsis};
+            min-width: 120px;
+            max-width: 120px;
+        }
+        .datetime {
+            ${displayInlineBlock};
+            min-width: max-content;
+            max-width: max-content;
+        }
+        .filesize {
+            float: right;
+            text-align: right;
+            margin-left: auto;
+        }
+    }
+`;
+const AttachedLinearCSS = css`
+    ${flexRow};
+    ${positionAbsolute};
+    ${alignCenter};
+    width: 100%;
+    top: 0;
+    background: #fff;
+    height: 100%;
+`;
+const AttachedItemCSS = css`
+    ${flexRow};
+    ${justifyBetween};
+    ${alignCenter};
+    ${positionRelative};
+    ${borderRadius4px};
+    ${parseHeight(24)};
+    padding: ${spacing([0, 2])};
+    transition: padding 0.5s ease;
+`;
+const AttachedCSS = css`
+    ${positionRelative};
+    height: 100%;
+    max-height: 152px;
+    margin-left: 8px;
+    margin-right: 8px;
+    z-index: 1;
+    overflow-y: visible;
+    .attachment-row {
+        ${displayBlock};
+        margin-bottom: 8px;
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+    &.icon-view {
+        ${flexRow};
+        ${flexWrap};
+        ${justifyBetween};
+        &::after {
+            content: '';
+            flex: auto;
+        }
+        max-height: 200px;
+        margin-left: 0;
+        width: max-content;
+        max-width: calc(100% - 26px);
+        .attachment-row {
+            ${positionRelative};
+            margin-left: 16px;
+            overflow-y: visible;
+        }
+        .css-${AttachedItemCSS.name} {
+            ${displayBlock};
+            ${parseWidthHeight(80, 80)};
+            padding: 0;
+            position: initial;
+            .css-${AttachedItemInfoCSS.name} {
+                ${displayBlock};
+                ${positionRelative};
+                ${textCenter};
+                ${ellipsis};
+                width: max-content;
+                max-width: 80px;
+                margin-left: auto;
+                margin-right: auto;
+                min-width: 70px;
+                .css-${AttachedItemInfoIconCSS.name} {
+                    ${displayBlock};
+                    ${parseWidthHeight(40, 40)};
+                    max-height: 40px;
+                    max-width: 40px;
+                    margin: 4px auto 2px;
+                    padding: 0;
+                    &.new-file:after {
+                        top: -1px;
+                        left: -7px;
+                        width: 8px;
+                        height: 8px;
+                    }
+                }
+                .css-${AttachedItemInfoNameCSS.name} {
+                    ${paragraph3};
+                    ${textCenter};
+                    margin: 0 8px;
+                    display: -webkit-box;
+                    word-break: break-word;
+                    max-width: 100%;
+                    white-space: pre-wrap;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                }
+            }
+            .css-${AttachedItemOwnerCSS.name} {
+                ${paragraph3};
+                position: inherit;
+                height: auto;
+                .detail-info {
+                    ${displayNone};
+                }
+                .css-${AttachedLinearCSS.name} {
+                    height: auto;
+                    bottom: 0;
+                    top: unset;
+                    background: none;
+                }
+            }
+        }
+    }
+    &:not(.icon-view) {
+        min-width: 684px;
+    }
+`;
+const AttachmentRootCSS = css`
+    ${flexCol};
+    ${flexWrap};
+    ${justifyStart};
+    ${positionRelative};
+    ${borderRadius4px};
+    ${border(1, normal)};
+    min-height: 165px;
+    padding-bottom: 20px;
+    background-color: ${white};
+    &:hover:not(.disabled) {
+        .css-${AttachmentImageIconCSS.name} {
+            ${cursorPointer};
+        }
+    }
+    .css-${AttachedCSS.name} {
+        &:not(.disabled) {
+            .css-${AttachedItemCSS.name} {
+                &:hover {
+                    background-color: ${fillHover};
+                    .css-${AttachedLinearCSS.name} {
+                        background-color: ${fillHover};
+                    }
+                }
+                &:active {
+                    background-color: ${pressed};
+                    .css-${AttachedLinearCSS.name} {
+                        background-color: ${pressed};
+                    }
+                }
+                &.chosen {
+                    background-color: ${focus};
+                    .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
+                        background-color: ${focus};
+                    }
+                }
+            }
+        }
+    }
+    &.disabled {
+        .css-${AttachedItemCSS.name} {
+            ${pointerEventsNone};
+        }
+    }
+    @media (max-width: 716px) {
+        .css-${AttachedCSS.name}:not(.icon-view) {
+            min-width: 575px;
+        }
+        .css-${AttachedItemInfoCSS.name} {
+            max-width: calc(40% - 10px);
+        }
+    }
+`;
 Attachment.defaultProps = {
   deleteNotifyText: getGlobal('deleteNotifyText'),
   viewType: 'detail',
   label: getGlobal('attachText'),
+  hintText: getGlobal('dropFileHere'),
   className: '',
+  style: {},
   allowSort: true,
   multiple: true,
   disabled: false,
@@ -1881,6 +1775,15 @@ Attachment.defaultProps = {
   uploadErrorInfo: {}
 };
 Attachment.propTypes = {
+  /** File types that can be accepted. */
+  accept: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+
+  /** If `true`, allow sort. */
+  allowSort: PropTypes.bool,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
   /** List attachment:<br />
    * [{<br />
    * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
@@ -1895,77 +1798,48 @@ Attachment.propTypes = {
    */
   data: PropTypes.array,
 
-  /** allow sort element on DOM if true */
-  allowSort: PropTypes.bool,
+  /** The message to display when deleting files. */
+  deleteNotifyText: PropTypes.string,
 
-  /** prevent all event if true */
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** prevent all event if true */
-  readOnly: PropTypes.bool,
-
-  /** At least one attachment is required */
-  required: PropTypes.bool,
-
-  /** allows to attach multiple files */
-  multiple: PropTypes.bool,
-
-  /** the type of images displayed want to see */
-  viewType: PropTypes.oneOf(['detail', 'icon']),
-
-  /** attach label to display in the upper left corner of attachment box */
-  label: PropTypes.string,
-
-  /** domain of attachments*/
+  /** Domain of attachments. */
   domain: PropTypes.string,
 
-  /** strip domain of attachments if it's true */
-  isStripDomain: PropTypes.bool,
-
-  /** class of Attachment component */
-  className: PropTypes.string,
-
-  /** the name of the person who attached the file when uploading the file */
-  ownerName: PropTypes.string,
+  /** Error of attachment. */
+  error: PropTypes.string,
 
-  /** Suggested passage attached */
+  /** Suggested passage attached. */
   hintText: PropTypes.string,
 
-  /** text warning message when deleting files */
-  deleteNotifyText: PropTypes.string,
-
-  /** error of attachment */
-  error: PropTypes.string,
+  /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
+  inputProps: PropTypes.object,
 
-  /** Allows what types of files to be attached */
-  accept: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  /** If `true`, strip domain of attachments. */
+  isStripDomain: PropTypes.bool,
 
-  /** Maximum capacity allowed to attach */
-  maxSize: PropTypes.string,
+  /** Label of the component. */
+  label: PropTypes.string,
 
-  /** Maximum quantity allowed to attach */
+  /** Limit the number of uploaded files. */
   maxFile: PropTypes.number,
 
-  /** style inline of Attachment component */
-  style: PropTypes.object,
-
-  /** style inline of error in Attachment component */
-  errorStyle: PropTypes.object,
-
-  /** style inline of input in Attachment component */
-  inputStyle: PropTypes.object,
+  /** Limit the size of uploaded files. */
+  maxSize: PropTypes.string,
 
-  /** props of input in Attachment component */
-  inputProps: PropTypes.object,
+  /** Allows to attach multiple files. */
+  multiple: PropTypes.bool,
 
-  /** errors show up when the file upload is corrupted */
-  uploadErrorInfo: PropTypes.object,
+  /** Callback fired when the files attached is changed. */
+  onChange: PropTypes.func,
 
-  /** event when uploading file failed */
-  onUploadError: PropTypes.func,
+  /** Download attached event, if not it will use default. */
+  onDownload: PropTypes.func,
 
   /**
-   * event when removed file(s)<br/>
+   * event when removed file(s)
+   *
    * return data: {<br/>
    * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
    * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
@@ -1976,16 +1850,25 @@ Attachment.propTypes = {
    */
   onRemove: PropTypes.func,
 
-  /** view attached event, if not it will use default */
+  /** View attached event, if not it will use default. */
   onView: PropTypes.func,
 
-  /** download attached event, if not it will use default */
-  onDownload: PropTypes.func,
+  /** Name of the person who attached the file when uploading the file. */
+  ownerName: PropTypes.string,
 
-  /** event when there is a change attached */
-  onChange: PropTypes.func,
+  /** If `true`, the component is readOnly. */
+  readOnly: PropTypes.bool,
+
+  /** At least one attachment is required. */
+  required: PropTypes.bool,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Errors show up when the file upload is corrupted. */
+  uploadErrorInfo: PropTypes.object,
 
-  /** any props else */
-  props: PropTypes.any
+  /** The view type of files. */
+  viewType: PropTypes.oneOf(['detail', 'icon'])
 };
 export default Attachment;