react chat elements Télécharger - react chat elements Téléchargement du code source

réagir-chat-éléments

Éléments de discussion Reactjs

REMARQUE : ce package ne prend plus en charge React-Native.

Documentation complète , journal des modifications

Installer

 npm install react-chat-elements --save

Importations

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

Composants

ChatItem
Boîte de message
Message système
Liste de messages
Liste de discussion
Saisir
Bouton
Surgir
Barre latérale
Barre de navigation
Dérouler
Avatar
LocalisationMessage
Message Spotify
Élément de réunion
Liste des réunions
Lien de réunion

Composant ChatItem

chatitem-photo

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

Accessoires ChatItem

soutenir	défaut	taper	description
avatar	aucun	chaîne	URL de la photo de l'avatar de ChatItem
avatarFlexible	FAUX	booléen	photo d'avatar ChatItem flexible
alt	aucun	chaîne	Texte alternatif de la photo de l'avatar de ChatItem
titre	aucun	chaîne	Titre de l'élément de discussion
sous-titre	aucun	chaîne	Sous-titre du ChatItem
date	aucun	date	Date de l'élément de discussion
dateString	aucun	chaîne	ChatItem représente dateString ou timeagojs (maintenant, date)
non lu	0	int	Nombre d'éléments de chat non lus
surCliquez	aucun	fonction	ChatItem au clic
surMenuContexte	aucun	fonction	ChatItem dans le menu contextuel
statutCouleur	aucun	couleur	Couleur du statut du ChatItem
statutCouleurType	badge	chaîne	Type de couleur du statut ChatItem (encerclement, badge)
texte d'état	aucun	couleur	Texte d'état du ChatItem
paresseuxLoadingImage	aucun	chemin de l'image	image de chargement paresseux
en sourdine	FAUX	bouffon	informations sur le chat muet
afficherMuet	FAUX	bouffon	visibilité du bouton de sourdine du chat
showVidéoAppel	FAUX	bouffon	Visibilité du bouton d'appel vidéo de chat
surClickMute	aucun	fonction	bouton muet
surClickVideoCall	aucun	fonction	bouton d'appel vidéo

Composant MessageBox

déposer	photo	texte	emplacement	vidéo	audio

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

Accessoires MessageBox

soutenir	défaut	taper	description
identifiant	je (index)	chaîne	identifiant de la boîte de message
position	gauche	chaîne	position de la boîte de message
taper	texte	chaîne	type de message (texte, photo, fichier, emplacement, Spotify, vidéo, audio)
texte	aucun	chaîne	texte du message
titre	aucun	chaîne	titre du message
titreCouleur	aucun	chaîne (couleur)	couleur du titre du message
données	{}	objet	données de messages
date	nouvelle date()	Date	date du message
dateString	aucun	chaîne	le message représente dateString ou timeagojs (maintenant, date)
surCliquez	aucun	fonction	message au clic (le message (objet) est renvoyé)
surOuvert	aucun	fonction	message à l'ouverture (fichier ou photo) (le message (objet) est renvoyé)
enTéléchargement	aucun	fonction	message lors du téléchargement (fichier ou photo) (le message (objet) est renvoyé)
en chargement	aucun	fonction	message lors du chargement de la photo
surErreurPhoto	aucun	fonction	message sur la photo d'erreur
surTitreCliquez	aucun	fonction	titre du message lors de l'événement de clic
onForwardClick	aucun	fonction	transfert de message lors d'un événement de clic
surRéponseCliquez	aucun	fonction	réponse au message lors d'un événement de clic
surMeetingMessageClick	aucun	fonction	message de réunion lors d'un événement de clic
surMeetingTitleClick	aucun	fonction	message de titre de la réunion lors d'un événement de clic
onMeetingVideoLinkClick	aucun	fonction	message de lien vidéo de réunion lors d'un événement de clic
onReplyMessageClick	aucun	fonction	message de réponse lors d'un événement de clic
onRemoveMessageClick	aucun	fonction	message supprimé lors d'un événement de clic
onMeetingPlusSélectionner	aucun	fonction	élément de liste de messages, événement onMeetingMoreSelect, obtient 3 paramètres : élément de message, index de l'élément, événement
surMeetingLinkClick	aucun	fonction	lien de réunion sur l'événement click
surMenuContexte	aucun	fonction	message menu contextuel clic événement
transmis	aucun	booléen	icône de transfert de message
bouton de réponse	aucun	booléen	icône de réponse au message
Supprimer le bouton	aucun	booléen	icône de suppression de message
statut	aucun	chaîne	informations sur l'état du message (en attente, envoyé, reçu, lu)
entailler	vrai	booléen	encoche de la boîte de message
avatar	aucun	URL	URL de l'avatar de la boîte de message
renderAddCmp	aucun	fonction (composant)	ajout de composants personnalisés à la boîte de message
copiableDate	FAUX	booléen	boîte de message date texte copiable
se concentrer	FAUX	booléen	utilisé dans la fonctionnalité de focus de message dans le composant MessageList, rend le style du composant ciblé
onMessageFocused	aucun	fonction	rend la valeur du focus fausse une fois que le message devient le focus
répondre	aucun	objet	données de réponse
rétracté	aucun	booléen	message supprimé ou retiré
texte de message transféré	Transféré	chaîne	texte du message transféré

