diginet-core-ui 1.3.24

package/components/avatar/index.js

@@ -0,0 +1,556 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { Fragment, memo, useRef, forwardRef, useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import Icon, { Account } from '../../icons';
+import { ModalSample, Popover, Popup, Typography } from '../';
+import { randomString } from '../../utils';
+import { getGlobal } from '../../global';
+const existed = {},
+      urlAvatar = {},
+      popupHandler = {};
+
+const getDirection = direction => {
+  switch (direction) {
+    case 'top':
+      return {
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        }
+      };
+
+    case 'left':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        }
+      };
+
+    case 'right':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        }
+      };
+
+    default:
+      return {
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        }
+      };
+  }
+};
+
+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,
+  defaultSrc,
+  outlined,
+  width,
+  height,
+  maxSize,
+  matchType,
+  className,
+  maxSizeError,
+  wrongTypeError,
+  actionIconWidth,
+  actionIconHeight,
+  direction,
+  data,
+  onRemove,
+  onChange,
+  clearAble,
+  hoverAble,
+  readOnly,
+  disabled,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const inputRef = useRef(null);
+  const avatarRef = useRef(null);
+  const [unique] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
+  const [viewAvatar, setViewAvatar] = useState(false);
+  const [viewMoreInfo, setViewMoreInfo] = useState(false);
+
+  if (width && !height) {
+    height = width;
+  }
+
+  if (!width && height) {
+    width = height;
+  }
+
+  const iconDefault = `<svg width="${width}" height="${height}" viewBox="0 0 20 20" fill="none">
+        <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>`;
+  const ActionIcon = css`
+        position: absolute;
+        right: -36px;
+        transition: opacity 0.5s;
+        opacity: 0;
+        .icon-delete {
+            display: none;
+        }
+    `;
+  const AvatarPreview = css`
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        overflow: hidden;
+        cursor: ${readOnly ? 'initial' : 'pointer'};
+    `;
+  const AvatarContainer = css`
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+        &.disabled {
+            .css-${AvatarPreview.name} {
+                pointer-events: none;
+                cursor: inherit;
+            }
+            .css-${ActionIcon.name} {
+                display: none !important;
+            }
+        }
+        &:hover {
+            .css-${ActionIcon.name} {
+                opacity: 1;
+            }
+        }
+    `;
+  const AvatarRoot = css`
+        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;
+        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`
+        display: block;
+        position: relative;
+        padding: 8px;
+    `;
+
+  const triggerInput = e => {
+    if (!e || !existed[unique]) {
+      ref.current.querySelector('input').click();
+    } else {
+      // on View
+      setViewAvatar(true);
+    }
+  };
+
+  const checkFileType = type => {
+    if (typeof matchType === 'object' && matchType instanceof RegExp) {
+      return matchType.test(type);
+    } else if (typeof matchType === 'object' && Array.isArray(matchType)) {
+      const pattern = new RegExp('^image\/(' + matchType.join('|') + ')', 'i');
+      return pattern.test(type);
+    } else {
+      return new RegExp(matchType).test(type);
+    }
+  };
+
+  const onChangeAvatar = input => {
+    const [file] = input.target.files;
+    if (!file) return;
+    const reader = new FileReader();
+
+    if (!checkFileType(file.type)) {
+      input.target.value = '';
+      popupHandler[unique].show(wrongTypeError);
+      return;
+    }
+
+    if (+maxSize && file.size > maxSize * 1024 ** 2) {
+      input.target.value = '';
+      popupHandler[unique].show(maxSizeError);
+      return;
+    }
+
+    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';
+      }
+
+      existed[unique] = true;
+    };
+
+    reader.readAsDataURL(file);
+    !!onChange && onChange(input);
+  };
+
+  const onRemoveAvatar = () => {
+    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);
+
+    if (info.length) {
+      return info.map((key, index) => {
+        return jsx(Typography, {
+          key: index,
+          color: 'white',
+          type: 'p1'
+        }, key + ': ' + data[key]);
+      });
+    }
+
+    return jsx(Typography, {
+      color: 'white',
+      type: 'p1'
+    }, "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u");
+  };
+
+  const showMoreInfo = () => {
+    if (hoverAble) setViewMoreInfo(true);
+  };
+
+  const closeMoreInfo = () => {
+    if (hoverAble) setViewMoreInfo(false);
+  };
+
+  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 = '';
+
+      img.onerror = e => {
+        if (defaultSrc) {
+          e.target.src = defaultSrc;
+        } else {
+          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]);
+  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
+  }, jsx("div", _extends({
+    css: AvatarRoot,
+    className: ['DGN-UI-Avatar', className].join(' ').trim()
+  }, props), jsx("input", {
+    ref: inputRef,
+    type: "file",
+    title: '',
+    accept: 'image/*',
+    onChange: onChangeAvatar
+  }), jsx("div", {
+    css: AvatarPreview,
+    onClick: readOnly ? isMobile.any() ? showMoreInfo : null : triggerInput,
+    ref: avatarRef,
+    onMouseEnter: isMobile.any() ? null : showMoreInfo,
+    onMouseLeave: isMobile.any() ? null : closeMoreInfo,
+    tabIndex: "-1",
+    onBlur: closeMoreInfo
+  }, 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(Icon, {
+    name: 'Edit',
+    width: actionIconWidth,
+    height: actionIconHeight,
+    className: 'icon-edit',
+    onClick: () => triggerInput()
+  }), clearAble && jsx(Icon, {
+    name: 'Delete',
+    width: actionIconWidth,
+    height: actionIconHeight,
+    className: 'icon-delete',
+    onClick: onRemoveAvatar,
+    style: {
+      marginTop: '8px'
+    }
+  }))), [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble]);
+  const ModalView = useMemo(() => 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'
+    }
+  })), [viewAvatar]);
+  const MoreInfoView = useMemo(() => jsx(Popover, _extends({
+    open: viewMoreInfo,
+    pressESCToClose: false,
+    bgColor: '#000',
+    anchor: avatarRef,
+    fullScreen: false,
+    width: 'max-content'
+  }, getDirection(direction)), jsx("div", {
+    css: MoreInfo
+  }, typeof data === 'function' ? data() : renderData())), [viewMoreInfo, direction, data]);
+  const PopupView = useMemo(() => jsx(Popup, {
+    getPopup: func => popupHandler[unique] = func,
+    type: 'info',
+    title: maxSizeError,
+    icon: 'danger',
+    fullScreen: true
+  }), []);
+  return jsx(Fragment, null, AvatarView, ModalView, hoverAble && MoreInfoView, !disabled && !readOnly && PopupView);
+}));
+Avatar.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  clearAble: true,
+  hoverAble: false,
+  outlined: false,
+  width: 48,
+  height: 48,
+  actionIconWidth: 18,
+  actionIconHeight: 18,
+  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: {}
+};
+Avatar.propTypes = {
+  /** prevent all events, only view */
+  disabled: PropTypes.bool,
+
+  /** only view and allow show more info if hoverAble is true */
+  readOnly: PropTypes.bool,
+
+  /** display remove avatar icon if true */
+  clearAble: PropTypes.bool,
+
+  /** show more info in popover if true */
+  hoverAble: PropTypes.bool,
+
+  /** border of avatar (true or '1px solid #color') */
+  outlined: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** The width of avatar box (48 or '48px' or ...) */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** The height of avatar box (48 or '48px' or ...) */
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** The width of action icon (18 or '18px') */
+  actionIconWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** The height of action icon (18 or '18px') */
+  actionIconHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** maximum size for avatar file (unit: MB) */
+  maxSize: PropTypes.number,
+
+  /** type of image was allowed */
+  matchType: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func, PropTypes.array]),
+
+  /** class for Avatar component */
+  className: PropTypes.string,
+
+  /** the error to show on exceeded allowed size */
+  maxSizeError: PropTypes.string,
+
+  /** the error to show on wrong type */
+  wrongTypeError: PropTypes.string,
+
+  /** 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
+   */
+  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: 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,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Avatar;