zmp-react/esm/zalo-ui-kits/avatar.js

Build full featured iOS & Android apps using ZMP & React

import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { classNames } from '../shared/utils';
import { AVATAR_SIZE, AVATAR_DEFAULT_BG_COLOR, AVATAR_COLOR_PROPS } from '../../common/constants';
import { calculateAvatarColor } from '../../common/utils';
/* dts-props
  id: string | number;
  className: string;
  style: React.CSSProperties;
  online? : boolean;
  story? : boolean;
  size? : 24 | 48 | 56 | 96 | 120;
  src? : any;
  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
  onClick?: (event?: any) => void
  avatarColor: 'blue-lblue'| 'green-lgreen' | 'orange-red' | 'pink-lpurple' | 'lblue-teal' | 'lgreen-yellow' | 'purple-blue' | 'pink-lpink' | 'teal-green' | 'yellow-orange' | 'lpurple-purple' | 'lred-lpink';
  CHILDREN_PROP
*/

var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var id = _ref.id,
      children = _ref.children,
      src = _ref.src,
      size = _ref.size,
      online = _ref.online,
      story = _ref.story,
      className = _ref.className,
      style = _ref.style,
      avatarColor = _ref.avatarColor,
      onClick = _ref.onClick;
  var elRef = useRef(null);
  useImperativeHandle(ref, function () {
    return {
      el: elRef.current
    };
  });

  var handleOnClick = function handleOnClick(e) {
    if (typeof onClick === 'function') {
      onClick(e);
    }
  };

  var bgColor = AVATAR_COLOR_PROPS[avatarColor] || '';

  if (typeof children === 'string' && !bgColor) {
    bgColor = calculateAvatarColor(children) || AVATAR_DEFAULT_BG_COLOR[0];
  }

  var sizeClass = AVATAR_SIZE[size] || '';
  var classes = classNames('avatar', {
    'avatar-story': story
  }, sizeClass, className);
  return /*#__PURE__*/React.createElement("div", {
    id: id,
    ref: elRef,
    onClick: handleOnClick,
    className: classes,
    style: style
  }, src ? /*#__PURE__*/React.createElement("img", {
    className: "avatar-image",
    src: src,
    alt: ""
  }) : /*#__PURE__*/React.createElement("div", {
    className: "avatar-inner " + bgColor
  }, children), online && /*#__PURE__*/React.createElement("span", {
    className: "avatar-online"
  }));
});
Avatar.displayName = 'zmp-avatar';
export default Avatar;