Composant de message de réponse

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

message de réponse

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

Accessoires MeetingMessage

soutenir	défaut	taper	description
sujet	aucun	chaîne	Message de réunion
titre	aucun	chaîne	Titre de la réunion
date	nouvelle date()	Date	Date de la réunion
RéduireTitre	aucun	chaîne	Sous-titre de la réunion
participants	[]	tableau	Tableau des participants à la réunion
plus d'articles	aucun	tableau	envoyer un message avec plus d'articles
Source de données	[]	tableau	tableau de liste de réunions
surCliquez	aucun	fonction	message de réunion lors d'un événement de clic (le message (objet) est renvoyé)
surMeetingTitleClick	aucun	fonction	message de titre de la réunion lors d'un événement de clic (le message (objet) est renvoyé)
onMeetingVideoLinkClick	aucun	fonction	message de lien vidéo de réunion lors d'un événement de clic (le message (objet) est renvoyé)
onMeetingPlusSélectionner	aucun	fonction	élément de liste de messages, événement onMeetingMoreSelect, obtient 3 paramètres : élément de message, index de l'élément, événement

Composant MeetingLink

réunionlien-photo

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

Accessoires MeetingLink

soutenir	défaut	taper	description
ID de réunion	aucun	chaîne	Identifiant du lien de réunion
titre	aucun	chaîne	Titre du lien de la réunion
surMeetingLinkClick	aucun	fonction	lien de réunion sur l'événement click

Composant SystemMessage

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

Accessoires SystemMessage

soutenir	défaut	taper	description
texte	aucun	chaîne	texte du message

Composant Liste de messages

liste de messages-photo

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

Accessoires de liste de messages

