diginet-core-ui 1.3.73 → 1.3.74

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

@@ -7,10 +7,10 @@ import ReactDOM from 'react-dom';
 import { jsx, css } from '@emotion/core';
 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 { classNames, 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';
+import { alignCenter, border, borderBox, borderRadius4px, breakWord, 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: {
@@ -43,8 +43,7 @@ const {
     paragraph2,
     paragraph3
   },
-  spacing // zIndex: zIndexCORE,
-
+  spacing
 } = theme;
 const useStyles = makeStyles({
   listItem: {
@@ -113,34 +112,101 @@ let prevent = false;
 let existClickOutOfItem = false;
 let maxSize = Infinity;
 let divideSize = null;
+
+const getType = data => {
+  if (data.type !== undefined) {
+    var _type$match;
+
+    const pattern = /word|sheet|presentation|pdf|image|compressed/i;
+    let type = data.type;
+
+    if (!type) {
+      if (/rar/.test(data.name)) {
+        type = 'compressed';
+      }
+    }
+
+    return ((_type$match = type.match(pattern)) === null || _type$match === void 0 ? void 0 : _type$match[0]) || 'default';
+  } else {
+    var _data$FileName;
+
+    const FileExt = (_data$FileName = data.FileName) === null || _data$FileName === void 0 ? void 0 : _data$FileName.slice(data.FileName.lastIndexOf('.'));
+    return getFileType(FileExt, 'default');
+  }
+};
+
+const getDateTime = date => {
+  if (String(date) === 'Invalid Date') return 'unknown'; // const d = ('0' + date.getDate()).slice(-2);
+  // const m = ('0' + (date.getMonth() + 1)).slice(-2);
+  // const y = date.getFullYear();
+  // const t = date.toTimeString().slice(0, 8);
+
+  return jsx(Fragment, null, moment(date).format('DD/MM/YYYY, HH:mm:ss'), ' ', jsx("span", {
+    style: {
+      display: 'none'
+    }
+  }, date.getMilliseconds()));
+};
+
+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) => {
+  switch (true) {
+    case /^B$/i.test(unit):
+      return size * 1;
+
+    case /KB/i.test(unit):
+      return size * 1024;
+
+    case /MB/i.test(unit):
+      return size * 1024 ** 2;
+
+    case /GB/i.test(unit):
+      return size * 1024 ** 3;
+
+    case /TB/i.test(unit):
+      return size * 1024 ** 4;
+
+    default:
+      return size * 1024 * 1024;
+  }
+};
+
 const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  viewType,
-  label,
+  accept,
+  allowSort,
   className,
+  data,
   deleteNotifyText,
-  ownerName,
-  hintText,
-  multiple,
   disabled,
-  allowSort,
-  onRemove: onRemoveItem,
-  onView: onViewItem,
-  onDownload: onDownloadItem,
-  onChange,
-  data,
+  domain,
+  error,
+  hintText,
+  id,
+  inputProps,
+  isStripDomain,
+  label,
   maxFile,
   maxSize: maxSizeProp,
+  multiple,
+  onChange,
+  onDownload: onDownloadProp,
+  onRemove: onRemoveProp,
+  onView: onViewProp,
+  ownerName,
+  readOnly,
+  required,
+  style,
   unitSize,
-  accept,
   uploadErrorInfo,
-  domain,
-  isStripDomain,
-  style,
-  inputProps,
-  required,
-  error,
-  readOnly,
-  id
+  viewType
 }, reference) => {
   const classes = useStyles();
   const ref = useRef(null);
@@ -159,7 +225,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const popupRef = useRef(null);
   const popoverRef = useRef(null);
   const isDeleteAll = useRef(false);
-  const PushNotify = useRef(null); // Start handler
+  const PushNotify = useRef(null);
+  const removedAttachedRef = useRef([]); // Start handler
 
   const onShowSortPopover = () => {
     setPopover(true);
@@ -367,28 +434,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
   };
 
-  const getType = data => {
-    if (data.type !== undefined) {
-      var _type$match;
-
-      const pattern = /word|sheet|presentation|pdf|image|compressed/i;
-      let type = data.type;
-
-      if (!type) {
-        if (/rar/.test(data.name)) {
-          type = 'compressed';
-        }
-      }
-
-      return ((_type$match = type.match(pattern)) === null || _type$match === void 0 ? void 0 : _type$match[0]) || 'default';
-    } else {
-      var _data$FileName;
-
-      const FileExt = (_data$FileName = data.FileName) === null || _data$FileName === void 0 ? void 0 : _data$FileName.slice(data.FileName.lastIndexOf('.'));
-      return getFileType(FileExt, 'default');
-    }
-  };
-
   const getItemDetailHTML = (data, i) => {
     const date = new Date();
     data.CreateDate = date.toISOString();
@@ -464,23 +509,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, calculateSize(data.FileSize || data.size)))));
   };
 
