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'

成分

聊天项目
消息框
系统消息
消息列表
聊天列表
输入
按钮
弹出窗口
侧边栏
导航栏
下拉菜单
阿凡达
位置信息
Spotify消息
会议项目
会议列表
会议链接

聊天项目组件

聊天项目照片

 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 代表 dateString 或 timeagojs(now, date)
未读	0	整数	ChatItem 未读计数
单击时	没有任何	功能	单击时的聊天项目
上下文菜单	没有任何	功能	上下文菜单上的聊天项目
状态颜色	没有任何	颜色	ChatItem状态颜色
状态颜色类型	徽章	细绳	ChatItem 状态颜色类型（圆圈、徽章）
状态文本	没有任何	颜色	ChatItem 状态文本
延迟加载图像	没有任何	图像路径	延迟加载图像
静音	错误的	布尔值	聊天静音信息
显示静音	错误的	布尔值	聊天静音按钮可见性
显示视频通话	错误的	布尔值	聊天视频通话按钮可见性
点击静音	没有任何	功能	静音按钮
点击视频通话	没有任何	功能	视频通话按钮

消息框组件

文件	照片	文本	地点	视频	声音的

 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 ,
    } ,
  } }
/>

消息框道具

支柱	默认	类型	描述
ID	我（索引）	细绳	消息框 ID
位置	左边	细绳	消息框位置
类型	文本	细绳	消息类型（文本、照片、文件、位置、Spotify、视频、音频）
文本	没有任何	细绳	消息文本
标题	没有任何	细绳	消息标题
标题颜色	没有任何	字符串（颜色）	消息标题颜色
数据	{}	目的	消息数据
日期	新日期()	日期	消息日期
日期字符串	没有任何	细绳	message 代表 dateString 或 timeagojs(now, date)
单击时	没有任何	功能	单击消息（返回消息（对象））
打开时	没有任何	功能	打开时的消息（文件或照片）（返回消息（对象））
下载时	没有任何	功能	下载消息（文件或照片）（返回消息（对象））
加载时	没有任何	功能	加载照片时的消息
照片错误	没有任何	功能	关于错误照片的消息
点击标题	没有任何	功能	点击事件的消息标题
前进点击	没有任何	功能	单击事件时转发消息
回复点击	没有任何	功能	点击事件消息回复
会议消息点击	没有任何	功能	点击事件的会议消息
单击会议标题	没有任何	功能	点击事件上的会议标题消息
onMeetingVideoLinkClick	没有任何	功能	单击事件上的会议视频链接消息
点击回复消息	没有任何	功能	点击事件回复消息
单击删除消息时	没有任何	功能	单击事件时删除消息
会议更多选择	没有任何	功能	消息列表项 onMeetingMoreSelect 事件，获取 3 个参数：消息项、项索引、事件
会议链接点击	没有任何	功能	点击事件上的会议链接
上下文菜单	没有任何	功能	消息上下文菜单单击事件
转发的	没有任何	布尔值	消息转发图标
回复按钮	没有任何	布尔值	消息回复图标
删除按钮	没有任何	布尔值	消息删除图标
地位	没有任何	细绳	消息状态信息（等待、发送、已接收、已读）
缺口	真的	布尔值	消息框缺口
头像	没有任何	网址	消息框头像url
渲染添加Cmp	没有任何	功能（组件）	将自定义组件添加到消息框
可复制日期	错误的	布尔值	消息框日期文本可复制
重点	错误的	布尔值	用于MessageList组件中的消息焦点功能，使组件的样式成为焦点
消息聚焦	没有任何	功能	消息成为焦点后将焦点值设置为 false
回复	没有任何	目的	回复数据
撤回	没有任何	布尔值	消息被删除或撤回
转发消息文本	转发	细绳	转发的消息文本

回复消息组件

 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.' }
/>

回复消息

会议消息组件

 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 ( ) ,
            ] }
        } ,
        .
        .
        .
    ] } / >

会议留言道具

支柱	默认	类型	描述
主题	没有任何	细绳	会议留言
标题	没有任何	细绳	会议标题
日期	新日期()	日期	会议日期
折叠标题	没有任何	细绳	会议字幕
参与者	[]	大批	会议参与者阵列
更多项目	没有任何	大批	留言更多商品
数据源	[]	大批	会议列表数组
单击时	没有任何	功能	点击事件的会议消息（返回消息（对象））
单击会议标题	没有任何	功能	点击事件上的会议标题消息（返回消息（对象））
onMeetingVideoLinkClick	没有任何	功能	点击事件上的会议视频链接消息（返回消息（对象））
会议更多选择	没有任何	功能	消息列表项 onMeetingMoreSelect 事件，获取 3 个参数：消息项、项索引、事件

MeetingLink组件

会议链接照片

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

会议链接道具

支柱	默认	类型	描述
会议ID	没有任何	细绳	会议链接 ID
标题	没有任何	细绳	会议链接标题
会议链接点击	没有任何	功能	点击事件上的会议链接

系统消息组件

 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 ( ) ,
	    } ,
	    .
	    .
	    .
	] } />

消息列表道具

