Скачать react chat elements - react chat elements Скачать исходный код

реагирующие чат-элементы

Элементы чата Reactjs

ПРИМЕЧАНИЕ. Этот пакет больше не поддерживает React-native.

Полная документация , журнал изменений

Установить

 npm install react-chat-elements --save

Импорт

 // RCE CSS
import 'react-chat-elements/dist/main.css'
// MessageBox component
import { MessageBox } from 'react-chat-elements'

Компоненты

ЧатЭлемент
окно сообщения
Системное сообщение
Список сообщений
Список чатов
Вход
Кнопка
Неожиданно возникнуть
Боковая панель
Навбар
Падать
Аватар
МестоположениеСообщение
SpotifyMessage
Элемент встречи
Список встреч
Ссылка на встречу

Компонент ChatItem

фото чатитема

 import { ChatItem } from 'react-chat-elements'
; < ChatItem
  avatar = { 'https://facebook.github.io/react/img/logo.svg' }
  alt = { 'Reactjs' }
  title = { 'Facebook' }
  subtitle = { 'What are you doing?' }
  date = { new Date ( ) }
  unread = { 0 }
/>

Реквизит ChatItem

опора	по умолчанию	тип	описание
аватар	никто	нить	URL-адрес фотографии аватара ChatItem
аватарГибкий	ЛОЖЬ	логическое значение	гибкое фото аватара ChatItem
альтернативный вариант	никто	нить	Альтернативный текст фотографии аватара ChatItem
заголовок	никто	нить	Название элемента чата
субтитры	никто	нить	Подзаголовок элемента чата
дата	никто	дата	Дата элемента чата
датаСтрока	никто	нить	ChatItem представляет dateString или timeagojs(сейчас, дата)
непрочитанный	0	интервал	Количество непрочитанных элементов ChatItem
onClick	никто	функция	ChatItem по клику
onContextMenu	никто	функция	ChatItem в контекстном меню
статусЦвет	никто	цвет	Цвет статуса ChatItem
статусколортипе	значок	нить	Цветовой тип статуса ChatItem (обвести, значок)
статустекст	никто	цвет	Текст статуса ChatItem
ленивая загрузка изображения	никто	путь к изображению	отложенная загрузка изображения
приглушенный	ЛОЖЬ	логическое значение	информация об отключении звука в чате
показатьMute	ЛОЖЬ	логическое значение	видимость кнопки отключения звука чата
показатьВидеоЗвонок	ЛОЖЬ	логическое значение	Видимость кнопки видеозвонка чата
onClickMute	никто	функция	кнопка отключения звука
onClickVideoCall	никто	функция	кнопка видеозвонка

Компонент MessageBox

файл	фото	текст	расположение	видео	аудио

 import { MessageBox } from 'react-chat-elements'
; < MessageBox
  position = { 'left' }
  type = { 'photo' }
  text = { 'react.svg' }
  data = { {
    uri : 'https://facebook.github.io/react/img/logo.svg' ,
    status : {
      click : false ,
      loading : 0 ,
    } ,
  } }
/>

Реквизит MessageBox

