diginet-core-ui 1.4.25-beta.1 → 1.4.25-beta.2

package/assets/images/menu/dhr/MHRP13N0005.svg

@@ -0,0 +1,17 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1682_85)">
+<path d="M32.0137 35.892C32.0137 36.6941 31.4178 37.2956 30.6233 37.2956H8.2774C7.48288 37.2956 6.88699 36.6941 6.88699 35.892V23.0591H6.58904C6.2911 23.0591 6.09247 22.9589 5.89384 22.7584C5.69521 22.5578 5.59589 22.3573 5.59589 22.0566V20.653C5.39726 20.653 5.19863 20.5527 5 20.5527V35.7918C5 37.5964 6.48973 39 8.2774 39H30.6233C32.411 39 33.9007 37.4961 33.9007 35.7918V34.1877L32.0137 34.2049V35.892ZM33.6027 9.52442L24.2671 0.200514C24.0685 0.100257 23.8699 0 23.6712 0H9.86644V0.300771C11.3562 0.501285 12.5479 1.00257 13.4418 1.70437C13.4418 1.70437 13.4418 1.70437 13.5411 1.80463H22.7774V7.82005C22.7774 9.62468 24.2671 11.0283 26.0548 11.0283H30.226H31.9144H32.2123H33.1062H34V10.126C33.9007 9.92545 33.8014 9.72494 33.6027 9.52442ZM25.9555 9.32391C25.161 9.32391 24.5651 8.72236 24.5651 7.92031V3.10797L24.9623 3.509L30.3253 8.82262L30.8481 9.32391H25.9555Z" fill="#2680EB"/>
+<path d="M25 15.0435C25 15.5652 24.4886 16 23.875 16H16C16.2045 15.4783 16.3068 14.9565 16.3068 14.3478C16.3068 14.2609 16.3068 14.087 16.3068 14H23.9773C24.4886 14 25 14.4348 25 15.0435Z" fill="#7BC0F9"/>
+<path d="M22 19.0435C22 19.5652 21.5 20 20.9 20H11C12.3 19.6522 13.4 19.2174 14.3 18.5217C14.5 18.3478 14.7 18.1739 14.9 18H21C21.5 18.087 22 18.5217 22 19.0435Z" fill="#7BC0F9"/>
+<path d="M23.8926 25H11.1074C10.5034 25 10 25.4545 10 26C10 26.5455 10.5034 27 11.1074 27H23.8926C24.4966 27 25 26.5455 25 26C25 25.4545 24.5973 25 23.8926 25Z" fill="#7BC0F9"/>
+<path d="M20.9091 29H11.0909C10.4959 29 10 29.6818 10 30.5C10 31.3182 10.4959 32 11.0909 32H20.9091C21.5041 32 22 31.3182 22 30.5C22 29.6818 21.5041 29 20.9091 29Z" fill="#7BC0F9"/>
+<path d="M6.58312 16.8432V11.6298C4.58824 11.2288 2.99233 10.527 2.09463 9.62468C1.19693 8.72237 0.598466 7.51928 0.598466 6.21594C0.598466 4.9126 1.09719 3.70951 2.19437 2.8072C3.29156 1.90488 4.68798 1.4036 6.58312 1.20308V0H8.87724V1.20308C10.5729 1.4036 11.8696 1.80463 12.867 2.50643C13.8644 3.20823 14.4629 4.2108 14.7621 5.41388L10.7724 5.81491C10.5729 4.81234 9.87468 4.2108 8.87724 3.80977V8.62211C11.3708 9.12339 13.1662 9.82519 14.0639 10.7275C14.9616 11.5296 15.4604 12.6324 15.4604 14.036C15.4604 15.5398 14.8619 16.7429 13.7647 17.8458C12.5678 18.8483 10.9719 19.4499 8.97698 19.7506V22.0566H6.68286V19.8509C4.88747 19.6504 3.3913 19.1491 2.19437 18.2468C0.997443 17.3445 0.299233 16.0411 0 14.437L4.08951 14.1362C4.289 14.838 4.58824 15.3393 5.08696 15.8406C5.58568 16.3419 6.0844 16.6427 6.58312 16.8432ZM6.58312 3.91003C5.98465 4.11054 5.48593 4.31105 5.08696 4.71208C4.68798 5.11311 4.58824 5.6144 4.58824 6.01542C4.58824 6.41645 4.78772 6.81748 5.08696 7.21851C5.38619 7.61954 5.98465 7.92031 6.58312 8.12082V3.91003ZM8.87724 17.0437C9.67519 16.9434 10.2737 16.6427 10.7724 16.1414C11.2711 15.6401 11.4706 15.1388 11.4706 14.5373C11.4706 14.036 11.2711 13.5347 10.8721 13.1337C10.4731 12.7326 9.77494 12.4319 8.77749 12.2314L8.87724 17.0437Z" fill="#FFB330"/>
+<path d="M37.1854 16.9428C37.1573 16.9337 37.1293 16.9247 37.1012 16.9247C37.0451 16.9247 36.9889 16.9428 36.9515 16.988L36.5306 17.3946C36.4932 17.4307 36.4745 17.4759 36.4745 17.5392V19.1657C36.4745 19.4458 36.3716 19.6898 36.1658 19.8886C35.96 20.0873 35.7075 20.1867 35.4175 20.1867H29.9082C29.6182 20.1867 29.3656 20.0873 29.1599 19.8886C28.9541 19.6898 28.8512 19.4458 28.8512 19.1657V13.8524C28.8512 13.5723 28.9541 13.3283 29.1599 13.1295C29.3656 12.9307 29.6182 12.8313 29.9082 12.8313H35.4082C35.5017 12.8313 35.6046 12.8404 35.7075 12.8675C35.7355 12.8765 35.7543 12.8765 35.7636 12.8765C35.8197 12.8765 35.8758 12.8584 35.9133 12.8133L36.2406 12.497C36.2968 12.4428 36.3155 12.3795 36.2968 12.3072C36.2874 12.2349 36.2406 12.1898 36.1752 12.1627C35.9413 12.0542 35.6794 12 35.3988 12H29.9082C29.3844 12 28.9354 12.1807 28.5612 12.5422C28.1871 12.9036 28 13.3373 28 13.8434V19.1566C28 19.6627 28.1871 20.0964 28.5612 20.4578C28.9354 20.8193 29.3844 21 29.9082 21H35.4082C35.932 21 36.381 20.8193 36.7551 20.4578C37.1293 20.0964 37.3163 19.6627 37.3163 19.1566V17.1235C37.3163 17.0422 37.2696 16.9789 37.1854 16.9428ZM38.841 13.2741L38.1114 12.5693C38.0085 12.4699 37.8776 12.4157 37.7372 12.4157C37.5876 12.4157 37.466 12.4699 37.3631 12.5693L33.0884 16.6988L31.3486 15.0181C31.2457 14.9187 31.1148 14.8645 30.9745 14.8645C30.8248 14.8645 30.7032 14.9187 30.6003 15.0181L29.8707 15.7229C29.7679 15.8223 29.7117 15.9488 29.7117 16.0843C29.7117 16.2289 29.7679 16.3464 29.8707 16.4458L32.7143 19.1928C32.8172 19.2922 32.9481 19.3464 33.0884 19.3464C33.2381 19.3464 33.3597 19.2922 33.4626 19.1928L38.841 13.997C38.9439 13.8976 39 13.7711 39 13.6355C39 13.5 38.9439 13.3825 38.841 13.2741Z" fill="#1CA261"/>
+<path d="M37.1854 28.9428C37.1573 28.9337 37.1293 28.9247 37.1012 28.9247C37.0451 28.9247 36.9889 28.9428 36.9515 28.988L36.5306 29.3946C36.4932 29.4307 36.4745 29.4759 36.4745 29.5392V31.1657C36.4745 31.4458 36.3716 31.6898 36.1658 31.8886C35.96 32.0873 35.7075 32.1867 35.4175 32.1867H29.9082C29.6182 32.1867 29.3656 32.0873 29.1599 31.8886C28.9541 31.6898 28.8512 31.4458 28.8512 31.1657V25.8524C28.8512 25.5723 28.9541 25.3283 29.1599 25.1295C29.3656 24.9307 29.6182 24.8313 29.9082 24.8313H35.4082C35.5017 24.8313 35.6046 24.8404 35.7075 24.8675C35.7355 24.8765 35.7543 24.8765 35.7636 24.8765C35.8197 24.8765 35.8758 24.8584 35.9133 24.8133L36.2406 24.497C36.2968 24.4428 36.3155 24.3795 36.2968 24.3072C36.2874 24.2349 36.2406 24.1898 36.1752 24.1627C35.9413 24.0542 35.6794 24 35.3988 24H29.9082C29.3844 24 28.9354 24.1807 28.5612 24.5422C28.1871 24.9036 28 25.3373 28 25.8434V31.1566C28 31.6627 28.1871 32.0964 28.5612 32.4578C28.9354 32.8193 29.3844 33 29.9082 33H35.4082C35.932 33 36.381 32.8193 36.7551 32.4578C37.1293 32.0964 37.3163 31.6627 37.3163 31.1566V29.1235C37.3163 29.0422 37.2696 28.9789 37.1854 28.9428ZM38.841 25.2741L38.1114 24.5693C38.0085 24.4699 37.8776 24.4157 37.7372 24.4157C37.5876 24.4157 37.466 24.4699 37.3631 24.5693L33.0884 28.6988L31.3486 27.0181C31.2457 26.9187 31.1148 26.8645 30.9745 26.8645C30.8248 26.8645 30.7032 26.9187 30.6003 27.0181L29.8707 27.7229C29.7679 27.8223 29.7117 27.9488 29.7117 28.0843C29.7117 28.2289 29.7679 28.3464 29.8707 28.4458L32.7143 31.1928C32.8172 31.2922 32.9481 31.3464 33.0884 31.3464C33.2381 31.3464 33.3597 31.2922 33.4626 31.1928L38.841 25.997C38.9439 25.8976 39 25.7711 39 25.6355C39 25.5 38.9439 25.3825 38.841 25.2741Z" fill="#1CA261"/>
+</g>
+<defs>
+<clipPath id="clip0_1682_85">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP13N0006.svg

