Skip to content

Commit 570c40c

Browse files
kubraturanabdurrahmanekr
kubraturan
authored and
abdurrahmanekr
committed
The focus being on messages was done in the messageBox.
1 parent eabdf86 commit 570c40c

4 files changed

Lines changed: 51 additions & 69 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,8 @@ import { MessageBox } from 'react-chat-elements'
145145
| avatar | none | url | message box avatar url |
146146
| renderAddCmp | none | function (component) | adding custom components to message box |
147147
| copiableDate | false | boolean | message box date text copiable |
148-
| messageFocus | false | boolean | used in message focus feature in MessageList component, makes style of the component focused |
148+
| focus | false | boolean | used in message focus feature in MessageList component, makes style of the component focused |
149+
| onMessageFocused | none | function | makes focus value false after the message becomes focus |
149150

150151

151152
## SystemMessage Component
@@ -205,9 +206,6 @@ import { MessageList } from 'react-chat-elements'
205206
| downButtonBadge | none | boolean | message list downButton badge content |
206207
| onDownButtonClick | none | function | message list onDownButtonClick |
207208
| onContextMenu | none | function | message list item onContextMenu event, gets 3 parameters: message item, index of item, event |
208-
| focusedMessage | none | string | id of a message to focus on, this prop makes the MessageList scroll into MessageBox item of given message id |
209-
| scrollBlock | 'center' | string | used in scroll into focusedMessage as value of block property in parameter of scrollIntoView function |
210-
211209

212210
## ChatList Component
213211

‎src/MessageBox/MessageBox.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@
6565
}
6666

6767
.rce-mbox.message-focus {
68-
animation-iteration-count: 4;
69-
-webkit-animation-iteration-count: 5;
68+
animation-iteration-count: 2;
69+
-webkit-animation-iteration-count: 2;
7070
-webkit-animation-duration: 1s;
7171
animation-name: message-box-default-focus;
7272
animation-duration: 1s;
@@ -92,8 +92,8 @@
9292
}
9393

9494
.rce-mbox.rce-mbox-right.message-focus {
95-
animation-iteration-count: 4;
96-
-webkit-animation-iteration-count: 5;
95+
animation-iteration-count: 2;
96+
-webkit-animation-iteration-count: 2;
9797
-webkit-animation-duration: 1s;
9898
animation-name: message-box-right-focus;
9999
animation-duration: 1s;
@@ -161,8 +161,8 @@
161161
}
162162

163163
.rce-mbox-right-notch.message-focus {
164-
animation-iteration-count: 4;
165-
-webkit-animation-iteration-count: 5;
164+
animation-iteration-count: 2;
165+
-webkit-animation-iteration-count: 2;
166166
-webkit-animation-duration: 1s;
167167
animation-name: message-right-notch-focus;
168168
animation-duration: 1s;
@@ -183,8 +183,8 @@
183183
}
184184