опора	по умолчанию	тип	описание
идентификатор	я (индекс)	нить	идентификатор окна сообщения
позиция	левый	нить	положение окна сообщения
тип	текст	нить	тип сообщения (текст, фото, файл, местоположение, Spotify, видео, аудио)
текст	никто	нить	текст сообщения
заголовок	никто	нить	заголовок сообщения
заголовокЦвет	никто	строка (цвет)	цвет заголовка сообщения
данные	{}	объект	данные сообщения
дата	новая дата()	Дата	дата сообщения
датаСтрока	никто	нить	сообщение представляет dateString или timeagojs(сейчас, дата)
onClick	никто	функция	сообщение при клике (возвращается сообщение (объект))
onOpen	никто	функция	сообщение об открытии (файла или фотографии) (возвращается сообщение (объект))
при загрузке	никто	функция	сообщение о загрузке (файла или фотографии) (возвращается сообщение (объект))
при загрузке	никто	функция	сообщение при загрузке фото
onPhotoError	никто	функция	сообщение об ошибке фото
onTitleClick	никто	функция	заголовок сообщения при событии клика
onForwardClick	никто	функция	пересылка сообщения по событию клика
onReplyClick	никто	функция	ответ на сообщение при событии клика
onMeetingMessageClick	никто	функция	сообщение о встрече по событию клика
onMeetingTitleClick	никто	функция	Сообщение заголовка собрания при событии клика
onMeetingVideoLinkНажмите	никто	функция	Сообщение со ссылкой на видео встречи при событии клика
onReplyMessageClick	никто	функция	ответное сообщение при событии клика
onRemoveMessageClick	никто	функция	удаление сообщения при событии клика
onMeetingMoreSelect	никто	функция	элемент списка сообщений onMeetingMoreSelect, получает 3 параметра: элемент сообщения, индекс элемента, событие
onMeetingLinkКликните	никто	функция	Ссылка на встречу по событию клика
onContextMenu	никто	функция	Событие щелчка контекстного меню сообщения
перенаправлено	никто	логическое значение	Значок пересылки сообщения
кнопка ответа	никто	логическое значение	значок ответа на сообщение
удалить кнопку	никто	логическое значение	значок удаления сообщения
статус	никто	нить	информация о статусе сообщения (ожидание, отправлено, получено, прочитано)
выемка	истинный	логическое значение	вырез в окне сообщений
аватар	никто	URL	URL аватара окна сообщений
рендерAddCmp	никто	функция (компонент)	добавление пользовательских компонентов в окно сообщения
копируемая дата	ЛОЖЬ	логическое значение	Текст даты в окне сообщения копируемый
сосредоточиться	ЛОЖЬ	логическое значение	используется в функции фокуса сообщения в компоненте MessageList, делает стиль компонента сфокусированным.
onMessageFocused	никто	функция	делает значение фокуса ложным после того, как сообщение становится фокусом
отвечать	никто	объект	данные ответа
убран	никто	логическое значение	сообщение удалено или отозвано
перенаправленоMessageText	Перенаправлено	нить	текст пересылаемого сообщения

Компонент ответного сообщения

 import { MessageBox } from 'react-chat-elements'
; < MessageBox
  reply = { {
    photoURL : 'https://facebook.github.io/react/img/logo.svg' ,
    title : 'elit magna' ,
    titleColor : '#8717ae' ,
    message : 'Aliqua amet incididunt id nostrud' ,
  } }
  onReplyMessageClick = { ( ) => console . log ( 'reply clicked!' ) }
  position = { 'left' }
  type = { 'text' }
  text = { 'Tempor duis do voluptate enim duis velit veniam aute ullamco dolore duis irure.' }
/>

ответное сообщение

Компонент MeetingMessage

 import { MeetingMessage } from 'react-chat-elements'

< MeetingMessage
    subject = { 'New Release' }
    title = { 'in ullamco' }
    date = { new Date ( ) }
    collapseTitle = { 'Commodo aliquip' }
    participants = { [
        {
            id : '1' ,
            title : 'Facebook' ,
        } ,
        .
        .
        .
    ] }
    dataSource = { [
        {
            id : '1' ,
            avatar : 'https://facebook.github.io/react/img/logo.svg' ,
            message : 'Lorem ipsum dolor sit amet.' ,
            title : 'Elit magna' ,
            avatarFlexible : true ,
            date : new Date ( ) ,
            event : { [
                title : 'Toplantı sona erdi!' ,
                avatars = { [
                    src : 'https://facebook.github.io/react/img/logo.svg'
                ] }
            ] }
            record : { [
                avatar : 'https://facebook.github.io/react/img/logo.svg' ,
                title : 'Arama' ,
                savedBy : 'Kaydeden: Elit magna' ,
                time : new Date ( ) ,
            ] }
        } ,
        .
        .
        .
    ] } / >

Реквизит сообщения о встрече

