diginet-core-ui 1.3.43 → 1.3.44-beta.1

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

@@ -0,0 +1,12 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.66 9.48L25.43 0.34C25.22 0.12 24.92 0 24.62 0H8.46C6.55 0 5 1.54 5 3.43V35.57C5 37.46 6.55 39 8.46 39H10.31H29.68H31.53C33.44 39 34.99 37.46 34.99 35.57V18.04V16.98V11.42V11.31V10.28C35 9.97 34.87 9.68 34.66 9.48ZM25.77 3.9L31.06 9.14H26.92C26.28 9.14 25.77 8.63 25.77 8V3.9ZM32.69 18.13V35.58C32.69 36.21 32.17 36.72 31.54 36.72H26.38H13.62H8.46C7.82 36.72 7.31 36.21 7.31 35.58V3.43C7.31 2.8 7.83 2.29 8.46 2.29H23.46V8C23.46 9.89 25.01 11.43 26.92 11.43H31.04C31.05 11.43 31.06 11.43 31.07 11.43H32.69V16.99V18.13V18.13Z" fill="#2680EB"/>
+<path d="M30.79 28.13C30.79 27.5 30.27 26.99 29.64 26.99H19.23C18.59 26.99 18.08 27.5 18.08 28.13C18.08 28.76 18.6 29.27 19.23 29.27H29.64C30.27 29.27 30.79 28.76 30.79 28.13Z" fill="#FF8C00"/>
+<path d="M29.64 22.41H19.23C18.59 22.41 18.08 22.92 18.08 23.55C18.08 24.18 18.6 24.69 19.23 24.69H29.64C30.28 24.69 30.79 24.18 30.79 23.55C30.79 22.92 30.27 22.41 29.64 22.41Z" fill="#FF8C00"/>
+<path d="M19.23 31.56C18.59 31.56 18.08 32.07 18.08 32.7C18.08 33.33 18.6 33.84 19.23 33.84H25.02C25.66 33.84 26.17 33.33 26.17 32.7C26.17 32.07 25.65 31.56 25.02 31.56H19.23Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.8801 25.9401C14.8801 25.4501 15.2401 25.0501 15.7801 25.0501C16.3201 25.0501 16.6801 25.4501 16.6801 25.9401C16.6801 26.4301 16.3201 26.8301 15.7801 26.8301C15.2401 26.8301 14.8801 26.4301 14.8801 25.9401Z" fill="#FF8C00"/>
+<path d="M9.91999 33.17C11.09 32.23 11.94 31.5 11.94 30.91C11.94 30.52 11.69 30.34 11.3 30.34C10.98 30.34 10.72 30.55 10.49 30.75L9.85999 30.12C10.34 29.64 10.78 29.42 11.47 29.42C12.41 29.42 13.06 29.98 13.06 30.84C13.06 31.54 12.33 32.3 11.61 32.9C11.85 32.87 12.18 32.85 12.4 32.85H13.28V33.83H9.91999V33.17Z" fill="#FF8C00"/>
+<path d="M14.88 33.03C14.88 32.54 15.24 32.14 15.78 32.14C16.32 32.14 16.68 32.54 16.68 33.03C16.68 33.52 16.32 33.92 15.78 33.92C15.24 33.92 14.88 33.53 14.88 33.03Z" fill="#FF8C00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.83 6.84C21.71 6.72 21.55 6.65 21.38 6.65H18.64C18.72 6.49 18.76 6.31 18.76 6.13C18.76 5.51 18.26 5 17.65 5H17.64C17.15 5.03 16.68 5.22 16.3 5.54C15.95 5.81 15.63 6.1 15.33 6.41C15.02 6.1 14.7 5.81 14.35 5.54C13.97 5.22 13.5 5.03 13.01 5C12.39 5 11.89 5.5 11.89 6.13C11.89 6.31 11.93 6.49 12.01 6.65H9.27001C8.92001 6.65 8.64001 6.94 8.64001 7.29V8.54C8.64001 8.89 8.92001 9.18 9.27001 9.18H21.38C21.73 9.18 22.01 8.89 22.01 8.54V7.29C22.01 7.12 21.94 6.96 21.83 6.84ZM12.88 6.65C12.86 6.63 12.84 6.61 12.81 6.59C12.72 6.54 12.64 6.47 12.58 6.39C12.54 6.31 12.51 6.22 12.52 6.13C12.52 6 12.57 5.88 12.66 5.78C12.75 5.69 12.88 5.64 13 5.64C13.36 5.67 13.7 5.82 13.98 6.05C14.17 6.2 14.36 6.36 14.53 6.53C14.57 6.56 14.62 6.61 14.66 6.65H12.88ZM18.07 6.39C18.01 6.47 17.93 6.54 17.84 6.59C17.81 6.61 17.79 6.63 17.77 6.65H15.99L16.11 6.53C16.29 6.36 16.47 6.2 16.67 6.06C16.95 5.82 17.29 5.68 17.64 5.64C17.77 5.64 17.9 5.69 17.99 5.79C18.08 5.88 18.13 6 18.13 6.14C18.13 6.22 18.11 6.31 18.07 6.39Z" fill="#FFAA00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.82001 9.74V15.98C9.83001 16.54 10.27 17 10.82 17H19.83C20.09 17 20.35 16.89 20.53 16.7C20.72 16.51 20.83 16.25 20.83 15.98V9.74H9.82001ZM15.57 15.23V15.71C15.57 15.79 15.51 15.85 15.44 15.85H15.12C15.05 15.85 14.99 15.79 14.99 15.71V15.28C14.71 15.26 14.44 15.21 14.18 15.11C14.06 15.07 14 14.94 14.03 14.81L14.08 14.61C14.1 14.54 14.15 14.48 14.21 14.44C14.28 14.41 14.35 14.41 14.42 14.43C14.65 14.53 14.9 14.57 15.14 14.58C15.48 14.58 15.72 14.44 15.72 14.2C15.72 13.97 15.52 13.82 15.09 13.67C14.45 13.45 14.01 13.15 14.01 12.57C14.03 12 14.46 11.54 15.01 11.49V11.05C15.01 10.97 15.08 10.91 15.15 10.9H15.47C15.54 10.91 15.6 10.97 15.6 11.05V11.45C15.82 11.45 16.03 11.49 16.24 11.56C16.37 11.6 16.44 11.73 16.41 11.86L16.36 12.04C16.35 12.11 16.3 12.17 16.24 12.21C16.18 12.24 16.11 12.25 16.04 12.22C15.85 12.16 15.64 12.12 15.44 12.12C15.05 12.12 14.93 12.29 14.93 12.46C14.93 12.66 15.14 12.79 15.64 12.98C16.35 13.23 16.64 13.57 16.63 14.12C16.61 14.71 16.16 15.19 15.57 15.23Z" fill="#FFAA00"/>
+</svg>