185185
.rce-mbox-left-notch.message-focus {
186-
animation-iteration-count: 4;
187-
-webkit-animation-iteration-count: 5;
186+
animation-iteration-count: 2;
187+
-webkit-animation-iteration-count: 2;
188188
-webkit-animation-duration: 1s;
189189
animation-name: message-left-notch-focus;
190190
animation-duration: 1s;

‎src/MessageBox/MessageBox.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,19 @@ import {
2323
import classNames from 'classnames';
2424

2525
export class MessageBox extends Component {
26+
componentWillReceiveProps(nextProps) {
27+
if (nextProps.focus !== this.props.focus && nextProps.focus === true) {
28+
if (this.refs['message']) {
29+
this.refs['message'].scrollIntoView({
30+
block: "center",
31+
behavior: 'smooth'
32+
})
33+
34+
this.props.onMessageFocused(nextProps);
35+
}
36+
}
37+
}
38+
2639
render() {
2740
var positionCls = classNames('rce-mbox', { 'rce-mbox-right': this.props.position === 'right' });
2841
var thatAbsoluteTime = this.props.type !== 'text' && this.props.type !== 'file' && !(this.props.type === 'location' && this.props.text);
@@ -35,6 +48,7 @@ export class MessageBox extends Component {
3548

3649
return (
3750
<div
51+
ref='message'
3852
className={classNames('rce-container-mbox', this.props.className)}
3953
onClick={this.props.onClick}>
4054
{
@@ -51,7 +65,7 @@ export class MessageBox extends Component {
5165
positionCls,
5266
{'rce-mbox--clear-padding': thatAbsoluteTime},
5367
{'rce-mbox--clear-notch': !this.props.notch},
54-
{ 'message-focus': this.props.messageFocus},
68+
{ 'message-focus': this.props.focus},
5569
)}>
5670
<div
5771
className='rce-mbox-body'
@@ -190,15 +204,15 @@ export class MessageBox extends Component {
190204
(this.props.position === 'right' ?
191205
<svg className={classNames(
192206
"rce-mbox-right-notch",
193-
{ 'message-focus': this.props.messageFocus},
207+
{ 'message-focus': this.props.focus},
194208
)} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
195209
<path d="M0 0v20L20 0" />
196210
</svg>
197211
:
198212
<div>
199213
<svg className={classNames(
200214
"rce-mbox-left-notch",
201-
{ 'message-focus': this.props.messageFocus},
215+
{ 'message-focus': this.props.focus},
202216
)} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
203217
<defs>
204218
<filter id="filter1" x="0" y="0">
@@ -241,7 +255,8 @@ MessageBox.defaultProps = {
241255
renderAddCmp: null,
242256
copiableDate: false,
243257
onContextMenu: null,
244-
messageFocus: false,
258+
focus: false,
259+
onMessageFocused: null,
245260
};
246261

247262

‎src/MessageList/MessageList.js‎

Lines changed: 22 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,7 @@ export class MessageList extends Component {
2020
};
2121

2222
this.loadRef = this.loadRef.bind(this);
23-
this.createReferenceOfMessage = this.createReferenceOfMessage.bind(this);
2423
this.onScroll = this.onScroll.bind(this);
25-
this.messageRefs = [];
26-
}
27-
28-
scrollIntoMessage(focusedMessage) {
29-
var message = this.messageRefs.find(x => x.messageId === focusedMessage);
30-
if (message !== undefined) {
31-
this.setState({
32-
messageFocus: true,
33-
}, () => {
34-
message.ref.scrollIntoView({block: this.props.scrollBlock, behavior: 'smooth',});
35-
});
36-
}
3724
}
3825

3926
checkScroll() {
@@ -54,12 +41,11 @@ export class MessageList extends Component {
5441
componentWillReceiveProps(nextProps) {
5542
if (!this.mlistRef)
5643
return;
57-
this.setState({
58-
scrollBottom: this.getBottom(this.mlistRef),
59-
}, this.checkScroll.bind(this));
60-
61-
if (nextProps.focusedMessage)
62-
this.scrollIntoMessage(nextProps.focusedMessage);
44+
if (nextProps.dataSource.length !== this.props.dataSource.length) {
45+
this.setState({
46+
scrollBottom: this.getBottom(this.mlistRef),
47+
}, this.checkScroll.bind(this));
48+
}
6349
}
6450

6551
getBottom(e) {
@@ -96,28 +82,17 @@ export class MessageList extends Component {
9682
this.props.onContextMenu(item, i, e);
9783
}
9884

85+
onMessageFocused(item, i, e) {
86+
if (this.props.onMessageFocused instanceof Function)
87+
this.props.onMessageFocused(item, i, e);
88+
}
89+
9990
loadRef(ref) {
10091
this.mlistRef = ref;
10192
if (this.props.cmpRef instanceof Function)
10293
this.props.cmpRef(ref);
10394
}
10495

105-
createReferenceOfMessage(ref, messageId) {
106-
var check = this.messageRefs.find(res => res.messageId === messageId);
107-
108-
if (check !== undefined) {
109-
var index = this.messageRefs.indexOf(check);
110-
if (index !== -1) {
111-
this.messageRefs.splice(index, 1);
112-
}
113-
}
114-
115-
this.messageRefs.push({
116-
ref: ref,
117-
messageId: messageId,
118-
});
119-
}
120-
12196
onScroll(e) {
12297
var bottom = this.getBottom(e.target);
12398
this.state.scrollBottom = bottom;
@@ -163,22 +138,18 @@ export class MessageList extends Component {
163138
className='rce-mlist'>
164139
{
165140
this.props.dataSource.map((x, i) => (
166-
<div
167-
ref={ref => this.createReferenceOfMessage(ref, x.id)}>
168-
<MessageBox
169-
key={i}
170-
{...x}
171-
focusedMessage={this.props.focusedMessage}
172-
messageFocus={x.id === this.props.focusedMessage && this.state.messageFocus}
173-
onOpen={this.props.onOpen && ((e) => this.onOpen(x, i, e))}
174-
onFocus={this.props.onFocus && ((e) => this.onFocus(x, i, e)) }
175-
onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
176-
onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
177-
onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
178-
onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
179-
onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
180-
/>
181-
</div>
141+
<MessageBox
142+
key={i}
143+
{...x}
144+
onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))}
145+
onOpen={this.props.onOpen && ((e) => this.onOpen(x, i, e))}
146+
onFocus={this.props.onFocus && ((e) => this.onFocus(x, i, e)) }
147+
onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
148+
onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
149+
onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
150+
onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
151+
onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
152+
/>
182153
))
183154
}
184155
</div>
@@ -216,8 +187,6 @@ MessageList.defaultProps = {
216187
toBottomHeight: 300,
217188
downButton: true,
218189
downButtonBadge: null,
219-
focusedMessage: null,
220-
scrollBlock: 'center',
221190
};
222191

223192
export default MessageList;

0 commit comments

Comments
 (0)