опора	по умолчанию	тип	описание
предмет	никто	нить	Сообщение о встрече
заголовок	никто	нить	Название встречи
дата	новая дата()	Дата	Дата встречи
свернутьЗаголовок	никто	нить	Подзаголовок встречи
участники	[]	множество	Массив участников собрания
больше предметов	никто	множество	отправить больше товаров
источник данных	[]	множество	массив списка встреч
onClick	никто	функция	сообщение о встрече по событию клика (возвращается сообщение (объект))
onMeetingTitleClick	никто	функция	Сообщение заголовка собрания при событии щелчка (возвращается сообщение (объект))
onMeetingVideoLinkНажмите	никто	функция	Сообщение о ссылке на видео собрания при событии щелчка (возвращается сообщение (объект))
onMeetingMoreSelect	никто	функция	элемент списка сообщений onMeetingMoreSelect, получает 3 параметра: элемент сообщения, индекс элемента, событие

Компонент MeetingLink

встречассылка-фото

 import { MeetingLink } from 'react-chat-elements'
; < MeetingLink meetingID = '1' title = 'Lorem ipsum dolor sit amet.' />

Реквизит MeetingLink

опора	по умолчанию	тип	описание
идентификатор встречи	никто	нить	Идентификатор ссылки на встречу
заголовок	никто	нить	Название ссылки на встречу
onMeetingLinkКликните	никто	функция	Ссылка на встречу по событию клика

Компонент SystemMessage

 import { SystemMessage } from 'react-chat-elements'
; < SystemMessage text = { 'End of conversation' } />

Реквизит системного сообщения

опора	по умолчанию	тип	описание
текст	никто	нить	текст сообщения

Компонент списка сообщений

список сообщений-фото

 import { MessageList } from 'react-chat-elements'
messageListReferance = React . createRef ( ) ;

< MessageList
	referance = { messageListReferance }
	className = 'message-list'
	lockable = { true }
	toBottomHeight = { '100%' }
	dataSource = { [
	    {
	        position : 'right' ,
	        type : 'text' ,
	        text : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit' ,
	        date : new Date ( ) ,
	    } ,
	    .
	    .
	    .
	] } />

Реквизит списка сообщений

опора	по умолчанию	тип	описание
ссылка	никто	объект	ссылка на список сообщений
имя класса	никто	нить	необязательный список сообщений className
источник данных	[]	множество	массив списка сообщений
запираемый	ЛОЖЬ	логическое значение	Он фиксируется для положения прокрутки, когда источник данных был изменен.
toBottomHeight	300	int или строка (только «100%»)	Если значение свойства toBottomHeight превышает нижнее значение полосы прокрутки при изменении источника данных. Полоса прокрутки опускается вниз в конце страницы. Если для свойства toBottomHeight установлено значение «100%» , полоса прокрутки перемещается вниз в конце страницы при изменении источника данных.
onClick	никто	функция	элемент списка сообщений при нажатии (возвращается сообщение (объект))
onOpen	никто	функция	элемент списка сообщений при открытии (файл или фотография) (возвращается сообщение (объект))
при загрузке	никто	функция	элемент списка сообщений при загрузке (файл или фотография) (возвращается сообщение (объект))
onScroll	никто	функция	список сообщений onScroll событие
onForwardClick	никто	функция	элемент списка сообщений при событии ForwardClick
onReplyClick	никто	функция	элемент списка сообщений при событии ReplyClick
onReplyMessageClick	никто	функция	элемент списка сообщений при событии ReplyMessageClick
кнопка вниз	истинный	логическое значение	кнопка прокрутки списка сообщений вниз
внизКнопкаЗначок	никто	логическое значение	список сообщений внизСодержимое значка кнопки
onDownButtonClick	никто	функция	список сообщений onDownButtonClick
onContextMenu	никто	функция	Событие элемента списка сообщений onContextMenu, получает 3 параметра: элемент сообщения, индекс элемента, событие
onPhotoError	никто	функция	элемент списка сообщений об ошибке фото

