Contents

/* @flow */
/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */

import React from 'react'

import classnames from 'classnames'
import { map } from 'lodash'
import Image from "../pb_image/_image.jsx"

type AvatarProps = {
  className?: String,
  name: String,
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
  status: 'online' | 'away',
  url: String,
}

const initials = function(name) {
  if (name) {
    return map(name.split(/\s/), name => name[0]).join('').substring(0,2)
  }
}

const image = function(url, name) {
  if (url) {
    return (
      <Image alt={name}
          url={url}
      />
    )
  }
}

const PbStatus = ({ size, status } : { size: String, status: String }) => (
  <div className={`pb_online_status_kit_${status} size_${size}`}/>
)

const Avatar = ({
  className,
  name=null,
  size='md',
  status,
  url
}: AvatarProps) => {
  const css = classnames([
    `pb_avatar_kit`,
    `avatar_${size}`,
    className,
  ])

  return (
    <div className={css}
        data-initials={initials(name)}
    >
      <div 
          className="avatar_wrapper"
          data-initials={initials(name)}
      >
        {image(url, name)}
      </div>
      <PbStatus 
          size={size}
          status={status}
      />
    </div>
  )
}

export default Avatar

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
playbook_ui-2.9.1	app/pb_kits/playbook/pb_avatar/_avatar.jsx
playbook_ui-2.9.0	app/pb_kits/playbook/pb_avatar/_avatar.jsx
playbook_ui-2.8.9	app/pb_kits/playbook/pb_avatar/_avatar.jsx
playbook_ui-2.8.8	app/pb_kits/playbook/pb_avatar/_avatar.jsx