diginet-core-ui 1.3.34-beta.3 → 1.3.35-beta.2

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/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 */
@@ -473,15 +513,15 @@ Avatar.propTypes = {
    */
   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,
 

package/components/badge/index.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
+import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
@@ -16,18 +16,11 @@ const {
 } = typography;
 const {
   system: {
-    active,
     rest,
     white
-  },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
   }
 } = colors;
-const colorMap = new Map([['default', rest], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+const colorMap = new Map([['default', rest]]);
 const iconSizeMap = new Map([['medium', 24], ['large', 32], ['giant', 40]]);
 const dotSizeMap = new Map([['medium', 8], ['large', 10], ['giant', 12]]);
 const dotIndentMap = new Map([['medium', 4], ['large', 2]]);
@@ -90,7 +83,6 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   showZero,
   invisible,
-  refs,
   children,
   iconProps,
   ...props
@@ -99,45 +91,13 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const typographySize = typographySizeMap.get(size);
   const iconSize = iconSizeMap.get(size);
   const dotSize = content || content === 0 && showZero ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
-  const dotColor = colorMap.get(color) || colors[color] || color;
+  const dotColor = colors[color] || colorMap.get(color) || color;
   const dotPos = calDotPos(anchorOrigin, !children && name ? 'right' : contentDirection, dotSize, content || content === 0, size);
-  const BadgeNumber = css`
-                ${typographySize};
-                ${flexRow}
-                ${alignCenter}
-        ${justifyCenter}
-        ${flexWrap}
-        ${borderBox}
-        ${pointerEventsNone}
-        ${children || name ? positionAbsolute : positionRelative}
-        color: ${white};
-                min-height: ${dotSize}px;
-                min-width: ${dotSize}px;
-                background-color: ${dotColor};
-                border-radius: ${dotSize / 2}px;
-                padding: 0 4px;
-                transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-                ${invisible && 'transform: scale(0) translate(50%, -50%);'};
-            `;
-  const BadgeRoot = css`
-                ${inlineFlex}
-                ${alignCenter}
-        ${justifyCenter}
-        ${positionRelative}
-        ${borderBox}
-        ${borderRadius4px}
-        height: max-content;
-                min-height: max-content;
-                width: max-content;
-                min-width: max-content;
-                color: ${white};
-                .css-${BadgeNumber.name} {
-                    ${(children || name) && dotPos}
-                }
-            `;
-  useEffect(() => {
-    if (refs) refs(ref);
-  }, []);
+
+  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor, invisible);
+
+  const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -161,7 +121,7 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return jsx("div", {
-      css: BadgeRoot,
+      css: _BadgeRootCSS,
       ref: ref,
       className: ['DGN-UI-Badge', className].join(' ').trim().replace(/\s+/g, ' '),
       style: style,
@@ -169,11 +129,48 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx("span", {
       className: 'DGN-UI-Badge-Children'
     }, node), content !== undefined && jsx("span", {
-      css: BadgeNumber,
+      css: _BadgeNumberCSS,
       className: 'DGN-UI-Badge-Dot'
     }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content));
-  }, [anchorOrigin, contentDirection, content, name, size, children, max, showZero, invisible, color, style, className]);
+  }, [anchorOrigin, contentDirection, content, name, size, children, max, showZero, invisible, color, style, className, iconProps]);
 }));
+
+const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, invisible) => css`
+    ${typographySize};
+    ${flexRow};
+    ${alignCenter};
+    ${justifyCenter};
+    ${flexWrap};
+    ${borderBox};
+    ${pointerEventsNone};
+    ${children || name ? positionAbsolute : positionRelative};
+    color: ${white};
+    min-height: ${dotSize}px;
+    min-width: ${dotSize}px;
+    background-color: ${dotColor};
+    border-radius: ${dotSize / 2}px;
+    padding: 0 4px;
+    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    ${invisible && 'transform: scale(0) translate(50%, -50%);'};
+`;
+
+const BadgeRootCSS = (children, name, dotPos, _BadgeNumberCSS) => css`
+    ${inlineFlex};
+    ${alignCenter};
+    ${justifyCenter};
+    ${positionRelative};
+    ${borderBox};
+    ${borderRadius4px};
+    color: ${white};
+    height: max-content;
+    min-height: max-content;
+    width: max-content;
+    min-width: max-content;
+    .css-${_BadgeNumberCSS.name} {
+        ${(children || name) && dotPos}
+    }
+`;
+
 Badge.defaultProps = {
   color: 'default',
   size: 'medium',

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

@@ -1754,14 +1754,14 @@ Dropdown.propTypes = {
   /** display this icon if not found the icon follow iconExpr */
   iconDefault: PropTypes.string,
 
-  /** field name used for icon display<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** field name used for icon display<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1779,9 +1779,9 @@ Dropdown.propTypes = {
   /** field name used for text display in input */
   keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1791,9 +1791,9 @@ Dropdown.propTypes = {
   /** the field name used for the returned result */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -1863,19 +1863,19 @@ Dropdown.propTypes = {
   /** The function to get ref of Dropdown component */
   refs: PropTypes.func,
 
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
 
-  /** the function will run when entering input<br/>
-   * if undefined: the filter function will run (default)
+  /** the function will run when entering input<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,