package/components/alert/index.js

@@ -10,8 +10,8 @@ import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
 import { typography } from '../../styles/typography';
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 import { useTheme } from '../../theme';
+import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 const {
   heading3,
   heading4,

package/components/avatar/index.js

@@ -27,59 +27,6 @@ const {
 const existed = {},
       urlAvatar = {},
       popupHandler = {};
-
-const getDirection = direction => {
-  switch (direction) {
-    case 'top':
-      return {
-        anchorOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        }
-      };
-
-    case 'left':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        }
-      };
-
-    case 'right':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        }
-      };
-
-    default:
-      return {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        }
-      };
-  }
-};
-
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -109,7 +56,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   disabled,
   lazyLoading,
-  ...props
+  id
 }, reference) => {
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
@@ -128,6 +75,14 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setIsInView(true);
   });
 
+  const _ActionIconCSS = ActionIconCSS(actionIconWidth);
+
+  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly);
+
+  const _AvatarContainerCSS = AvatarContainerCSS(_AvatarPreviewCSS.name, _ActionIconCSS.name);
+
+  const _AvatarRootCSS = AvatarRootCSS(width, height, outlined);
+
   const _isMobile = isMobile.any();
 
   const triggerInput = e => {
@@ -204,36 +159,31 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const renderImage = () => {
+    const _image = jsx(Fragment, null, !onLoaded && jsx("img", {
+      src: defaultSrc,
+      alt: '',
+      style: {
+        objectFit: 'cover'
+      }
+    }), jsx("img", {
+      css: blurAnimationCSS,
+      src: srcState,
+      alt: srcState,
+      style: {
+        objectFit: 'cover'
+      },
+      onLoad: () => setOnLoaded(true)
+    }));
+
     if (lazyLoading) {
-      return isInView ? jsx(Fragment, null, !onLoaded && jsx("img", {
-        src: AvatarDefault,
-        alt: '',
-        style: {
-          objectFit: 'cover'
-        }
-      }), jsx("img", {
-        css: blurAnimation,
-        src: srcState || defaultSrc,
-        alt: srcState || defaultSrc,
-        style: {
-          objectFit: 'cover'
-        },
-        onLoad: () => setOnLoaded(true)
-      })) : jsx("img", {
-        src: AvatarDefault,
+      return isInView ? _image : jsx("img", {
+        src: defaultSrc,
         alt: '',
         style: {
           objectFit: 'cover'
         }
       });
-    } else return jsx("img", {
-      css: blurAnimation,
-      src: srcState || defaultSrc,
-      alt: srcState || defaultSrc,
-      style: {
-        objectFit: 'cover'
-      }
-    });
+    } else return _image;
   };
 
   const showMoreInfo = () => {
@@ -268,16 +218,19 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         urlAvatar[unique] = src;
         img.src = src;
         img.alt = '';
-        setSrcState(src);
-        existed[unique] = true;
 
         img.onerror = () => {
           setSrcState(null);
           existed[unique] = false;
         };
+
+        img.onload = () => {
+          setSrcState(src);
+          existed[unique] = true;
+        };
       }
     }
-  }, [src, lazyLoading, isInView]);
+  }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -287,89 +240,87 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const AvatarView = useMemo(() => jsx("div", {
-    css: AvatarContainer(readOnly, actionIconWidth),
-    ref: ref,
-    id: unique,
-    className: disabled ? 'disabled' : ''
-  }, jsx("div", {
-    css: AvatarRoot(width, height, outlined),
-    className: ['DGN-UI-Avatar', className].join(' ').trim().replace(/\s+/g, ' '),
-    ...props
-  }, jsx("input", {
-    ref: inputRef,
-    type: "file",
-    title: '',
-    accept: 'image/*',
-    onChange: onChangeAvatar
-  }), jsx("div", {
-    css: AvatarPreview(readOnly),
-    onClick: _onClick,
-    ref: avatarRef,
-    onMouseEnter: _onMouseEnter,
-    onMouseLeave: _onMouseLeave,
-    tabIndex: "-1",
-    onBlur: closeMoreInfo
-  }, renderImage())), !readOnly && !disabled && jsx("span", {
-    css: ActionIcon(actionIconWidth)
-  }, jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Edit',
-    width: actionIconWidth,
-    height: actionIconHeight,
-    className: 'icon-edit',
-    onClick: triggerInput
-  }), clearAble && srcState && jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Delete',
-    width: actionIconWidth,
-    height: actionIconHeight,
-    className: 'icon-delete',
-    onClick: onRemoveAvatar,
-    style: {
-      marginTop: '8px'
-    }
-  }))), [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, actionIconWidth, actionIconHeight, lazyLoading, srcState, isInView, onLoaded]);
-  const ModalView = useMemo(() => jsx(ModalSample, {
-    open: viewAvatar,
-    onClose: () => setViewAvatar(false),
-    width: 'max-content'
-  }, jsx("img", {
-    src: urlAvatar[unique],
-    alt: "",
-    style: {
-      objectFit: 'cover',
-      maxHeight: '100%',
-      maxWidth: '100%',
-      margin: 'auto',
-      display: 'block'
-    }
-  })), [viewAvatar]);
-  const MoreInfoView = useMemo(() => jsx(Popover, {
-    arrow: true,
-    open: viewMoreInfo,
-    pressESCToClose: false,
-    bgColor: fillTooltip,
-    anchor: avatarRef,
-    fullScreen: false,
-    width: 'max-content',
-    ...getDirection(direction)
-  }, jsx("div", {
-    css: MoreInfo
-  }, typeof data === 'function' ? data() : renderData())), [viewMoreInfo, direction, data]);
-  const PopupView = useMemo(() => jsx(Popup, {
-    getPopup: func => popupHandler[unique] = func,
-    type: 'info',
-    title: maxSizeError,
-    icon: 'danger',
-    fullScreen: true
-  }), [maxSizeError]);
-  return jsx(Fragment, null, AvatarView, ModalView, hoverAble && MoreInfoView, !disabled && !readOnly && PopupView);
+  return useMemo(() => {
+    return jsx(Fragment, null, jsx("div", {
+      css: _AvatarContainerCSS,
+      ref: ref,
+      id: unique,
+      className: disabled ? 'disabled' : ''
+    }, jsx("div", {
+      css: _AvatarRootCSS,
+      className: ['DGN-UI-Avatar', className].join(' ').trim().replace(/\s+/g, ' '),
+      id: id
+    }, jsx("input", {
+      ref: inputRef,
+      type: "file",
+      title: '',
+      accept: 'image/*',
+      onChange: onChangeAvatar
+    }), jsx("div", {
+      css: _AvatarPreviewCSS,
+      onClick: _onClick,
+      ref: avatarRef,
+      onMouseEnter: _onMouseEnter,
+      onMouseLeave: _onMouseLeave,
+      tabIndex: "-1",
+      onBlur: closeMoreInfo
+    }, renderImage())), !readOnly && !disabled && jsx("span", {
+      css: _ActionIconCSS
+    }, jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: 'Edit',
+      width: actionIconWidth,
+      height: actionIconHeight,
+      className: 'icon-edit',
+      onClick: triggerInput
+    }), clearAble && srcState && jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: 'Delete',
+      width: actionIconWidth,
+      height: actionIconHeight,
+      className: 'icon-delete',
+      onClick: onRemoveAvatar,
+      style: {
+        marginTop: '8px'
+      }
+    }))), jsx(ModalSample, {
+      open: viewAvatar,
+      onClose: () => setViewAvatar(false),
+      width: 'max-content'
+    }, jsx("img", {
+      src: urlAvatar[unique],
+      alt: "",
+      style: {
+        objectFit: 'cover',
+        maxHeight: '100%',
+        maxWidth: '100%',
+        margin: 'auto',
+        display: 'block'
+      }
+    })), hoverAble && jsx(Popover, {
+      arrow: true,
+      open: viewMoreInfo,
+      pressESCToClose: false,
+      bgColor: fillTooltip,
+      anchor: avatarRef,
+      fullScreen: false,
+      width: 'max-content',
+      direction: direction
+    }, jsx("div", {
+      css: MoreInfoCSS
+    }, typeof data === 'function' ? data() : renderData())), !disabled && !readOnly && jsx(Popup, {
+      getPopup: func => popupHandler[unique] = func,
+      type: 'info',
+      title: maxSizeError,
+      icon: 'danger',
+      fullScreen: true
+    }));
+  }, [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, actionIconWidth, actionIconHeight, lazyLoading, defaultSrc, direction, data, maxSizeError, srcState, isInView, onLoaded, viewAvatar, viewMoreInfo]);
 }));
 
