diginet-core-ui 1.3.90 → 1.3.91

package/components/avatar/index.js

@@ -1,20 +1,19 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx, css, keyframes } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import AvatarDefault from "../../assets/avatar/default.svg";
-import { ButtonIcon, ModalSample, Popover, Popup, Typography } from "./..";
+import { ButtonIcon, Image, ModalSample, Notify, Popover, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, isValidElement, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { itemsCenter, borderNone, displayBlock, displayNone, flexCol, displayInlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
+import { borderNone, borderRadius, boxContent, cursorInherit, cursorPointer, displayBlock, displayFlex, displayInlineFlex, displayNone, flexCol, itemsCenter, overflowHidden, parseMinWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, userSelectNone, z } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames, isMobile, randomString } from "../../utils";
-import { useIntersection } from "../../utils/intersectionObserver";
-import OptionWrapper from "../others/option-wrapper";
+import { classNames, isMobile } from "../../utils";
 const {
   colors: {
     system: {
-      white
+      white: systemWhite
     },
     fill: {
       tooltip: fillTooltip
@@ -22,19 +21,8 @@ const {
     text: {
       tooltip: textTooltip
     }
-  },
-  spacing,
-  zIndex: zIndexCORE
+  }
 } = useTheme();
-const existed = {},
-  urlAvatar = {};
-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 checkFileType = (type, matchType) => {
   if (typeof matchType === 'object' && matchType instanceof RegExp) {
     return matchType.test(type);
@@ -73,30 +61,22 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   wrongTypeError
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
-  const popupRef = useRef(null);
-  const [unique] = useState(randomString(6, {
-    allowNumber: false,
-    allowSymbol: false
-  }));
+  const notifyRef = useRef(null);
   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 _ActionIconCSS = ActionIconCSS(actionIconWidth);
-  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly);
-  const _AvatarContainerCSS = AvatarContainerCSS(_AvatarPreviewCSS.name, _ActionIconCSS.name);
+  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly || disabled);
+  const _AvatarContainerCSS = AvatarContainerCSS(_ActionIconCSS.name);
   const _AvatarRootCSS = AvatarRootCSS(width, height, outlined);
   const _isMobile = isMobile.any();
   const triggerInput = e => {
-    if (e || !existed[unique]) {
+    if (e || !srcState) {
       inputRef.current.click();
     } else {
       // on View
@@ -109,29 +89,22 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const reader = new FileReader();
     if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
-      popupRef.current.instance.show({
-        description: wrongTypeError
-      });
+      notifyRef.current.instance.show(wrongTypeError);
       return;
     }
     if (+maxSize && file.size > maxSize * 1024 ** 2) {
       input.target.value = '';
-      popupRef.current.instance.show({
-        description: maxSizeError
-      });
+      notifyRef.current.instance.show(maxSizeError);
       return;
     }
     reader.onload = e => {
-      urlAvatar[unique] = e.target.result;
-      setSrcState(urlAvatar[unique]);
-      existed[unique] = true;
+      setSrcState(e.target.result);
     };
     reader.readAsDataURL(file);
     !!onChange && onChange(input);
   };
   const onRemoveAvatar = () => {
     setSrcState(null);
-    existed[unique] = false;
     inputRef.current.value = '';
     !!onRemove && onRemove();
   };
@@ -152,32 +125,6 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       type: 'p1'
     }, getGlobal('noDataText'));
   };
-  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 ? _image : jsx("img", {
-        src: defaultSrc,
-        alt: '',
-        style: {
-          objectFit: 'cover'
-        }
-      });
-    } else return _image;
-  };
   const showMoreInfo = () => {
     if (hoverAble) setViewMoreInfo(true);
   };