-  const getDateTime = date => {
-    if (String(date) === 'Invalid Date') return 'unknown'; // const d = ('0' + date.getDate()).slice(-2);
-    // const m = ('0' + (date.getMonth() + 1)).slice(-2);
-    // const y = date.getFullYear();
-    // const t = date.toTimeString().slice(0, 8);
-
-    return jsx(Fragment, null, moment(date).format('DD/MM/YYYY, HH:mm:ss'), ' ', jsx("span", {
-      style: {
-        display: 'none'
-      }
-    }, date.getMilliseconds()));
-  };
-
   const calculateSize = size => {
     if (!size && size !== 0) return 'unknown';
-    let totalSize = '';
-    let unitSizeName = '';
+    let totalSize;
+    let unitSizeName;
 
     if (divideSize) {
       totalSize = size / divideSize;
@@ -507,37 +539,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return totalSize + ' ' + unitSizeName;
   };
 
-  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) => {
-    switch (true) {
-      case /^B$/i.test(unit):
-        return size * 1;
-
-      case /KB/i.test(unit):
-        return size * 1024;
-
-      case /MB/i.test(unit):
-        return size * 1024 ** 2;
-
-      case /GB/i.test(unit):
-        return size * 1024 ** 3;
-
-      case /TB/i.test(unit):
-        return size * 1024 ** 4;
-
-      default:
-        return size * 1024 * 1024;
-    }
-  };
-
   const onShowPopup = () => {
     setPopup(true);
   };
@@ -554,7 +555,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const onDownloadMultiple = () => {
     const index = chosenItems[0];
-    let file = null;
+    let file;
 
     if (index < oldAttached.length) {
       file = mountDomain(oldAttached[index]);
@@ -568,7 +569,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const onRemoveMultiple = () => {
     const nodeList = attachedRef.current.querySelectorAll('.chosen');
-    const removedAttached = [];
+    const recentRemovedAttached = [];
     nodeList.forEach(itemEl => {
       const parent = itemEl.parentNode;
       const index = Array.from(attachedRef.current.children).indexOf(parent);
@@ -580,7 +581,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         oldAttached.splice(oldAttached.findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate), 1);
       }
 
-      removedAttached.push(deletedFile);
+      removedAttachedRef.current.push(deletedFile);
+      recentRemovedAttached.push(deletedFile);
       parent.remove();
     });
 
@@ -592,11 +594,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (onChange) onChange({
       element: nodeList,
       attached,
-      removedAttached,
+      recentRemovedAttached,
+      removedAttached: removedAttachedRef.current,
       oldAttached,
       allNewAttached: allNewAttached.getAll('files')
     });
-    !!onRemoveItem && onRemoveItem(removedAttached);
+    !!onRemoveProp && onRemoveProp(recentRemovedAttached);
     onClosePopup();
   };
 
@@ -629,7 +632,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     const index = Array.from(attachedRef.current.children).indexOf(node);
-    if (onViewItem) onViewItem(AttachmentID, index);else {
+    if (onViewProp) onViewProp(AttachmentID, index);else {
       setOpen(true);
     }
     setTimeout(() => {
@@ -650,7 +653,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       a.click();
       window.URL.revokeObjectURL(url);
     }).catch(() => alert('File not found'));
-    if (onDownloadItem) onDownloadItem(url);
+    if (onDownloadProp) onDownloadProp(url);
   }; // const onRemove = (e, AttachmentID='') => {
   //     const parent = e.currentTarget.parentNode.parentNode.parentNode;
   //     const index = Array.from(attachedRef.current.children).indexOf(parent);