soutenir	défaut	taper	description
référence	aucun	objet	référence de la liste des messages
Nom de classe	aucun	chaîne	liste de messages facultative className
Source de données	[]	tableau	tableau de liste de messages
verrouillable	FAUX	booléen	Il se verrouille en position de défilement lorsque la source de données a été modifiée
vers la hauteur du bas	300	int ou string (seulement '100%)	Si la valeur de la propriété toBottomHeight est supérieure à la valeur inférieure de la barre de défilement lorsque la source de données a été modifiée, la barre de défilement va vers le bas à la fin de la page. Si la valeur de la propriété toBottomHeight a été définie sur « 100 % » , la barre de défilement va vers le bas à la fin de la page lorsque la source de données a été modifiée.
surCliquez	aucun	fonction	élément de la liste de messages lors d'un clic (le message (objet) est renvoyé)
surOuvert	aucun	fonction	élément de la liste de messages ouvert (fichier ou photo) (le message (objet) est renvoyé)
enTéléchargement	aucun	fonction	élément de la liste de messages lors du téléchargement (fichier ou photo) (le message (objet) est renvoyé)
surScroll	aucun	fonction	liste de messages événement onScroll
onForwardClick	aucun	fonction	élément de la liste de messages, événement onForwardClick
surRéponseCliquez	aucun	fonction	élément de la liste de messages, événement onReplyClick
onReplyMessageClick	aucun	fonction	élément de la liste de messages, événement onReplyMessageClick
bouton bas	vrai	booléen	liste de messages faire défiler vers le bas
downButtonBadge	aucun	booléen	liste de messages contenu du badge downButton
onDownButtonClick	aucun	fonction	liste de messages onDownButtonClick
surMenuContexte	aucun	fonction	élément de liste de messages, événement onContextMenu, obtient 3 paramètres : élément de message, index de l'élément, événement
surErreurPhoto	aucun	fonction	élément de la liste de messages sur la photo d'erreur

Composant ChatList

liste de discussion-photo

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

Accessoires de liste de discussion

soutenir	défaut	taper	description
Nom de classe	aucun	chaîne	liste de discussion facultative className
Source de données	[]	tableau	tableau de liste de discussion
surCliquez	aucun	fonction	élément de la liste de discussion lors d'un clic (le chat (objet) est renvoyé)
surMenuContexte	aucun	fonction	élément de liste de discussion dans le menu contextuel (le chat (objet) est renvoyé)
surAvatarErreur	aucun	fonction	Élément de liste de discussion sur l'avatar d'erreur img
paresseuxLoadingImage	aucun	chemin de l'image	image de chargement paresseux

Composant d'entrée

 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 ( )

Accessoires d'entrée

soutenir	défaut	taper	description
référence	aucun	objet	référence d'entrée
Nom de classe	aucun	chaîne	nom de classe d'entrée facultatif
espace réservé	aucun	chaîne	saisir du texte d'espace réservé
valeur par défaut	aucun	chaîne	saisir la valeur par défaut
surChange	aucun	fonction	fonction d'entrée onChange
multiligne	FAUX	bouffon	l'entrée est une zone de texte
hauteurauto	vrai	bouffon	saisir la hauteur automatique
minHauteur	25	int	hauteur minimale d'entrée
hauteurmax	200	int	hauteur maximale d'entrée
Style d'entrée	aucun	objet	Objet inputStyle
Boutons gauche	aucun	objet (composant)	composant des boutons gauche
Boutons droits	aucun	objet (composant)	composant des boutons droits
réf	aucun	fonction	entrée ou référence de zone de texte
longueur maximale	aucun	int	longueur maximale d'entrée ou de zone de texte
onMaxLengthExceed	aucun	fonction	appelé lorsque la longueur maximale dépasse
mise au point automatique	FAUX	bouffon	mise au point automatique d'entrée
valeur	aucun	chaîne	valeur d'entrée

Composant du bouton

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

Accessoires de boutons

soutenir	défaut	taper	description
taper	aucun	chaîne	type de bouton (avec contour, transparent)
désactivé	aucun	chaîne	le bouton est désactivé ?
texte	aucun	chaîne	texte du bouton
boutonRéf	aucun	fonction	réf. bouton
titre	aucun	chaîne	titre du bouton

Composant contextuel

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

Accessoires contextuels

soutenir	défaut	taper	description
montrer	FAUX	bouffon	pop-up visible
en-tête	aucun	chaîne	message de titre contextuel (en-tête)
en-têteBoutons	aucun	tableau	boutons de titre contextuel (en-tête)
texte	aucun	chaîne	message de contenu contextuel (au centre)
couleur	#333	chaîne (couleur)	couleur du message de contenu contextuel
boutons de pied de page	aucun	tableau	boutons de pied de page contextuels
En-tête de rendu	aucun	fonction (composant)	fonction d'en-tête de rendu
rendre le contenu	aucun	fonction (composant)	fonction de rendu du contenu
pied de page de rendu	aucun	fonction (composant)	fonction de rendu du pied de page

Composant de la barre latérale

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

Accessoires de la barre latérale

soutenir	défaut	taper	description
taper	lumière	chaîne	type de style de barre latérale (par exemple : clair, foncé)
haut	aucun	composant	composant supérieur de la barre latérale
centre	aucun	composant	composant central de la barre latérale
bas	aucun	composant	composant inférieur de la barre latérale

Composant de barre de navigation

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

Accessoires de barre de navigation

soutenir	défaut	taper	description
taper	lumière	chaîne	type de style de barre de navigation (par exemple : clair, foncé)
gauche	aucun	composant	composant gauche de la barre de navigation
centre	aucun	composant	composant central de la barre de navigation
droite	aucun	composant	composant droit de la barre de navigation

Composant déroulant

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

Accessoires de liste déroulante

soutenir	défaut	taper	description
Type d'animation	aucun	chaîne	fondu ou par défaut
animationPosition	nord-ouest	chaîne	position de départ de l'animation (nord-ouest, nord-est, sud-ouest, sud-est)
articles	aucun	tableau	tableau d'éléments déroulants
surSélectionner	aucun	fonction	élément sélectionné
boutonProps	aucun	objet	propriétés du bouton

Composant avatar

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

Accessoires d'avatar

soutenir	défaut	taper	description
src	aucun	image	image src
alt	aucun	chaîne	image, description alternative
taille	défaut	chaîne	taille de l'image. par défaut (25px), xsmall(30px), petit(35px), moyen(40px), grand(45px), xlarge (55px)
taper	défaut	chaîne	types : par défaut, cercle, arrondi (rayon de bordure 5 px), flexible
lettreArticle	aucun	objet	avatar pour être une lettre
élément latéral	aucun	composant	élément latéral de l'avatar
surErreur	aucun	composant	avatar img erreur
paresseuxLoadingImage	aucun	chemin de l'image	image de chargement paresseux

Composant LocationMessage

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

Accessoires LocationMessage

soutenir	défaut	taper	description
src	aucun	image	image src
Clé API	aucun	chaîne	Clé API Google Staticmap
zoom	14	int	niveau de zoom de la carte statique Google
Couleur du marqueur	rouge	chaîne	couleur du marqueur de carte statique Google
données	{}	objet	données de messages
cible	_vide	chaîne	imager un accessoire cible de balise
surOuvert	aucun	fonction	image ouverte

Composant SpotifyMessage

Spotify

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

Accessoires SpotifyMessage

soutenir	défaut	taper	description
uri	aucun	uri	Spotify Uri
thème	noir	chaîne	couleur du thème Spotify (noir ou blanc)
voir	liste	chaîne	type de vue Spotify (liste ou coverart)
données	{}	objet	données de messages
largeur	300	int	largeur d'intégration Spotify
hauteur	380	int	hauteur d'intégration Spotify

Composant MeetingItem

photo-de-réunion

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

Accessoires MeetingItem

soutenir	défaut	taper	description
sujet	aucun	chaîne	Sujet de l'élément de réunion
sujetLimite	60	int	Limite de texte du sujet MeetingItem
date	aucun	date	Date de l'élément de réunion
dateString	aucun	chaîne	MeetingItem représente dateString ou timeagojs (maintenant, date)
paresseuxLoadingImage	aucun	chemin de l'image	image de chargement paresseux
fermable	vrai	booléen	Élément de réunion fermable
surCliquez	aucun	fonction	MeetingItem en cliquant sur
surMeetingClick	aucun	fonction	MeetingItem lors du clic de la réunion
surPartagerCliquez	aucun	fonction	MeetingItem sur le clic de partage
surFermerCliquez	aucun	fonction	MeetingItem lors d'un clic de fermeture
avatars	aucun	date	Avatars d'éléments de réunion
avatarLimite	5	date	Limite des avatars MeetingItem
audio en sourdine	vrai	booléen	Audio de l'élément de réunion coupé
source audio	nul	chaîne	Source audio de l'élément de réunion

Composant MeetingList

meetingList-photo

réunionFermable

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

Accessoires de liste de réunions

soutenir	défaut	taper	description
Nom de classe	aucun	chaîne	liste de réunions facultative nom de classe
Source de données	[]	tableau	tableau de liste de réunions
surCliquez	aucun	fonction	élément de la liste de réunions en cliquant sur (la réunion (objet) est renvoyée)
surMeetingClick	aucun	fonction	élément de la liste de réunions lors d'un clic sur la réunion (la réunion (objet) est renvoyée)
surPartagerCliquez	aucun	fonction	élément de la liste de réunions lors d'un clic sur le partage (la réunion (objet) est renvoyée)
surFermerCliquez	aucun	fonction	élément de la liste de réunions lors d'un clic de fermeture (la réunion (objet) est renvoyée)
surMenuContexte	aucun	fonction	élément de la liste de réunions dans le menu contextuel (la réunion (objet) est renvoyée)
surAvatarErreur	aucun	fonction	Élément de la liste de réunions sur l'avatar d'erreur img
paresseuxLoadingImage	aucun	chemin de l'image	image de chargement paresseux

Développer