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

package/assets/avatar/default.svg

@@ -1,3 +1,3 @@
-<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 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>

package/components/avatar/index.js

@@ -1,13 +1,27 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { Fragment, memo, useRef, forwardRef, useState, useEffect, useMemo } from 'react';
+import { Fragment, memo, useRef, forwardRef, useState, useEffect, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { Account } from '../../icons';
+import OptionWrapper from '../others/option-wrapper';
 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 = {};
@@ -64,26 +78,6 @@ 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,
@@ -107,11 +101,8 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   disabled,
   ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+}, reference) => {
+  const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
   const [unique] = useState(randomString(6, {
@@ -120,6 +111,11 @@ 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;
@@ -129,34 +125,31 @@ 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`
-        position: absolute;
+        ${positionAbsolute}
         right: -36px;
         transition: opacity 0.5s;
         opacity: 0;
         .icon-delete {
-            display: none;
+            display: flex;
         }
     `;
   const AvatarPreview = css`
-        display: block;
-        position: relative;
+        ${displayBlock}
+        ${positionRelative}
+        ${overflowHidden}
         width: 100%;
         height: 100%;
         border-radius: 50%;
-        overflow: hidden;
         cursor: ${readOnly ? 'initial' : 'pointer'};
     `;
   const AvatarContainer = css`
-        display: inline-flex;
-        position: relative;
-        align-items: center;
+        ${inlineFlex}
+        ${positionRelative}
+        ${alignCenter}
         &.disabled {
             .css-${AvatarPreview.name} {
-                pointer-events: none;
+                ${pointerEventsNone}
                 cursor: inherit;
             }
             .css-${ActionIcon.name} {
@@ -170,34 +163,33 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const AvatarRoot = css`
-        display: block;
-        position: relative;
+        ${displayBlock}
+        ${positionRelative}
+        ${overflowHidden}
+        ${userSelectNone}
+        ${borderNone}
         border-radius: 50%;
         width: ${isNaN(width) ? width : width + 'px'};
         height: ${isNaN(height) ? height : height + 'px'};
-        overflow: hidden;
         box-sizing: content-box;
-        user-select: none;
-        border: none;
+        border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
         input {
             display: none;
         }
         img {
-            background-image: url(${require('../../assets/avatar/default.svg')});
-            background-size: cover;
             width: 100%;
             height: 100%;
         }
     `;
   const MoreInfo = css`
-        display: block;
-        position: relative;
+        ${displayBlock}
+        ${positionRelative}
         padding: 8px;
     `;
 
   const triggerInput = e => {
-    if (!e || !existed[unique]) {
-      ref.current.querySelector('input').click();
+    if (e || !existed[unique]) {
+      inputRef.current.click();
     } else {
       // on View
       setViewAvatar(true);
@@ -233,18 +225,8 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     reader.onload = e => {
-      const img = document.createElement('img');
       urlAvatar[unique] = e.target.result;
-      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';
-      }
-
+      setSrcState(urlAvatar[unique]);
       existed[unique] = true;
     };
 
@@ -253,39 +235,29 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onRemoveAvatar = () => {
-    if (defaultSrc) {
-      ref.current.querySelector('img').src = defaultSrc;
-    } else {
-      ref.current.querySelector(`.css-${AvatarPreview.name}`).innerHTML = iconDefault;
-    }
-
+    setSrcState(null);
     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: 'white',
+          color: textTooltip,
           type: 'p1'
         }, key + ': ' + data[key]);
       });
     }
 
     return jsx(Typography, {
-      color: 'white',
+      color: textTooltip,
       type: 'p1'
-    }, "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u");
+    }, getGlobal('noDataText'));
   };
 
   const showMoreInfo = () => {
@@ -296,95 +268,58 @@ 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 => {
-        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 () => {
+        setSrcState(null);
         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]);
-  useEffect(() => {
-    if (disabled) {
-      ref.current.classList.add('disabled');
-      return () => {
-        if (ref.current) {
-          ref.current.classList.remove('disabled');
-        }
-      };
-    }
-  }, [disabled]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const AvatarView = useMemo(() => jsx("div", {
     css: AvatarContainer,
     ref: ref,
-    id: unique
+    id: unique,
+    className: disabled ? 'disabled' : ''
   }, jsx("div", {
     css: AvatarRoot,
-    className: ['DGN-UI-Avatar', className].join(' ').trim(),
+    className: ['DGN-UI-Avatar', className].join(' ').trim().replace(/\s+/g, ' '),
     ...props
   }, jsx("input", {
     ref: inputRef,
@@ -394,22 +329,18 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onChange: onChangeAvatar
   }), jsx("div", {
     css: AvatarPreview,
-    onClick: readOnly ? isMobile.any() ? showMoreInfo : null : triggerInput,
+    onClick: _onClick,
     ref: avatarRef,
-    onMouseEnter: isMobile.any() ? null : showMoreInfo,
-    onMouseLeave: isMobile.any() ? null : closeMoreInfo,
+    onMouseEnter: _onMouseEnter,
+    onMouseLeave: _onMouseLeave,
     tabIndex: "-1",
     onBlur: closeMoreInfo
-  }, defaultSrc ? jsx("img", {
-    src: defaultSrc,
-    alt: defaultSrc,
+  }, jsx("img", {
+    src: srcState || defaultSrc,
+    alt: srcState || defaultSrc,
     style: {
       objectFit: 'cover'
     }
-  }) : jsx(Account, {
-    width: width,
-    height: height,
-    viewBox: true
   }))), !readOnly && !disabled && jsx("span", {
     css: ActionIcon
   }, jsx(ButtonIcon, {
@@ -418,8 +349,8 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     width: actionIconWidth,
     height: actionIconHeight,
     className: 'icon-edit',
-    onClick: () => triggerInput()
-  }), clearAble && jsx(ButtonIcon, {
+    onClick: triggerInput
+  }), clearAble && srcState && jsx(ButtonIcon, {
     viewType: 'ghost',
     name: 'Delete',
     width: actionIconWidth,
@@ -429,7 +360,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: {
       marginTop: '8px'
     }
-  }))), [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble]);
+  }))), [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, srcState]);
   const ModalView = useMemo(() => jsx(ModalSample, {
     open: viewAvatar,
     onClose: () => setViewAvatar(false),
@@ -446,9 +377,10 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   })), [viewAvatar]);
   const MoreInfoView = useMemo(() => jsx(Popover, {
+    arrow: true,
     open: viewMoreInfo,
     pressESCToClose: false,
-    bgColor: '#000',
+    bgColor: fillTooltip,
     anchor: avatarRef,
     fullScreen: false,
     width: 'max-content',
@@ -473,8 +405,6 @@ Avatar.defaultProps = {
   outlined: false,
   width: 48,
   height: 48,
-  actionIconWidth: '100%',
-  actionIconHeight: '100%',
   className: '',
   direction: 'down',
   maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
@@ -553,6 +483,25 @@ Avatar.propTypes = {
   onChange: PropTypes.func,
 
   /** any props else */
-  props: PropTypes.any
+  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)
+  })])
 };
-export default Avatar;
+export { Avatar };
+export default OptionWrapper(Avatar);