Компонент списка чатов

фото списка чата

 import { ChatList } from 'react-chat-elements'

< ChatList
    className = 'chat-list'
    dataSource = { [
        {
            avatar : 'https://facebook.github.io/react/img/logo.svg' ,
            alt : 'Reactjs' ,
            title : 'Facebook' ,
            subtitle : 'What are you doing?' ,
            date : new Date ( ) ,
            unread : 0 ,
        } ,
        .
        .
        .
    ] } />

Реквизит списка чата

опора	по умолчанию	тип	описание
имя класса	никто	нить	необязательный список чатов className
источник данных	[]	множество	массив списка чатов
onClick	никто	функция	элемент списка чата при нажатии (возвращается чат (объект))
onContextMenu	никто	функция	элемент списка чатов в контекстном меню (возвращается чат (объект))
onAvatarError	никто	функция	Элемент списка чата при ошибке аватара img
ленивая загрузка изображения	никто	путь к изображению	отложенная загрузка изображения

Входной компонент

 import { Input } from 'react-chat-elements'
inputReferance = React . createRef ( )
; < Input
  referance = { inputReferance }
  placeholder = 'Type here...'
  multiline = { true }
  value = { inputValue }
  rightButtons = { < Button color = 'white' backgroundColor = 'black' text = 'Send' /> }
/>

// Clear text, e.g.:

inputClear = ( ) => { }
// ...
; < Input clear = { clear => ( inputClear = clear ) } placeholder = 'Type here...' />
// ...
inputClear ( )

Входные реквизиты

опора	по умолчанию	тип	описание
ссылка	никто	объект	входная ссылка
имя класса	никто	нить	необязательное имя класса ввода
заполнитель	никто	нить	введите текст-заполнитель
значение по умолчанию	никто	нить	введите значение по умолчанию
onChange	никто	функция	функция ввода onChange
многострочный	ЛОЖЬ	логическое значение	ввод - это текстовая область
автовысота	истинный	логическое значение	ввод автоматической высоты
минВысота	25	интервал	введите минимальную высоту
МаксХайт	200	интервал	максимальная высота ввода
стиль ввода	никто	объект	объект inputStyle
левые кнопки	никто	объект (компонент)	компонент левой кнопки
правые кнопки	никто	объект (компонент)	компонент правых кнопок
ссылка	никто	функция	поле ввода или текстовое поле
максимальная длина	никто	интервал	максимальная длина ввода или текстовой области
onMaxLengthExceed	никто	функция	вызывается, когда максимальная длина превышает
автофокус	ЛОЖЬ	логическое значение	входной автофокус
ценить	никто	нить	входное значение

Компонент кнопки

 import { Button } from 'react-chat-elements'
; < Button text = { 'click me!' } />

Реквизит кнопки

опора	по умолчанию	тип	описание
тип	никто	нить	тип кнопки (контурная, прозрачная)
неполноценный	никто	нить	кнопка отключена?
текст	никто	нить	текст кнопки
кнопкаСсылка	никто	функция	ссылка на кнопку
заголовок	никто	нить	название кнопки

Всплывающий компонент

 import { Popup } from 'react-chat-elements'
; < Popup
  show = { this . state . show }
  header = 'Lorem ipsum dolor sit amet.'
  headerButtons = { [
    {
      type : 'transparent' ,
      color : 'black' ,
      text : 'close' ,
      onClick : ( ) => {
        this . setState ( { show : false } )
      } ,
    } ,
  ] }
  text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi veniam voluptas eius!'
  footerButtons = { [
    {
      color : 'white' ,
      backgroundColor : '#ff5e3e' ,
      text : 'Vazgeç' ,
    } ,
    {
      color : 'white' ,
      backgroundColor : 'lightgreen' ,
      text : 'Tamam' ,
    } ,
  ] }
/>

Всплывающие реквизиты

