@muvehealth/fixins/dist/blocks/Avatar/index.js.flow

Component library for Muvehealth

// @flow
import React, { type Node } from 'react'
import styled from 'react-emotion'
import { isEmpty } from 'ramda'
import Circle from '../../elements/Circle'
import { shouldForwardProp } from '../../utils'

const PicAvatar = styled('img', { shouldForwardProp })(
  {
    display: 'inline-block',
    borderRadius: 999999,
  },
  ({ size }) => ({
    width: `${size || 48}px`,
    height: `${size || 48}px`,
  }),
)

type Props = {
  boxShadow?: string,
  children?: Node,
  fullName?: string,
  initials?: string,
  secondary?: boolean,
  size: number,
  url?: ?string,
}

const Avatar = ({
  boxShadow,
  children,
  fullName,
  initials,
  secondary,
  size,
  url,
  ...styles
}: Props) => (
  isEmpty(url)
    ? (
      <Circle
        modifier={secondary === true ? 'secondary' : null}
        size={size}
        boxShadow={boxShadow}
      // $FlowFixMe: Dont want to limit styled-system props
        {...styles}
      >
        {isEmpty(initials) ? children : initials}
      </Circle>
    )
    : <PicAvatar size={size} src={url} alt={fullName} />
)


Avatar.displayName = 'Avatar'

Avatar.defaultProps = {
  boxShadow: undefined,
  children: undefined,
  secondary: false,
  url: '',
  fullName: '',
  initials: '',
}

export default Avatar