@@ -0,0 +1,16 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1682_86)">
+<path d="M33.6027 9.52442L24.2671 0.200514C24.0685 0.100257 23.8699 0 23.6712 0H9.86644V0.300771C11.3562 0.501285 12.5479 1.00257 13.4418 1.70437C13.4418 1.70437 13.4418 1.70437 13.5411 1.80463H22.7774V7.82005C22.7774 9.62468 24.2671 11.0283 26.0548 11.0283H30.226H31.9144H32.2123V18.4473C32.8082 18.6478 33.5034 18.8483 34 19.2494V10.126C33.9007 9.92545 33.8014 9.72493 33.6027 9.52442ZM25.9555 9.32391C25.161 9.32391 24.5651 8.72236 24.5651 7.92031V3.10797L24.9623 3.509L30.3253 8.82262L30.8564 9.32391H25.9555ZM8.2774 37.2956C7.48288 37.2956 6.88699 36.6941 6.88699 35.892V23.0591H6.58904C6.2911 23.0591 6.09247 22.9589 5.89384 22.7584C5.69521 22.5578 5.59589 22.3573 5.59589 22.0566V20.653C5.39726 20.653 5.19863 20.5527 5 20.5527V35.7918C5 37.5964 6.48973 39 8.2774 39H24.2671C23.274 38.4987 22.3801 37.8972 21.4863 37.1954H8.2774V37.2956Z" fill="#2680EB"/>
+<path d="M25.0358 14.9C25.0358 15.5 24.5371 16 23.9386 16H16.2583C16.4578 15.4 16.5575 14.8 16.5575 14.1C16.5575 14 16.5575 13.8 16.5575 13.7H24.0384C24.5371 13.7 25.0358 14.2 25.0358 14.9Z" fill="#7BC0F9"/>
+<path d="M22.1433 19.1C22.1433 19.7 21.6445 20.2 21.0461 20.2H11.1714C12.4681 19.8 13.5652 19.3 14.4629 18.5C14.6624 18.3 14.8619 18.1 15.0614 17.9H21.1458C21.6445 18 22.1433 18.5 22.1433 19.1Z" fill="#7BC0F9"/>
+<path d="M18.752 25C18.4527 25.7 18.2532 26.5 18.1535 27.3H11.1714C10.5729 27.3 10.0742 26.8 10.0742 26.1C10.0742 25.4 10.5729 25 11.1714 25H18.752Z" fill="#7BC0F9"/>
+<path d="M18.353 31.6H11.1714C10.5729 31.6 10.0742 31.1 10.0742 30.5C10.0742 29.9 10.5729 29.4 11.1714 29.4H18.0538C18.0538 30.1 18.1535 30.8 18.353 31.6Z" fill="#7BC0F9"/>
+<path d="M6.58312 16.8V11.6C4.58824 11.2 2.99233 10.5 2.09463 9.6C1.19693 8.7 0.598466 7.5 0.598466 6.2C0.598466 4.9 1.09719 3.7 2.19437 2.8C3.29156 1.9 4.68798 1.4 6.58312 1.2V0H8.87724V1.2C10.5729 1.4 11.8696 1.8 12.867 2.5C13.8644 3.2 14.4629 4.2 14.7621 5.4L10.7724 5.8C10.5729 4.8 9.87468 4.2 8.87724 3.8V8.6C11.3708 9.1 13.1662 9.8 14.0639 10.7C14.9616 11.5 15.4604 12.6 15.4604 14C15.4604 15.5 14.8619 16.7 13.7647 17.8C12.5678 18.8 10.9719 19.4 8.97698 19.7V22H6.68286V19.8C4.88747 19.6 3.3913 19.1 2.19437 18.2C0.997443 17.3 0.299233 16 0 14.4L4.08951 14.1C4.289 14.8 4.58824 15.3 5.08696 15.8C5.58568 16.3 6.0844 16.6 6.58312 16.8ZM6.58312 3.9C5.98465 4.1 5.48593 4.3 5.08696 4.7C4.68798 5.1 4.58824 5.6 4.58824 6C4.58824 6.4 4.78772 6.8 5.08696 7.2C5.38619 7.6 5.98465 7.9 6.58312 8.1V3.9ZM8.87724 17C9.67519 16.9 10.2737 16.6 10.7724 16.1C11.2711 15.6 11.4706 15.1 11.4706 14.5C11.4706 14 11.2711 13.5 10.8721 13.1C10.4731 12.7 9.77494 12.4 8.77749 12.2L8.87724 17Z" fill="#FFB330"/>
+<path d="M34.3121 20.6C32.816 19.6 30.9208 19 29.0257 19C28.527 19 28.128 19 27.729 19.1C26.9311 19.2 26.0334 19.4 25.3352 19.7C24.9362 19.9 24.4375 20.1 24.0385 20.3C22.0436 21.4 20.5474 23.2 19.7495 25.3C19.3505 26.4 19.0513 27.7 19.0513 29C19.0513 34.5 23.5398 39 29.0257 39C34.5116 39 39.0001 34.5 39.0001 29C39.0001 25.5 37.105 22.3 34.3121 20.6ZM35.2098 25.8L29.3249 33.8C29.0257 34.3 28.4272 34.6 27.8288 34.6H27.729C27.2303 34.6 26.6318 34.4 26.3326 34L22.8416 30.2C22.3428 29.6 22.3428 28.7 22.9413 28.1C23.2405 27.8 23.5398 27.7 23.9387 27.7C24.3377 27.7 24.7367 27.9 25.0359 28.2L27.5295 30.9L27.6293 31C27.729 31 27.729 31 27.729 30.9L32.7162 24.1C33.0155 23.7 33.4144 23.5 33.9132 23.5C34.2124 23.5 34.5116 23.6 34.8109 23.8C35.6088 24.2 35.7086 25.1 35.2098 25.8Z" fill="#1CA261"/>
+</g>
+<defs>
+<clipPath id="clip0_1682_86">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -8,6 +8,7 @@ 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();
@@ -126,39 +127,52 @@ const handleDownload = (url, name, onDownload) => {
 const divideSizeMap = new Map([['B', 1], ['KB', 1024], ['MB', 1024 ** 2], ['GB', 1024 ** 3], ['TB', 1024 ** 4]]);
 const viewTypeIconMap = new Map([['detail', 'ListView'], ['icon', 'IconView'], ['picture', 'ModuleView']]);
 const viewTypeSwitchMap = new Map([['detail', 'icon'], ['icon', 'picture'], ['picture', 'detail']]);
-const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  accept,
-  allowSort,
-  className,
-  data,
-  deleteNotifyText: deleteNotifyTextProp,
-  disabled,
-  domain,
-  error,
-  height,
-  hintText: hintTextProp,
-  id,
-  inputProps,
-  isStripDomain,
-  label: labelProp,
-  maxFile,
-  maxSize: maxSizeProp,
-  multiple,
-  onChange,
-  onDownload,
-  onRemove: onRemoveProp,
-  onView: onViewProp,
-  ownerName,
-  readOnly,
-  //deprecated
-  required,
-  style,
-  unitSize,
-  uploadErrorInfo: uploadErrorInfoProp,
-  viewType
-}, reference) => {
+const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
-  if (maxFile === 1) multiple = false;
+  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');
@@ -191,20 +205,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const isSpecialCase = viewTypeState === 'picture' && maxFile === 1;
   const isEnable = !readOnly && !disabled;
   const isEmpty = !((dataState === null || dataState === void 0 ? void 0 : dataState.length) + (newDataState === null || newDataState === void 0 ? void 0 : newDataState.length));
-  const theme = useTheme();
-  const {
-    colors,
-    spacing
-  } = useTheme();
-  const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable, height, colors);
+  const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable, height, theme);
   const _AttachmentHandleIconCSS = AttachmentHandleIconCSS(theme);
   const _ButtonAttachmentCSS = ButtonAttachmentCSS(theme);