опора	по умолчанию	тип	описание
показывать	ЛОЖЬ	логическое значение	всплывающее окно видно
заголовок	никто	нить	всплывающее заголовок (заголовок) сообщение
заголовокКнопки	никто	множество	кнопки заголовка (заголовка) всплывающего окна
текст	никто	нить	всплывающее сообщение (в центре)
цвет	#333	строка (цвет)	Цвет всплывающего сообщения
нижний колонтитулКнопки	никто	множество	всплывающие кнопки нижнего колонтитула
рендерхедер	никто	функция (компонент)	функция рендеринга заголовка
рендерКонтент	никто	функция (компонент)	функция рендеринга контента
рендеринг нижнего колонтитула	никто	функция (компонент)	отобразить функцию нижнего колонтитула

Компонент боковой панели

 import { SideBar } from 'react-chat-elements'
; < SideBar top = { < div > 'TOP' area </ div > } center = { < div > 'CENTER' area </ div > } bottom = { < div > 'BOTTOM' area </ div > } />

Реквизит боковой панели

опора	по умолчанию	тип	описание
тип	свет	нить	тип стиля боковой панели (например: светлый, темный)
вершина	никто	компонент	верхний компонент боковой панели
центр	никто	компонент	центральный компонент боковой панели
нижний	никто	компонент	Нижний компонент боковой панели

Компонент навигационной панели

 import { Navbar } from 'react-chat-elements'
; < Navbar left = { < div > 'LEFT' area </ div > } center = { < div > 'CENTER' area </ div > } right = { < div > 'RIGHT' area </ div > } />

Реквизит навбара

опора	по умолчанию	тип	описание
тип	свет	нить	тип стиля панели навигации (например: светлый, темный)
левый	никто	компонент	Левый компонент навигационной панели
центр	никто	компонент	Компонент центра навигационной панели
верно	никто	компонент	Правый компонент навигационной панели

Раскрывающийся компонент

 import { Dropdown } from 'react-chat-elements'
; < Dropdown
  buttonProps = { {
    text : 'Dropdown' ,
  } }
  items = { [
    {
      icon : {
        component : icon ,
        float : 'left' ,
        color : 'red' ,
        size : 22 ,
      } ,
      text : 'lorem' ,
    } ,
    {
      icon : {
        component : icon ,
        float : 'left' ,
        color : 'purple' ,
        size : 22 ,
      } ,
      text : 'ipsum' ,
    } ,
    {
      text : 'dolor' ,
    } ,
  ] }
/>

Выпадающий реквизит

опора	по умолчанию	тип	описание
Тип анимации	никто	нить	исчезать или по умолчанию
анимацияПозиция	северо-запад	нить	начальная позиция анимации (северо-запад, северо-восток, юго-запад, юго-восток)
предметы	никто	множество	массив выпадающих элементов
onSelect	никто	функция	элемент на выбор
кнопкаРеквизит	никто	объект	свойства кнопки

Компонент Аватара

 import { Avatar } from 'react-chat-elements'
; < Avatar src = { 'https://facebook.github.io/react/img/logo.svg' } alt = { 'logo' } size = 'large' type = 'circle flexible' />

Аватар реквизит

опора	по умолчанию	тип	описание
источник	никто	изображение	источник изображения
альтернативный вариант	никто	нить	альтернативное описание изображения
размер	по умолчанию	нить	размер изображения. по умолчанию (25 пикселей), маленький (30 пикселей), маленький (35 пикселей), средний (40 пикселей), большой (45 пикселей), большой (55 пикселей)
тип	по умолчанию	нить	типы: по умолчанию, круг, закругленный (радиус границы 5 пикселей), гибкий
письмоПредмет	никто	объект	аватар будет буквой
боковойЭлемент	никто	компонент	Боковой элемент аватара
onError	никто	компонент	аватар img при ошибке
ленивая загрузка изображения	никто	путь к изображению	отложенная загрузка изображения

Компонент LocationMessage

 import { LocationMessage } from 'react-chat-elements'
; < LocationMessage
  data = { {
    latitude : '37.773972' ,
    longitude : '-122.431297' ,
    // staticURL: '<optional>',
    // mapURL: '<optional>'
  } }