-const ActionIcon = actionIconWidth => css`
-    ${flexCol}
-    ${positionAbsolute}
+const ActionIconCSS = actionIconWidth => css`
+    ${flexCol};
+    ${positionAbsolute};
     right: ${-actionIconWidth}px;
     min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
@@ -377,48 +328,48 @@ const ActionIcon = actionIconWidth => css`
     z-index: 9002;
 `;
 
-const AvatarPreview = readOnly => css`
-    ${displayBlock}
-    ${positionRelative}
-    ${overflowHidden}
+const AvatarPreviewCSS = readOnly => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${overflowHidden};
     width: 100%;
     height: 100%;
     border-radius: 50%;
     cursor: ${readOnly ? 'initial' : 'pointer'};
 `;
 
-const AvatarContainer = (readOnly, actionIconWidth) => css`
-    ${inlineFlex}
-    ${positionRelative}
-    ${alignCenter}
+const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
+    ${inlineFlex};
+    ${positionRelative};
+    ${alignCenter};
     &.disabled {
-        .css-${AvatarPreview(readOnly).name} {
+        .css-${AvatarPreviewCSSName} {
             ${pointerEventsNone}
             cursor: inherit;
         }
-        .css-${ActionIcon(actionIconWidth).name} {
+        .css-${ActionIconCSSName} {
             display: none !important;
         }
     }
     &:hover {
-        .css-${ActionIcon(actionIconWidth).name} {
+        .css-${ActionIconCSSName} {
             opacity: 1;
         }
     }
 `;
 
