diginet-core-ui 1.3.35 → 1.3.36

package/assets/images/menu/dhr/MHRM09N0005.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="M33.79 23.67V23.66V19.86C33.79 19.58 33.57 19.36 33.29 19.36H19.79V15.54V15.53H18.79V15.54V19.36H5.70996C5.42996 19.36 5.20996 19.58 5.20996 19.86V23.66V23.67C5.36996 23.66 5.53996 23.65 5.70996 23.65C5.87996 23.65 6.03996 23.66 6.20996 23.67V23.66V20.36H18.8V23.66V23.67C18.96 23.66 19.13 23.65 19.3 23.65C19.47 23.65 19.63 23.66 19.8 23.67V23.66V20.36H32.8V23.66V23.67C32.96 23.66 33.13 23.65 33.3 23.65C33.46 23.65 33.62 23.66 33.79 23.67Z" fill="#111D5E"/>
+<path d="M5.21 23.67C2.29 23.93 0 26.36 0 29.32C0 32.46 2.56 35 5.71 35C8.86 35 11.42 32.46 11.42 29.32C11.42 26.35 9.13 23.92 6.21 23.67C6.05 23.66 5.88 23.65 5.71 23.65C5.54 23.65 5.38 23.66 5.21 23.67Z" fill="#1CA261"/>
+<path d="M18.8 23.67C15.88 23.92 13.59 26.35 13.59 29.32C13.59 32.45 16.15 35 19.3 35C22.45 35 25 32.46 25 29.32C25 26.35 22.71 23.92 19.79 23.67C19.63 23.66 19.46 23.65 19.29 23.65C19.13 23.65 18.96 23.66 18.8 23.67Z" fill="#FFAA00"/>
+<path d="M33.79 23.67C33.63 23.66 33.46 23.65 33.29 23.65C33.12 23.65 32.96 23.66 32.79 23.67C29.87 23.92 27.58 26.35 27.58 29.32C27.58 32.45 30.14 35 33.29 35C36.44 35 39 32.46 39 29.32C39 26.36 36.71 23.93 33.79 23.67Z" fill="#2680EB"/>
+<path d="M25 15.53V4.17004H13.59V15.53H18.8H19.79H25Z" fill="#FF3D71"/>
+</svg>

