From f4b11757048d47b20ba92ca77f75c398ad389e49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emre=20G=C3=BCd=C3=BCr?= Date: Tue, 26 Jan 2021 08:34:18 +0200 Subject: [PATCH 01/12] =?UTF-8?q?de=C4=9Fi=C5=9Fiklikler=20d=C3=BCzenlenec?= =?UTF-8?q?ek?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- android/.project | 17 ++++++++++++++ .../org.eclipse.buildship.core.prefs | 13 +++++++++++ android/app/.classpath | 6 +++++ android/app/.project | 23 +++++++++++++++++++ .../org.eclipse.buildship.core.prefs | 2 ++ example/App.js | 10 +++++--- src/AudioMessage/AudioMessage.css | 3 +++ src/AudioMessage/AudioMessage.js | 20 ++++++++++++++++ src/MessageBox/MessageBox.js | 7 +++++- src/index.js | 3 ++- 10 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 android/.project create mode 100644 android/.settings/org.eclipse.buildship.core.prefs create mode 100644 android/app/.classpath create mode 100644 android/app/.project create mode 100644 android/app/.settings/org.eclipse.buildship.core.prefs create mode 100644 src/AudioMessage/AudioMessage.css create mode 100644 src/AudioMessage/AudioMessage.js diff --git a/android/.project b/android/.project new file mode 100644 index 00000000..86783f61 --- /dev/null +++ b/android/.project @@ -0,0 +1,17 @@ + + + example + Project android_ created by Buildship. + + + + + org.eclipse.buildship.core.gradleprojectbuilder + + + + + + org.eclipse.buildship.core.gradleprojectnature + + diff --git a/android/.settings/org.eclipse.buildship.core.prefs b/android/.settings/org.eclipse.buildship.core.prefs new file mode 100644 index 00000000..164b8b39 --- /dev/null +++ b/android/.settings/org.eclipse.buildship.core.prefs @@ -0,0 +1,13 @@ +arguments= +auto.sync=false +build.scans.enabled=false +connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER) +connection.project.dir= +eclipse.preferences.version=1 +gradle.user.home= +java.home=C\:/Program Files (x86)/Java/jdk1.8.0_251 +jvm.arguments= +offline.mode=false +override.workspace.settings=true +show.console.view=true +show.executions.view=true diff --git a/android/app/.classpath b/android/app/.classpath new file mode 100644 index 00000000..689651e3 --- /dev/null +++ b/android/app/.classpath @@ -0,0 +1,6 @@ + + + + + + diff --git a/android/app/.project b/android/app/.project new file mode 100644 index 00000000..d1eb8cbc --- /dev/null +++ b/android/app/.project @@ -0,0 +1,23 @@ + + + app + Project app created by Buildship. + + + + + org.eclipse.jdt.core.javabuilder + + + + + org.eclipse.buildship.core.gradleprojectbuilder + + + + + + org.eclipse.jdt.core.javanature + org.eclipse.buildship.core.gradleprojectnature + + diff --git a/android/app/.settings/org.eclipse.buildship.core.prefs b/android/app/.settings/org.eclipse.buildship.core.prefs new file mode 100644 index 00000000..a7b84d92 --- /dev/null +++ b/android/app/.settings/org.eclipse.buildship.core.prefs @@ -0,0 +1,2 @@ +connection.project.dir=.. +eclipse.preferences.version=1 diff --git a/example/App.js b/example/App.js index cc4d1598..7e94db87 100644 --- a/example/App.js +++ b/example/App.js @@ -43,7 +43,7 @@ export class App extends Component { } UNSAFE_componentWillMount() { - this.addMessage(6) + this.addMessage(7) } getRandomColor() { @@ -56,7 +56,7 @@ export class App extends Component { } token() { - return (parseInt(Math.random() * 10 % 7)); + return (parseInt(Math.random() * 10 % 8)); } photo(size) { @@ -97,6 +97,9 @@ export class App extends Component { mtype = 'video'; status = 'sent'; break; + case 7: + mtype = 'audio'; + break; default: mtype = 'text'; status = 'read'; @@ -119,7 +122,7 @@ export class App extends Component { date: +new Date(), collapseTitle: loremIpsum({ count: 2, units: 'words' }), participants: Array(this.token() + 6).fill(1).map(x => ({ - id: parseInt(Math.random() * 10 % 6), + id: parseInt(Math.random() * 10 % 7), title: loremIpsum({ count: 1, units: 'words' }), })), dataSource: Array(this.token() + 5).fill(1).map(x => ({ @@ -153,6 +156,7 @@ export class App extends Component { text: mtype === 'spotify' ? 'spotify:track:0QjjaCaXE45mvhCnV3C0TA' : loremIpsum({ count: 1, units: 'sentences' }), data: { videoURL: this.token() >= 1 ? 'https://www.w3schools.com/html/mov_bbb.mp4' : 'http://www.exit109.com/~dnn/clips/RW20seconds_1.mp4', + audioURL: 'https://www.w3schools.com/html/horse.mp3', uri: `data:image/png;base64,${this.photo(150)}`, status: { click: true, diff --git a/src/AudioMessage/AudioMessage.css b/src/AudioMessage/AudioMessage.css new file mode 100644 index 00000000..1fef8ebd --- /dev/null +++ b/src/AudioMessage/AudioMessage.css @@ -0,0 +1,3 @@ +.rce-mbox-audio { + padding-bottom: 10px; +} diff --git a/src/AudioMessage/AudioMessage.js b/src/AudioMessage/AudioMessage.js new file mode 100644 index 00000000..9468e220 --- /dev/null +++ b/src/AudioMessage/AudioMessage.js @@ -0,0 +1,20 @@ +import React from 'react'; + +import './AudioMessage.css'; + +export default class AudioMessage extends React.PureComponent { + render() { + return ( +
+ +
+ ); + } +} + +AudioMessage.defaultProps = { + audioURL: null, +}; diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js index 76d830bf..59ef5a6e 100644 --- a/src/MessageBox/MessageBox.js +++ b/src/MessageBox/MessageBox.js @@ -9,6 +9,7 @@ import SpotifyMessage from '../SpotifyMessage/SpotifyMessage'; import ReplyMessage from '../ReplyMessage/ReplyMessage'; import MeetingMessage from '../MeetingMessage/MeetingMessage'; import VideoMessage from '../VideoMessage/VideoMessage'; +import AudioMessage from '../AudioMessage/AudioMessage'; import Avatar from '../Avatar/Avatar'; @@ -41,7 +42,7 @@ export class MessageBox extends React.PureComponent { render() { var positionCls = classNames('rce-mbox', { 'rce-mbox-right': this.props.position === 'right' }); - var thatAbsoluteTime = !/(text|video|file|meeting)/g.test(this.props.type) && !(this.props.type === 'location' && this.props.text); + var thatAbsoluteTime = !/(text|video|file|meeting|audio)/g.test(this.props.type) && !(this.props.type === 'location' && this.props.text); const dateText = this.props.date && !isNaN(this.props.date) && ( this.props.dateString || @@ -217,6 +218,10 @@ export class MessageBox extends React.PureComponent { onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick} onMeetingTitleClick={this.props.onMeetingTitleClick} /> } + { + this.props.type === 'audio' && + + }
Date: Wed, 27 Jan 2021 10:40:12 +0300 Subject: [PATCH 02/12] =?UTF-8?q?example=20d=C3=BCzenlemesi,=20audio=20mes?= =?UTF-8?q?sageye=20text=20verilebilmesi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 891 ++++++++++++++++++++++-------- src/AudioMessage/AudioMessage.css | 1 + src/AudioMessage/AudioMessage.js | 6 + src/MessageBox/MessageBox.js | 4 +- 4 files changed, 680 insertions(+), 222 deletions(-) diff --git a/README.md b/README.md index 507846d4..a5fb97b9 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ [![npm](https://img.shields.io/npm/dt/react-chat-elements.svg?label=npm-install&style=flat)]() [![Github pre-)release](https://img.shields.io/github/release-pre/Detaysoft/react-chat-elements.svg?style=flat)]() + # react-chat-elements + Reactjs chat elements ## Install @@ -9,6 +11,7 @@ npm install react-chat-elements --save ``` ### For React Native + Step 1: Install react-chat-elements ``` @@ -32,35 +35,57 @@ react-native link react-native-vector-icons *If you have any issues installing react-native-vector-icons, check out their installation guide [here](https://github.com/oblador/react-native-vector-icons#installation).* ### Imports + ```javascript // RCE CSS + import 'react-chat-elements/dist/main.css'; + // MessageBox component + import { MessageBox } from 'react-chat-elements'; ``` #### React Native + ```javascript // MessageBox component + import { MessageBox } from 'react-chat-elements/native'; ``` ## Components + 1. [ChatItem](#chatitem-component) + 2. [MessageBox](#messagebox-component) + 3. [SystemMessage](#systemmessage-component) + 4. [MessageList](#messagelist-component) + 5. [ChatList](#chatlist-component) + 6. [Input](#input-component) + 7. [Button](#button-component) + 8. [Popup](#popup-component) + 9. [SideBar](#sidebar-component) + 10. [Navbar](#navbar-component) + 11. [Dropdown](#dropdown-component) + 12. [Avatar](#avatar-component) + 13. [LocationMessage](#locationmessage-component) + 14. [SpotifyMessage](#spotifymessage-component) + 15. [MeetingItem](#meetingitem-component) + 16. [MeetingList](#meetinglist-component) ## ChatItem Component @@ -70,94 +95,163 @@ import { MessageBox } from 'react-chat-elements/native'; ```javascript import { ChatItem } from 'react-chat-elements' + + + +avatar={'https://facebook.github.io/react/img/logo.svg'} + +alt={'Reactjs'} + +title={'Facebook'} + +subtitle={'What are you doing?'} + +date={new Date()} + +unread={0} /> ``` + #### ChatItem props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | avatar | none | string | ChatItem avatar photo url | + | avatarFlexible | false | boolean | flexible ChatItem avatar photo | + | alt | none | string | ChatItem avatar photo alt text | + | title | none | string | ChatItem title | + | subtitle | none | string | ChatItem subtitle | + | date | none | date | ChatItem date | + | dateString | none | string | ChatItem represents dateString or timeagojs(now, date) | + | unread | 0 | int | ChatItem unread count | + | onClick | none | function | ChatItem on click | + | onContextMenu | none | function | ChatItem on context menu | + | statusColor | none | color | ChatItem status color | + | statusColorType | badge | string | ChatItem status color type (encircle, badge) | -| statusText | none | color | ChatItem status text | -| lazyLoadingImage | none | image path | lazy loading image | +| statusText | none | color | ChatItem status text | +| lazyLoadingImage | none | image path | lazy loading image | ## MessageBox Component -| file | photo | text | location | video | +| file | photo | text | location | video | audio | + | ---- | ---- | ---- | ---- | ---- | -| ![file-message](https://user-images.githubusercontent.com/15075759/29243524-786baf8c-7fa9-11e7-92b2-3960cc34fcf4.png) | ![photo-message](https://user-images.githubusercontent.com/15075759/29243556-1368c4e8-7faa-11e7-9fdd-57b67542c381.png) | ![text-message](https://user-images.githubusercontent.com/15075759/29243573-a809456e-7faa-11e7-97b4-d258bc6a7728.png) | ![location-message](https://user-images.githubusercontent.com/15075759/30582943-2b3338aa-9d2e-11e7-93d5-8614563b9217.png) | ![](https://user-images.githubusercontent.com/15075759/98530021-74ca1300-228f-11eb-88ab-5ae5ae33616d.png) +| ![file-message](https://user-images.githubusercontent.com/15075759/29243524-786baf8c-7fa9-11e7-92b2-3960cc34fcf4.png) | ![photo-message](https://user-images.githubusercontent.com/15075759/29243556-1368c4e8-7faa-11e7-9fdd-57b67542c381.png) | ![text-message](https://user-images.githubusercontent.com/15075759/29243573-a809456e-7faa-11e7-97b4-d258bc6a7728.png) | ![location-message](https://user-images.githubusercontent.com/15075759/30582943-2b3338aa-9d2e-11e7-93d5-8614563b9217.png) | ![](https://user-images.githubusercontent.com/15075759/98530021-74ca1300-228f-11eb-88ab-5ae5ae33616d.png) ```javascript import { MessageBox } from 'react-chat-elements' + + + +position={'left'} + +type={'photo'} + +text={'react.svg'} + +data={{ + +uri: 'https://facebook.github.io/react/img/logo.svg', + +status: { + +click: false, + +loading: 0, + +} + +}}/> ``` #### MessageBox props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | id | i (index) | string | message box id | + | position | left | string | message box position | -| type | text | string | message type (text, photo, file, location, spotify, video) | + +| type | text | string | message type (text, photo, file, location, spotify, video, audio) | + | text | none | string | message text | + | title | none | string | message title | + | titleColor | none | string(color) | message title color | + | data | {} | object | message data | + | date | new Date() | Date | message date | + | dateString | none | string | message represents dateString or timeagojs(now, date) | + | onClick | none | function | message on click (message(object) is returned) | + | onOpen | none | function | message on open (file or photo) (message(object) is returned) | + | onDownload | none | function | message on download (file or photo) (message(object) is returned) | + | onLoad | none | function | message on load photo | + | onPhotoError | none | function | message on error photo | + | onTitleClick | none | function | message title on click event | + | onForwardClick | none | function | message forward on click event | + | onReplyClick | none | function | message reply on click event | + | onMeetingMessageClick | none | function | meeting message on click event | + | onMeetingTitleClick | none | function | meeting title message on click event | + | onMeetingVideoLinkClick | none | function | meeting video link message on click event | + | onReplyMessageClick | none | function | reply message on click event | + | onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event | + | onContextMenu | none | function | message contextmenu click event | + | forwarded | none | boolean | message forward icon | + | replyButton | none | boolean | message reply icon | + | status | none | string | message status info (waiting, sent, received, read) | + | notch | true | boolean | message box notch | + | avatar | none | url | message box avatar url | + | renderAddCmp | none | function (component) | adding custom components to message box | + | copiableDate | false | boolean | message box date text copiable | + | focus | false | boolean | used in message focus feature in MessageList component, makes style of the component focused | + | onMessageFocused | none | function | makes focus value false after the message becomes focus | + | reply | none | object | reply data | ## Reply Message Component @@ -165,82 +259,145 @@ import { MessageBox } from 'react-chat-elements' ```javascript import { MessageBox } from 'react-chat-elements' + + console.log('reply clicked!')} - position={'left'} - type={'text'} - text={'Tempor duis do voluptate enim duis velit veniam aute ullamco dolore duis irure.'}/> + +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.'}/> ``` ![reply-message](https://user-images.githubusercontent.com/15075759/80224625-9dbbeb00-8652-11ea-994f-022be0cffe30.png) - ## MeetingMessage Component ```javascript import { MeetingMessage } from 'react-chat-elements' + + + +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(), + +]} + +}, + +. + +. + +. + +]} /> ``` #### MeetingMessage props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | subject | none | string | Meeting messagee | + | title | none | string | Meeting title | + | date | new Date() | Date | Meeting date | + | collapseTitle | none | string | Meeting subtitle | + | participants | [] | array | Meeting participant array | + | moreItems | none | array | message more items | + | dataSource | [] | array | meeting list array | + | onClick | none | function | meeting message on click event (message(object) is returned) | + | onMeetingTitleClick | none | function | meeting title message on click event (message(object) is returned) | + | onMeetingVideoLinkClick | none | function | meeting video link message on click event (message(object) is returned) | + | onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event | ## SystemMessage Component @@ -248,16 +405,20 @@ import { MeetingMessage } from 'react-chat-elements' ```javascript import { SystemMessage } from 'react-chat-elements' + + + +text={'End of conversation'}/> ``` #### SystemMessage props | prop | default | type | description | + | ---- | ---- | ---- | ---- | -| text| none | string | message text | +| text| none | string | message text | ## MessageList Component @@ -266,42 +427,75 @@ import { SystemMessage } from 'react-chat-elements' ```javascript import { MessageList } from 'react-chat-elements' + + + +className='message-list' + +lockable={true} + +toBottomHeight={'100%'} + +dataSource={[ + +{ + +position: 'right', + +type: 'text', + +text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', + +date: new Date(), + +}, + +. + +. + +. + +]} /> ``` #### MessageList props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | className | none | string | optional message list className | + | dataSource | [] | array | message list array | + | lockable | false | boolean | It locks to scroll position when the dataSource has been changed | + | toBottomHeight | 300 | int or string(only '100%') | If the toBottomHeight property's value higher than bottom value of the scrollbar when the data source has been changed Scrollbar goes to bottom at the end of the page. If the toBottomHeight property's value has been set **'100%'**, scrollbar goes to bottom at the end of the page when the data source has been changed. | + | onClick | none | function | message list item on click (message(object) is returned) | + | onOpen | none | function | message list item on open (file or photo) (message(object) is returned) | + | onDownload | none | function | message list item on download (file or photo) (message(object) is returned) | + | onScroll | none | function | message list onScroll event | + | onForwardClick | none | function | message list item onForwardClick event | + | onReplyClick | none | function | message list item onReplyClick event | + | onReplyMessageClick | none | function | message list item onReplyMessageClick event | + | downButton | true | boolean | message list scroll to bottom button | + | downButtonBadge | none | boolean | message list downButton badge content | + | onDownButtonClick | none | function | message list onDownButtonClick | + | onContextMenu | none | function | message list item onContextMenu event, gets 3 parameters: message item, index of item, event | + | onPhotoError | none | function | message list item on error photo | ## ChatList Component @@ -311,32 +505,55 @@ import { MessageList } from 'react-chat-elements' ```javascript import { ChatList } from 'react-chat-elements' + + + +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, + +}, + +. + +. + +. + +]} /> ``` #### ChatList props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | className | none | string | optional chat list className | + | dataSource | [] | array | chat list array | + | onClick | none | function | chat list item on click (chat(object) is returned) | + | onContextMenu | none | function | chat list item on context menu (chat(object) is returned) | + | onAvatarError | none | function | chat list item on error avatar img | + | lazyLoadingImage | none | image path | lazy loading image | ## Input Component @@ -344,66 +561,111 @@ import { ChatList } from 'react-chat-elements' ```javascript import { Input } from 'react-chat-elements' + + - }/> + +placeholder="Type here..." + +multiline={true} + +rightButtons={ + +
- } - center={ -
'CENTER' area
- } - bottom={ -
'BOTTOM' area
- }/> + +top={ + +
'TOP' area
+ +} + +center={ + +
'CENTER' area
+ +} + +bottom={ + +
'BOTTOM' area
+ +}/> ``` #### SideBar props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | type | light | string | sidebar style type (eg: light, dark) | + | top | none | component | sidebar top component | + | center | none | component | sidebar center component | -| bottom | none | component | sidebar bottom component | +| bottom | none | component | sidebar bottom component | ## Navbar Component ```javascript import { Navbar } from 'react-chat-elements' + + 'LEFT' area - } - center={ -
'CENTER' area
- } - right={ -
'RIGHT' area
- }/> + +left={ + +
'LEFT' area
+ +} + +center={ + +
'CENTER' area
+ +} + +right={ + +
'RIGHT' area
+ +}/> ``` #### Navbar props | prop | default | type | description | + | ---- | ---- | ---- | ---- | -| type | light | string | navbar style type (eg: light, dark) | + +| type | light | string | navbar style type (eg: light, dark) | + | left | none | component | navbar left component | + | center | none | component | navbar center component | + | right | none | component | navbar right component | ## Dropdown Component @@ -506,124 +831,196 @@ import { Navbar } from 'react-chat-elements' ```javascript import { Dropdown } from 'react-chat-elements' + + + +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' + +}, + +]}/> ``` #### Dropdown props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | animationType | none | string | fade or default | + | animationPosition | nortwest | string | animation start position (nortwest, norteast, southwest, southeast) | + | items | none | array | dropdown items array | + | onSelect | none | function | item on select | -| buttonProps | none | object | button properties | +| buttonProps | none | object | button properties | ## Avatar Component ```javascript import { Avatar } from 'react-chat-elements' + + + +src={'https://facebook.github.io/react/img/logo.svg'} + +alt={'logo'} + +size="large" + +type="circle flexible"/> ``` #### Avatar props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | src | none | image | image src | + | alt | none | string | image alt description | + | size | default | string | image size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px) | + | type | default | string | types: default, circle, rounded(border radius 5px), flexible | + | letterItem | none | object | avatar to be a letter | + | sideElement | none | component | avatar side element | + | onError | none | component | avatar img onerror | -| lazyLoadingImage | none | image path | lazy loading image | +| lazyLoadingImage | none | image path | lazy loading image | ## LocationMessage Component ```javascript import { LocationMessage } from 'react-chat-elements' + + ', - // mapURL: '' - }}/> + +data={{ + +latitude: '37.773972', + +longitude: '-122.431297', + +// staticURL: '', + +// mapURL: '' + +}}/> ``` #### LocationMessage props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | src | none | image | image src | + | apiKey | none | string | google staticmap api key | + | zoom | 14 | int | google staticmap zoom level | + | markerColor | red | string | google staticmap marker color | + | data | {} | object | message data | + | target | _blank | string | image a tag target prop | -| onOpen | none | function | image on open | +| onOpen | none | function | image on open | ## SpotifyMessage Component ![spotify](https://user-images.githubusercontent.com/15075759/31466094-ad5852b8-aede-11e7-91bc-8a29e7427552.png) - ```javascript import { SpotifyMessage } from 'react-chat-elements' + + + +theme='white' + +view='coverart' + +uri={'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf'}/> ``` #### SpotifyMessage props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | uri | none | uri | spotify uri | + | theme | black | string | spotify theme color (black or white) | + | view | list | string | spotify view type (list or coverart) | + | data | {} | object | message data | + | width | 300 | int | spotify embed width | -| height | 380 | int | spotify embed height | +| height | 380 | int | spotify embed height | ## MeetingItem Component @@ -632,36 +1029,62 @@ import { SpotifyMessage } from 'react-chat-elements' ```javascript import { MeetingItem } from 'react-chat-elements' + + + +subject={'New Release!!!'} + +avatars={[ + +{ + +src: 'https://facebook.github.io/react/img/logo.svg' + +} + +]} + +onMeetingClick={console.log} + +onShareClick={console.log} + +onCloseClick={console.log}/> ``` + #### MeetingItem props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | subject | none | string | MeetingItem subject | + | subjectLimit | 60 | int | MeetingItem subject text limit | + | date | none | date | MeetingItem date | + | dateString | none | string | MeetingItem represents dateString or timeagojs(now, date) | + | lazyLoadingImage | none | image path | lazy loading image | + | closable | true | boolean | MeetingItem closable | + | onClick | none | function | MeetingItem on click | + | onMeetingClick | none | function | MeetingItem on meeting click | + | onShareClick | none | function | MeetingItem on share click | + | onCloseClick | none | function | MeetingItem on close click | + | avatars | none | date | MeetingItem avatars | + | avatarLimit | 5 | date | MeetingItem avatars limit | + | audioMuted| true | boolean | MeetingItem audio muted | -| audioSource| null | string | MeetingItem audio source | +| audioSource| null | string | MeetingItem audio source | ## MeetingList Component @@ -672,33 +1095,59 @@ import { MeetingItem } from 'react-chat-elements' ```javascript import { MeetingList } from 'react-chat-elements' + + + +className='meeting-list' + +dataSource={[ + +{ + +id: '1', + +subject: 'New Release', + +date: new Date(), + +avatars: [{ + +src: 'https://facebook.github.io/react/img/logo.svg', + +}] + +}, + +. + +. + +. + +]} /> ``` #### MeetingList props | prop | default | type | description | + | ---- | ---- | ---- | ---- | + | className | none | string | optional meeting list className | + | dataSource | [] | array | meeting list array | + | onClick | none | function | meeting list item on click (meeting(object) is returned) | + | onMeetingClick | none | function | meeting list item on meeting click (meeting(object) is returned) | + | onShareClick | none | function | meeting list item on share click (meeting(object) is returned) | + | onCloseClick | none | function | meeting list item on close click (meeting(object) is returned) | + | onContextMenu | none | function | meeting list item on context menu (meeting(object) is returned) | + | onAvatarError | none | function | meeting list item on error avatar img | -| lazyLoadingImage | none | image path | lazy loading image | \ No newline at end of file + +| lazyLoadingImage | none | image path | lazy loading image | diff --git a/src/AudioMessage/AudioMessage.css b/src/AudioMessage/AudioMessage.css index 1fef8ebd..78e50387 100644 --- a/src/AudioMessage/AudioMessage.css +++ b/src/AudioMessage/AudioMessage.css @@ -1,3 +1,4 @@ .rce-mbox-audio { padding-bottom: 10px; + max-width: 300px; } diff --git a/src/AudioMessage/AudioMessage.js b/src/AudioMessage/AudioMessage.js index 9468e220..febcbdba 100644 --- a/src/AudioMessage/AudioMessage.js +++ b/src/AudioMessage/AudioMessage.js @@ -10,6 +10,12 @@ export default class AudioMessage extends React.PureComponent { Your browser does not support the audio element. + { + this.props.text && +
+ {this.props.text} +
+ } ); } diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js index 59ef5a6e..071a9902 100644 --- a/src/MessageBox/MessageBox.js +++ b/src/MessageBox/MessageBox.js @@ -220,7 +220,9 @@ export class MessageBox extends React.PureComponent { } { this.props.type === 'audio' && - + }
Date: Wed, 27 Jan 2021 11:00:52 +0300 Subject: [PATCH 03/12] =?UTF-8?q?README.md=20d=C3=BCzenlemesi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 890 ++++++++++++++---------------------------------------- 1 file changed, 221 insertions(+), 669 deletions(-) diff --git a/README.md b/README.md index a5fb97b9..9706bb34 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ [![npm](https://img.shields.io/npm/dt/react-chat-elements.svg?label=npm-install&style=flat)]() [![Github pre-)release](https://img.shields.io/github/release-pre/Detaysoft/react-chat-elements.svg?style=flat)]() - # react-chat-elements - Reactjs chat elements ## Install @@ -11,7 +9,6 @@ npm install react-chat-elements --save ``` ### For React Native - Step 1: Install react-chat-elements ``` @@ -35,57 +32,35 @@ react-native link react-native-vector-icons *If you have any issues installing react-native-vector-icons, check out their installation guide [here](https://github.com/oblador/react-native-vector-icons#installation).* ### Imports - ```javascript // RCE CSS - import 'react-chat-elements/dist/main.css'; - // MessageBox component - import { MessageBox } from 'react-chat-elements'; ``` #### React Native - ```javascript // MessageBox component - import { MessageBox } from 'react-chat-elements/native'; ``` ## Components - 1. [ChatItem](#chatitem-component) - 2. [MessageBox](#messagebox-component) - 3. [SystemMessage](#systemmessage-component) - 4. [MessageList](#messagelist-component) - 5. [ChatList](#chatlist-component) - 6. [Input](#input-component) - 7. [Button](#button-component) - 8. [Popup](#popup-component) - 9. [SideBar](#sidebar-component) - 10. [Navbar](#navbar-component) - 11. [Dropdown](#dropdown-component) - 12. [Avatar](#avatar-component) - 13. [LocationMessage](#locationmessage-component) - 14. [SpotifyMessage](#spotifymessage-component) - 15. [MeetingItem](#meetingitem-component) - 16. [MeetingList](#meetinglist-component) ## ChatItem Component @@ -95,163 +70,95 @@ import { MessageBox } from 'react-chat-elements/native'; ```javascript import { ChatItem } from 'react-chat-elements' - - + avatar={'https://facebook.github.io/react/img/logo.svg'} + alt={'Reactjs'} + title={'Facebook'} + subtitle={'What are you doing?'} + date={new Date()} + unread={0} /> ``` - #### ChatItem props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | avatar | none | string | ChatItem avatar photo url | - | avatarFlexible | false | boolean | flexible ChatItem avatar photo | - | alt | none | string | ChatItem avatar photo alt text | - | title | none | string | ChatItem title | - | subtitle | none | string | ChatItem subtitle | - | date | none | date | ChatItem date | - | dateString | none | string | ChatItem represents dateString or timeagojs(now, date) | - | unread | 0 | int | ChatItem unread count | - | onClick | none | function | ChatItem on click | - | onContextMenu | none | function | ChatItem on context menu | - | statusColor | none | color | ChatItem status color | - | statusColorType | badge | string | ChatItem status color type (encircle, badge) | - | statusText | none | color | ChatItem status text | - | lazyLoadingImage | none | image path | lazy loading image | + + ## MessageBox Component | file | photo | text | location | video | audio | - | ---- | ---- | ---- | ---- | ---- | +| ![file-message](https://user-images.githubusercontent.com/15075759/29243524-786baf8c-7fa9-11e7-92b2-3960cc34fcf4.png) | ![photo-message](https://user-images.githubusercontent.com/15075759/29243556-1368c4e8-7faa-11e7-9fdd-57b67542c381.png) | ![text-message](https://user-images.githubusercontent.com/15075759/29243573-a809456e-7faa-11e7-97b4-d258bc6a7728.png) | ![location-message](https://user-images.githubusercontent.com/15075759/30582943-2b3338aa-9d2e-11e7-93d5-8614563b9217.png) | ![](https://user-images.githubusercontent.com/15075759/98530021-74ca1300-228f-11eb-88ab-5ae5ae33616d.png) | ![] +(https://user-images.githubusercontent.com/41473129/105960654-98327c00-608e-11eb-9ac4-5b014974b87c.png) -| ![file-message](https://user-images.githubusercontent.com/15075759/29243524-786baf8c-7fa9-11e7-92b2-3960cc34fcf4.png) | ![photo-message](https://user-images.githubusercontent.com/15075759/29243556-1368c4e8-7faa-11e7-9fdd-57b67542c381.png) | ![text-message](https://user-images.githubusercontent.com/15075759/29243573-a809456e-7faa-11e7-97b4-d258bc6a7728.png) | ![location-message](https://user-images.githubusercontent.com/15075759/30582943-2b3338aa-9d2e-11e7-93d5-8614563b9217.png) | ![](https://user-images.githubusercontent.com/15075759/98530021-74ca1300-228f-11eb-88ab-5ae5ae33616d.png) ```javascript import { MessageBox } from 'react-chat-elements' - - + position={'left'} + type={'photo'} + text={'react.svg'} + data={{ + uri: 'https://facebook.github.io/react/img/logo.svg', + status: { + click: false, + loading: 0, + } + }}/> ``` #### MessageBox props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | id | i (index) | string | message box id | - | position | left | string | message box position | - -| type | text | string | message type (text, photo, file, location, spotify, video, audio) | - +| type | text | string | message type (text, photo, file, location, spotify, video) | | text | none | string | message text | - | title | none | string | message title | - | titleColor | none | string(color) | message title color | - | data | {} | object | message data | - | date | new Date() | Date | message date | - | dateString | none | string | message represents dateString or timeagojs(now, date) | - | onClick | none | function | message on click (message(object) is returned) | - | onOpen | none | function | message on open (file or photo) (message(object) is returned) | - | onDownload | none | function | message on download (file or photo) (message(object) is returned) | - | onLoad | none | function | message on load photo | - | onPhotoError | none | function | message on error photo | - | onTitleClick | none | function | message title on click event | - | onForwardClick | none | function | message forward on click event | - | onReplyClick | none | function | message reply on click event | - | onMeetingMessageClick | none | function | meeting message on click event | - | onMeetingTitleClick | none | function | meeting title message on click event | - | onMeetingVideoLinkClick | none | function | meeting video link message on click event | - | onReplyMessageClick | none | function | reply message on click event | - | onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event | - | onContextMenu | none | function | message contextmenu click event | - | forwarded | none | boolean | message forward icon | - | replyButton | none | boolean | message reply icon | - | status | none | string | message status info (waiting, sent, received, read) | - | notch | true | boolean | message box notch | - | avatar | none | url | message box avatar url | - | renderAddCmp | none | function (component) | adding custom components to message box | - | copiableDate | false | boolean | message box date text copiable | - | focus | false | boolean | used in message focus feature in MessageList component, makes style of the component focused | - | onMessageFocused | none | function | makes focus value false after the message becomes focus | - | reply | none | object | reply data | ## Reply Message Component @@ -259,145 +166,82 @@ loading: 0, ```javascript import { MessageBox } from 'react-chat-elements' - - console.log('reply clicked!')} - -position={'left'} - -type={'text'} - -text={'Tempor duis do voluptate enim duis velit veniam aute ullamco dolore duis irure.'}/> + 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.'}/> ``` ![reply-message](https://user-images.githubusercontent.com/15075759/80224625-9dbbeb00-8652-11ea-994f-022be0cffe30.png) + ## MeetingMessage Component ```javascript import { MeetingMessage } from 'react-chat-elements' - - + 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(), + ]} + }, + . + . + . + ]} /> ``` #### MeetingMessage props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | subject | none | string | Meeting messagee | - | title | none | string | Meeting title | - | date | new Date() | Date | Meeting date | - | collapseTitle | none | string | Meeting subtitle | - | participants | [] | array | Meeting participant array | - | moreItems | none | array | message more items | - | dataSource | [] | array | meeting list array | - | onClick | none | function | meeting message on click event (message(object) is returned) | - | onMeetingTitleClick | none | function | meeting title message on click event (message(object) is returned) | - | onMeetingVideoLinkClick | none | function | meeting video link message on click event (message(object) is returned) | - | onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event | ## SystemMessage Component @@ -405,21 +249,17 @@ time: new Date(), ```javascript import { SystemMessage } from 'react-chat-elements' - - + text={'End of conversation'}/> ``` #### SystemMessage props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | text| none | string | message text | + ## MessageList Component ![messagelist-photo](https://user-images.githubusercontent.com/15075759/29243641-932f3188-7fac-11e7-918d-a434bffc690e.png) @@ -427,75 +267,42 @@ text={'End of conversation'}/> ```javascript import { MessageList } from 'react-chat-elements' - - + className='message-list' + lockable={true} + toBottomHeight={'100%'} + dataSource={[ + { + position: 'right', + type: 'text', + text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', + date: new Date(), + }, + . + . + . + ]} /> ``` #### MessageList props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | className | none | string | optional message list className | - | dataSource | [] | array | message list array | - | lockable | false | boolean | It locks to scroll position when the dataSource has been changed | - | toBottomHeight | 300 | int or string(only '100%') | If the toBottomHeight property's value higher than bottom value of the scrollbar when the data source has been changed Scrollbar goes to bottom at the end of the page. If the toBottomHeight property's value has been set **'100%'**, scrollbar goes to bottom at the end of the page when the data source has been changed. | - | onClick | none | function | message list item on click (message(object) is returned) | - | onOpen | none | function | message list item on open (file or photo) (message(object) is returned) | - | onDownload | none | function | message list item on download (file or photo) (message(object) is returned) | - | onScroll | none | function | message list onScroll event | - | onForwardClick | none | function | message list item onForwardClick event | - | onReplyClick | none | function | message list item onReplyClick event | - | onReplyMessageClick | none | function | message list item onReplyMessageClick event | - | downButton | true | boolean | message list scroll to bottom button | - | downButtonBadge | none | boolean | message list downButton badge content | - | onDownButtonClick | none | function | message list onDownButtonClick | - | onContextMenu | none | function | message list item onContextMenu event, gets 3 parameters: message item, index of item, event | - | onPhotoError | none | function | message list item on error photo | ## ChatList Component @@ -505,55 +312,32 @@ date: new Date(), ```javascript import { ChatList } from 'react-chat-elements' - - + 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, + }, + . + . + . + ]} /> ``` #### ChatList props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | className | none | string | optional chat list className | - | dataSource | [] | array | chat list array | - | onClick | none | function | chat list item on click (chat(object) is returned) | - | onContextMenu | none | function | chat list item on context menu (chat(object) is returned) | - | onAvatarError | none | function | chat list item on error avatar img | - | lazyLoadingImage | none | image path | lazy loading image | ## Input Component @@ -561,111 +345,66 @@ unread: 0, ```javascript import { Input } from 'react-chat-elements' - - - -}/> - - + placeholder="Type here..." + multiline={true} + rightButtons={ +
- -} - -center={ - -
'CENTER' area
- -} - -bottom={ - -
'BOTTOM' area
- -}/> + top={ +
'TOP' area
+ } + center={ +
'CENTER' area
+ } + bottom={ +
'BOTTOM' area
+ }/> ``` #### SideBar props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | type | light | string | sidebar style type (eg: light, dark) | - | top | none | component | sidebar top component | - | center | none | component | sidebar center component | - | bottom | none | component | sidebar bottom component | + ## Navbar Component ```javascript import { Navbar } from 'react-chat-elements' - - 'LEFT' area - -} - -center={ - -
'CENTER' area
- -} - -right={ - -
'RIGHT' area
- -}/> + left={ +
'LEFT' area
+ } + center={ +
'CENTER' area
+ } + right={ +
'RIGHT' area
+ }/> ``` #### Navbar props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - -| type | light | string | navbar style type (eg: light, dark) | - +| type | light | string | navbar style type (eg: light, dark) | | left | none | component | navbar left component | - | center | none | component | navbar center component | - | right | none | component | navbar right component | ## Dropdown Component @@ -831,197 +507,125 @@ right={ ```javascript import { Dropdown } from 'react-chat-elements' - - + 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' + }, + ]}/> ``` #### Dropdown props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | animationType | none | string | fade or default | - | animationPosition | nortwest | string | animation start position (nortwest, norteast, southwest, southeast) | - | items | none | array | dropdown items array | - | onSelect | none | function | item on select | - | buttonProps | none | object | button properties | + ## Avatar Component ```javascript import { Avatar } from 'react-chat-elements' - - + src={'https://facebook.github.io/react/img/logo.svg'} + alt={'logo'} + size="large" + type="circle flexible"/> ``` #### Avatar props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | src | none | image | image src | - | alt | none | string | image alt description | - | size | default | string | image size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px) | - | type | default | string | types: default, circle, rounded(border radius 5px), flexible | - | letterItem | none | object | avatar to be a letter | - | sideElement | none | component | avatar side element | - | onError | none | component | avatar img onerror | - | lazyLoadingImage | none | image path | lazy loading image | + ## LocationMessage Component ```javascript import { LocationMessage } from 'react-chat-elements' - - ', - -// mapURL: '' - -}}/> + data={{ + latitude: '37.773972', + longitude: '-122.431297', + // staticURL: '', + // mapURL: '' + }}/> ``` #### LocationMessage props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | src | none | image | image src | - | apiKey | none | string | google staticmap api key | - | zoom | 14 | int | google staticmap zoom level | - | markerColor | red | string | google staticmap marker color | - | data | {} | object | message data | - | target | _blank | string | image a tag target prop | - | onOpen | none | function | image on open | + ## SpotifyMessage Component ![spotify](https://user-images.githubusercontent.com/15075759/31466094-ad5852b8-aede-11e7-91bc-8a29e7427552.png) + ```javascript import { SpotifyMessage } from 'react-chat-elements' - - + theme='white' + view='coverart' + uri={'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf'}/> ``` #### SpotifyMessage props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | uri | none | uri | spotify uri | - | theme | black | string | spotify theme color (black or white) | - | view | list | string | spotify view type (list or coverart) | - | data | {} | object | message data | - | width | 300 | int | spotify embed width | - | height | 380 | int | spotify embed height | + ## MeetingItem Component ![meeting-photo](https://user-images.githubusercontent.com/15075759/90499887-cd878500-e152-11ea-9e13-80118bf2c94f.png) @@ -1029,63 +633,37 @@ uri={'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf'}/> ```javascript import { MeetingItem } from 'react-chat-elements' - - + subject={'New Release!!!'} + avatars={[ + { + src: 'https://facebook.github.io/react/img/logo.svg' + } + ]} + onMeetingClick={console.log} + onShareClick={console.log} + onCloseClick={console.log}/> ``` - #### MeetingItem props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | subject | none | string | MeetingItem subject | - | subjectLimit | 60 | int | MeetingItem subject text limit | - | date | none | date | MeetingItem date | - | dateString | none | string | MeetingItem represents dateString or timeagojs(now, date) | - | lazyLoadingImage | none | image path | lazy loading image | - | closable | true | boolean | MeetingItem closable | - | onClick | none | function | MeetingItem on click | - | onMeetingClick | none | function | MeetingItem on meeting click | - | onShareClick | none | function | MeetingItem on share click | - | onCloseClick | none | function | MeetingItem on close click | - | avatars | none | date | MeetingItem avatars | - | avatarLimit | 5 | date | MeetingItem avatars limit | - | audioMuted| true | boolean | MeetingItem audio muted | - | audioSource| null | string | MeetingItem audio source | + ## MeetingList Component ![meetingList-photo](https://user-images.githubusercontent.com/15075759/90499889-ce201b80-e152-11ea-9cdb-7c3ef0e04b4e.png) @@ -1095,59 +673,33 @@ onCloseClick={console.log}/> ```javascript import { MeetingList } from 'react-chat-elements' - - + className='meeting-list' + dataSource={[ + { + id: '1', + subject: 'New Release', + date: new Date(), + avatars: [{ + src: 'https://facebook.github.io/react/img/logo.svg', + }] + }, + . + . + . + ]} /> ``` #### MeetingList props | prop | default | type | description | - | ---- | ---- | ---- | ---- | - | className | none | string | optional meeting list className | - | dataSource | [] | array | meeting list array | - | onClick | none | function | meeting list item on click (meeting(object) is returned) | - | onMeetingClick | none | function | meeting list item on meeting click (meeting(object) is returned) | - | onShareClick | none | function | meeting list item on share click (meeting(object) is returned) | - | onCloseClick | none | function | meeting list item on close click (meeting(object) is returned) | - | onContextMenu | none | function | meeting list item on context menu (meeting(object) is returned) | - | onAvatarError | none | function | meeting list item on error avatar img | - -| lazyLoadingImage | none | image path | lazy loading image | +| lazyLoadingImage | none | image path | lazy loading image | \ No newline at end of file From 29148437559faf416c0dd6773eca30b209731667 Mon Sep 17 00:00:00 2001 From: emregudur Date: Wed, 27 Jan 2021 11:08:38 +0300 Subject: [PATCH 04/12] =?UTF-8?q?README.md=20d=C3=BCzenlemesi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 427 +++++++++++++++++++++++++++--------------------------- 1 file changed, 211 insertions(+), 216 deletions(-) diff --git a/README.md b/README.md index 9706bb34..aebc5c64 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ [![npm](https://img.shields.io/npm/dt/react-chat-elements.svg?label=npm-install&style=flat)]() [![Github pre-)release](https://img.shields.io/github/release-pre/Detaysoft/react-chat-elements.svg?style=flat)]() + # react-chat-elements + Reactjs chat elements ## Install @@ -9,6 +11,7 @@ npm install react-chat-elements --save ``` ### For React Native + Step 1: Install react-chat-elements ``` @@ -32,6 +35,7 @@ react-native link react-native-vector-icons *If you have any issues installing react-native-vector-icons, check out their installation guide [here](https://github.com/oblador/react-native-vector-icons#installation).* ### Imports + ```javascript // RCE CSS import 'react-chat-elements/dist/main.css'; @@ -40,12 +44,14 @@ import { MessageBox } from 'react-chat-elements'; ``` #### React Native + ```javascript // MessageBox component import { MessageBox } from 'react-chat-elements/native'; ``` ## Components + 1. [ChatItem](#chatitem-component) 2. [MessageBox](#messagebox-component) 3. [SystemMessage](#systemmessage-component) @@ -78,34 +84,32 @@ import { ChatItem } from 'react-chat-elements' date={new Date()} unread={0} /> ``` -#### ChatItem props - -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| avatar | none | string | ChatItem avatar photo url | -| avatarFlexible | false | boolean | flexible ChatItem avatar photo | -| alt | none | string | ChatItem avatar photo alt text | -| title | none | string | ChatItem title | -| subtitle | none | string | ChatItem subtitle | -| date | none | date | ChatItem date | -| dateString | none | string | ChatItem represents dateString or timeagojs(now, date) | -| unread | 0 | int | ChatItem unread count | -| onClick | none | function | ChatItem on click | -| onContextMenu | none | function | ChatItem on context menu | -| statusColor | none | color | ChatItem status color | -| statusColorType | badge | string | ChatItem status color type (encircle, badge) | -| statusText | none | color | ChatItem status text | -| lazyLoadingImage | none | image path | lazy loading image | +#### ChatItem props +| prop | default | type | description | +| ---------------- | ------- | ---------- | ------------------------------------------------------ | +| avatar | none | string | ChatItem avatar photo url | +| avatarFlexible | false | boolean | flexible ChatItem avatar photo | +| alt | none | string | ChatItem avatar photo alt text | +| title | none | string | ChatItem title | +| subtitle | none | string | ChatItem subtitle | +| date | none | date | ChatItem date | +| dateString | none | string | ChatItem represents dateString or timeagojs(now, date) | +| unread | 0 | int | ChatItem unread count | +| onClick | none | function | ChatItem on click | +| onContextMenu | none | function | ChatItem on context menu | +| statusColor | none | color | ChatItem status color | +| statusColorType | badge | string | ChatItem status color type (encircle, badge) | +| statusText | none | color | ChatItem status text | +| lazyLoadingImage | none | image path | lazy loading image | ## MessageBox Component | file | photo | text | location | video | audio | | ---- | ---- | ---- | ---- | ---- | -| ![file-message](https://user-images.githubusercontent.com/15075759/29243524-786baf8c-7fa9-11e7-92b2-3960cc34fcf4.png) | ![photo-message](https://user-images.githubusercontent.com/15075759/29243556-1368c4e8-7faa-11e7-9fdd-57b67542c381.png) | ![text-message](https://user-images.githubusercontent.com/15075759/29243573-a809456e-7faa-11e7-97b4-d258bc6a7728.png) | ![location-message](https://user-images.githubusercontent.com/15075759/30582943-2b3338aa-9d2e-11e7-93d5-8614563b9217.png) | ![](https://user-images.githubusercontent.com/15075759/98530021-74ca1300-228f-11eb-88ab-5ae5ae33616d.png) | ![] -(https://user-images.githubusercontent.com/41473129/105960654-98327c00-608e-11eb-9ac4-5b014974b87c.png) - +| ![file-message](https://user-images.githubusercontent.com/15075759/29243524-786baf8c-7fa9-11e7-92b2-3960cc34fcf4.png) | ![photo-message](https://user-images.githubusercontent.com/15075759/29243556-1368c4e8-7faa-11e7-9fdd-57b67542c381.png) | ![text-message](https://user-images.githubusercontent.com/15075759/29243573-a809456e-7faa-11e7-97b4-d258bc6a7728.png) | ![location-message](https://user-images.githubusercontent.com/15075759/30582943-2b3338aa-9d2e-11e7-93d5-8614563b9217.png) | ![](https://user-images.githubusercontent.com/15075759/98530021-74ca1300-228f-11eb-88ab-5ae5ae33616d.png) | +![](https://user-images.githubusercontent.com/41473129/105960654-98327c00-608e-11eb-9ac4-5b014974b87c.png) ```javascript import { MessageBox } from 'react-chat-elements' @@ -125,41 +129,41 @@ import { MessageBox } from 'react-chat-elements' #### MessageBox props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| id | i (index) | string | message box id | -| position | left | string | message box position | -| type | text | string | message type (text, photo, file, location, spotify, video) | -| text | none | string | message text | -| title | none | string | message title | -| titleColor | none | string(color) | message title color | -| data | {} | object | message data | -| date | new Date() | Date | message date | -| dateString | none | string | message represents dateString or timeagojs(now, date) | -| onClick | none | function | message on click (message(object) is returned) | -| onOpen | none | function | message on open (file or photo) (message(object) is returned) | -| onDownload | none | function | message on download (file or photo) (message(object) is returned) | -| onLoad | none | function | message on load photo | -| onPhotoError | none | function | message on error photo | -| onTitleClick | none | function | message title on click event | -| onForwardClick | none | function | message forward on click event | -| onReplyClick | none | function | message reply on click event | -| onMeetingMessageClick | none | function | meeting message on click event | -| onMeetingTitleClick | none | function | meeting title message on click event | -| onMeetingVideoLinkClick | none | function | meeting video link message on click event | -| onReplyMessageClick | none | function | reply message on click event | -| onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event | -| onContextMenu | none | function | message contextmenu click event | -| forwarded | none | boolean | message forward icon | -| replyButton | none | boolean | message reply icon | -| status | none | string | message status info (waiting, sent, received, read) | -| notch | true | boolean | message box notch | -| avatar | none | url | message box avatar url | -| renderAddCmp | none | function (component) | adding custom components to message box | -| copiableDate | false | boolean | message box date text copiable | -| focus | false | boolean | used in message focus feature in MessageList component, makes style of the component focused | -| onMessageFocused | none | function | makes focus value false after the message becomes focus | -| reply | none | object | reply data | +| prop | default | type | description | +| ----------------------- | ---------- | -------------------- | -------------------------------------------------------------------------------------------------- | +| id | i (index) | string | message box id | +| position | left | string | message box position | +| type | text | string | message type (text, photo, file, location, spotify, video) | +| text | none | string | message text | +| title | none | string | message title | +| titleColor | none | string(color) | message title color | +| data | {} | object | message data | +| date | new Date() | Date | message date | +| dateString | none | string | message represents dateString or timeagojs(now, date) | +| onClick | none | function | message on click (message(object) is returned) | +| onOpen | none | function | message on open (file or photo) (message(object) is returned) | +| onDownload | none | function | message on download (file or photo) (message(object) is returned) | +| onLoad | none | function | message on load photo | +| onPhotoError | none | function | message on error photo | +| onTitleClick | none | function | message title on click event | +| onForwardClick | none | function | message forward on click event | +| onReplyClick | none | function | message reply on click event | +| onMeetingMessageClick | none | function | meeting message on click event | +| onMeetingTitleClick | none | function | meeting title message on click event | +| onMeetingVideoLinkClick | none | function | meeting video link message on click event | +| onReplyMessageClick | none | function | reply message on click event | +| onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event | +| onContextMenu | none | function | message contextmenu click event | +| forwarded | none | boolean | message forward icon | +| replyButton | none | boolean | message reply icon | +| status | none | string | message status info (waiting, sent, received, read) | +| notch | true | boolean | message box notch | +| avatar | none | url | message box avatar url | +| renderAddCmp | none | function (component) | adding custom components to message box | +| copiableDate | false | boolean | message box date text copiable | +| focus | false | boolean | used in message focus feature in MessageList component, makes style of the component focused | +| onMessageFocused | none | function | makes focus value false after the message becomes focus | +| reply | none | object | reply data | ## Reply Message Component @@ -181,7 +185,6 @@ import { MessageBox } from 'react-chat-elements' ![reply-message](https://user-images.githubusercontent.com/15075759/80224625-9dbbeb00-8652-11ea-994f-022be0cffe30.png) - ## MeetingMessage Component ```javascript @@ -230,19 +233,19 @@ import { MeetingMessage } from 'react-chat-elements' #### MeetingMessage props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| subject | none | string | Meeting messagee | -| title | none | string | Meeting title | -| date | new Date() | Date | Meeting date | -| collapseTitle | none | string | Meeting subtitle | -| participants | [] | array | Meeting participant array | -| moreItems | none | array | message more items | -| dataSource | [] | array | meeting list array | -| onClick | none | function | meeting message on click event (message(object) is returned) | -| onMeetingTitleClick | none | function | meeting title message on click event (message(object) is returned) | -| onMeetingVideoLinkClick | none | function | meeting video link message on click event (message(object) is returned) | -| onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event | +| prop | default | type | description | +| ----------------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------- | +| subject | none | string | Meeting messagee | +| title | none | string | Meeting title | +| date | new Date() | Date | Meeting date | +| collapseTitle | none | string | Meeting subtitle | +| participants | [] | array | Meeting participant array | +| moreItems | none | array | message more items | +| dataSource | [] | array | meeting list array | +| onClick | none | function | meeting message on click event (message(object) is returned) | +| onMeetingTitleClick | none | function | meeting title message on click event (message(object) is returned) | +| onMeetingVideoLinkClick | none | function | meeting video link message on click event (message(object) is returned) | +| onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event | ## SystemMessage Component @@ -255,10 +258,9 @@ import { SystemMessage } from 'react-chat-elements' #### SystemMessage props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| text| none | string | message text | - +| prop | default | type | description | +| ---- | ------- | ------ | ------------ | +| text | none | string | message text | ## MessageList Component @@ -286,24 +288,24 @@ import { MessageList } from 'react-chat-elements' #### MessageList props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| className | none | string | optional message list className | -| dataSource | [] | array | message list array | -| lockable | false | boolean | It locks to scroll position when the dataSource has been changed | -| toBottomHeight | 300 | int or string(only '100%') | If the toBottomHeight property's value higher than bottom value of the scrollbar when the data source has been changed Scrollbar goes to bottom at the end of the page. If the toBottomHeight property's value has been set **'100%'**, scrollbar goes to bottom at the end of the page when the data source has been changed. | -| onClick | none | function | message list item on click (message(object) is returned) | -| onOpen | none | function | message list item on open (file or photo) (message(object) is returned) | -| onDownload | none | function | message list item on download (file or photo) (message(object) is returned) | -| onScroll | none | function | message list onScroll event | -| onForwardClick | none | function | message list item onForwardClick event | -| onReplyClick | none | function | message list item onReplyClick event | -| onReplyMessageClick | none | function | message list item onReplyMessageClick event | -| downButton | true | boolean | message list scroll to bottom button | -| downButtonBadge | none | boolean | message list downButton badge content | -| onDownButtonClick | none | function | message list onDownButtonClick | -| onContextMenu | none | function | message list item onContextMenu event, gets 3 parameters: message item, index of item, event | -| onPhotoError | none | function | message list item on error photo | +| prop | default | type | description | +| ------------------- | ------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| className | none | string | optional message list className | +| dataSource | [] | array | message list array | +| lockable | false | boolean | It locks to scroll position when the dataSource has been changed | +| toBottomHeight | 300 | int or string(only '100%') | If the toBottomHeight property's value higher than bottom value of the scrollbar when the data source has been changed Scrollbar goes to bottom at the end of the page. If the toBottomHeight property's value has been set **'100%'**, scrollbar goes to bottom at the end of the page when the data source has been changed. | +| onClick | none | function | message list item on click (message(object) is returned) | +| onOpen | none | function | message list item on open (file or photo) (message(object) is returned) | +| onDownload | none | function | message list item on download (file or photo) (message(object) is returned) | +| onScroll | none | function | message list onScroll event | +| onForwardClick | none | function | message list item onForwardClick event | +| onReplyClick | none | function | message list item onReplyClick event | +| onReplyMessageClick | none | function | message list item onReplyMessageClick event | +| downButton | true | boolean | message list scroll to bottom button | +| downButtonBadge | none | boolean | message list downButton badge content | +| onDownButtonClick | none | function | message list onDownButtonClick | +| onContextMenu | none | function | message list item onContextMenu event, gets 3 parameters: message item, index of item, event | +| onPhotoError | none | function | message list item on error photo | ## ChatList Component @@ -331,14 +333,14 @@ import { ChatList } from 'react-chat-elements' #### ChatList props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| className | none | string | optional chat list className | -| dataSource | [] | array | chat list array | -| onClick | none | function | chat list item on click (chat(object) is returned) | -| onContextMenu | none | function | chat list item on context menu (chat(object) is returned) | -| onAvatarError | none | function | chat list item on error avatar img | -| lazyLoadingImage | none | image path | lazy loading image | +| prop | default | type | description | +| ---------------- | ------- | ---------- | --------------------------------------------------------- | +| className | none | string | optional chat list className | +| dataSource | [] | array | chat list array | +| onClick | none | function | chat list item on click (chat(object) is returned) | +| onContextMenu | none | function | chat list item on context menu (chat(object) is returned) | +| onAvatarError | none | function | chat list item on error avatar img | +| lazyLoadingImage | none | image path | lazy loading image | ## Input Component @@ -369,24 +371,23 @@ this.inputRef.clear(); #### Input props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| className | none | string | optional input className | -| placeholder | none | string | input placeholder text | -| defaultValue | none | string | input default value | -| onChange | none | function | input onChange function | -| multiline | false | bool | input is textarea | -| autoHeight | true | bool | input auto height | -| minHeight | 25 | int | input min height | -| maxHeight | 200 | int | input max height | -| inputStyle | none | object | inputStyle object | -| leftButtons | none | object(component) | left buttons component | -| rightButtons | none | object(component) | right buttons component | -| ref | none | function | input or textarea ref | -| maxlength | none | int | input or textarea maxlength | -| onMaxLengthExceed | none | function | called when max length exceed | -| autofocus | false | bool | input autofocus | - +| prop | default | type | description | +| ----------------- | ------- | ----------------- | ----------------------------- | +| className | none | string | optional input className | +| placeholder | none | string | input placeholder text | +| defaultValue | none | string | input default value | +| onChange | none | function | input onChange function | +| multiline | false | bool | input is textarea | +| autoHeight | true | bool | input auto height | +| minHeight | 25 | int | input min height | +| maxHeight | 200 | int | input max height | +| inputStyle | none | object | inputStyle object | +| leftButtons | none | object(component) | left buttons component | +| rightButtons | none | object(component) | right buttons component | +| ref | none | function | input or textarea ref | +| maxlength | none | int | input or textarea maxlength | +| onMaxLengthExceed | none | function | called when max length exceed | +| autofocus | false | bool | input autofocus | ## Button Component @@ -399,13 +400,13 @@ import { Button } from 'react-chat-elements' #### Button props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| type | none | string | button type (outlined, transparent) | -| disabled | none | string | button is disabled? | -| text | none | string | button text | -| buttonRef | none | function | button ref | -| title | none | string | button title | +| prop | default | type | description | +| --------- | ------- | -------- | ----------------------------------- | +| type | none | string | button type (outlined, transparent) | +| disabled | none | string | button is disabled? | +| text | none | string | button text | +| buttonRef | none | function | button ref | +| title | none | string | button title | ## Popup Component @@ -437,17 +438,17 @@ import { Popup } from 'react-chat-elements' #### Popup props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| show | false | bool | popup visible | -| header | none | string | popup title (header) message | -| headerButtons | none | array | popup title (header) buttons | -| text | none | string | popup content (center) message | -| color | #333 | string (color) | popup content message color | -| footerButtons | none | array | popup footer buttons | -| renderHeader | none | function (component) | render header function | -| renderContent | none | function (component) | render content function | -| renderFooter | none | function (component) | render footer function | +| prop | default | type | description | +| ------------- | ------- | -------------------- | ------------------------------ | +| show | false | bool | popup visible | +| header | none | string | popup title (header) message | +| headerButtons | none | array | popup title (header) buttons | +| text | none | string | popup content (center) message | +| color | #333 | string (color) | popup content message color | +| footerButtons | none | array | popup footer buttons | +| renderHeader | none | function (component) | render header function | +| renderContent | none | function (component) | render content function | +| renderFooter | none | function (component) | render footer function | ## SideBar Component @@ -468,13 +469,12 @@ import { SideBar } from 'react-chat-elements' #### SideBar props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| type | light | string | sidebar style type (eg: light, dark) | -| top | none | component | sidebar top component | -| center | none | component | sidebar center component | -| bottom | none | component | sidebar bottom component | - +| prop | default | type | description | +| ------ | ------- | --------- | ------------------------------------ | +| type | light | string | sidebar style type (eg: light, dark) | +| top | none | component | sidebar top component | +| center | none | component | sidebar center component | +| bottom | none | component | sidebar bottom component | ## Navbar Component @@ -495,12 +495,12 @@ import { Navbar } from 'react-chat-elements' #### Navbar props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| type | light | string | navbar style type (eg: light, dark) | -| left | none | component | navbar left component | -| center | none | component | navbar center component | -| right | none | component | navbar right component | +| prop | default | type | description | +| ------ | ------- | --------- | ----------------------------------- | +| type | light | string | navbar style type (eg: light, dark) | +| left | none | component | navbar left component | +| center | none | component | navbar center component | +| right | none | component | navbar right component | ## Dropdown Component @@ -538,14 +538,13 @@ import { Dropdown } from 'react-chat-elements' #### Dropdown props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| animationType | none | string | fade or default | -| animationPosition | nortwest | string | animation start position (nortwest, norteast, southwest, southeast) | -| items | none | array | dropdown items array | -| onSelect | none | function | item on select | -| buttonProps | none | object | button properties | - +| prop | default | type | description | +| ----------------- | -------- | -------- | ------------------------------------------------------------------- | +| animationType | none | string | fade or default | +| animationPosition | nortwest | string | animation start position (nortwest, norteast, southwest, southeast) | +| items | none | array | dropdown items array | +| onSelect | none | function | item on select | +| buttonProps | none | object | button properties | ## Avatar Component @@ -561,17 +560,16 @@ import { Avatar } from 'react-chat-elements' #### Avatar props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| src | none | image | image src | -| alt | none | string | image alt description | -| size | default | string | image size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px) | -| type | default | string | types: default, circle, rounded(border radius 5px), flexible | -| letterItem | none | object | avatar to be a letter | -| sideElement | none | component | avatar side element | -| onError | none | component | avatar img onerror | -| lazyLoadingImage | none | image path | lazy loading image | - +| prop | default | type | description | +| ---------------- | ------- | ---------- | ----------------------------------------------------------------------------------------------- | +| src | none | image | image src | +| alt | none | string | image alt description | +| size | default | string | image size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px) | +| type | default | string | types: default, circle, rounded(border radius 5px), flexible | +| letterItem | none | object | avatar to be a letter | +| sideElement | none | component | avatar side element | +| onError | none | component | avatar img onerror | +| lazyLoadingImage | none | image path | lazy loading image | ## LocationMessage Component @@ -589,22 +587,20 @@ import { LocationMessage } from 'react-chat-elements' #### LocationMessage props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| src | none | image | image src | -| apiKey | none | string | google staticmap api key | -| zoom | 14 | int | google staticmap zoom level | -| markerColor | red | string | google staticmap marker color | -| data | {} | object | message data | -| target | _blank | string | image a tag target prop | -| onOpen | none | function | image on open | - +| prop | default | type | description | +| ----------- | ------- | -------- | ----------------------------- | +| src | none | image | image src | +| apiKey | none | string | google staticmap api key | +| zoom | 14 | int | google staticmap zoom level | +| markerColor | red | string | google staticmap marker color | +| data | {} | object | message data | +| target | _blank | string | image a tag target prop | +| onOpen | none | function | image on open | ## SpotifyMessage Component ![spotify](https://user-images.githubusercontent.com/15075759/31466094-ad5852b8-aede-11e7-91bc-8a29e7427552.png) - ```javascript import { SpotifyMessage } from 'react-chat-elements' @@ -616,15 +612,14 @@ import { SpotifyMessage } from 'react-chat-elements' #### SpotifyMessage props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| uri | none | uri | spotify uri | -| theme | black | string | spotify theme color (black or white) | -| view | list | string | spotify view type (list or coverart) | -| data | {} | object | message data | -| width | 300 | int | spotify embed width | -| height | 380 | int | spotify embed height | - +| prop | default | type | description | +| ------ | ------- | ------ | ------------------------------------ | +| uri | none | uri | spotify uri | +| theme | black | string | spotify theme color (black or white) | +| view | list | string | spotify view type (list or coverart) | +| data | {} | object | message data | +| width | 300 | int | spotify embed width | +| height | 380 | int | spotify embed height | ## MeetingItem Component @@ -644,25 +639,25 @@ import { MeetingItem } from 'react-chat-elements' onShareClick={console.log} onCloseClick={console.log}/> ``` -#### MeetingItem props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| subject | none | string | MeetingItem subject | -| subjectLimit | 60 | int | MeetingItem subject text limit | -| date | none | date | MeetingItem date | -| dateString | none | string | MeetingItem represents dateString or timeagojs(now, date) | -| lazyLoadingImage | none | image path | lazy loading image | -| closable | true | boolean | MeetingItem closable | -| onClick | none | function | MeetingItem on click | -| onMeetingClick | none | function | MeetingItem on meeting click | -| onShareClick | none | function | MeetingItem on share click | -| onCloseClick | none | function | MeetingItem on close click | -| avatars | none | date | MeetingItem avatars | -| avatarLimit | 5 | date | MeetingItem avatars limit | -| audioMuted| true | boolean | MeetingItem audio muted | -| audioSource| null | string | MeetingItem audio source | +#### MeetingItem props +| prop | default | type | description | +| ---------------- | ------- | ---------- | --------------------------------------------------------- | +| subject | none | string | MeetingItem subject | +| subjectLimit | 60 | int | MeetingItem subject text limit | +| date | none | date | MeetingItem date | +| dateString | none | string | MeetingItem represents dateString or timeagojs(now, date) | +| lazyLoadingImage | none | image path | lazy loading image | +| closable | true | boolean | MeetingItem closable | +| onClick | none | function | MeetingItem on click | +| onMeetingClick | none | function | MeetingItem on meeting click | +| onShareClick | none | function | MeetingItem on share click | +| onCloseClick | none | function | MeetingItem on close click | +| avatars | none | date | MeetingItem avatars | +| avatarLimit | 5 | date | MeetingItem avatars limit | +| audioMuted | true | boolean | MeetingItem audio muted | +| audioSource | null | string | MeetingItem audio source | ## MeetingList Component @@ -692,14 +687,14 @@ import { MeetingList } from 'react-chat-elements' #### MeetingList props -| prop | default | type | description | -| ---- | ---- | ---- | ---- | -| className | none | string | optional meeting list className | -| dataSource | [] | array | meeting list array | -| onClick | none | function | meeting list item on click (meeting(object) is returned) | -| onMeetingClick | none | function | meeting list item on meeting click (meeting(object) is returned) | -| onShareClick | none | function | meeting list item on share click (meeting(object) is returned) | -| onCloseClick | none | function | meeting list item on close click (meeting(object) is returned) | -| onContextMenu | none | function | meeting list item on context menu (meeting(object) is returned) | -| onAvatarError | none | function | meeting list item on error avatar img | -| lazyLoadingImage | none | image path | lazy loading image | \ No newline at end of file +| prop | default | type | description | +| ---------------- | ------- | ---------- | ---------------------------------------------------------------- | +| className | none | string | optional meeting list className | +| dataSource | [] | array | meeting list array | +| onClick | none | function | meeting list item on click (meeting(object) is returned) | +| onMeetingClick | none | function | meeting list item on meeting click (meeting(object) is returned) | +| onShareClick | none | function | meeting list item on share click (meeting(object) is returned) | +| onCloseClick | none | function | meeting list item on close click (meeting(object) is returned) | +| onContextMenu | none | function | meeting list item on context menu (meeting(object) is returned) | +| onAvatarError | none | function | meeting list item on error avatar img | +| lazyLoadingImage | none | image path | lazy loading image | \ No newline at end of file From 19049d0d1aeb35a01ae03b1558d4a674c6b4f5e5 Mon Sep 17 00:00:00 2001 From: emregudur Date: Tue, 2 Feb 2021 16:16:57 +0300 Subject: [PATCH 05/12] audio message download controls remowed --- src/AudioMessage/AudioMessage.css | 4 ++++ src/AudioMessage/AudioMessage.js | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/AudioMessage/AudioMessage.css b/src/AudioMessage/AudioMessage.css index 78e50387..05f94fef 100644 --- a/src/AudioMessage/AudioMessage.css +++ b/src/AudioMessage/AudioMessage.css @@ -2,3 +2,7 @@ padding-bottom: 10px; max-width: 300px; } + +audio:focus { + outline: none; +} \ No newline at end of file diff --git a/src/AudioMessage/AudioMessage.js b/src/AudioMessage/AudioMessage.js index febcbdba..c584216a 100644 --- a/src/AudioMessage/AudioMessage.js +++ b/src/AudioMessage/AudioMessage.js @@ -6,12 +6,13 @@ export default class AudioMessage extends React.PureComponent { render() { return (
-