@@ -1027,7 +1030,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       el = document.createElement('p');
       el.classList.add('attachment-error');
       el.innerHTML = error;
-      attachTextRef.current.parentNode.insertAdjacentElement('afterEnd', el);
+      attachTextRef.current.parentNode.insertAdjacentElement('afterend', el);
     }
 
     return () => {
@@ -1044,6 +1047,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     setViewTypeState(viewType);
   }, [viewType]);
+  useEffect(() => {
+    attachmentInputRef.current.addEventListener('change', onChangeFiles);
+    return () => {
+      attachmentInputRef.current && attachmentInputRef.current.removeEventListener('change', onChangeFiles);
+    };
+  }, [readOnly, disabled, uploadErrorInfo, inputProps, isStripDomain, domain]);
   useEffect(() => {
     switch (true) {
       case /^B$/i.test(unitSize):
@@ -1076,6 +1085,33 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       attachmentInputRef.current && attachmentInputRef.current.removeEventListener('change', onChangeFiles);
     };
   }, [unitSize, onChange]);
+  useEffect(() => {
+    if (maxSizeProp) {
+      if (!isNaN(maxSizeProp)) {
+        maxSize = maxSizeProp * 1024 * 1024;
+      } else {
+        const numberSize = maxSizeProp.match(/\d+/g);
+        const unitMaxSize = maxSizeProp.match(/\D+/g);
+        maxSize = getBit(numberSize, unitMaxSize);
+      }
+    }
+
+    attachmentInputRef.current.multiple = multiple;
+
+    if (accept && typeof accept === 'string') {
+      attachmentInputRef.current.accept = `${accept}/*`.replace('/*/*', '/*');
+    }
+
+    attachmentInputRef.current.addEventListener('change', onChangeFiles);
+    return () => {
+      if (attachmentInputRef.current) {
+        attachmentInputRef.current.removeEventListener('change', onChangeFiles);
+        attachmentInputRef.current.accept = null;
+      }
+
+      maxSize = Infinity;
+    };
+  }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
     var _newAttachedRef$curre;
 
@@ -1083,7 +1119,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + (((_newAttachedRef$curre = newAttachedRef.current) === null || _newAttachedRef$curre === void 0 ? void 0 : _newAttachedRef$curre.length) || 0));
 
     if (data) {
-      // Load files data was upload
+      // Load files data was uploaded
       const length = data.length;
 
       for (let i = 0; i < length; i++) {
@@ -1160,33 +1196,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [inputProps]);
-  useEffect(() => {
-    if (maxSizeProp) {
-      if (!isNaN(maxSizeProp)) {
-        maxSize = maxSizeProp * 1024 * 1024;
-      } else {
-        const numberSize = maxSizeProp.match(/\d+/g);
-        const unitMaxSize = maxSizeProp.match(/\D+/g);
-        maxSize = getBit(numberSize, unitMaxSize);
-      }
-    }
-
-    attachmentInputRef.current.multiple = multiple;
-
-    if (accept && typeof accept === 'string') {
-      attachmentInputRef.current.accept = `${accept}/*`.replace('/*/*', '/*');
-    }
-
-    attachmentInputRef.current.addEventListener('change', onChangeFiles);
-    return () => {
-      if (attachmentInputRef.current) {
-        attachmentInputRef.current.removeEventListener('change', onChangeFiles);
-        attachmentInputRef.current.accept = null;
-      }
-
-      maxSize = Infinity;
-    };
-  }, [maxFile, maxSizeProp, multiple, accept]);
 
   const triggerClickInput = () => {
     attachmentInputRef.current.click();
@@ -1342,7 +1351,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClose: onClosePopup,
     onConfirm: onRemoveMultiple,
     onCancel: onClosePopup
-  }), [deleteNotifyText, popup]);
+  }), [deleteNotifyText, onChange, onRemoveProp, popup]);
   const ModalView = useMemo(() => {
     if (!chosenItems.length) return setOpen(false);
     const index = chosenItems[0];
@@ -1355,11 +1364,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Slider, null, jsx(SliderItem, {
       url: data.URL
     })));