package/assets/images/menu/dhr/MHRM13N0001.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_14393_13618)">
+<path d="M23 17.26C23 17.89 22.49 18.4 21.86 18.4H16.6C16.69 18.01 16.73 17.59 16.73 17.16C16.73 16.8 16.7 16.45 16.64 16.12H21.86C22.49 16.12 23 16.63 23 17.26Z" fill="#FFC766"/>
+<path d="M22.98 21.64C22.44 21.96 21.98 22.42 21.66 22.97H12.01V22.85C13.32 22.54 14.39 21.95 15.2 21.09C15.32 20.96 15.44 20.83 15.55 20.69H21.86C22.42 20.69 22.89 21.1 22.98 21.64Z" fill="#FFC766"/>
+<path d="M22.14 27.51V27.52C22.05 27.54 21.96 27.55 21.86 27.55H8.14C7.51 27.55 7 27.03 7 26.4C7 25.77 7.51 25.26 8.14 25.26H19.26C19.42 26.17 20.22 26.86 21.17 26.86H21.65C21.79 27.1 21.95 27.31 22.14 27.51Z" fill="#FFC766"/>
+<path d="M17.29 29.83H8.14C7.51 29.83 7 30.34 7 30.97C7 31.6 7.51 32.11 8.14 32.11H17.28C17.91 32.11 18.42 31.6 18.42 30.97C18.42 30.34 17.92 29.83 17.29 29.83Z" fill="#FFC766"/>
+<path d="M29.37 9.48L20.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.13C25.85 38.76 25.6 38.46 25.4 38.12H21.17C20.28 38.12 19.53 37.52 19.31 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.42V22.06C27.72 22.32 27.98 22.63 28.19 22.98H29.71V10.28C29.71 9.97 29.58 9.68 29.37 9.48ZM21.71 9.14C21.08 9.14 20.57 8.63 20.57 8V3.9L25.81 9.14H21.71Z" fill="#FFAA00"/>
+<path d="M9.36 19.52V15.07C7.87 14.67 6.78 14.07 6.09 13.27C5.4 12.47 5.05 11.49 5.05 10.34C5.05 9.18 5.44 8.2 6.23 7.41C7.02 6.62 8.06 6.17 9.37 6.05V5H11.02V6.05C12.23 6.18 13.19 6.57 13.9 7.2C14.61 7.83 15.07 8.68 15.27 9.74L12.39 10.09C12.22 9.25 11.76 8.69 11.02 8.39V12.54C12.84 13 14.08 13.6 14.74 14.33C15.4 15.06 15.73 16 15.73 17.15C15.73 18.43 15.31 19.51 14.48 20.39C13.65 21.27 12.49 21.81 11.01 22V24H9.36V22.07C8.05 21.92 6.98 21.46 6.16 20.7C5.34 19.94 4.82 18.86 4.59 17.46L7.56 17.16C7.68 17.73 7.91 18.21 8.24 18.63C8.58 19.04 8.95 19.33 9.36 19.52ZM9.36 8.37C8.91 8.51 8.56 8.75 8.29 9.09C8.02 9.43 7.89 9.81 7.89 10.22C7.89 10.6 8.01 10.94 8.25 11.27C8.49 11.59 8.86 11.85 9.35 12.05V8.37H9.36ZM11.01 19.67C11.58 19.57 12.04 19.32 12.4 18.93C12.76 18.54 12.94 18.08 12.94 17.54C12.94 17.07 12.79 16.66 12.49 16.31C12.19 15.97 11.7 15.7 11.02 15.52V19.67H11.01Z" fill="#FFAA00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.17 25.86H22.28C22.67 26.95 23.7 27.74 24.92 27.74C26.14 27.74 27.17 26.95 27.56 25.86H38.06C38.58 25.86 39 25.44 39 24.92C39 24.4 38.58 23.98 38.06 23.98H27.56C27.17 22.89 26.14 22.1 24.92 22.1C23.7 22.1 22.67 22.89 22.28 23.98H21.17C20.65 23.98 20.23 24.4 20.23 24.92C20.23 25.44 20.65 25.86 21.17 25.86ZM36.18 27.74C34.96 27.74 33.93 28.53 33.54 29.62H21.17C20.65 29.62 20.23 30.04 20.23 30.56C20.23 31.08 20.65 31.5 21.17 31.5H33.55C33.94 32.59 34.97 33.38 36.19 33.38C37.74 33.38 39.01 32.12 39.01 30.56C39.01 29 37.74 27.74 36.18 27.74ZM31.32 35.25H38.06C38.58 35.25 39 35.67 39 36.19C39 36.71 38.58 37.13 38.06 37.13H31.32C30.93 38.21 29.9 39 28.67 39C27.44 39 26.42 38.21 26.03 37.12H21.16C20.64 37.12 20.22 36.7 20.22 36.18C20.22 35.66 20.64 35.24 21.16 35.24H26.03C26.42 34.15 27.45 33.36 28.67 33.36C29.89 33.36 30.93 34.16 31.32 35.25Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_14393_13618">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,11 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.09 11.85L12.34 10.98C12.18 10.9 12.07 10.73 12.07 10.55V9.92C12.11 9.87 12.16 9.81 12.2 9.75C12.43 9.42 12.61 9.07 12.74 8.69C13 8.57 13.17 8.31 13.17 8.03V7.3C13.17 7.12 13.1 6.95 12.99 6.82V5.84C13.03 5.41 12.89 4.98 12.61 4.65C12.23 4.22 11.62 4 10.79 4C9.95996 4 9.34996 4.22 8.97996 4.65C8.69996 4.98 8.55996 5.41 8.58996 5.84V6.81C8.46996 6.94 8.40996 7.11 8.40996 7.29V8.02C8.40996 8.24 8.50996 8.45 8.67996 8.59C8.80996 9.07 9.01996 9.52 9.31996 9.91V10.52C9.31996 10.7 9.21996 10.86 9.06996 10.94L7.43996 11.83C6.90996 12.12 6.57996 12.68 6.57996 13.28V14.06H15V13.32C15 12.7 14.65 12.13 14.09 11.85Z" fill="#111D5E"/>
+<path d="M23.86 17H15.43C14.8 17 14.29 17.51 14.29 18.14C14.29 18.77 14.8 19.28 15.43 19.28H23.86C24.49 19.28 25 18.77 25 18.14C25 17.51 24.49 17 23.86 17Z" fill="#2680EB"/>
+<path d="M15.43 21.57H18.65C18.64 21.57 18.63 21.58 18.62 21.58C18.24 21.73 18 22.1 18 22.5V23.86H15.43C14.8 23.86 14.29 23.35 14.29 22.71C14.29 22.08 14.8 21.57 15.43 21.57Z" fill="#2680EB"/>
+<path d="M15.43 26.14H18V28.43H15.43C14.8 28.43 14.29 27.92 14.29 27.29C14.29 26.65 14.8 26.14 15.43 26.14Z" fill="#2680EB"/>
+<path d="M15.43 30.71H18V33H15.43C14.8 33 14.29 32.49 14.29 31.86C14.29 31.22 14.8 30.71 15.43 30.71Z" fill="#2680EB"/>
+<path d="M11.8 21.14C11.78 21.13 11.75 21.12 11.73 21.12C11.68 21.12 11.64 21.14 11.61 21.17L11.27 21.51C11.24 21.54 11.22 21.58 11.22 21.63V23C11.22 23.23 11.14 23.44 10.97 23.61C10.8 23.78 10.59 23.86 10.36 23.86H5.86004C5.62004 23.86 5.42004 23.78 5.25004 23.61C5.07004 23.44 4.99004 23.23 4.99004 23V18.55C4.99004 18.32 5.07004 18.11 5.24004 17.94C5.41004 17.77 5.62004 17.69 5.85004 17.69H10.35C10.43 17.69 10.51 17.7 10.59 17.72C10.61 17.73 10.63 17.73 10.64 17.73C10.69 17.73 10.73 17.71 10.76 17.68L11.03 17.42C11.08 17.37 11.09 17.32 11.08 17.26C11.07 17.2 11.03 17.16 10.98 17.14C10.79 17.05 10.58 17 10.35 17H5.85004C5.42004 17 5.05004 17.15 4.75004 17.45C4.44004 17.75 4.29004 18.12 4.29004 18.54V22.99C4.29004 23.41 4.44004 23.78 4.75004 24.08C5.06004 24.38 5.42004 24.53 5.85004 24.53H10.35C10.78 24.53 11.15 24.38 11.45 24.08C11.76 23.78 11.91 23.41 11.91 22.99V21.29C11.91 21.21 11.87 21.16 11.8 21.14ZM13.16 18.07L12.56 17.48C12.48 17.4 12.37 17.35 12.25 17.35C12.13 17.35 12.03 17.4 11.94 17.48L8.44004 20.94L7.02004 19.53C6.94004 19.45 6.83004 19.4 6.71004 19.4C6.59004 19.4 6.49004 19.45 6.40004 19.53L5.80004 20.12C5.72004 20.2 5.67004 20.31 5.67004 20.42C5.67004 20.54 5.72004 20.64 5.80004 20.72L8.13004 23.02C8.21004 23.1 8.32004 23.15 8.44004 23.15C8.56004 23.15 8.66004 23.1 8.75004 23.02L13.15 18.67C13.23 18.59 13.28 18.48 13.28 18.37C13.29 18.26 13.25 18.15 13.16 18.07Z" fill="#2680EB"/>
+<path d="M11.84 29.6C11.82 29.59 11.79 29.58 11.77 29.58C11.72 29.58 11.68 29.6 11.65 29.63L11.31 29.97C11.28 30 11.26 30.04 11.26 30.09V31.45C11.26 31.68 11.18 31.89 11.01 32.06C10.84 32.23 10.63 32.31 10.4 32.31H5.88996C5.64996 32.31 5.44996 32.23 5.27996 32.06C5.09996 31.9 5.01996 31.7 5.01996 31.46V27.01C5.01996 26.78 5.09996 26.57 5.26996 26.4C5.43996 26.23 5.64996 26.15 5.87996 26.15H10.38C10.46 26.15 10.54 26.16 10.62 26.18C10.64 26.19 10.66 26.19 10.67 26.19C10.72 26.19 10.76 26.17 10.79 26.14L11.06 25.88C11.11 25.83 11.12 25.78 11.11 25.72C11.1 25.66 11.06 25.62 11.01 25.6C10.82 25.51 10.6 25.46 10.37 25.46H5.88996C5.45996 25.46 5.08996 25.61 4.78996 25.91C4.47996 26.21 4.32996 26.58 4.32996 27V31.45C4.32996 31.87 4.47996 32.24 4.78996 32.54C5.08996 32.85 5.45996 33 5.88996 33H10.39C10.82 33 11.19 32.85 11.49 32.55C11.8 32.25 11.95 31.88 11.95 31.46V29.76C11.95 29.69 11.91 29.63 11.84 29.6ZM13.2 26.53L12.6 25.94C12.52 25.86 12.41 25.81 12.29 25.81C12.17 25.81 12.07 25.86 11.98 25.94L8.47996 29.4L7.05996 27.99C6.97996 27.91 6.86996 27.86 6.74996 27.86C6.62996 27.86 6.52996 27.91 6.43996 27.99L5.83996 28.58C5.75996 28.66 5.70996 28.77 5.70996 28.88C5.70996 28.99 5.75996 29.1 5.83996 29.18L8.16996 31.48C8.24996 31.56 8.35996 31.61 8.47996 31.61C8.59996 31.61 8.69996 31.56 8.78996 31.48L13.19 27.13C13.27 27.05 13.32 26.94 13.32 26.83C13.33 26.72 13.29 26.62 13.2 26.53Z" fill="#2680EB"/>
+<path d="M21.86 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.43H25.79C25.8 11.43 25.81 11.43 25.82 11.43H27.43V19.23C28.1 19.09 28.79 19 29.5 19C29.57 19 29.64 19.01 29.71 19.01V10.29C29.71 9.98 29.58 9.69 29.38 9.48L20.24 0.34C20.02 0.12 19.73 0 19.42 0H3.42C1.54 0 0 1.54 0 3.43V35.57C0 37.46 1.54 39 3.43 39H25.04C23.85 38.44 22.76 37.67 21.86 36.71ZM20.57 3.9L25.81 9.14H21.71C21.08 9.14 20.57 8.63 20.57 8V3.9Z" fill="#2680EB"/>
+<path d="M29.5 20C26 20 22.9 21.9 21.3 24.8L19 22.5V29H25.5L22.7 26.2C24 23.7 26.5 22 29.5 22C33.6 22 37 25.4 37 29.5C37 33.6 33.6 37 29.5 37C26.2 37 23.5 34.9 22.4 32H20.3C21.4 36 25.1 39 29.5 39C34.8 39 39 34.7 39 29.5C39 24.3 34.7 20 29.5 20ZM28 25V30.1L32.7 32.9L33.5 31.6L29.5 29.2V25H28Z" 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/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)

package/components/badge/index.js

@@ -210,11 +210,11 @@ Badge.propTypes = {
   /** other icon props when use prop name */
   iconProps: PropTypes.object,
 
-  /** size of Badge
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** size of Badge
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
 

package/components/button/index.js

@@ -484,19 +484,19 @@ Button.propTypes = {
   /** status loading of button */
   loading: PropTypes.bool,
 
-  /**
-   * 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)