Skip to content

Latest commit

 

History

History
170 lines (131 loc) · 3.49 KB

CHAT-BOX.md

File metadata and controls

170 lines (131 loc) · 3.49 KB
Raw

The Chat Box

./src/js/components/chat-box/

Purpose

To display a chatbox. That is it.

Important Items

  • chat-box.jsx
  • contacts.jsx
  • conversations.jsx

ChatBox - chat-box.jsx

Purpose

The container component for all that happens in the displayed chat box.

Props

width

  • Required - false
  • Data Type - NUMBER
  • Functionality - A bootstrap 'col-md-' width class
  • Default - 3

border

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Does the component have a border or not.
  • Default - false

headerTheme

  • Required - false
  • Data Type - STRING
  • Functionality - The 6 bootstrap color class appended by 'box-'
  • Default - box-primary

notificationTheme

  • Required - false
  • Data Type - STRING
  • Functionality - A color class for the notification section.
  • Default - 'bg-light-blue'

chatTheme

  • Required - false
  • Data Type - STRING
  • Functionality - The 6 bootstrap color class appended by 'direct-chat-'
  • Default - 'direct-chat-primary'

buttonTheme

  • Required - false
  • Data Type - STRING
  • Functionality - The 6 bootstrap button color classes for the chat post button.
  • Default - 'btn-primary'

title

  • Required - false
  • Data Type - STRING || NUMBER
  • Functionality - The text in the title area of the chat box
  • Default - 'Chat Box'

notifications

  • Required - false
  • Data Type - STRING || NUMBER
  • Functionality - The notification, usually number of unread messages, displayed for the chat.
  • Default - 0

onSubmit

  • Required - false
  • Data Type - FUNCTION
  • Functionality - A function that can expect a message STRING parameter. Acts when the form submitted.
  • Default - () => {}

Takes Children

  • Expected Type - Element, Conversations, Contacts
  • Displays Inside - '.box-body'
  • Displays After - A notifications bar
  • Displays Before - A message form

Example

import ChatBox from './src/js/components/chat-box/chat-box.jsx';
import Contacts from './src/js/components/chat-box/contacts.jsx';
import Conversations from './src/js/components/chat-box/conversations.jsx';

<ChatBox
  width={3}
  buttonTheme="btn-primary btn-block"
  chatTheme="direct-chat-primary"
  headerTheme="box-primary"
  notificationTheme="bg-yellow"
  title="Direct Chat"
  notifications={2}
>
  <Conversations conversations={conversationData} />
  <Contacts contacts={contactMsgs} />
</ChatBox>

Contacts - contacts.jsx_

Purpose

A side-menu that lists all the contacts you have or can have conversations with.

Props

contacts

  • Required - false
  • Data Type - ARRAY
  • Functionality - The contact information to display in the component.
  • Expected Data - 
    const contactMsgs = [
  {
    name: 'El Jeffe',
    img: '',
    link: '#',
    onClick: () => { // Alternative for clicking the link },
    date: '10/31/2015',
    message: 'Groovey...'
  }
]

Conversations - conversations.jsx_

Purpose

The conversation data to display in the chatbox.

Props

conversations

  • Required - false
  • Data Type - ARRAY
  • Functionality - A list of message data to display in the currently open chat window.
  • Expected Data - 
    const conversationData = [
  {
    name: 'El Jeffe',
    img: '',
    date: '31 Oct 4:20 pm',
    message: "That is so groovey!"
  },
  {
    align: 'right',
    name: 'Brucey C',
    img: '',
    date: '31 Oct 4:25 pm',
    message: 'I know, right?'
  }
];