diginet-core-ui 1.3.34 → 1.3.35-beta.4

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

@@ -0,0 +1,7 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 23.14H8C7.37 23.14 6.86 23.65 6.86 24.28C6.86 24.91 7.37 25.43 8 25.43H17C17.63 25.43 18.14 24.91 18.14 24.28C18.14 23.65 17.63 23.14 17 23.14ZM21.71 18.57H8C7.37 18.57 6.86 19.08 6.86 19.71C6.86 20.34 7.37 20.86 8 20.86H21.71C22.34 20.86 22.85 20.34 22.85 19.71C22.85 19.08 22.34 18.57 21.71 18.57ZM21.71 14H8C7.37 14 6.86 14.51 6.86 15.14C6.86 15.77 7.37 16.29 8 16.29H21.71C22.34 16.29 22.85 15.77 22.85 15.14C22.85 14.51 22.34 14 21.71 14ZM8 16.29H21.71C22.34 16.29 22.85 15.77 22.85 15.14C22.85 14.51 22.34 14 21.71 14H8C7.37 14 6.86 14.51 6.86 15.14C6.86 15.77 7.37 16.29 8 16.29ZM21.71 18.57H8C7.37 18.57 6.86 19.08 6.86 19.71C6.86 20.34 7.37 20.86 8 20.86H21.71C22.34 20.86 22.85 20.34 22.85 19.71C22.85 19.08 22.34 18.57 21.71 18.57ZM17 23.14H8C7.37 23.14 6.86 23.65 6.86 24.28C6.86 24.91 7.37 25.43 8 25.43H17C17.63 25.43 18.14 24.91 18.14 24.28C18.14 23.65 17.63 23.14 17 23.14ZM29.56 25.16L29.46 25.28L29.39 25.36L29.41 25.38L28.64 26.23C28.22 26.69 27.82 27.12 27.42 27.52V35.57C27.42 36.2 26.91 36.71 26.28 36.71H3.43C2.8 36.71 2.29 36.2 2.29 35.57V3.43C2.29 2.8 2.8 2.29 3.43 2.29H18.28V8C18.28 9.89 19.82 11.43 21.71 11.43H27.01C27.28 11.09 27.53 10.78 27.77 10.49C28.18 9.99 28.58 9.52 28.96 9.07L20.23 0.33C20.02 0.12 19.73 0 19.42 0H3.43C1.54 0 0 1.54 0 3.43V35.57C0 37.46 1.54 39 3.43 39H26.28C28.17 39 29.71 37.46 29.71 35.57V24.99C29.67 25.05 29.62 25.1 29.56 25.16ZM20.57 3.9L25.81 9.14H21.71C21.08 9.14 20.57 8.63 20.57 8V3.9ZM21.71 14H8C7.37 14 6.86 14.51 6.86 15.14C6.86 15.77 7.37 16.29 8 16.29H21.71C22.34 16.29 22.85 15.77 22.85 15.14C22.85 14.51 22.34 14 21.71 14ZM22.85 19.71C22.85 19.08 22.34 18.57 21.71 18.57H8C7.37 18.57 6.86 19.08 6.86 19.71C6.86 20.34 7.37 20.86 8 20.86H21.71C22.34 20.86 22.85 20.34 22.85 19.71ZM8 23.14C7.37 23.14 6.86 23.65 6.86 24.28C6.86 24.91 7.37 25.43 8 25.43H17C17.63 25.43 18.14 24.91 18.14 24.28C18.14 23.65 17.63 23.14 17 23.14H8Z" fill="#2680EB"/>
+<path d="M11.61 31.37C10.73 31.43 10.2 31.99 9.70997 32.57C9.41997 32.92 9.23997 33.37 8.92997 33.7C8.76997 33.88 8.43997 33.9 8.18997 34C8.12997 33.73 7.93997 33.41 8.01997 33.21C8.50997 32.08 9.26997 31.16 10.38 30.58C11.71 29.89 12.55 30.3 12.85 31.76C12.88 31.88 12.91 32.01 12.93 32.06C13.63 31.76 14.29 31.37 15.01 31.21C16.17 30.94 17.26 31.35 18.26 31.93C18.42 32.02 18.42 32.4 18.5 32.64C18.26 32.71 17.99 32.89 17.78 32.84C17.23 32.72 16.71 32.48 16.17 32.32C15.45 32.11 14.79 32.31 14.18 32.71C13.98 32.84 13.79 32.99 13.58 33.1C12.78 33.53 12.2 33.29 11.92 32.41C11.8 32.08 11.71 31.74 11.61 31.37Z" fill="#FF8C00"/>
+<path d="M35.16 6.17998C35.31 6.27998 35.44 6.35999 35.55 6.45999C35.69 6.57999 35.8 6.56998 35.95 6.44998C36.34 6.12998 36.74 5.81998 37.15 5.51998C37.63 5.16998 38.1 5.15998 38.53 5.44998C38.94 5.72998 39.09 6.20999 38.93 6.77999C38.19 9.51999 37.01 12.07 35.66 14.55C33.77 18.03 31.54 21.27 28.99 24.3C28.9 24.4 28.82 24.5 28.7 24.63C27.17 23.58 25.65 22.53 24.09 21.46C26.72 16.65 29.91 12.28 33.79 8.37998C33.58 8.22998 33.39 8.09998 33.18 7.94998C32.89 8.23998 32.58 8.50998 32.32 8.81998C30.96 10.4 29.61 11.99 28.26 13.58C28.2 13.65 28.16 13.72 28.1 13.79C27.85 14.06 27.48 14.09 27.21 13.88C26.94 13.67 26.88 13.28 27.09 12.99C27.56 12.36 28.04 11.74 28.54 11.14C30.55 8.68999 32.7 6.38998 35.24 4.46998C35.38 4.35998 35.52 4.25998 35.67 4.15998C36 3.93998 36.37 3.98998 36.58 4.26998C36.81 4.57998 36.76 4.94998 36.43 5.19998C36.12 5.44998 35.8 5.67998 35.48 5.91998C35.38 5.98998 35.28 6.06998 35.16 6.17998Z" fill="#FF8C00"/>
+<path d="M27.9 25.55C26.35 27.25 24.74 28.83 22.93 30.19C22.84 30.25 22.66 30.3 22.59 30.26C22.02 29.89 21.46 29.49 20.9 29.11C21.21 27.64 22.66 24.04 23.54 22.55C24.99 23.55 26.43 24.55 27.9 25.55Z" fill="#FF8C00"/>
+<path d="M21.89 31.23C21.37 31.7 20.92 32.12 20.46 32.52C20.27 32.68 20.01 32.77 19.83 32.58C19.71 32.44 19.62 32.16 19.67 32C19.86 31.4 20.11 30.83 20.32 30.29C20.83 30.61 21.32 30.9 21.89 31.23Z" fill="#FF8C00"/>
+</svg>