-  }, [open]); // End view
+  }, [domain, open]); // End view
 
   useImperativeHandle(reference, () => {
     stripDomain();
     const currentRef = ref.current || {};
+    currentRef.element = ref.current;
     const _instance = {
       oldAttached: oldAttached,
       allNewAttached: allNewAttached,
@@ -1384,7 +1394,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: ref,
     css: AttachmentRootCSS,
     id: id,
-    className: [`DGN-UI-Attachment ${disabled ? 'disabled' : ''}`, className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Attachment', disabled && 'disabled', className),
     style: style,
     onDragEnter: onDragFileStart
   }, AttachHeaderView, AttachmentInputView, AttachedView, PopoverView, PopupView, ModalView, jsx(Notify, {
@@ -1409,11 +1419,11 @@ const ViewAttachTypeCSS = css`
 const AttachmentHandleIconCSS = css`
     ${displayNone};
     ${parseHeight(24)};
-    margin-right: 10px;
+    margin-right: ${spacing([2.5])};
     border-right: 1px solid ${normal};
     span {
         ${cursorPointer};
-        margin-right: 10px;
+        margin-right: ${spacing([2.5])};
         color: ${rest};
         &:hover {
             color: ${active};
@@ -1453,26 +1463,23 @@ const AttachmentHeaderIconCSS = css`
 const AttachmentInputCSS = css`
     ${displayNone};
     ${positionAbsolute};
-    width: 100%;
-    height: 100%;
+    ${parseWidthHeight('100%', '100%')};
     top: 0;
     left: 0;
     z-index: 4;
     input {
         ${positionRelative};
+        ${parseWidthHeight('100%', 'calc(100% + 20px)')};
         opacity: 0;
-        top: -20px;
+        top: ${spacing([-5])};
         font-size: 0px;
-        width: 100%;
-        height: calc(100% + 20px);
     }
 `;
 const AttachmentImageCenterCSS = css`
     ${flexRow};
     ${justifyCenter};
     ${alignCenter};
-    width: 100%;
-    height: 100%;
+    ${parseWidthHeight('100%', '100%')};
 `;
 const AttachmentImageContentCSS = css`
     ${textCenter};
@@ -1502,8 +1509,7 @@ const AttachmentImageCSS = css`
     margin-right: 10px;
     &.hint-center {
         ${positionAbsolute};
-        width: 100%;
-        height: 100%;
+        ${parseWidthHeight('100%', '100%')};
         top: 0;
         left: 0;
         margin-right: 0;
@@ -1534,8 +1540,7 @@ const AttachedItemInfoCSS = css`
     ${alignCenter};
     ${borderRadius4px};
     ${userSelectNone};
-    min-width: 104px;
-    margin-right: 10px;
+    margin-right: ${spacing([2])};
     min-width: calc(50% - 10px);
 `;
 const AttachedItemInfoIconCSS = css`
@@ -1544,15 +1549,14 @@ const AttachedItemInfoIconCSS = css`
     ${cursorPointer};
     max-height: 16px;
     max-width: 14px;
-    padding: 4px 5px;
+    padding: ${spacing([1, 1.25])};
     box-sizing: content-box;
     &.new-file:after {
         content: '';
         ${positionAbsolute};
+        ${parseWidthHeight(4, 4)}
         top: 4.5px;
         left: -2px;
-        width: 4px;
-        height: 4px;
         border-radius: 50%;
         background: ${success};
     }
@@ -1562,8 +1566,8 @@ const AttachedItemInfoNameCSS = css`
     ${cursorPointer};
     ${ellipsis};
     color: ${dark};
-    margin-left: 12px;
-    padding-top: 1px;
+    margin-left: ${spacing([3])};
+    padding-top: ${spacing([0.25])};
     box-sizing: content-box;
 `;
 const AttachedItemOwnerCSS = css`
@@ -1600,10 +1604,9 @@ const AttachedLinearCSS = css`
     ${flexRow};
     ${positionAbsolute};
     ${alignCenter};
-    width: 100%;
+    ${parseWidthHeight('100%', '100%')};
     top: 0;
-    background: #fff;
-    height: 100%;
+    background: ${white};
 `;
 const AttachedItemCSS = css`
     ${flexRow};
@@ -1619,13 +1622,13 @@ const AttachedCSS = css`
     ${positionRelative};
     height: 100%;
     max-height: 152px;
-    margin-left: 8px;
-    margin-right: 8px;
+    margin-left: ${spacing([2])};
+    margin-right: ${spacing([2])};
     z-index: 1;
     overflow-y: visible;
     .attachment-row {
         ${displayBlock};
-        margin-bottom: 8px;
+        margin-bottom: ${spacing([2])};
         &:last-child {
             margin-bottom: 0;
         }
@@ -1644,7 +1647,7 @@ const AttachedCSS = css`
         max-width: calc(100% - 26px);
         .attachment-row {
             ${positionRelative};
-            margin-left: 16px;
+            margin-left: ${spacing([4])};
             overflow-y: visible;
         }
         .css-${AttachedItemCSS.name} {
@@ -1670,18 +1673,17 @@ const AttachedCSS = css`
                     margin: 4px auto 2px;
                     padding: 0;
                     &.new-file:after {
+                        ${parseWidthHeight(8, 8)};
                         top: -1px;
                         left: -7px;
-                        width: 8px;
-                        height: 8px;
                     }
                 }
                 .css-${AttachedItemInfoNameCSS.name} {
                     ${paragraph3};
                     ${textCenter};
-                    margin: 0 8px;
+                    ${breakWord};
+                    margin: ${spacing([0, 2])};
                     display: -webkit-box;
-                    word-break: break-word;
                     max-width: 100%;
                     white-space: pre-wrap;
                     -webkit-line-clamp: 2;
@@ -1716,7 +1718,7 @@ const AttachmentRootCSS = css`
     ${borderRadius4px};
     ${border(1, normal)};
     min-height: 165px;
-    padding-bottom: 20px;
+    padding-bottom: ${spacing([5])};
     background-color: ${white};
     &:hover:not(.disabled) {
         .css-${AttachmentImageIconCSS.name} {
@@ -1762,19 +1764,22 @@ const AttachmentRootCSS = css`
     }
 `;
 Attachment.defaultProps = {
+  allowSort: true,
+  className: '',
+  data: [],
   deleteNotifyText: getGlobal('deleteNotifyText'),
-  viewType: 'detail',
-  label: getGlobal('attachText'),
+  disabled: false,
   hintText: getGlobal('dropFileHere'),
-  className: '',
-  style: {},
-  allowSort: true,
+  label: getGlobal('attachText'),
+  maxFile: Infinity,
   multiple: true,
-  disabled: false,
   readOnly: false,
-  maxFile: Infinity,
-  data: [],
-  uploadErrorInfo: {}
+  uploadErrorInfo: {
+    maxFile: getGlobal(['errorDefault', 'maxFile']),
+    maxSize: getGlobal(['errorDefault', 'maxSize']),
+    fileType: getGlobal(['errorDefault', 'fileType']),
+    existingFile: getGlobal(['errorDefault', 'existingFile'])
+  }
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */
@@ -1786,17 +1791,17 @@ Attachment.propTypes = {
   /** 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/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<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 />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<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,
 
@@ -1839,16 +1844,16 @@ Attachment.propTypes = {
   /** 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/>
-   * }
+  /**
+   * 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,
 

package/components/form-control/date-picker/index.js

@@ -541,8 +541,10 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       width: 'none'
     }
   }, jsx(InputBase, {
-    placeholder: placeholder,
-    ...inputProps,
+    inputProps: {
+      placeholder: !readOnly && !disabled ? placeholder : '',
+      ...inputProps
+    },
     ref: ipConRef,
     inputRef: ipRef,
     disabled: disabled,