diginet-core-ui 1.3.33-beta.1 → 1.3.33

package/assets/avatar/default.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47998 0 0 4.48 0 10C0 15.52 4.47998 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34003 9 7 7.66 7 6C7 4.34 8.34003 3 10 3ZM4 13.98C5.28998 15.92 7.5 17.2 10 17.2C12.5 17.2 14.71 15.92 16 13.98C15.97 11.99 11.99 10.9 10 10.9C8 10.9 4.03003 11.99 4 13.98Z" fill="#7F828E"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM6 15.98C7.29 17.92 9.5 19.2 12 19.2C14.5 19.2 16.71 17.92 18 15.98C17.97 13.99 13.99 12.9 12 12.9C10 12.9 6.03 13.99 6 15.98Z" fill="#7F828E"/>
 </svg>

package/components/avatar/index.js

@@ -1,27 +1,13 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { Fragment, memo, useRef, forwardRef, useState, useEffect, useMemo, useImperativeHandle } from 'react';
+import { Fragment, memo, useRef, forwardRef, useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
+import { Account } from '../../icons';
 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 isMobile from '../../utils/isMobile';
-import { color as colors } from '../../styles/colors';
-const {
-  system: {
-    white
-  },
-  fill: {
-    tooltip: fillTooltip
-  },
-  text: {
-    tooltip: textTooltip
-  }
-} = colors;
 const existed = {},
       urlAvatar = {},
       popupHandler = {};
@@ -78,6 +64,26 @@ const getDirection = direction => {
   }
 };
 
+const isMobile = {
+  iOS: function () {
+    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+  },
+  Android: function () {
+    return navigator.userAgent.match(/Android/i);
+  },
+  BlackBerry: function () {
+    return navigator.userAgent.match(/BlackBerry/i);
+  },
+  Opera: function () {
+    return navigator.userAgent.match(/Opera Mini/i);
+  },
+  Windows: function () {
+    return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
+  },
+  any: function () {
+    return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows();
+  }
+};
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   refs,
   src,
@@ -101,8 +107,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   disabled,
   ...props