支柱	默认	类型	描述
参考	没有任何	目的	消息列表参考
类名	没有任何	细绳	可选消息列表类名
数据源	[]	大批	消息列表数组
可上锁的	错误的	布尔值	当数据源更改时它锁定滚动位置
到底部高度	300	int 或 string（仅“100%”）	当数据源更改时，如果 toBottomHeight 属性的值高于滚动条的底部值，滚动条将转到页面末尾的底部。如果 toBottomHeight 属性的值已设置'100%' ，则当数据源更改时，滚动条将转到页面末尾的底部。
单击时	没有任何	功能	单击时的消息列表项（返回消息（对象））
打开时	没有任何	功能	打开的消息列表项（文件或照片）（返回消息（对象））
下载时	没有任何	功能	下载消息列表项（文件或照片）（返回消息（对象））
滚动时	没有任何	功能	消息列表 onScroll 事件
前进点击	没有任何	功能	消息列表项 onForwardClick 事件
回复点击	没有任何	功能	消息列表项 onReplyClick 事件
点击回复消息	没有任何	功能	消息列表项 onReplyMessageClick 事件
向下按钮	真的	布尔值	消息列表滚动到底部按钮
向下按钮徽章	没有任何	布尔值	消息列表down按钮徽章内容
单击向下按钮	没有任何	功能	消息列表 onDownButtonClick
上下文菜单	没有任何	功能	消息列表项 onContextMenu 事件，获取 3 个参数：消息项、项索引、事件
照片错误	没有任何	功能	错误照片上的消息列表项

聊天列表组件

聊天列表照片

 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 ,
        } ,
        .
        .
        .
    ] } />

聊天列表道具

支柱	默认	类型	描述
类名	没有任何	细绳	可选的聊天列表类名
数据源	[]	大批	聊天列表数组
单击时	没有任何	功能	单击聊天列表项（返回聊天（对象））
上下文菜单	没有任何	功能	上下文菜单上的聊天列表项（返回聊天（对象））
头像错误	没有任何	功能	错误头像 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 函数
多行	错误的	布尔值	输入是文本区域
自动高度	真的	布尔值	输入自动高度
最小高度	25	整数	输入最小高度
最大高度	200	整数	输入最大高度
输入样式	没有任何	目的	输入样式对象
左按钮	没有任何	对象（组件）	左侧按钮组件
右键	没有任何	对象（组件）	右键组件
参考	没有任何	功能	输入或文本区域引用
最大长度	没有任何	整数	输入或文本区域最大长度
超过最大长度	没有任何	功能	当超过最大长度时调用
自动对焦	错误的	布尔值	输入自动对焦
价值	没有任何	细绳	输入值

按钮组件

 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' ,
    } ,
  ] }
/>

下拉道具

支柱	默认	类型	描述
动画类型	没有任何	细绳	淡出或默认
动画位置	西北	细绳	动画开始位置（西北、东北、西南、东南）
项目	没有任何	大批	下拉项目数组
选择时	没有任何	功能	选择项目
按钮道具	没有任何	目的	按钮属性

头像组件

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

头像道具

支柱	默认	类型	描述
源代码	没有任何	图像	图片源
替代	没有任何	细绳	图像替代说明
尺寸	默认	细绳	图像尺寸。默认 (25 像素)、x 小 (30 像素)、小 (35 像素)、中 (40 像素)、大 (45 像素)、x 大 (55 像素)
类型	默认	细绳	类型：默认、圆形、圆角（边框半径 5px）、柔性
信件项目	没有任何	目的	头像是一个字母
侧元素	没有任何	成分	头像侧面元素
错误时	没有任何	成分	头像img错误
延迟加载图像	没有任何	图像路径	延迟加载图像

位置消息组件

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

位置消息道具

支柱	默认	类型	描述
源代码	没有任何	图像	图片源
API密钥	没有任何	细绳	谷歌静态地图 API 密钥
飞涨	14	整数	谷歌静态地图缩放级别
标记颜色	红色的	细绳	谷歌静态地图标记颜色
数据	{}	目的	消息数据
目标	_空白的	细绳	对标签目标道具进行成像
打开时	没有任何	功能	打开图像

SpotifyMessage 组件

Spotify

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

SpotifyMessage 道具

支柱	默认	类型	描述
乌里	没有任何	乌里	Spotify URI
主题	黑色的	细绳	Spotify 主题颜色（黑色或白色）
看法	列表	细绳	Spotify 视图类型（列表或封面）
数据	{}	目的	消息数据
宽度	300	整数	Spotify 嵌入宽度
高度	380	整数	Spotify 嵌入高度

会议项目组件

会议照片

 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 代表 dateString 或 timeagojs(now, date)
延迟加载图像	没有任何	图像路径	延迟加载图像
可关闭的	真的	布尔值	会议项目可关闭
单击时	没有任何	功能	单击时的会议项目
会议点击	没有任何	功能	会议上的 MeetingItem 单击
分享点击	没有任何	功能	共享点击时的会议项目
单击关闭时	没有任何	功能	关闭单击时的 MeetingItem
头像	没有任何	日期	会议项目头像
头像限制	5	日期	会议项目头像限制
音频静音	真的	布尔值	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' ,
            } ]
        } ,
        .
        .
        .
    ] } />

会议列表道具

支柱	默认	类型	描述
类名	没有任何	细绳	可选的会议列表 className
数据源	[]	大批	会议列表数组
单击时	没有任何	功能	单击会议列表项（返回会议（对象））
会议点击	没有任何	功能	单击会议上的会议列表项（返回会议（对象））
分享点击	没有任何	功能	共享点击时的会议列表项（返回会议（对象））
单击关闭时	没有任何	功能	关闭单击时的会议列表项（返回会议（对象））
上下文菜单	没有任何	功能	上下文菜单上的会议列表项（返回会议（对象））
头像错误	没有任何	功能	错误头像 img 上的会议列表项
延迟加载图像	没有任何	图像路径	延迟加载图像

展开