-  const _DotNewFileDetailCSS = DotNewFileDetailCSS(colors);
-  const _DotNewFileIconCSS = DotNewFileIconCSS(colors);
-  const _AttachedItemOwnerCSS = AttachedItemOwnerCSS(colors);
-  const _AttachedLinearCSS = AttachedLinearCSS(colors);
-  const _AttachedItemCSS = AttachedItemCSS(colors);
-  const _AttachedItemPictureCSS = AttachedItemPictureCSS(colors);
+  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);
@@ -861,115 +870,111 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
 
   // Start view
-  const AttachHeaderView = useMemo(() => {
-    return jsx("div", {
-      css: AttachmentHeaderCSS(theme),
-      className: 'DGN-UI-Attachment-Header'
-    }, jsx("div", {
-      css: _AttachmentInfoCSS
-    }, jsx(Label, {
-      uppercase: true,
-      required: required,
-      type: 'h5',
-      color: 'text/sub'
-    }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
-      css: AttachmentHeaderIconCSS
-    }, jsx("div", {
-      css: _AttachmentHandleIconCSS,
-      ref: attachmentHandleIconRef
-    }, jsx(ButtonIcon, {
-      viewType: 'ghost',
-      className: 'view',
-      name: 'view',
-      onClick: () => onGetViewItem()
-    }), jsx(ButtonIcon, {
-      viewType: 'ghost',
-      className: 'download',
-      name: 'download',
-      onClick: _onDownload
-    }), isEnable ? jsx(ButtonIcon, {
-      viewType: 'ghost',
-      className: 'delete',
-      name: 'delete',
-      onClick: onShowPopup
-    }) : null), jsx("div", {
-      css: isEmpty ? AttachmentImageEmptyCSS : css`
-                                              margin-right: ${spacing([isSpecialCase ? 0 : 2])};
-                                          `
-    }, jsx("div", {
-      css: [AttachmentImageCenterCSS, !isEnable && [parseHeight('calc(100% - 32px)'), justifyEnd]]
-    }, isEnable ? jsx("div", {
-      css: AttachmentImageCenterCSS
-    }, jsx(ButtonIcon, {
-      css: isEmpty && _ButtonAttachmentCSS,
-      circular: isEmpty,
-      viewType: isEmpty ? 'text' : 'ghost',
-      name: 'Attachment',
-      size: isEmpty ? 'extraGiant' : 'medium',
-      onClick: triggerClickInput
-    }), isEmpty ? jsx(Typography, {
-      css: userSelectNone,
-      type: 'p3',
-      color: 'system/rest'
-    }, hintText) : null) : isEmpty ? jsx(Typography, {
-      css: userSelectNone,
-      type: 'p3',
-      color: 'system/rest'
-    }, getGlobal('noFileText')) : null)), allowSort && !isEmpty && !isSpecialCase ? jsx(Popover, {
-      ref: popoverRef,
-      anchor: jsx(ButtonIcon, {
-        viewType: 'ghost',
-        name: 'Sort',
-        style: {
-          marginRight: 8
-        }
-      }),
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'right'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'right'
-      }
-    }, jsx(List, null, jsx(ListItem, {
-      onClick: e => onSortElement(e, 'filename')
-    }, jsx(ListItemText, null, getGlobal('byName'))), jsx(ListItem, {
-      onClick: e => onSortElement(e, 'filetype')
-    }, jsx(ListItemText, null, getGlobal('byType'))), jsx(ListItem, {
-      onClick: e => onSortElement(e, 'filesize')
-    }, jsx(ListItemText, null, getGlobal('bySize'))), jsx(ListItem, {
-      onClick: e => onSortElement(e, 'datetime')
-    }, jsx(ListItemText, null, getGlobal('byDate'))), jsx(ListItem, {
-      onClick: e => onSortElement(e, 'username')
-    }, jsx(ListItemText, null, getGlobal('byOwner'))))) : null, !isEmpty && !isSpecialCase ? jsx(ButtonIcon, {
+  const AttachHeaderView = jsx("div", {
+    css: AttachmentHeaderCSS(theme),
+    className: 'DGN-UI-Attachment-Header'
+  }, jsx("div", {
+    css: _AttachmentInfoCSS
+  }, jsx(Label, {
+    uppercase: true,
+    required: required,
+    type: 'h5',
+    color: 'text/sub'
+  }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
+    css: AttachmentHeaderIconCSS
+  }, jsx("div", {
+    css: _AttachmentHandleIconCSS,
+    ref: attachmentHandleIconRef
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
+    className: 'view',
+    name: 'view',
+    onClick: () => onGetViewItem()
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
+    className: 'download',
+    name: 'download',
+    onClick: _onDownload
+  }), allowDelete && isEnable ? jsx(ButtonIcon, {
+    viewType: 'ghost',
+    className: 'delete',
+    name: 'delete',
+    onClick: onShowPopup
+  }) : null), jsx("div", {
+    css: isEmpty ? AttachmentImageEmptyCSS : css`
+                                      margin-right: ${spacing([isSpecialCase ? 0 : 2])};
+                                  `
+  }, jsx("div", {
+    css: [AttachmentImageCenterCSS, !isEnable && [parseHeight('calc(100% - 32px)'), justifyEnd]]
+  }, isEnable ? jsx("div", {
+    css: AttachmentImageCenterCSS
+  }, jsx(ButtonIcon, {
+    css: isEmpty && _ButtonAttachmentCSS,
+    circular: isEmpty,
+    viewType: isEmpty ? 'text' : 'ghost',
+    name: 'Attachment',
+    size: isEmpty ? 'extraGiant' : 'medium',
+    onClick: triggerClickInput
+  }), isEmpty ? jsx(Typography, {
+    css: userSelectNone,
+    type: 'p3',
+    color: 'system/rest'
+  }, hintText) : null) : isEmpty ? jsx(Typography, {
+    css: userSelectNone,
+    type: 'p3',
+    color: 'system/rest'
+  }, getGlobal('noFileText')) : null)), allowSort && !isEmpty && !isSpecialCase ? jsx(Popover, {
+    ref: popoverRef,
+    anchor: jsx(ButtonIcon, {
       viewType: 'ghost',
-      name: viewTypeIconMap.get(viewTypeState),
-      onClick: () => setViewTypeState(viewTypeSwitchMap.get(viewTypeState))
-    }) : null));
-  }, [allowSort, disabled, domain, error, hintText, label, readOnly, required, isEmpty, viewTypeState, colors, dataState, newDataState]);
-  const AttachmentInputView = useMemo(() => {
-    return jsx("input", {
-      ref: attachmentInputRef,
-      type: "file",
+      name: 'Sort',
       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
-    });
-  }, [accept, disabled, domain, inputProps, isStripDomain, maxFile, multiple, onChange, readOnly, uploadErrorInfo, dataState, newDataState]);
+        marginRight: 8
+      }
+    }),
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    }
+  }, jsx(List, null, jsx(ListItem, {
+    onClick: e => onSortElement(e, 'filename')
+  }, jsx(ListItemText, null, getGlobal('byName'))), jsx(ListItem, {
+    onClick: e => onSortElement(e, 'filetype')
+  }, jsx(ListItemText, null, getGlobal('byType'))), jsx(ListItem, {
+    onClick: e => onSortElement(e, 'filesize')
+  }, jsx(ListItemText, null, getGlobal('bySize'))), jsx(ListItem, {
+    onClick: e => onSortElement(e, 'datetime')
+  }, jsx(ListItemText, null, getGlobal('byDate'))), jsx(ListItem, {
+    onClick: e => onSortElement(e, 'username')
+  }, jsx(ListItemText, null, getGlobal('byOwner'))))) : null, !isEmpty && !isSpecialCase ? jsx(ButtonIcon, {
+    viewType: 'ghost',
+    name: viewTypeIconMap.get(viewTypeState),
+    onClick: () => setViewTypeState(viewTypeSwitchMap.get(viewTypeState))
+  }) : null));
+  const AttachmentInputView = jsx("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();
@@ -998,8 +1003,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, type), jsx(Typography, {
       className: 'filename',
       css: css`
-                                        margin-left: ${spacing([3])};
-                                    `,
+                                    margin-left: ${spacing([3])};
+                                `,
       type: 'p1',
       lineClamp: 1
     }, name)), jsx("span", {
@@ -1170,19 +1175,17 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }), newDataState.map((item, idx) => {
       return renderAttachmentItem(mountDomain(item), (dataState === null || dataState === void 0 ? void 0 : dataState.length) + idx, true);
     })));
-  }, [data, domain, onViewProp, unitSize, dataState, newDataState, viewTypeState, sizeByHeight, colors]);
-  const PopupView = useMemo(() => {
-    return jsx(Popup, {
-      open: showPopup,
-      ref: popupRef,
-      type: 'yesno',
-      description: deleteNotifyText,
-      pressESCToClose: true,
-      onClose: onClosePopup,
-      onConfirm: onRemoveMultiple,
-      onCancel: onClosePopup
-    });
-  }, [deleteNotifyText, onChange, onRemoveProp, showPopup]);
+  }, [data, domain, onViewProp, unitSize, dataState, newDataState, viewTypeState, sizeByHeight, theme]);
+  const PopupView = jsx(Popup, {
+    open: showPopup,
+    ref: popupRef,
+    type: 'yesno',
+    description: deleteNotifyText,
+    pressESCToClose: true,
+    onClose: onClosePopup,
+    onConfirm: onRemoveMultiple,
+    onCancel: onClosePopup
+  });
   const ModalView = useMemo(() => {
     if (!chosenItems.length) return setShowModal(false);
     const index = chosenItems[0];
@@ -1199,6 +1202,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       url: data === null || data === void 0 ? void 0 : data.URL
     })));
   }, [domain, showModal]);
+  const NotifyView = jsx(Notify, {
+    ref: notifyRef,
+    progressing: true,
+    autoDisappear: true,
+    color: 'danger'
+  });
   // End view
 
   return jsx("div", {
@@ -1208,12 +1217,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: classNames('DGN-UI-Attachment', className),
     style: style,
     onDragEnter: onDragFileStart
-  }, AttachHeaderView, AttachedView, AttachmentInputView, PopupView, ModalView, jsx(Notify, {
-    ref: notifyRef,
-    progressing: true,
-    autoDisappear: true,
-    color: 'danger'
-  }));
+  }, AttachHeaderView, AttachedView, AttachmentInputView, PopupView, ModalView, NotifyView);
 }));
 const AttachmentHandleIconCSS = ({
   colors,
@@ -1277,7 +1281,9 @@ const AttachedItemInfoCSS = ({
     ${parseMinWidth('calc(50% - 10px)')};
     margin-right: ${spacing([2])};
 `;
-const DotNewFileDetailCSS = colors => css`
+const DotNewFileDetailCSS = ({
+  colors
+}) => css`
     :after {
         content: '';
         ${positionAbsolute};
@@ -1288,7 +1294,9 @@ const DotNewFileDetailCSS = colors => css`
         ${left(4)};
     }
 `;
-const DotNewFileIconCSS = colors => css`
+const DotNewFileIconCSS = ({
+  colors
+}) => css`
     :after {
         content: '';
         ${positionAbsolute};
@@ -1299,7 +1307,9 @@ const DotNewFileIconCSS = colors => css`
         ${left(14)};
     }
 `;
-const AttachedItemOwnerCSS = colors => css`
+const AttachedItemOwnerCSS = ({
+  colors
+}) => css`
     ${displayFlex};
     ${positionRelative};
     ${itemsCenter};
@@ -1327,7 +1337,9 @@ const DetailInfoCSS = css`
         margin-left: auto;
     }
 `;
-const AttachedLinearCSS = colors => css`
+const AttachedLinearCSS = ({
+  colors
+}) => css`
     ${displayFlex};
     ${positionAbsolute};
     ${itemsCenter};
@@ -1335,7 +1347,9 @@ const AttachedLinearCSS = colors => css`
     ${parseWidthHeight('100%')};
     ${top(0)};
 `;
-const AttachedItemCSS = colors => css`
+const AttachedItemCSS = ({
+  colors
+}) => css`
     ${positionRelative};
     ${borderRadius4px};
     ${cursorPointer};
@@ -1377,7 +1391,9 @@ const AttachmentListCSS = ({
     padding: ${spacing([0, 1, 2, 4])};
     overflow-y: scroll;
 `;
-const AttachmentRootCSS = (isEmpty, isEnable, height, colors) => css`
+const AttachmentRootCSS = (isEmpty, isEnable, height, {
+  colors
+}) => css`
     ${displayFlex};
     ${flexCol};
     ${justifyStart};
@@ -1389,7 +1405,9 @@ const AttachmentRootCSS = (isEmpty, isEnable, height, colors) => css`
     ${parseHeight(height)};
     ${bgColor(getProp(colors, 'system/standard'))};
 `;
-const AttachedItemPictureCSS = colors => css`
+const AttachedItemPictureCSS = ({
+  colors
+}) => css`
     ${displayFlex};
     ${positionRelative};
     ${boxBorder};
@@ -1426,30 +1444,25 @@ const ItemPictureInfoCSS = ({
     ${bgColor(getProp(colors, 'fill/tooltip'))};
     ${parseWidth('100%')};
 `;
-Attachment.defaultProps = {
-  allowSort: true,
-  className: '',
-  data: [],
-  // deleteNotifyText: getGlobal('deleteNotifyText'),
-  disabled: false,
-  height: 280,
-  // hintText: getGlobal('dropFileHere'),
-  // label: getGlobal('attachText'),
-  // maxSize: getGlobal('maxSizeUpload'),
-  maxFile: Infinity,
-  multiple: true,
-  style: {},
-  // uploadErrorInfo: {
-  //     maxFile: getGlobal(['errorDefault', 'maxFile']),
-  //     maxSize: getGlobal(['errorDefault', 'maxSize']),
-  //     fileType: getGlobal(['errorDefault', 'fileType']),
-  //     existingFile: getGlobal(['errorDefault', 'existingFile']),
-  // },
-  viewType: 'detail'
-};
+
+// 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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.25-beta.1",
+  "version": "1.4.25-beta.2",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/theme/settings.js

@@ -141,24 +141,15 @@ const settings = {
 
     Attachment: {
       defaultProps: {
+        allowDelete: true,
         allowSort: true,
         className: '',
         data: [],
-        // deleteNotifyText: getGlobal('deleteNotifyText'),
         disabled: false,
         height: 280,
-        // hintText: getGlobal('dropFileHere'),
-        // label: getGlobal('attachText'),
-        // maxSize: getGlobal('maxSizeUpload'),
         maxFile: Infinity,
         multiple: true,
         style: {},
-        // uploadErrorInfo: {
-        // maxFile: getGlobal(['errorDefault', 'maxFile']),
-        // maxSize: getGlobal(['errorDefault', 'maxSize']),
-        // fileType: getGlobal(['errorDefault', 'fileType']),
-        // existingFile: getGlobal(['errorDefault', 'existingFile']),
-        // },
         viewType: 'detail'
       }
     },