Sha256: bd9fa214cbae8cfcc228920b8d74e01309a1a036c937050f22a0bf9c5e3029ed

Contents?: true

Size: 1.2 KB

Versions: 1

Compression:

Stored size: 1.2 KB

Contents

/* @flow */

import React from 'react'
import { Avatar, Body, Caption } from '../'
import classnames from 'classnames'
import { spacing } from '../utilities/spacing.js'

type MessageProps = {
  avatarName?: String,
  avatarStatus?: String,
  avatarUrl?: String,
  label?: String,
  message: String,
  timestamp?: String,
}

const Message = (props: MessageProps) => {
  const {
    avatarName = '',
    avatarUrl = '',
    label = '',
    message = '',
    timestamp = '',
    avatarStatus = null,
  } = props
  const shouldDisplayAvatar = avatarUrl || avatarName
  const classes = shouldDisplayAvatar
    ? 'pb_message_kit_avatar'
    : 'pb_message_kit'

  return (
    <div className={classnames(classes, spacing(props))}>
      <If condition={shouldDisplayAvatar}>
        <Avatar
            imageUrl={avatarUrl}
            name={avatarName}
            size="sm"
            status={avatarStatus}
        />
      </If>
      <div className="content_wrapper">
        <If condition={label}>
          <Caption>{label}</Caption>
        </If>
        <Body>{message}</Body>
        <If condition={timestamp}>
          <Caption size="xs">{timestamp}</Caption>
        </If>
      </div>
    </div>
  )
}

export default Message

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
playbook_ui-4.17.0 app/pb_kits/playbook/pb_message/_message.jsx