@pmwcs/avatar/next/index.js

PMWCS avatar component

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); }

import { h, Fragment } from 'preact';
import { Icon } from '@pmwcs/icon';
import { withRipple } from '@pmwcs/ripple';
import { useClassNames, Tag, createComponent, createMemoComponent } from '@pmwcs/base';

const getInitialsForName = name => {
  if (name) {
    const parts = name.split(' ');
    /* istanbul ignore next */

    let letters = (parts[0] || '')[0];

    if (parts.length > 1) {
      const part = parts.pop();
      /* istanbul ignore next */

      if (part) {
        letters += part[0];
      }
    }

    return letters;
  }

  return '';
};

const AvatarRoot = withRipple({})(createMemoComponent(function AvatarRoot(props, ref) {
  const {
    isCount,
    overflow,
    smallerText,
    square,
    interactive,
    hasImage,
    ...rest
  } = props;
  const className = useClassNames(props, ['pmwc-avatar', {
    [`pmwc-avatar--${props.size}`]: rest.size,
    'pmwc-avatar--count': isCount,
    'pmwc-avatar--interactive': interactive,
    'pmwc-avatar--count-overflow': overflow,
    'pmwc-avatar--smaller-text': smallerText,
    'pmwc-avatar--square': square,
    'pmwc-avatar--has-image': hasImage
  }]);
  return h(Icon, _extends({}, rest, {
    basename: "",
    className: className,
    ref: ref
  }));
}));
AvatarRoot.displayName = 'AvatarRoot';
/** A container for groups of Avatars */

export const AvatarGroup = createComponent(function AvatarGroup(props, ref) {
  const {
    dense,
    ...rest
  } = props;
  const className = useClassNames(props, ['pmwc-avatar-group', {
    'pmwc-avatar-group--dense': dense
  }]);
  return h(Tag, _extends({}, rest, {
    ref: ref,
    className: className
  }));
});
/** An Avatar component for displaying users in a system. */

export const Avatar = createComponent(function Avatar({
  src,
  size,
  name = '',
  interactive = false,
  contain = false,
  ...rest
}, ref) {
  const initials = getInitialsForName(name);
  const avatarStyle = src ? {
    backgroundImage: `url(${src})`,
    backgroundSize: contain ? 'contain' : 'cover'
  } : {};
  return h(AvatarRoot, _extends({
    ref: ref,
    ripple: interactive,
    interactive: interactive,
    hasImage: !!src,
    size: size,
    title: name,
    tag: "span"
  }, rest, {
    icon: {
      icon: h(Fragment, null, h("div", {
        className: "pmwc-avatar__icon",
        style: avatarStyle
      }), h("div", {
        className: "pmwc-avatar__text"
      }, h("div", {
        className: "pmwc-avatar__text-inner"
      }, initials)))
    }
  }));
});
Avatar.displayName = 'Avatar';
/** An Avatar count for displaying list overflow. */

export const AvatarCount = createMemoComponent(function AvatarCount({
  value,
  overflow,
  size,
  interactive = false,
  ...rest
}, ref) {
  const smallerText = String(value).length > 2;
  return h(AvatarRoot, _extends({
    ref: ref,
    ripple: interactive,
    interactive: interactive,
    isCount: true,
    size: size,
    overflow: overflow,
    smallerText: smallerText,
    tag: "span"
  }, rest, {
    icon: {
      icon: h("div", {
        className: "pmwc-avatar__text"
      }, h("div", {
        className: "pmwc-avatar__text-inner"
      }, value))
    }
  }));
});