From d946a45b79687655cc9fe890eac6fa52b3255508 Mon Sep 17 00:00:00 2001 From: esracoskun Date: Tue, 25 Aug 2020 17:43:52 +0300 Subject: [PATCH 01/11] MeetingMessage created --- example/App.js | 19 ++++ package.json | 2 +- src/MeetingMessage/MeetingMessage.css | 128 ++++++++++++++++++++++++++ src/MeetingMessage/MeetingMessage.js | 121 ++++++++++++++++++++++++ src/MessageBox/MessageBox.js | 13 +++ src/MessageList/MessageList.js | 7 ++ src/index.js | 2 + 7 files changed, 291 insertions(+), 1 deletion(-) create mode 100644 src/MeetingMessage/MeetingMessage.css create mode 100644 src/MeetingMessage/MeetingMessage.js diff --git a/example/App.js b/example/App.js index 69859f25..724398d6 100644 --- a/example/App.js +++ b/example/App.js @@ -88,6 +88,9 @@ export class App extends Component { case 4: type = 'spotify'; break; + case 5: + type = 'meet'; + break; default: type = 'text'; status = 'read'; @@ -104,6 +107,22 @@ export class App extends Component { titleColor: this.getRandomColor(), message: loremIpsum({ count: 1, units: 'sentences' }), }) : null, + meet: this.token() >= 1 ? ({ + id: parseInt(Math.random() * 10 % 6), + meetSubject: loremIpsum({ count: 2, units: 'words' }), + title: loremIpsum({ count: 2, units: 'words' }), + date: +new Date(), + dataSource: Array(this.token() + 5).fill(1).map(x => ({ + id: String(Math.random()), + avatar: `data:image/png;base64,${this.photo()}`, + message: loremIpsum({ count: 1, units: 'sentences' }), + title: loremIpsum({ count: 2, units: 'words' }), + lazyLoadingImage: `data:image/png;base64,${this.photo()}`, + alt: loremIpsum({ count: 2, units: 'words' }), + avatarFlexible: true, + date: +new Date(), + })), + }) : null, type: type, theme: 'white', view: 'list', diff --git a/package.json b/package.json index 62c7722b..e73ef021 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-chat-elements", - "version": "10.10.2", + "version": "10.11.2", "description": "Reactjs chat components", "author": "Avare Kodcu ", "main": "dist/main.js", diff --git a/src/MeetingMessage/MeetingMessage.css b/src/MeetingMessage/MeetingMessage.css new file mode 100644 index 00000000..d13c9cf7 --- /dev/null +++ b/src/MeetingMessage/MeetingMessage.css @@ -0,0 +1,128 @@ +.rce-mbox-mtmg { + user-select: none; + display: flex; + justify-content: center; + align-content: center; + padding-bottom: 25px; + min-width: 500px; + max-width: 500px; +} + +.rce-mtmg { + width: 100%; + position: relative; + background: #f5f5f5; + display: flex; + flex-direction: column; + margin: 5px 0px; + float: left; + border-radius: 2px; +} + +.rce-mtmg-subject { + text-align: start; + display: inline-block; + font-size: 15px; + padding: 5px; +} + +.rce-mtmg-toogleItem { + width: 100%; + height: 100%; +} + +.rce-mtmg-toogleClick { + height: 50px; + background: #6264a7; + color: white; + font-size: 15px; + display: flex; + justify-content: space-between; +} + +.rce-mtmg-toogleClick:hover { + opacity: 0.9; +} + +.rce-mtmg-item { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0px 10px; +} + +.rce-mtmg-item > svg { + width: 23px; + height: 23px; + padding: 10px; +} + +.rce-mtmg-content { + display: flex; + flex-direction: column; + padding: 0 10px; +} + +.rce-mtmg-date { + color: #cecece; + font-size: 13px; +} + +.rce-mtmg-toogleContent { + height: auto; + min-height: 60px; + flex-direction: column; +} + +.rce-mtmg-right-icon { + display: flex; + align-items: center; + position: relative; + right: 10px; + cursor: pointer; +} + +.rce-mtmg-right-icon > svg { + width: 23px; + height: 23px; +} + +.rce-mitem { + display: flex; +} + +.rce-mitem:hover { + background: #d0d0d0; +} + +.rce-mitem-body { + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + padding: 8px; + max-width: 500px; + width: 400px; +} + +.rce-mitem-body--top { + display: flex; + align-items: center; +} + +.rce-mitem-body--top-title { + font-size: 16px; + padding: 0px 15px 0 0; + text-transform: uppercase; + font-weight: 600; +} + +.rce-mitem-body--bottom-title { + color: #252525; + font-size: 15px; +} + +.rce-mitem-body--top-time { + font-size: 12px; + color: rgba(0,0,0,0.4); +} diff --git a/src/MeetingMessage/MeetingMessage.js b/src/MeetingMessage/MeetingMessage.js new file mode 100644 index 00000000..0bae3dee --- /dev/null +++ b/src/MeetingMessage/MeetingMessage.js @@ -0,0 +1,121 @@ +import React, { Component } from 'react'; +import './MeetingMessage.css'; + +import FaCalendar from 'react-icons/lib/fa/calendar'; +import MdMoreHoriz from 'react-icons/lib/md/more-horiz' +import IoVideoCamera from 'react-icons/lib/io/ios-videocam' + +import { + format, +} from'timeago.js'; + +import Avatar from '../Avatar/Avatar'; + +import classNames from 'classnames'; + +export class MeetingMessage extends Component { + constructor(props) { + super(props); + + } + + toggleClick(id) { + var x = document.getElementById(id); + if (x.style.display === "none" || x.style.display === "") { + x.style.display = "flex"; + } else { + x.style.display = "none"; + } + } + + render() { + const { + id, + title, + meetSubject, + onClick, + date, + dataSource, + } = this.props; + + const dateText = date && !isNaN(date) && (format(date)); + + return ( +
+
+
+ {meetSubject || 'Unknown'} +
+
this.toggleClick(id)}> +
+ +
+ + {title} + + + {dateText} + +
+
+
+ +
+
+
+ { + dataSource && + dataSource.map((x, i) => { + return ( +
+
+
+
+ {x.title} +
+
+ { + x.date && + !isNaN(x.date) && + (format(x.date)) + } +
+
+
+
+ {x.message} +
+
+
+
+ ) + }) + } +
+
+
+ ); + } +} + +MeetingMessage.defaultProps = { + id: '', + alt: '', + title: '', + meetSubject: '', + message: '', + dataSource: [], + date: new Date(), + onClick: () => void(0), + onAvatarError: () => void(0), +}; + +export default MeetingMessage; diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js index 4202e9fb..1e44f249 100644 --- a/src/MessageBox/MessageBox.js +++ b/src/MessageBox/MessageBox.js @@ -7,6 +7,7 @@ import SystemMessage from '../SystemMessage/SystemMessage'; import LocationMessage from '../LocationMessage/LocationMessage'; import SpotifyMessage from '../SpotifyMessage/SpotifyMessage'; import ReplyMessage from '../ReplyMessage/ReplyMessage'; +import MeetingMessage from '../MeetingMessage/MeetingMessage'; import Avatar from '../Avatar/Avatar'; @@ -186,6 +187,18 @@ export class MessageBox extends Component { uri={this.props.uri || this.props.text} /> } + { + this.props.type === 'meet' && + this.props.meet && + + } +
this.onClick(x, i, e))} onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))} onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))} + onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))} /> )) } @@ -195,6 +201,7 @@ MessageList.defaultProps = { onForwardClick: null, onReplyClick: null, onReplyMessageClick: null, + onMeetingMessageClick: null, onDownButtonClick: null, onOpen: null, onPhotoError: null, diff --git a/src/index.js b/src/index.js index c216204c..0fbc1058 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ import Popup from './Popup/Popup'; import ReplyMessage from './ReplyMessage/ReplyMessage'; import MeetingItem from './MeetingItem/MeetingItem'; import MeetingList from './MeetingList/MeetingList'; +import MeetingMessage from './MeetingMessage/MeetingMessage'; export { @@ -31,4 +32,5 @@ export { ReplyMessage, MeetingItem, MeetingList, + MeetingMessage, }; From cabeaa8eebeaba67bc6fb280c67764b9dca68f15 Mon Sep 17 00:00:00 2001 From: esracoskun Date: Tue, 25 Aug 2020 17:47:07 +0300 Subject: [PATCH 02/11] Unnecesary code has been deleted --- src/MeetingMessage/MeetingMessage.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/MeetingMessage/MeetingMessage.js b/src/MeetingMessage/MeetingMessage.js index 0bae3dee..61a29684 100644 --- a/src/MeetingMessage/MeetingMessage.js +++ b/src/MeetingMessage/MeetingMessage.js @@ -2,17 +2,12 @@ import React, { Component } from 'react'; import './MeetingMessage.css'; import FaCalendar from 'react-icons/lib/fa/calendar'; -import MdMoreHoriz from 'react-icons/lib/md/more-horiz' -import IoVideoCamera from 'react-icons/lib/io/ios-videocam' +import MdMoreHoriz from 'react-icons/lib/md/more-horiz'; import { format, } from'timeago.js'; -import Avatar from '../Avatar/Avatar'; - -import classNames from 'classnames'; - export class MeetingMessage extends Component { constructor(props) { super(props); From 9eb63acd66874eb2961572ef010fba2cdeb1c763 Mon Sep 17 00:00:00 2001 From: abdurrahmanekr Date: Wed, 26 Aug 2020 10:00:06 +0300 Subject: [PATCH 03/11] meeting changed --- example/App.js | 4 ++-- src/MeetingMessage/MeetingMessage.js | 6 +++--- src/MessageBox/MessageBox.js | 14 +++++++------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/example/App.js b/example/App.js index 724398d6..85090018 100644 --- a/example/App.js +++ b/example/App.js @@ -89,7 +89,7 @@ export class App extends Component { type = 'spotify'; break; case 5: - type = 'meet'; + type = 'meeting'; break; default: type = 'text'; @@ -107,7 +107,7 @@ export class App extends Component { titleColor: this.getRandomColor(), message: loremIpsum({ count: 1, units: 'sentences' }), }) : null, - meet: this.token() >= 1 ? ({ + meeting: this.token() >= 1 ? ({ id: parseInt(Math.random() * 10 % 6), meetSubject: loremIpsum({ count: 2, units: 'words' }), title: loremIpsum({ count: 2, units: 'words' }), diff --git a/src/MeetingMessage/MeetingMessage.js b/src/MeetingMessage/MeetingMessage.js index 61a29684..4301cd2b 100644 --- a/src/MeetingMessage/MeetingMessage.js +++ b/src/MeetingMessage/MeetingMessage.js @@ -27,7 +27,7 @@ export class MeetingMessage extends Component { const { id, title, - meetSubject, + subject, onClick, date, dataSource, @@ -42,7 +42,7 @@ export class MeetingMessage extends Component {
- {meetSubject || 'Unknown'} + {subject || 'Unknown Meeting'}
} From fe1b60b609e89fe0fdc779d8ad2fad8ef2389674 Mon Sep 17 00:00:00 2001 From: esracoskun Date: Fri, 28 Aug 2020 09:19:48 +0300 Subject: [PATCH 04/11] MeetingMessage edited --- README.md | 63 +++++++ example/App.js | 22 ++- package.json | 2 +- src/MeetingMessage/MeetingMessage.css | 131 +++++++++++++- src/MeetingMessage/MeetingMessage.js | 166 +++++++++++++----- .../__tests__/MeetingMessage.js | 13 ++ .../__snapshots__/MeetingMessage.js.snap | 55 ++++++ src/MessageBox/MessageBox.js | 12 +- src/MessageList/MessageList.js | 12 ++ 9 files changed, 419 insertions(+), 57 deletions(-) create mode 100644 src/MeetingMessage/__tests__/MeetingMessage.js create mode 100644 src/MeetingMessage/__tests__/__snapshots__/MeetingMessage.js.snap diff --git a/README.md b/README.md index d9eaea3f..eaaad4a8 100644 --- a/README.md +++ b/README.md @@ -143,6 +143,9 @@ import { MessageBox } from 'react-chat-elements' | 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 | | onContextMenu | none | function | message contextmenu click event | | forwarded | none | boolean | message forward icon | @@ -177,6 +180,66 @@ import { MessageBox } from 'react-chat-elements' ![reply-message](https://user-images.githubusercontent.com/15075759/80224625-9dbbeb00-8652-11ea-994f-022be0cffe30.png) +## MeetingMessage Component + +```javascript +import { MeetingMessage } from 'react-chat-elements' + + +``` + +#### MeetingMessage props + +| prop | default | type | description | +| ---- | ---- | ---- | ---- | +| meetSubject | none | string | Meeting messagee | +| title | none | string | Meeting title | +| date | new Date() | Date | Meeting date | +| altTitle | none | string | Meeting subtitle | +| participants | [] | array | Meeting participant array | +| dataSource | [] | array | meeting list array | +| onMeetingMessageClick | 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) | + ## SystemMessage Component ```javascript diff --git a/example/App.js b/example/App.js index 85090018..68b1724a 100644 --- a/example/App.js +++ b/example/App.js @@ -108,19 +108,33 @@ export class App extends Component { message: loremIpsum({ count: 1, units: 'sentences' }), }) : null, meeting: this.token() >= 1 ? ({ - id: parseInt(Math.random() * 10 % 6), meetSubject: loremIpsum({ count: 2, units: 'words' }), title: loremIpsum({ count: 2, units: 'words' }), date: +new Date(), + altTitle: loremIpsum({ count: 2, units: 'words' }), + participants: Array(this.token() + 6).fill(1).map(x => ({ + id: parseInt(Math.random() * 10 % 6), + title: loremIpsum({ count: 1, units: 'words' }), + })), dataSource: Array(this.token() + 5).fill(1).map(x => ({ id: String(Math.random()), avatar: `data:image/png;base64,${this.photo()}`, message: loremIpsum({ count: 1, units: 'sentences' }), - title: loremIpsum({ count: 2, units: 'words' }), - lazyLoadingImage: `data:image/png;base64,${this.photo()}`, - alt: loremIpsum({ count: 2, units: 'words' }), + title: loremIpsum({ count: 2, units: 'words' }), avatarFlexible: true, date: +new Date(), + event: { + title: loremIpsum({ count: 2, units: 'words' }), + avatars: Array(this.token() + 2).fill(1).map(x => ({ + src: `data:image/png;base64,${this.photo()}`, + })), + }, + record: { + avatar: `data:image/png;base64,${this.photo()}`, + title: loremIpsum({ count: 1, units: 'words' }), + savedBy: 'Kaydeden: ' + loremIpsum({ count: 2, units: 'words' }), + time: new Date().toLocaleString(), + }, })), }) : null, type: type, diff --git a/package.json b/package.json index e73ef021..ef07ba37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-chat-elements", - "version": "10.11.2", + "version": "10.11.0", "description": "Reactjs chat components", "author": "Avare Kodcu ", "main": "dist/main.js", diff --git a/src/MeetingMessage/MeetingMessage.css b/src/MeetingMessage/MeetingMessage.css index d13c9cf7..7dc8eec4 100644 --- a/src/MeetingMessage/MeetingMessage.css +++ b/src/MeetingMessage/MeetingMessage.css @@ -3,7 +3,7 @@ display: flex; justify-content: center; align-content: center; - padding-bottom: 25px; + padding-bottom: 13px; min-width: 500px; max-width: 500px; } @@ -23,7 +23,7 @@ text-align: start; display: inline-block; font-size: 15px; - padding: 5px; + padding: 5px 9px; } .rce-mtmg-toogleItem { @@ -31,7 +31,7 @@ height: 100%; } -.rce-mtmg-toogleClick { +.rce-mtmg-body { height: 50px; background: #6264a7; color: white; @@ -40,7 +40,7 @@ justify-content: space-between; } -.rce-mtmg-toogleClick:hover { +.rce-mtmg-body:hover { opacity: 0.9; } @@ -68,12 +68,39 @@ font-size: 13px; } +.rce-mtmg-body-bottom { + display: flex; + flex-direction: row; + padding: 9px; + color: #6264a7; + cursor: pointer; +} + +.rce-mtmg-bottom--tptitle { + display: flex; + justify-content: center; + align-items: center; +} + +.rce-mtmg-bottom--tptitle > svg{ + color: #6264a7a1; +} + +.rce-mtmg-body-bottom--bttitle > span { + padding: 0 0 0 6px; +} + .rce-mtmg-toogleContent { + display: none; height: auto; min-height: 60px; flex-direction: column; } +.rce-mtmg-toogleContent--click { + display: flex; +} + .rce-mtmg-right-icon { display: flex; align-items: center; @@ -101,28 +128,118 @@ align-items: flex-start; flex-direction: column; padding: 8px; - max-width: 500px; - width: 400px; } .rce-mitem-body--top { display: flex; align-items: center; + margin-bottom: 2px; } .rce-mitem-body--top-title { font-size: 16px; padding: 0px 15px 0 0; - text-transform: uppercase; + text-transform: capitalize; font-weight: 600; } +.rce-mitem-body--top-title:hover { + cursor: pointer; + text-decoration: underline; + color: #6264a7; +} + .rce-mitem-body--bottom-title { color: #252525; font-size: 15px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .rce-mitem-body--top-time { font-size: 12px; color: rgba(0,0,0,0.4); } + +.rce-mitem-bottom-body { + padding: 10px 8px; +} + +.rce-mitem-bottom-body-top { + display: flex; + flex-direction: column; +} + +.rce-mitem-avatar-content { + position: absolute; + right: 10px; + display: flex; +} + +.rce-mitem-avatar { + padding: 0 3px 0 0; +} + +.rce-mitem-avatar img { + width: 50px; + height: 50px; + border: none !important; + background: #ccc; + border-radius: 100%; +} + +.rce-mtmg-call-record { + width: 350px; + height: 85%; + background: #eaeaea; + margin-top: 11px; +} + +.rce-mtmg-call-body { + display: flex; + align-items: flex-start; + flex-direction: row; + position: relative; +} + +.rce-mtmg-call-avatars { + width: 140px !important; + height: 100px !important; + position: relative; +} + +.rce-mtmg-call-avatars img { + width: 100% !important; + height: 100% !important; + background: #ccc; +} + +.rce-mtmg-call-body-title { + display: flex; + position: relative; + flex-direction: column; + top: 30px; + left: 15px; +} +.rce-mtmg-call-body-bottom { + color: #505050; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 185px; + font-size: 12px; +} + +.rce-mtmg-record:hover { + background: #d0d0d0; +} + +.rce-mtmg-record-time { + position: absolute; + bottom: 5px; + right: 5px; + font-size: 13px; + background: #000000cf; + color: white; + padding: 4px; + border-radius: 5px; +} diff --git a/src/MeetingMessage/MeetingMessage.js b/src/MeetingMessage/MeetingMessage.js index 4301cd2b..64f112b7 100644 --- a/src/MeetingMessage/MeetingMessage.js +++ b/src/MeetingMessage/MeetingMessage.js @@ -3,50 +3,58 @@ import './MeetingMessage.css'; import FaCalendar from 'react-icons/lib/fa/calendar'; import MdMoreHoriz from 'react-icons/lib/md/more-horiz'; +import FaCaretDown from 'react-icons/lib/fa/caret-down'; import { format, } from'timeago.js'; +import Avatar from '../Avatar/Avatar'; + +import classNames from 'classnames'; + export class MeetingMessage extends Component { constructor(props) { super(props); + this.state = { + toogle: false, + }; } - toggleClick(id) { - var x = document.getElementById(id); - if (x.style.display === "none" || x.style.display === "") { - x.style.display = "flex"; - } else { - x.style.display = "none"; - } + toggleClick() { + this.setState({ + toogle: !this.state.toogle, + }) } render() { const { - id, + date, title, - subject, + meetSubject, onClick, - date, + altTitle, dataSource, + participants, + onMeetingTitleClick, + onMeetingVideoLinkClick, } = this.props; + const PARTICIPANT_LIMIT = this.props.participantsLimit; + const dateText = date && !isNaN(date) && (format(date)); return ( -
+
- {subject || 'Unknown Meeting'} + {meetSubject || 'Unknown Meeting'}
this.toggleClick(id)}> + className="rce-mtmg-body" + onClick={onClick}>
@@ -62,33 +70,108 @@ export class MeetingMessage extends Component {
-
+
this.toggleClick()}> + { + this.state.toogle === true ? +
+ + {altTitle} +
+ : +
+ { + participants.slice(0, PARTICIPANT_LIMIT).map(x => x.title || 'Unknow').join(', ') + } + { + participants.length > PARTICIPANT_LIMIT && + + {'ve ' + (participants.length - PARTICIPANT_LIMIT) + ' diğer kişi'} + + } +
+ } +
+
{ dataSource && dataSource.map((x, i) => { return ( -
-
-
-
- {x.title} +
+
+
+
+
+ {x.title} +
+
+ { + x.date && + !isNaN(x.date) && + (format(x.date)) + } +
-
- { - x.date && - !isNaN(x.date) && - (format(x.date)) - } +
+
+ {x.message} +
-
-
- {x.message} +
+
+ { + x.event ? +
+
+ {x.event.title} +
+ { + x.event.avatars && + x.event.avatars.map((x, i) => x instanceof Avatar ? x : ( +
+ +
+ )) + } +
+ { + x.record ? +
+
+
+ +
+ {x.record.time} +
+
+
+ {x.record.title} +
+ {x.record.savedBy} +
+
+
+
+ : null + } +
-
+ : null + }
) @@ -102,14 +185,17 @@ export class MeetingMessage extends Component { } MeetingMessage.defaultProps = { - id: '', - alt: '', + date: new Date(), title: '', - subject: '', - message: '', + meetSubject: '', + altTitle: '', + participantsLimit: 3, + avatarFlexible: false, dataSource: [], - date: new Date(), + participants: [], onClick: () => void(0), + onMeetingTitleClick: () => void(0), + onMeetingVideoLinkClick: () => void(0), onAvatarError: () => void(0), }; diff --git a/src/MeetingMessage/__tests__/MeetingMessage.js b/src/MeetingMessage/__tests__/MeetingMessage.js new file mode 100644 index 00000000..d074bc17 --- /dev/null +++ b/src/MeetingMessage/__tests__/MeetingMessage.js @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; +import { shallow } from 'enzyme'; +import toJson from 'enzyme-to-json'; +import MeetingMessage from '../MeetingMessage'; + +describe('MeetingMessage component', () => { + it('should render without issues', () => { + const component = shallow(); + + expect(component.length).toBe(1); + expect(toJson(component)).toMatchSnapshot(); + }); +}); diff --git a/src/MeetingMessage/__tests__/__snapshots__/MeetingMessage.js.snap b/src/MeetingMessage/__tests__/__snapshots__/MeetingMessage.js.snap new file mode 100644 index 00000000..a1b8cf61 --- /dev/null +++ b/src/MeetingMessage/__tests__/__snapshots__/MeetingMessage.js.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MeetingMessage component should render without issues 1`] = ` +
+
+
+ Unknown Meeting +
+
+
+ +
+ + + just now + +
+
+
+ +
+
+
+
+
+
+
+
+`; diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js index b063528f..7d388074 100644 --- a/src/MessageBox/MessageBox.js +++ b/src/MessageBox/MessageBox.js @@ -40,8 +40,7 @@ export class MessageBox extends Component { render() { var positionCls = classNames('rce-mbox', { 'rce-mbox-right': this.props.position === 'right' }); - var thatAbsoluteTime = this.props.type !== 'text' && this.props.type !== 'file' && !(this.props.type === 'location' && this.props.text); - + var thatAbsoluteTime = !/(text|file|meeting)/g.test(this.props.type) && !(this.props.type === 'location' && this.props.text); const dateText = this.props.date && !isNaN(this.props.date) && ( this.props.dateString || @@ -191,12 +190,15 @@ export class MessageBox extends Component { this.props.type === 'meeting' && this.props.meeting && + onMeetingMessageClick={this.props.onMeetingMessageClick} + onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick} + onMeetingTitleClick={this.props.onMeetingTitleClick} /> }
this.onContextMenu(x, i, e))} onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))} onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))} + onMeetingTitleClick={this.props.onMeetingTitleClick && ((e) => this.onMeetingTitleClick(x, i, e))} + onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick && ((e) => this.onMeetingVideoLinkClick(x, i, e))} /> )) } From 185e902b1b93de1b745c2b73035d36a3f8687d47 Mon Sep 17 00:00:00 2001 From: esracoskun Date: Fri, 28 Aug 2020 11:43:01 +0300 Subject: [PATCH 05/11] style edited --- README.md | 4 ++-- example/App.js | 2 +- src/MeetingMessage/MeetingMessage.css | 8 ++++++++ src/MeetingMessage/MeetingMessage.js | 10 ++++++---- src/MessageBox/MessageBox.js | 2 +- 5 files changed, 18 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index eaaad4a8..e24b52ad 100644 --- a/README.md +++ b/README.md @@ -186,7 +186,7 @@ import { MessageBox } from 'react-chat-elements' import { MeetingMessage } from 'react-chat-elements' = 1 ? ({ - meetSubject: loremIpsum({ count: 2, units: 'words' }), + subject: loremIpsum({ count: 2, units: 'words' }), title: loremIpsum({ count: 2, units: 'words' }), date: +new Date(), altTitle: loremIpsum({ count: 2, units: 'words' }), diff --git a/src/MeetingMessage/MeetingMessage.css b/src/MeetingMessage/MeetingMessage.css index 7dc8eec4..dbbcff6f 100644 --- a/src/MeetingMessage/MeetingMessage.css +++ b/src/MeetingMessage/MeetingMessage.css @@ -220,6 +220,14 @@ top: 30px; left: 15px; } + +.rce-mtmg-call-body-title > span { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 185px; +} + .rce-mtmg-call-body-bottom { color: #505050; text-overflow: ellipsis; diff --git a/src/MeetingMessage/MeetingMessage.js b/src/MeetingMessage/MeetingMessage.js index 64f112b7..92640c0b 100644 --- a/src/MeetingMessage/MeetingMessage.js +++ b/src/MeetingMessage/MeetingMessage.js @@ -32,7 +32,7 @@ export class MeetingMessage extends Component { const { date, title, - meetSubject, + subject, onClick, altTitle, dataSource, @@ -50,7 +50,7 @@ export class MeetingMessage extends Component {
- {meetSubject || 'Unknown Meeting'} + {subject || 'Unknown Meeting'}
- {x.record.title} + + {x.record.title} +
{x.record.savedBy}
@@ -187,7 +189,7 @@ export class MeetingMessage extends Component { MeetingMessage.defaultProps = { date: new Date(), title: '', - meetSubject: '', + subject: '', altTitle: '', participantsLimit: 3, avatarFlexible: false, diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js index 7d388074..debba36a 100644 --- a/src/MessageBox/MessageBox.js +++ b/src/MessageBox/MessageBox.js @@ -190,7 +190,7 @@ export class MessageBox extends Component { this.props.type === 'meeting' && this.props.meeting && Date: Mon, 31 Aug 2020 13:33:10 +0300 Subject: [PATCH 06/11] =?UTF-8?q?MeetingMessage=20da=20d=C3=BCzenlemeler?= =?UTF-8?q?=20yap=C4=B1ld=C4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/MeetingMessage/MeetingMessage.js | 26 +++++++++++++------------- src/MessageList/MessageList.js | 14 ++------------ 2 files changed, 15 insertions(+), 25 deletions(-) diff --git a/src/MeetingMessage/MeetingMessage.js b/src/MeetingMessage/MeetingMessage.js index 92640c0b..5bb6528d 100644 --- a/src/MeetingMessage/MeetingMessage.js +++ b/src/MeetingMessage/MeetingMessage.js @@ -81,15 +81,15 @@ export class MeetingMessage extends Component {
:
- { - participants.slice(0, PARTICIPANT_LIMIT).map(x => x.title || 'Unknow').join(', ') - } - { - participants.length > PARTICIPANT_LIMIT && - - {'ve ' + (participants.length - PARTICIPANT_LIMIT) + ' diğer kişi'} - - } + + { + participants.slice(0, PARTICIPANT_LIMIT).map(x => x.title || 'Unknow').join(', ') + } + { + participants.length > PARTICIPANT_LIMIT && + `, +${(participants.length - PARTICIPANT_LIMIT)}` + } +
}
@@ -102,13 +102,13 @@ export class MeetingMessage extends Component { dataSource && dataSource.map((x, i) => { return ( -
+
+ onClick={(e) => onMeetingTitleClick(x, i, e)}> {x.title}
@@ -137,7 +137,7 @@ export class MeetingMessage extends Component { { x.event.avatars && x.event.avatars.map((x, i) => x instanceof Avatar ? x : ( -
+
@@ -149,7 +149,7 @@ export class MeetingMessage extends Component {
onMeetingVideoLinkClick(x, i, e)} className="rce-mtmg-call-avatars"> this.onContextMenu(x, i, e))} onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))} onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))} - onMeetingTitleClick={this.props.onMeetingTitleClick && ((e) => this.onMeetingTitleClick(x, i, e))} - onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick && ((e) => this.onMeetingVideoLinkClick(x, i, e))} + onMeetingTitleClick={this.props.onMeetingTitleClick} + onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick} /> )) } From dcc15af61908817394cebc7eee5705096168364e Mon Sep 17 00:00:00 2001 From: abdurrahmanekr Date: Mon, 31 Aug 2020 16:02:09 +0300 Subject: [PATCH 07/11] dateString feat added. --- src/MeetingMessage/MeetingMessage.js | 55 +++++++++++++++++----------- src/MessageBox/MessageBox.js | 1 + 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/MeetingMessage/MeetingMessage.js b/src/MeetingMessage/MeetingMessage.js index 5bb6528d..e6388598 100644 --- a/src/MeetingMessage/MeetingMessage.js +++ b/src/MeetingMessage/MeetingMessage.js @@ -31,6 +31,7 @@ export class MeetingMessage extends Component { render() { const { date, + dateString, title, subject, onClick, @@ -43,7 +44,7 @@ export class MeetingMessage extends Component { const PARTICIPANT_LIMIT = this.props.participantsLimit; - const dateText = date && !isNaN(date) && (format(date)); + const dateText = dateString ? dateString : (date && !isNaN(date) && (format(date))); return (
@@ -103,36 +104,47 @@ export class MeetingMessage extends Component { dataSource.map((x, i) => { return (
-
-
-
-
onMeetingTitleClick(x, i, e)}> - {x.title} -
-
- { - x.date && - !isNaN(x.date) && - (format(x.date)) - } + { + !x.event && +
+
+
+
onMeetingTitleClick(x, i, e)}> + {x.title} +
+
+ { + x.dateString ? x.dateString : (x.date && + !isNaN(x.date) && + (format(x.date))) + } +
-
-
-
- {x.message} +
+
+ {x.message} +
-
+ } +
{ x.event ?
{x.event.title} +
+ { + x.dateString ? x.dateString : (x.date && + !isNaN(x.date) && + (format(x.date))) + } +
{ x.event.avatars && @@ -188,6 +200,7 @@ export class MeetingMessage extends Component { MeetingMessage.defaultProps = { date: new Date(), + dateString: '', title: '', subject: '', altTitle: '', diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js index debba36a..70bd1059 100644 --- a/src/MessageBox/MessageBox.js +++ b/src/MessageBox/MessageBox.js @@ -193,6 +193,7 @@ export class MessageBox extends Component { subject={this.props.meeting.subject} title={this.props.meeting.title} date={this.props.meeting.date} + dateString={this.props.meeting.dateString} altTitle={this.props.meeting.altTitle} participants={this.props.meeting.participants} dataSource={this.props.meeting.dataSource} From 715d82d2b1250fdd44815a58fe777a1bd4a51e59 Mon Sep 17 00:00:00 2001 From: abdurrahmanekr Date: Mon, 31 Aug 2020 16:19:35 +0300 Subject: [PATCH 08/11] some styles --- src/MeetingMessage/MeetingMessage.css | 15 +++++++-------- src/MeetingMessage/MeetingMessage.js | 14 ++++++-------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/MeetingMessage/MeetingMessage.css b/src/MeetingMessage/MeetingMessage.css index dbbcff6f..a4654266 100644 --- a/src/MeetingMessage/MeetingMessage.css +++ b/src/MeetingMessage/MeetingMessage.css @@ -74,6 +74,7 @@ padding: 9px; color: #6264a7; cursor: pointer; + font-size: 13px; } .rce-mtmg-bottom--tptitle { @@ -118,8 +119,9 @@ display: flex; } -.rce-mitem:hover { - background: #d0d0d0; +.rce-mitem:hover, +.rce-mitem-event:hover { + background: #ececec; } .rce-mitem-body { @@ -137,7 +139,8 @@ } .rce-mitem-body--top-title { - font-size: 16px; + font-size: 15px; + color: #6264a7; padding: 0px 15px 0 0; text-transform: capitalize; font-weight: 600; @@ -151,7 +154,7 @@ .rce-mitem-body--bottom-title { color: #252525; - font-size: 15px; + font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } @@ -237,10 +240,6 @@ font-size: 12px; } -.rce-mtmg-record:hover { - background: #d0d0d0; -} - .rce-mtmg-record-time { position: absolute; bottom: 5px; diff --git a/src/MeetingMessage/MeetingMessage.js b/src/MeetingMessage/MeetingMessage.js index e6388598..f1ea8a5b 100644 --- a/src/MeetingMessage/MeetingMessage.js +++ b/src/MeetingMessage/MeetingMessage.js @@ -132,9 +132,9 @@ export class MeetingMessage extends Component {
} -
- { - x.event ? + { + x.event && +
{x.event.title} @@ -157,7 +157,7 @@ export class MeetingMessage extends Component { }
{ - x.record ? + x.record &&
- : null }
- : null - } -
+
+ }
) }) From e3882ffac005e50179a5b0de3b293611633b2630 Mon Sep 17 00:00:00 2001 From: kubraturan Date: Tue, 1 Sep 2020 15:08:35 +0300 Subject: [PATCH 09/11] readme.md updated --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e24b52ad..940b8a12 100644 --- a/README.md +++ b/README.md @@ -632,7 +632,9 @@ import { MeetingItem } from 'react-chat-elements' From fe4c88f35fff895851ff5d6787164b8aaf2ae631 Mon Sep 17 00:00:00 2001 From: esracoskun Date: Tue, 1 Sep 2020 16:30:21 +0300 Subject: [PATCH 10/11] meetingMessage style edited --- README.md | 4 +- example/App.js | 2 +- src/MeetingMessage/MeetingMessage.css | 66 +++++++++++++++++++++++---- src/MeetingMessage/MeetingMessage.js | 24 ++++++++-- src/MessageBox/MessageBox.js | 2 +- 5 files changed, 81 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 940b8a12..68ffc722 100644 --- a/README.md +++ b/README.md @@ -189,7 +189,7 @@ import { MeetingMessage } from 'react-chat-elements' subject={'New Release'} title={'in ullamco'} date={new Date()} - altTitle={'Commodo aliquip'} + collapseTitle={'Commodo aliquip'} participants={[ { id: '1', @@ -233,7 +233,7 @@ import { MeetingMessage } from 'react-chat-elements' | subject | none | string | Meeting messagee | | title | none | string | Meeting title | | date | new Date() | Date | Meeting date | -| altTitle | none | string | Meeting subtitle | +| collapseTitle | none | string | Meeting subtitle | | participants | [] | array | Meeting participant array | | dataSource | [] | array | meeting list array | | onMeetingMessageClick | none | function | meeting message on click event (message(object) is returned) | diff --git a/example/App.js b/example/App.js index 2649b652..2b1518d5 100644 --- a/example/App.js +++ b/example/App.js @@ -111,7 +111,7 @@ export class App extends Component { subject: loremIpsum({ count: 2, units: 'words' }), title: loremIpsum({ count: 2, units: 'words' }), date: +new Date(), - altTitle: loremIpsum({ count: 2, units: 'words' }), + collapseTitle: loremIpsum({ count: 2, units: 'words' }), participants: Array(this.token() + 6).fill(1).map(x => ({ id: parseInt(Math.random() * 10 % 6), title: loremIpsum({ count: 1, units: 'words' }), diff --git a/src/MeetingMessage/MeetingMessage.css b/src/MeetingMessage/MeetingMessage.css index a4654266..1330e976 100644 --- a/src/MeetingMessage/MeetingMessage.css +++ b/src/MeetingMessage/MeetingMessage.css @@ -4,8 +4,8 @@ justify-content: center; align-content: center; padding-bottom: 13px; - min-width: 500px; - max-width: 500px; + min-width: 425px; + max-width: 425px; } .rce-mtmg { @@ -19,6 +19,13 @@ border-radius: 2px; } +.rce-mtmg-title { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 300px; +} + .rce-mtmg-subject { text-align: start; display: inline-block; @@ -54,7 +61,6 @@ .rce-mtmg-item > svg { width: 23px; height: 23px; - padding: 10px; } .rce-mtmg-content { @@ -83,14 +89,11 @@ align-items: center; } -.rce-mtmg-bottom--tptitle > svg{ +.rce-mtmg-bottom--tptitle > svg, +.rce-mtmg-body-bottom--bttitle > svg { color: #6264a7a1; } -.rce-mtmg-body-bottom--bttitle > span { - padding: 0 0 0 6px; -} - .rce-mtmg-toogleContent { display: none; height: auto; @@ -117,6 +120,7 @@ .rce-mitem { display: flex; + padding: 10px 8px; } .rce-mitem:hover, @@ -129,7 +133,12 @@ justify-content: center; align-items: flex-start; flex-direction: column; - padding: 8px; +} + +.rce-mitem-body-content { + display: flex; + align-items: flex-start; + justify-content: flex-start; } .rce-mitem-body--top { @@ -149,7 +158,6 @@ .rce-mitem-body--top-title:hover { cursor: pointer; text-decoration: underline; - color: #6264a7; } .rce-mitem-body--bottom-title { @@ -165,6 +173,39 @@ .rce-mitem-bottom-body { padding: 10px 8px; + display: flex; + align-items: flex-start; + justify-content: flex-start; +} + +.rce-mitem-body.avatar { + padding: 8px 10px 0 0; +} + +.rce-mitem.avatar { + padding: 8px 5px 0 0; +} + +.rce-mitem.no-avatar { + padding: 8px 10px 0 0; +} + +.rce-mitem.no-avatar > svg { + width: 19px; + height: 19px; +} + +.rce-mitem.avatar img { + width: 22px; + height: 22px; + border: none !important; + background: #ccc; + border-radius: 100%; +} + +.rce-mitem-body.avatar > svg { + width: 19px; + height: 19px; } .rce-mitem-bottom-body-top { @@ -172,6 +213,10 @@ flex-direction: column; } +.rce-mitem-bottom-body-top-title > svg { + padding: 0 7px 0 0; +} + .rce-mitem-avatar-content { position: absolute; right: 10px; @@ -214,6 +259,7 @@ width: 100% !important; height: 100% !important; background: #ccc; + cursor: pointer; } .rce-mtmg-call-body-title { diff --git a/src/MeetingMessage/MeetingMessage.js b/src/MeetingMessage/MeetingMessage.js index f1ea8a5b..262215a5 100644 --- a/src/MeetingMessage/MeetingMessage.js +++ b/src/MeetingMessage/MeetingMessage.js @@ -4,6 +4,9 @@ import './MeetingMessage.css'; import FaCalendar from 'react-icons/lib/fa/calendar'; import MdMoreHoriz from 'react-icons/lib/md/more-horiz'; import FaCaretDown from 'react-icons/lib/fa/caret-down'; +import FaCaretRight from 'react-icons/lib/fa/caret-right'; +import IoVideo from 'react-icons/lib/io/ios-videocam-outline'; +import IoChatboxes from 'react-icons/lib/io/ios-chatboxes-outline'; import { format, @@ -35,7 +38,7 @@ export class MeetingMessage extends Component { title, subject, onClick, - altTitle, + collapseTitle, dataSource, participants, onMeetingTitleClick, @@ -78,10 +81,11 @@ export class MeetingMessage extends Component { this.state.toogle === true ?
- {altTitle} + {collapseTitle}
:
+ { participants.slice(0, PARTICIPANT_LIMIT).map(x => x.title || 'Unknow').join(', ') @@ -107,6 +111,17 @@ export class MeetingMessage extends Component { { !x.event &&
+
+ { + x.avatar ? + + : + } +
+
+ +
{x.event.title}
@@ -201,7 +219,7 @@ MeetingMessage.defaultProps = { dateString: '', title: '', subject: '', - altTitle: '', + collapseTitle: '', participantsLimit: 3, avatarFlexible: false, dataSource: [], diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js index 70bd1059..b220651e 100644 --- a/src/MessageBox/MessageBox.js +++ b/src/MessageBox/MessageBox.js @@ -194,7 +194,7 @@ export class MessageBox extends Component { title={this.props.meeting.title} date={this.props.meeting.date} dateString={this.props.meeting.dateString} - altTitle={this.props.meeting.altTitle} + collapseTitle={this.props.meeting.collapseTitle} participants={this.props.meeting.participants} dataSource={this.props.meeting.dataSource} onMeetingMessageClick={this.props.onMeetingMessageClick} From ed7f2d22073ba80befa4ab472a9c14dfdcc67817 Mon Sep 17 00:00:00 2001 From: abdurrahmanekr Date: Wed, 2 Sep 2020 17:12:50 +0300 Subject: [PATCH 11/11] mitem user-select removed --- src/MeetingMessage/MeetingMessage.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/MeetingMessage/MeetingMessage.css b/src/MeetingMessage/MeetingMessage.css index 1330e976..1114962b 100644 --- a/src/MeetingMessage/MeetingMessage.css +++ b/src/MeetingMessage/MeetingMessage.css @@ -1,5 +1,4 @@ .rce-mbox-mtmg { - user-select: none; display: flex; justify-content: center; align-content: center; @@ -128,6 +127,10 @@ background: #ececec; } +.rce-mitem-event { + user-select: none; +} + .rce-mitem-body { display: flex; justify-content: center; @@ -145,6 +148,7 @@ display: flex; align-items: center; margin-bottom: 2px; + user-select: none; } .rce-mitem-body--top-title {