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 上的會議清單項
延遲載入圖片	沒有任何	影像路徑	延遲載入圖片

展開