react chat window

Реакт-кат-ок

react-chat-window предоставляет интерком-подобное окно чата, которое можно легко включить в любой проект бесплатно. Он не обеспечивает никаких объектов обмена сообщениями, только компонент View.

Функции

• Настраиваемый
• Бэкэнд агностик
• Бесплатно

Демо

Оглавление

• Установка
• Пример
• Компоненты

Установка

 $ npm install react-chat-window

Пример

 import React , { Component } from 'react'
import { Launcher } from 'react-chat-window'

class Demo extends Component {

  constructor ( ) {
    super ( ) ;
    this . state = {
      messageList : [ ]
    } ;
  }

  _onMessageWasSent ( message ) {
    this . setState ( {
      messageList : [ ... this . state . messageList , message ]
    } )
  }

  _sendMessage ( text ) {
    if ( text . length > 0 ) {
      this . setState ( {
        messageList : [ ... this . state . messageList , {
          author : 'them' ,
          type : 'text' ,
          data : { text }
        } ]
      } )
    }
  }

  render ( ) {
    return ( < div >
      < Launcher
        agentProfile = { {
          teamName : 'react-chat-window' ,
          imageUrl : 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
        } }
        onMessageWasSent = { this . _onMessageWasSent . bind ( this ) }
        messageList = { this . state . messageList }
        showEmoji
      />
    </ div > )
  }
}

Более подробные примеры см. Демо -папку.

Компоненты

Пусковая установка

Launcher является единственным компонентом, необходимым для использования реактивного ката-окна. Это будет динамически отреагировать на изменения в сообщениях. Все новые сообщения должны быть добавлены с помощью изменения в реквизитах, как показано в примере.

Подтверждение пускового установки:

проп	тип	необходимый	описание
AgentProfile	объект	да	Представляет агента по обслуживанию клиентов вашего продукта или услуги. Поля: ImageUrl (String), TeamName (String).
Handleclick	функция	да	Перехватите событие Click на пусковой установке. Ни один аргумент отправляется, когда функция называется.
изопен	логический	да	Заставьте состояние открытого/закрытия окна чата. Если это не установлено, он откроется и закроется при нажатии.
Массагелист	[сообщение]	да	Массив объектов сообщений, которые будут представлены как разговор.
немой	логический	нет	Не воспроизводите звук для входящих сообщений. По умолчанию false .
Newmessagescount	число	нет	Количество новых сообщений. Если больше 0, это число будет отображаться в значке на пусковой установке. По умолчанию к 0 .
нафилс избрал	функция (FileList)	нет	Вызывается после того, как файл был выбран из диалога в окне чата.
Onmessagewassent	функция (сообщение)	да	Вызывается, когда отправляется сообщение, с объектом сообщения в качестве аргумента.
SHEHEMOJI	логический	нет	Чтобы показать кнопку смайликов в панели ввода. По умолчанию к true .

Объекты сообщения

Объекты сообщения визуализируются по -разному в зависимости от их типа. В настоящее время поддерживаются только текстовые, файлы и эмодзи. У каждого объекта сообщения есть поле author , которое может иметь значение «я» или «их».

 {
  author : 'them' ,
  type : 'text' ,
  data : {
    text : 'some text'
  }
}

{
  author : 'me' ,
  type : 'emoji' ,
  data : {
    code : 'someCode'
  }
}


{
  author : 'me' ,
  type : 'file' ,
  data : {
    url : 'somefile.mp3' ,
    fileName : 'Any old name'
  }
}

Объекты профиля агента

Похоже:

 {
  imageUrl : 'https://somewhere.on/the_web.png' ,
  teamName : 'Da best'
}