-const AvatarRoot = (width, height, outlined) => css`
-    ${displayBlock}
-    ${positionRelative}
-    ${overflowHidden}
-    ${userSelectNone}
-    ${borderNone}
-    ${parseWidthHeight(width, height)}
+const AvatarRootCSS = (width, height, outlined) => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${overflowHidden};
+    ${userSelectNone};
+    ${borderNone};
+    ${parseWidthHeight(width, height)};
     border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
     border-radius: 50%;
     box-sizing: content-box;
     input {
-        ${displayNone}
+        ${displayNone};
     }
     img {
         width: 100%;
@@ -426,12 +377,12 @@ const AvatarRoot = (width, height, outlined) => css`
     }
 `;
 
-const MoreInfo = css`
-    ${displayBlock}
-    ${positionRelative}
+const MoreInfoCSS = css`
+    ${displayBlock};
+    ${positionRelative};
     padding: 8px;
 `;
-const blurAnimation = css`
+const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;
 `;
 Avatar.defaultProps = {
@@ -445,7 +396,7 @@ Avatar.defaultProps = {
   actionIconWidth: 24,
   actionIconHeight: 24,
   className: '',
-  direction: 'down',
+  direction: 'bottom',
   maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
   wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`,
   matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
@@ -505,7 +456,7 @@ Avatar.propTypes = {
   defaultSrc: PropTypes.string,
 
   /** the direction to display more info */
-  direction: PropTypes.oneOf(['top', 'down', 'left', 'right']),
+  direction: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 
   /**
    * data to display when hoverAble is true<br />