package/assets/images/menu/erp/W05F0013N0000.svg

@@ -0,0 +1,9 @@
+<svg width="40" height="39" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.12 8.22L34.84 2.84C34.44 2.34 33.79 2 33.15 2H11.19C10.55 2 9.93998 2.34 9.53998 2.84L5.15998 8.2C4.71998 8.75 4.22998 9.81 4.22998 10.6V14.5C4.89998 13.97 5.18998 13.57 5.77998 13.37C5.80998 12.92 6.00998 12.49 6.23998 12.1C6.63998 11.41 7.31998 10.93 8.07998 10.73C8.35998 10.66 8.62998 10.62 8.87998 10.62C9.88998 10.62 10.82 11.14 11.35 11.95C11.51 11.92 11.68 11.91 11.84 11.91C12.34 11.91 12.81 12.04 13.22 12.28L15.57 11.67C15.87 11.59 16.17 11.55 16.48 11.55C18.1 11.55 19.53 12.65 19.94 14.23L24.55 31.95C24.79 32.88 24.65 33.84 24.17 34.66C23.69 35.49 22.91 36.19 21.99 36.43L19.93 37.09H37.21C38.67 37.09 40 35.66 40 34.2V10.53C40 9.81 39.56 8.78 39.12 8.22ZM28.5 27.62C29.13 26.52 29.75 25.45 30.39 24.35C31.02 25.45 31.64 26.52 32.27 27.61H31.05V32.56H29.74V27.62H28.5V27.62ZM36.98 34.35H28.51V33.35H36.98V34.35ZM35.76 27.62V32.57H34.46V27.62H33.21C33.85 26.52 34.47 25.45 35.11 24.35C35.74 25.45 36.36 26.52 37 27.62H35.76ZM6.67998 8.07L8.08998 6.72H17.68L18.63 4.7H9.32998L10.37 3.57C10.57 3.32 10.87 3.35 11.19 3.35H33.15C33.47 3.35 33.77 3.32 33.97 3.57L35.01 4.7H25.54L26.07 6.72H36.25L37.66 8.07H6.67998Z" fill="#FF8C00"/>
+<path d="M7.10995 14.69L6.51995 14.84C5.87995 15 5.49995 15.65 5.66995 16.28L5.67994 16.3C5.83994 16.93 6.48995 17.31 7.11995 17.15L12.1499 15.84C12.7799 15.68 13.1599 15.03 12.9999 14.4L12.9899 14.38C12.8299 13.75 12.1799 13.37 11.5499 13.53L10.9599 13.68C10.6399 13.76 10.3199 13.57 10.2399 13.26L10.2299 13.24C10.0399 12.5 9.28995 12.06 8.54995 12.25L8.51995 12.26C7.77995 12.45 7.33995 13.2 7.52995 13.94L7.53995 13.96C7.61995 14.28 7.42995 14.6 7.10995 14.69Z" fill="#2680EB"/>
+<path d="M16.1499 31.26C16.2099 31.47 16.0799 31.69 15.8699 31.75L8.54994 33.65C8.33994 33.71 8.11994 33.58 8.05994 33.36L7.95994 32.97C7.89994 32.76 8.02994 32.54 8.24994 32.48L15.5699 30.58C15.7799 30.52 15.9999 30.65 16.0599 30.86L16.1499 31.26Z" fill="#2680EB"/>
+<path d="M17.04 23.62L17.14 24.01C17.2 24.22 17.07 24.44 16.85 24.5L6.84003 27.1C6.63003 27.16 6.41003 27.03 6.35003 26.81L6.25003 26.42C6.20003 26.21 6.32003 26 6.54003 25.94L16.56 23.33C16.77 23.28 16.98 23.41 17.04 23.62Z" fill="#2680EB"/>
+<path d="M15.9501 21.02L5.94008 23.63C5.73008 23.69 5.51008 23.56 5.45008 23.34L5.35008 22.95C5.29008 22.74 5.42008 22.52 5.64008 22.46L15.6601 19.85C15.8701 19.79 16.0901 19.92 16.1501 20.14L16.2501 20.53C16.2901 20.75 16.1701 20.97 15.9501 21.02Z" fill="#2680EB"/>
+<path d="M15.73 28.07L7.64001 30.17C7.43001 30.23 7.21001 30.1 7.15001 29.88L7.05001 29.49C7.00001 29.3 7.13001 29.08 7.34001 29.02L15.43 26.92C15.64 26.86 15.86 26.99 15.92 27.21L16.02 27.6C16.07 27.8 15.94 28.02 15.73 28.07Z" fill="#2680EB"/>
+<path d="M23.0101 32.35L18.4001 14.63C18.1201 13.57 17.0401 12.93 15.9701 13.2L13.6201 13.81C13.6801 13.92 13.7201 14.05 13.7501 14.17C14.0301 15.25 13.4001 16.33 12.3401 16.61L7.39008 17.9C6.38008 18.16 5.29008 17.64 4.95008 16.65C4.89008 16.46 4.85008 16.28 4.84008 16.09L2.49008 16.7C1.43008 16.98 0.790078 18.06 1.06008 19.13L5.67008 36.85C5.95008 37.91 7.03008 38.55 8.10008 38.28L21.5801 34.77C22.6501 34.5 23.2901 33.41 23.0101 32.35ZM7.60008 36.36L3.59008 20.95L17.0701 17.44L21.0801 32.85L7.60008 36.36Z" fill="#2680EB"/>
+</svg>