@@ -201,22 +148,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   useEffect(() => {
     if (src) {
-      if (isInView || !lazyLoading) {
-        inputRef.current.value = '';
-        const img = document.createElement('img');
-        urlAvatar[unique] = src;
-        img.src = src;
-        img.alt = '';
-        img.onerror = () => {
-          setSrcState(defaultSrc);
-          existed[unique] = false;
-        };
-        img.onload = () => {
-          setSrcState(src);
-          existed[unique] = true;
-        };
-      }
+      setSrcState(src);
     }
+    return () => {
+      setSrcState(defaultSrc);
+    };
   }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -230,11 +166,9 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
-      css: _AvatarContainerCSS,
-      ref: ref,
-      id: unique,
-      className: classNames(disabled && 'disabled')
+      css: _AvatarContainerCSS
     }, jsx("div", {
+      ref: ref,
       css: _AvatarRootCSS,
       className: classNames('DGN-UI-Avatar', className),
       style: style,
@@ -247,14 +181,21 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onChange: onChangeAvatar,
       disabled: disabled
     }), jsx("div", {
+      ref: avatarRef,
       css: _AvatarPreviewCSS,
       onClick: _onClick,
-      ref: avatarRef,
       onMouseEnter: _onMouseEnter,
       onMouseLeave: _onMouseLeave,
       tabIndex: "-1",
       onBlur: closeMoreInfo
-    }, renderImage())), allowEdit && !readOnly && !disabled && jsx("span", {
+    }, jsx(Image, {
+      circular: true,
+      defaultSrc: defaultSrc,
+      src: srcState,
+      width: '100%',
+      height: '100%',
+      lazyLoading: lazyLoading
+    }))), allowEdit && !readOnly && !disabled ? jsx("span", {
       css: _ActionIconCSS
     }, jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -263,7 +204,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height: actionIconHeight,
       className: 'icon-edit',
       onClick: triggerInput
-    }), clearAble && srcState && jsx(ButtonIcon, {
+    }), clearAble && srcState ? jsx(ButtonIcon, {
       viewType: 'ghost',
       name: 'Delete',
       width: actionIconWidth,
@@ -273,68 +214,55 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: {
         marginTop: '8px'
       }
-    }))), jsx(ModalSample, {
+    }) : null) : null), 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, {
+    }, jsx(Image, {
+      defaultSrc: defaultSrc,
+      src: srcState,
+      width: '100%',
+      height: '100%'
+    })), 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, {
-      ref: popupRef,
-      type: 'danger'
+    }, typeof data === 'function' ? data() : renderData())) : null, jsx(Notify, {
+      ref: notifyRef,
+      progressing: true,
+      autoDisappear: true,
+      color: 'danger'
     }));
-  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, isInView, onLoaded, srcState, viewAvatar, viewMoreInfo]);
+  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, srcState, viewAvatar, viewMoreInfo]);
 }));
 const ActionIconCSS = actionIconWidth => css`
+    ${displayFlex};
     ${flexCol};
     ${positionAbsolute};
+    ${parseMinWidth(actionIconWidth)};
     right: ${-actionIconWidth}px;
-    min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
     opacity: 0;
-    z-index: ${zIndexCORE(2)};
+    ${z(2)};
 `;
-const AvatarPreviewCSS = readOnly => css`
+const AvatarPreviewCSS = isDisabled => css`
     ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    cursor: ${readOnly ? 'initial' : 'pointer'};
+    ${parseWidthHeight('100%')};
+    ${borderRadius('50%')};
+    ${isDisabled ? cursorInherit : cursorPointer};
 `;
-const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
+const AvatarContainerCSS = ActionIconCSSName => css`
     ${displayInlineFlex};
     ${positionRelative};
     ${itemsCenter};
-    &.disabled {
-        .css-${AvatarPreviewCSSName} {
-            ${pointerEventsNone}
-            cursor: inherit;
-        }
-        .css-${ActionIconCSSName} {
-            display: none !important;
-        }
-    }
     &:hover {
         .css-${ActionIconCSSName} {
             opacity: 1;
@@ -347,25 +275,18 @@ const AvatarRootCSS = (width, height, outlined) => css`
     ${overflowHidden};
     ${userSelectNone};
     ${borderNone};
+    ${boxContent};
     ${parseWidthHeight(width, height)};
-    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
-    border-radius: 50%;
-    box-sizing: content-box;
+    ${borderRadius('50%')};
+    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${systemWhite}` : outlined};
     input {
         ${displayNone};
     }
-    img {
-        width: 100%;
-        height: 100%;
-    }
 `;
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
-    padding: ${spacing([2])};
-`;
-const blurAnimationCSS = css`
-    animation: ${blurKeyframe} 1s ease;
+    ${pd([2])};
 `;
 Avatar.defaultProps = {
   actionIconHeight: 24,

package/components/button/icon.js

@@ -321,14 +321,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -339,19 +339,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * 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 (ref.current.instance.*method*)
+   *
+   * * 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: ref
 };