@pmwcs/avatar/dist/index.js

PMWCS avatar component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AvatarCount = exports.Avatar = exports.AvatarGroup = void 0;

var _preact = require("preact");

var _icon = require("@pmwcs/icon");

var _ripple = require("@pmwcs/ripple");

var _base = require("@pmwcs/base");

var _excluded = ["isCount", "overflow", "smallerText", "square", "interactive", "hasImage"],
    _excluded2 = ["dense"],
    _excluded3 = ["src", "size", "name", "interactive", "contain"],
    _excluded4 = ["value", "overflow", "size", "interactive"];

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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

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

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

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

    return letters;
  }

  return '';
};

var AvatarRoot = (0, _ripple.withRipple)({})((0, _base.createMemoComponent)(function AvatarRoot(props, ref) {
  var _ref;

  var isCount = props.isCount,
      overflow = props.overflow,
      smallerText = props.smallerText,
      square = props.square,
      interactive = props.interactive,
      hasImage = props.hasImage,
      rest = _objectWithoutProperties(props, _excluded);

  var className = (0, _base.useClassNames)(props, ['pmwc-avatar', (_ref = {}, _defineProperty(_ref, "pmwc-avatar--".concat(props.size), rest.size), _defineProperty(_ref, 'pmwc-avatar--count', isCount), _defineProperty(_ref, 'pmwc-avatar--interactive', interactive), _defineProperty(_ref, 'pmwc-avatar--count-overflow', overflow), _defineProperty(_ref, 'pmwc-avatar--smaller-text', smallerText), _defineProperty(_ref, 'pmwc-avatar--square', square), _defineProperty(_ref, 'pmwc-avatar--has-image', hasImage), _ref)]);
  return (0, _preact.h)(_icon.Icon, _extends({}, rest, {
    basename: "",
    className: className,
    ref: ref
  }));
}));
AvatarRoot.displayName = 'AvatarRoot';
/** A container for groups of Avatars */

var AvatarGroup = (0, _base.createComponent)(function AvatarGroup(props, ref) {
  var dense = props.dense,
      rest = _objectWithoutProperties(props, _excluded2);

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

exports.AvatarGroup = AvatarGroup;
var Avatar = (0, _base.createComponent)(function Avatar(_ref2, ref) {
  var src = _ref2.src,
      size = _ref2.size,
      _ref2$name = _ref2.name,
      name = _ref2$name === void 0 ? '' : _ref2$name,
      _ref2$interactive = _ref2.interactive,
      interactive = _ref2$interactive === void 0 ? false : _ref2$interactive,
      _ref2$contain = _ref2.contain,
      contain = _ref2$contain === void 0 ? false : _ref2$contain,
      rest = _objectWithoutProperties(_ref2, _excluded3);

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

var AvatarCount = (0, _base.createMemoComponent)(function AvatarCount(_ref3, ref) {
  var value = _ref3.value,
      overflow = _ref3.overflow,
      size = _ref3.size,
      _ref3$interactive = _ref3.interactive,
      interactive = _ref3$interactive === void 0 ? false : _ref3$interactive,
      rest = _objectWithoutProperties(_ref3, _excluded4);

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