diginet-core-ui 1.4.39 → 1.4.40

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

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