-}, reference) => {
-  const ref = useRef(null);
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
   const [unique] = useState(randomString(6, {
@@ -111,11 +120,6 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
   const [viewAvatar, setViewAvatar] = useState(false);
   const [viewMoreInfo, setViewMoreInfo] = useState(false);
-  const [srcState, setSrcState] = useState(src);
-
-  const _isMobile = isMobile.any();
-
-  if (!defaultSrc) defaultSrc = require('../../assets/avatar/default.svg');
 
   if (width && !height) {
     height = width;
@@ -125,31 +129,34 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     width = height;
   }
 
+  const iconDefault = `<svg width="${width}" height="${height}" viewBox="0 0 24 24" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47998 2 2 6.48 2 12C2 17.52 6.47998 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM6 15.98C7.28998 17.92 9.5 19.2 12 19.2C14.5 19.2 16.71 17.92 18 15.98C17.97 13.99 13.99 12.9 12 12.9C10 12.9 6.03003 13.99 6 15.98Z" fill="#7F828E"></path>
+    </svg>`;
   const ActionIcon = css`
-        ${positionAbsolute}
+        position: absolute;
         right: -36px;
         transition: opacity 0.5s;
         opacity: 0;
         .icon-delete {
-            display: flex;
+            display: none;
         }
     `;
   const AvatarPreview = css`
-        ${displayBlock}
-        ${positionRelative}
-        ${overflowHidden}
+        display: block;
+        position: relative;
         width: 100%;
         height: 100%;
         border-radius: 50%;
+        overflow: hidden;
         cursor: ${readOnly ? 'initial' : 'pointer'};
     `;
   const AvatarContainer = css`
-        ${inlineFlex}
-        ${positionRelative}
-        ${alignCenter}
+        display: inline-flex;
+        position: relative;
+        align-items: center;
         &.disabled {
             .css-${AvatarPreview.name} {
-                ${pointerEventsNone}
+                pointer-events: none;
                 cursor: inherit;
             }
             .css-${ActionIcon.name} {
@@ -163,33 +170,34 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const AvatarRoot = css`
-        ${displayBlock}
-        ${positionRelative}
-        ${overflowHidden}
-        ${userSelectNone}
-        ${borderNone}
+        display: block;
+        position: relative;
         border-radius: 50%;
         width: ${isNaN(width) ? width : width + 'px'};
         height: ${isNaN(height) ? height : height + 'px'};
+        overflow: hidden;
         box-sizing: content-box;
-        border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
+        user-select: none;
+        border: none;
         input {
             display: none;
         }
         img {
+            background-image: url(${require('../../assets/avatar/default.svg')});
+            background-size: cover;
             width: 100%;
             height: 100%;
         }
     `;
   const MoreInfo = css`
-        ${displayBlock}
-        ${positionRelative}
+        display: block;
+        position: relative;
         padding: 8px;
     `;
 
   const triggerInput = e => {
-    if (e || !existed[unique]) {
-      inputRef.current.click();
+    if (!e || !existed[unique]) {
+      ref.current.querySelector('input').click();
     } else {
       // on View
       setViewAvatar(true);
@@ -225,8 +233,18 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     reader.onload = e => {
+      const img = document.createElement('img');
       urlAvatar[unique] = e.target.result;
-      setSrcState(urlAvatar[unique]);
+      img.src = urlAvatar[unique];
+      img.alt = '';
+      img.style.cssText = 'object-fit: cover';
+      ref.current.querySelector(`.css-${AvatarPreview.name}`).innerHTML = '';
+      ref.current.querySelector(`.css-${AvatarPreview.name}`).appendChild(img);
+
+      if (!readOnly && clearAble) {
+        ref.current.querySelector(`.icon-delete`).style.display = 'flex';
+      }
+
       existed[unique] = true;
     };
 
@@ -235,29 +253,39 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onRemoveAvatar = () => {
-    setSrcState(null);
+    if (defaultSrc) {
+      ref.current.querySelector('img').src = defaultSrc;
+    } else {
+      ref.current.querySelector(`.css-${AvatarPreview.name}`).innerHTML = iconDefault;
+    }
+
     existed[unique] = false;
     inputRef.current.value = '';
+
+    if (!readOnly && clearAble) {
+      ref.current.querySelector(`.icon-delete`).style.display = null;
+    }
+
     !!onRemove && onRemove();
   };
 
   const renderData = () => {
-    const info = Object.keys(data || {});
+    const info = Object.keys(data);
 
     if (info.length) {
       return info.map((key, index) => {
         return jsx(Typography, {
           key: index,
-          color: textTooltip,
+          color: 'white',
           type: 'p1'
         }, key + ': ' + data[key]);
       });
     }
 
     return jsx(Typography, {
-      color: textTooltip,
+      color: 'white',
       type: 'p1'
-    }, getGlobal('noDataText'));
+    }, "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u");
   };
 
   const showMoreInfo = () => {
@@ -268,58 +296,95 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (hoverAble) setViewMoreInfo(false);
   };
 
-  const _onClick = () => {
-    if (disabled) return;
-
-    if (readOnly) {
-      if (_isMobile) showMoreInfo();
-    } else triggerInput();
-  };
-
-  const _onMouseEnter = () => {
-    if (!_isMobile) showMoreInfo();
-  };
-
-  const _onMouseLeave = () => {
-    if (!_isMobile) closeMoreInfo();
-  };
-
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
+  useEffect(() => {
+    if (outlined) {
+      ref.current.querySelector(`.css-${AvatarRoot.name}`).style.border = typeof outlined === 'boolean' ? '1px solid #FFF' : outlined;
+      return () => {
+        if (ref.current) {
+          ref.current.querySelector(`.css-${AvatarRoot.name}`).style.border = null;
+        }
+      };
+    }
+  }, [outlined]);
+  useEffect(() => {
+    if (!readOnly && clearAble && src) {
+      ref.current.querySelector(`.icon-delete`).style.display = 'flex';
+    }
+  }, [clearAble]); // useEffect(() => {
+  //     if (hoverAble) {
+  //         avatarRef.current.addEventListener('mouseenter', showMoreInfo);
+  //         avatarRef.current.addEventListener('mouseleave', closeMoreInfo);
+  //     }
+  //     return () => {
+  //         if (hoverAble && avatarRef.current) {
+  //             avatarRef.current.removeEventListener('mouseenter', showMoreInfo);
+  //             avatarRef.current.removeEventListener('mouseleave', closeMoreInfo);
+  //         }
+  //     };
+  // }, [hoverAble])
+
   useEffect(() => {
     if (src) {
+      existed[unique] = true;
       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);
+        if (defaultSrc) {
+          e.target.src = defaultSrc;
+        } else {
+          if (ref.current) ref.current.querySelector(`.css-${AvatarPreview.name}`).innerHTML = iconDefault;
+        }
+      };
+
+      img.style.cssText = 'object-fit: cover';
+      ref.current.querySelector(`.css-${AvatarPreview.name}`).innerHTML = '';
+      ref.current.querySelector(`.css-${AvatarPreview.name}`).appendChild(img);
+
+      if (!readOnly && clearAble) {
+        ref.current.querySelector(`.icon-delete`).style.display = 'flex';
+      }
+
+      return () => {
         existed[unique] = false;
+
+        if (ref.current) {
+          if (defaultSrc) {
+            ref.current.querySelector('img').src = defaultSrc;
+          } else {
+            ref.current.querySelector(`.css-${AvatarPreview.name}`).innerHTML = iconDefault;
+          }
+
+          if (!readOnly && clearAble && ref.current.querySelector(`.icon-delete`)) {
+            ref.current.querySelector(`.icon-delete`).style.display = null;
+          }
+        }
       };
     }
   }, [src]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useEffect(() => {
+    if (disabled) {
+      ref.current.classList.add('disabled');
+      return () => {
+        if (ref.current) {
+          ref.current.classList.remove('disabled');
+        }
+      };
+    }
+  }, [disabled]);
   const AvatarView = useMemo(() => jsx("div", {
     css: AvatarContainer,
     ref: ref,
-    id: unique,
-    className: disabled ? 'disabled' : ''
+    id: unique
   }, jsx("div", {
     css: AvatarRoot,
-    className: ['DGN-UI-Avatar', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: ['DGN-UI-Avatar', className].join(' ').trim(),
     ...props
   }, jsx("input", {
     ref: inputRef,
@@ -329,18 +394,22 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onChange: onChangeAvatar
   }), jsx("div", {
     css: AvatarPreview,
-    onClick: _onClick,
+    onClick: readOnly ? isMobile.any() ? showMoreInfo : null : triggerInput,
     ref: avatarRef,
-    onMouseEnter: _onMouseEnter,
-    onMouseLeave: _onMouseLeave,
+    onMouseEnter: isMobile.any() ? null : showMoreInfo,
+    onMouseLeave: isMobile.any() ? null : closeMoreInfo,
     tabIndex: "-1",
     onBlur: closeMoreInfo
-  }, jsx("img", {
-    src: srcState || defaultSrc,
-    alt: srcState || defaultSrc,
+  }, defaultSrc ? jsx("img", {
+    src: defaultSrc,
+    alt: defaultSrc,
     style: {
       objectFit: 'cover'
     }
+  }) : jsx(Account, {
+    width: width,
+    height: height,
+    viewBox: true
   }))), !readOnly && !disabled && jsx("span", {
     css: ActionIcon
   }, jsx(ButtonIcon, {
@@ -349,8 +418,8 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     width: actionIconWidth,
     height: actionIconHeight,
     className: 'icon-edit',
-    onClick: triggerInput
-  }), clearAble && srcState && jsx(ButtonIcon, {
+    onClick: () => triggerInput()
+  }), clearAble && jsx(ButtonIcon, {
     viewType: 'ghost',
     name: 'Delete',
     width: actionIconWidth,
@@ -360,7 +429,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]);
   const ModalView = useMemo(() => jsx(ModalSample, {
     open: viewAvatar,
     onClose: () => setViewAvatar(false),
@@ -377,10 +446,9 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   })), [viewAvatar]);
   const MoreInfoView = useMemo(() => jsx(Popover, {
-    arrow: true,
     open: viewMoreInfo,
     pressESCToClose: false,
-    bgColor: fillTooltip,
+    bgColor: '#000',
     anchor: avatarRef,
     fullScreen: false,
     width: 'max-content',
@@ -405,6 +473,8 @@ Avatar.defaultProps = {
   outlined: false,
   width: 48,
   height: 48,
+  actionIconWidth: '100%',
+  actionIconHeight: '100%',
   className: '',
   direction: 'down',
   maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
@@ -483,25 +553,6 @@ Avatar.propTypes = {
   onChange: PropTypes.func,
 
   /** 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
-   */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  props: PropTypes.any
 };
-export { Avatar };
-export default OptionWrapper(Avatar);
+export default Avatar;