package/components/alert/index.js

@@ -11,6 +11,7 @@ import * as Icons from '../../icons';
 import { capitalize } from '../../utils';
 import { hexToRGBA } from '../../styles/color-helper';
 import { typography } from '../../styles/typography';
+import { useTheme } from '../../theme';
 const {
   heading3,
   heading4,
@@ -30,6 +31,9 @@ const {
     info
   }
 } = colors;
+const {
+  zIndex
+} = useTheme();
 const colorMap = new Map([['info', info], ['success', success], ['warning', warning], ['danger', danger]]);
 const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
 const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
@@ -56,66 +60,67 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [percentState, setPercentState] = useState(100);
   const mainColor = colorMap.get(color);
   const AlertContainer = css`
-        position: relative;
-        display: block;
-        margin-bottom: 1rem;
-        transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
-        pointer-events: auto;
-        z-index: 9001;
-        max-width: ${maxWidthMap.get(size)}px;
-    `;
+                position: relative;
+                display: block;
+                margin-bottom: 1rem;
+                transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease
+                    ${progressing ? duration / 2 : 0}s;
+                pointer-events: auto;
+                z-index: ${zIndex(1)};
+                max-width: ${maxWidthMap.get(size)}px;
+            `;
   const AlertInfo = css`
-        display: flex;
-        position: relative;
-        width: 100%;
-        min-width: 320px;
-        border: 1px solid ${mainColor};
-        color: ${mainColor};
-        background-color: ${hexToRGBA(mainColor, 0.15)};
-        box-sizing: border-box;
-        border-radius: 4px;
-        padding: 0 4px 0 16px;
-        opacity: 1;
-        word-break: break-word;
-    `;
+                display: flex;
+                position: relative;
+                width: 100%;
+                min-width: 320px;
+                border: 1px solid ${mainColor};
+                color: ${mainColor};
+                background-color: ${hexToRGBA(mainColor, 0.15)};
+                box-sizing: border-box;
+                border-radius: 4px;
+                padding: 0 4px 0 16px;
+                opacity: 1;
+                word-break: break-word;
+            `;
   const AlertIcon = css`
-        display: inherit;
-        margin-right: 10px;
-        padding: 8px 0;
-    `;
+                display: inherit;
+                margin-right: 10px;
+                padding: 8px 0;
+            `;
   const AlertText = css`