/>

МестоположениеРеквизит сообщения

опора	по умолчанию	тип	описание
источник	никто	изображение	источник изображения
APIKey	никто	нить	Ключ API статической карты Google
масштабировать	14	интервал	уровень масштабирования статической карты Google
маркерЦвет	красный	нить	Цвет маркера статической карты Google
данные	{}	объект	данные сообщения
цель	_пустой	нить	изображение целевой опоры тега
onOpen	никто	функция	изображение в открытом состоянии

Компонент SpotifyMessage

обнаружить

 import { SpotifyMessage } from 'react-chat-elements'
; < SpotifyMessage theme = 'white' view = 'coverart' uri = { 'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf' } />

Реквизит SpotifyMessage

опора	по умолчанию	тип	описание
ури	никто	ури	Spotify Ури
тема	черный	нить	цвет темы Spotify (черный или белый)
вид	список	нить	Тип представления Spotify (список или обложка)
данные	{}	объект	данные сообщения
ширина	300	интервал	Spotify ширина вставки
высота	380	интервал	Высота вставки Spotify

Компонент MeetingItem

фото встречи

 import { MeetingItem } from 'react-chat-elements'
; < MeetingItem
  subject = { 'New Release!!!' }
  avatars = { [
    {
      src : 'https://facebook.github.io/react/img/logo.svg' ,
    } ,
  ] }
  onMeetingClick = { console . log }
  onShareClick = { console . log }
  onCloseClick = { console . log }
/>

Реквизит элемента встречи

опора	по умолчанию	тип	описание
предмет	никто	нить	Тема элемента встречи
Предел субъекта	60	интервал	Ограничение текста темы MeetingItem
дата	никто	дата	Дата встречи
датаСтрока	никто	нить	MeetingItem представляет dateString или timeagojs(сейчас, дата)
ленивая загрузка изображения	никто	путь к изображению	отложенная загрузка изображения
закрывающийся	истинный	логическое значение	Элемент встречи, закрывающийся
onClick	никто	функция	MeetingItem по клику
onMeetingClick	никто	функция	MeetingItem при нажатии на встречу
onShareClick	никто	функция	MeetingItem при нажатии кнопки «Поделиться»
onCloseClick	никто	функция	MeetingItem при закрытии щелчка
аватары	никто	дата	Аватары MeetingItem
аватарЛимит	5	дата	Ограничение количества аватаров MeetingItem
звук отключен	истинный	логическое значение	Звук MeetingItem отключен
аудиоисточник	нулевой	нить	Источник звука MeetingItem

Компонент списка совещаний

встречаСписок-фото

встречаЗакрываемая

 import { MeetingList } from 'react-chat-elements'

< MeetingList
    className = 'meeting-list'
    dataSource = { [
        {
            id : '1' ,
            subject : 'New Release' ,
            date : new Date ( ) ,
            avatars : [ {
               src : 'https://facebook.github.io/react/img/logo.svg' ,
            } ]
        } ,
        .
        .
        .
    ] } />

Реквизит списка встреч

опора	по умолчанию	тип	описание
имя класса	никто	нить	необязательное имя класса списка встреч
источник данных	[]	множество	массив списка встреч
onClick	никто	функция	элемент списка собраний при нажатии (возвращается собрание (объект))
onMeetingClick	никто	функция	Элемент списка собраний при нажатии на собрание (возвращается собрание (объект))
onShareClick	никто	функция	Элемент списка собраний при нажатии кнопки «Поделиться» (возвращается собрание (объект))
onCloseClick	никто	функция	Элемент списка собраний при закрытии щелчка (возвращается собрание (объект))
onContextMenu	никто	функция	элемент списка встреч в контекстном меню (возвращается встреча (объект))
onAvatarError	никто	функция	Элемент списка совещаний при ошибке аватара img
ленивая загрузка изображения	никто	путь к изображению	отложенная загрузка изображения

Расширять