-        display: block;
-        margin-right: ${clearAble ? '10px' : 0};
-        padding: 8px 0;
-    `;
+                display: block;
+                margin-right: ${clearAble ? '10px' : 0};
+                padding: 8px 0;
+            `;
   const AlertPrimary = css`
-        display: flex;
-        position: relative;
-        align-items: center;
-        justify-content: flex-start;
-        user-select: none;
-        ${secondary ? primaryTypoMap.get(size) : paragraph1}
-    `;
+                display: flex;
+                position: relative;
+                align-items: center;
+                justify-content: flex-start;
+                user-select: none;
+                ${secondary ? primaryTypoMap.get(size) : paragraph1}
+            `;
   const AlertSecondary = css`
-        display: block;
-        user-select: none;
-        ${size === 'tiny' ? paragraph3 : paragraph2}
-    `;
+                display: block;
+                user-select: none;
+                ${size === 'tiny' ? paragraph3 : paragraph2}
+            `;
   const AlertClearIcon = css`
-        margin-left: auto;
-    `;
+                margin-left: auto;
+            `;
   const linearProgressStyle = css`
-        display: block;
-        position: relative;
-        margin-top: ${size === 'medium' ? '4px' : '2px'};
-        padding: 0 5px;
-    `;
+                display: block;
+                position: relative;
+                margin-top: ${size === 'medium' ? '4px' : '2px'};
+                padding: 0 5px;
+            `;
   const NotFoundIcon = css`
-        display: block;
-        width: 70%;
-        height: 70%;
-        border: 1px dashed ${rest};
-    `;
+                display: block;
+                width: 70%;
+                height: 70%;
+                border: 1px dashed ${rest};
+            `;
 
   const onClearAlert = (el, urgency) => {
     var _el$parentNode;

package/components/alert/notify.js

@@ -3,10 +3,14 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Alert from './';
 import { randomString } from '../../utils';
+import { useTheme } from '../../theme';
+const {
+  zIndex
+} = useTheme();
 const positions = {
   general: {
     position: 'fixed',
-    zIndex: 9002,
+    zIndex: zIndex(2),
     backgroundColor: 'transparent',
     pointerEvents: 'none'
   },

package/components/avatar/index.js

@@ -3,12 +3,14 @@
 /** @jsx jsx */
 import { Fragment, memo, useRef, forwardRef, useState, useEffect, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { jsx, css, keyframes } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
+import { useIntersection } from '../../utils/intersectionObserver';
 import { ButtonIcon, ModalSample, Popover, Popup, Typography } from '../';
 import { randomString } from '../../utils';
 import { getGlobal } from '../../global';
-import { alignCenter, borderNone, displayBlock, inlineFlex, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import AvatarDefault from '../../assets/avatar/default.svg';
+import { alignCenter, borderNone, displayBlock, displayNone, flexCol, inlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 import isMobile from '../../utils/isMobile';
 import { color as colors } from '../../styles/colors';
 const {
@@ -78,8 +80,14 @@ const getDirection = direction => {
   }
 };
 
+const blurKeyframe = keyframes`
+    0% { -webkit-filter: blur(4px);}
+    25% { -webkit-filter: blur(3px);}
+    50% { -webkit-filter: blur(2px);}
+    75% { -webkit-filter: blur(1px);}
+    100% { -webkit-filter: blur(0px);}
+`;
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  refs,
   src,
   defaultSrc,
   outlined,
@@ -100,8 +108,10 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   hoverAble,
   readOnly,
   disabled,
+  lazyLoading,
   ...props
 }, reference) => {
+  if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
@@ -112,81 +122,14 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [viewAvatar, setViewAvatar] = useState(false);
   const [viewMoreInfo, setViewMoreInfo] = useState(false);
   const [srcState, setSrcState] = useState(src);
+  const [isInView, setIsInView] = useState(false);
+  const [onLoaded, setOnLoaded] = useState(false);
+  useIntersection(ref, () => {
+    setIsInView(true);
+  });
 
   const _isMobile = isMobile.any();
 
-  if (!defaultSrc) defaultSrc = require('../../assets/avatar/default.svg');
-
-  if (width && !height) {
-    height = width;
-  }
-
-  if (!width && height) {
-    width = height;
-  }
-
-  const ActionIcon = css`
-                ${positionAbsolute}
-                right: -36px;
-                transition: opacity 0.5s;
-                opacity: 0;
-                .icon-delete {
-                    display: flex;
-                }
-            `;
-  const AvatarPreview = css`
-                ${displayBlock}
-                ${positionRelative}
-        ${overflowHidden}
-        width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                cursor: ${readOnly ? 'initial' : 'pointer'};
-            `;
-  const AvatarContainer = css`
-                ${inlineFlex}
-                ${positionRelative}
-        ${alignCenter}
-        &.disabled {
-                    .css-${AvatarPreview.name} {
-                        ${pointerEventsNone}
-                        cursor: inherit;
-                    }
-                    .css-${ActionIcon.name} {
-                        display: none !important;
-                    }
-                }
-                &:hover {
-                    .css-${ActionIcon.name} {
-                        opacity: 1;
-                    }
-                }
-            `;
-  const AvatarRoot = css`
-                ${displayBlock}
-                ${positionRelative}
-        ${overflowHidden}
-        ${userSelectNone}
-        ${borderNone}
-        border-radius: 50%;
-                width: ${isNaN(width) ? width : width + 'px'};
-                height: ${isNaN(height) ? height : height + 'px'};
-                box-sizing: content-box;
-                border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
-                input {
-                    display: none;
-                }
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
-            `;
-  const MoreInfo = css`
-                ${displayBlock}
-                ${positionRelative}
-        padding: 8px;
-            `;
-
   const triggerInput = e => {
     if (e || !existed[unique]) {
       inputRef.current.click();
@@ -260,6 +203,39 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, getGlobal('noDataText'));
   };
 
+  const renderImage = () => {
+    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,
+        alt: '',
+        style: {
+          objectFit: 'cover'
+        }
+      });
+    } else return jsx("img", {
+      css: blurAnimation,
+      src: srcState || defaultSrc,
+      alt: srcState || defaultSrc,
+      style: {
+        objectFit: 'cover'
+      }
+    });
+  };
+
   const showMoreInfo = () => {
     if (hoverAble) setViewMoreInfo(true);
   };
@@ -284,25 +260,24 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!_isMobile) closeMoreInfo();
   };
 
-  useEffect(() => {
-    if (refs) refs(ref);
-  }, []);
   useEffect(() => {
     if (src) {
-      inputRef.current.value = '';
-      const img = document.createElement('img');
-      urlAvatar[unique] = src;
-      img.src = src;
-      img.alt = '';
-      setSrcState(src);
-      existed[unique] = true;
-
-      img.onerror = e => {
-        setSrcState(null);
-        existed[unique] = false;
-      };
+      if (isInView || !lazyLoading) {
+        inputRef.current.value = '';
+        const img = document.createElement('img');
+        urlAvatar[unique] = src;
+        img.src = src;
+        img.alt = '';
+        setSrcState(src);
+        existed[unique] = true;
+
+        img.onerror = () => {
+          setSrcState(null);
+          existed[unique] = false;
+        };
+      }
     }
-  }, [src]);
+  }, [src, lazyLoading, isInView]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -313,12 +288,12 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   const AvatarView = useMemo(() => jsx("div", {
-    css: AvatarContainer,
+    css: AvatarContainer(readOnly, actionIconWidth),
     ref: ref,
     id: unique,
     className: disabled ? 'disabled' : ''
   }, jsx("div", {
-    css: AvatarRoot,
+    css: AvatarRoot(width, height, outlined),
     className: ['DGN-UI-Avatar', className].join(' ').trim().replace(/\s+/g, ' '),
     ...props
   }, jsx("input", {
@@ -328,21 +303,15 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     accept: 'image/*',
     onChange: onChangeAvatar
   }), jsx("div", {
-    css: AvatarPreview,
+    css: AvatarPreview(readOnly),
     onClick: _onClick,
     ref: avatarRef,
     onMouseEnter: _onMouseEnter,
     onMouseLeave: _onMouseLeave,
     tabIndex: "-1",
     onBlur: closeMoreInfo
-  }, jsx("img", {
-    src: srcState || defaultSrc,
-    alt: srcState || defaultSrc,
-    style: {
-      objectFit: 'cover'
-    }
-  }))), !readOnly && !disabled && jsx("span", {
-    css: ActionIcon
+  }, renderImage())), !readOnly && !disabled && jsx("span", {
+    css: ActionIcon(actionIconWidth)
   }, jsx(ButtonIcon, {
     viewType: 'ghost',
     name: 'Edit',
@@ -360,7 +329,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: {
       marginTop: '8px'
     }
-  }))), [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, srcState]);
+  }))), [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),
@@ -394,9 +363,77 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     title: maxSizeError,
     icon: 'danger',
     fullScreen: true
-  }), []);
+  }), [maxSizeError]);
   return jsx(Fragment, null, AvatarView, ModalView, hoverAble && MoreInfoView, !disabled && !readOnly && PopupView);
 }));
+
+const ActionIcon = actionIconWidth => css`
+    ${flexCol}
+    ${positionAbsolute}
+    right: ${-actionIconWidth}px;
+    min-width: ${actionIconWidth}px;
+    transition: opacity 0.5s;
+    opacity: 0;
+    z-index: 9002;
+`;
+
+const AvatarPreview = readOnly => css`
+    ${displayBlock}
+    ${positionRelative}
+    ${overflowHidden}
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    cursor: ${readOnly ? 'initial' : 'pointer'};
+`;
+
+const AvatarContainer = (readOnly, actionIconWidth) => css`
+    ${inlineFlex}
+    ${positionRelative}
+    ${alignCenter}
+    &.disabled {
+        .css-${AvatarPreview(readOnly).name} {
+            ${pointerEventsNone}
+            cursor: inherit;
+        }
+        .css-${ActionIcon(actionIconWidth).name} {
+            display: none !important;
+        }
+    }
+    &:hover {
+        .css-${ActionIcon(actionIconWidth).name} {
+            opacity: 1;
+        }
+    }
+`;
+
+const AvatarRoot = (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}
+    }
+    img {
+        width: 100%;
+        height: 100%;
+    }
+`;
+
+const MoreInfo = css`
+    ${displayBlock}
+    ${positionRelative}
+    padding: 8px;
+`;
+const blurAnimation = css`
+    animation: ${blurKeyframe} 1s ease;
+`;
 Avatar.defaultProps = {
   disabled: false,
   readOnly: false,
@@ -405,12 +442,15 @@ Avatar.defaultProps = {
   outlined: false,
   width: 48,
   height: 48,
+  actionIconWidth: 24,
+  actionIconHeight: 24,
   className: '',
   direction: 'down',
   maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
   wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`,
   matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
-  data: {}
+  data: {},
+  lazyLoading: false
 };
 Avatar.propTypes = {
   /** prevent all events, only view */
@@ -458,46 +498,46 @@ Avatar.propTypes = {
   /** source of file (http:// or https://) */
   src: PropTypes.string,
 
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
 
   /** the direction to display more info */
   direction: PropTypes.oneOf(['top', 'down', 'left', 'right']),
 
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 
-  /** refs is a function to get ref of avatar component */
-  refs: PropTypes.func,
-
   /** will run after remove avatar */
   onRemove: PropTypes.func,
 
   /** will run after change avatar */
   onChange: PropTypes.func,
 
+  /** lazy loading */
+  lazyLoading: PropTypes.bool,
+
   /** any props else */
   props: PropTypes.any,
 
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)