Skip to content

Commit 38d3763

Browse files
author
Emre Güdür
committed
new feature added to messagelist
1 parent 0b65c37 commit 38d3763

2 files changed

Lines changed: 84 additions & 59 deletions

File tree

‎example/App.js‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ export class App extends Component {
3737
show: true,
3838
list: 'chat',
3939
messageList: [],
40+
isShowChild: false,
41+
preview: false,
4042
};
4143

4244
this.addMessage = this.addMessage.bind(this);
@@ -363,10 +365,43 @@ export class App extends Component {
363365
lockable={true}
364366
downButtonBadge={10}
365367
dataSource={this.state.messageList}
366-
onDragEnter={(e) => console.log(e, 'onDragEnter')}
367-
onDragLeave={(e) => console.log(e, 'onDragLeave')}
368-
onDrop={(e) => console.log(e, 'onDrop')}
369-
onDragComponent={()=> <div className="on-drag-mlist">{loremIpsum({ count: 4, units: 'words' })}</div>} />
368+
sendMessagePreview={true}
369+
isShowChild={this.state.isShowChild}
370+
customProps={{
371+
onDragEnter: (e) => {
372+
e.preventDefault()
373+
console.log('onDragEnter')
374+
this.setState({ isShowChild: true })
375+
}
376+
}} >
377+
{
378+
this.state.preview ?
379+
<div
380+
className="on-drag-mlist"
381+
onClick={()=> {
382+
this.setState({ isShowChild: false, preview: false })
383+
}}>preview click and finish</div>
384+
:
385+
<div
386+
className="on-drag-mlist"
387+
onDragOver={(e) => {
388+
e.preventDefault()
389+
console.log('onDragOver')
390+
}}
391+
onDragLeave={(e) => {
392+
e.preventDefault()
393+
console.log('onDragLeave')
394+
this.setState({ isShowChild: false })
395+
}}
396+
onDrop={(e) => {
397+
e.preventDefault()
398+
console.log(e.dataTransfer.files, 'onDrop')
399+
this.setState({ preview: true })
400+
}}>
401+
{loremIpsum({ count: 4, units: 'words' })}
402+
</div>
403+
}
404+
</MessageList>
370405
<Input
371406
placeholder="Mesajınızı buraya yazınız."
372407
defaultValue=""

‎src/MessageList/MessageList.js‎

Lines changed: 45 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -199,67 +199,57 @@ export class MessageList extends Component {
199199
render() {
200200
return (
201201
<div
202-
className={classNames(['rce-container-mlist', this.props.className])}
203-
onDragOver={this.onDragOver}
204-
onDragEnter={this.onDragEnter}
205-
onDragLeave={this.onDragLeave}
206-
onDrop={this.onDrop}>
202+
className={classNames(['rce-container-mlist', this.props.className])} {...this.props.customProps}>
207203
{
208-
!!this.props.onDragComponent && this.state.onDrag &&
209-
this.props.onDragComponent()
204+
!!this.props.children && this.props.isShowChild &&
205+
this.props.children
210206
}
207+
<div
208+
ref={this.loadRef}
209+
onScroll={this.onScroll}
210+
className='rce-mlist'>
211+
{
212+
this.props.dataSource.map((x, i) => (
213+
<MessageBox
214+
key={i}
215+
{...x}
216+
onOpen={this.props.onOpen && ((e) => this.onOpen(x, i, e))}
217+
onPhotoError={this.props.onPhotoError && ((e) => this.onPhotoError(x, i, e))}
218+
onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
219+
onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
220+
onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
221+
onReplyClick={this.props.onReplyClick && ((e) => this.onReplyClick(x, i, e))}
222+
onReplyMessageClick={this.props.onReplyMessageClick && ((e) => this.onReplyMessageClick(x, i, e))}
223+
onRemoveMessageClick={this.props.onRemoveMessageClick && ((e) => this.onRemoveMessageClick(x, i, e))}
224+
onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
225+
onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
226+
onMeetingMoreSelect={this.props.onMeetingMoreSelect && ((e) => this.onMeetingMoreSelect(x, i, e))}
227+
onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))}
228+
onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))}
229+
onMeetingTitleClick={this.props.onMeetingTitleClick}
230+
onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick}
231+
onMeetingLinkClick={this.props.onMeetingLinkClick && ((e) => this.onMeetingLinkClick(x, i, e))}
232+
/>
233+
))
234+
}
235+
</div>
211236
{
212-
((this.state.onDrag && !this.props.onDragComponent) || !this.state.onDrag) &&
213-
[
237+
238+
this.props.downButton === true &&
239+
this.state.downButton &&
240+
this.props.toBottomHeight !== '100%' &&
214241
<div
215-
ref={this.loadRef}
216-
onScroll={this.onScroll}
217-
className='rce-mlist'
218-
onDragOver={this.onDragOver}
219-
onDragEnter={this.onDragEnter}
220-
onDragLeave={this.onDragLeave}
221-
onDrop={this.onDrop}>
242+
className='rce-mlist-down-button'
243+
onClick={this.toBottom.bind(this)}>
244+
<FaChevronDown/>
222245
{
223-
this.props.dataSource.map((x, i) => (
224-
<MessageBox
225-
key={i}
226-
{...x}
227-
onOpen={this.props.onOpen && ((e) => this.onOpen(x, i, e))}
228-
onPhotoError={this.props.onPhotoError && ((e) => this.onPhotoError(x, i, e))}
229-
onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
230-
onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
231-
onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
232-
onReplyClick={this.props.onReplyClick && ((e) => this.onReplyClick(x, i, e))}
233-
onReplyMessageClick={this.props.onReplyMessageClick && ((e) => this.onReplyMessageClick(x, i, e))}
234-
onRemoveMessageClick={this.props.onRemoveMessageClick && ((e) => this.onRemoveMessageClick(x, i, e))}
235-
onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
236-
onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
237-
onMeetingMoreSelect={this.props.onMeetingMoreSelect && ((e) => this.onMeetingMoreSelect(x, i, e))}
238-
onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))}
239-
onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))}
240-
onMeetingTitleClick={this.props.onMeetingTitleClick}
241-
onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick}
242-
onMeetingLinkClick={this.props.onMeetingLinkClick && ((e) => this.onMeetingLinkClick(x, i, e))}
243-
/>
244-
))
246+
this.props.downButtonBadge &&
247+
<span
248+
className='rce-mlist-down-button--badge'>
249+
{this.props.downButtonBadge}
250+
</span>
245251
}
246-
</div>,
247-
this.props.downButton === true &&
248-
this.state.downButton &&
249-
this.props.toBottomHeight !== '100%' &&
250-
<div
251-
className='rce-mlist-down-button'
252-
onClick={this.toBottom.bind(this)}>
253-
<FaChevronDown/>
254-
{
255-
this.props.downButtonBadge &&
256-
<span
257-
className='rce-mlist-down-button--badge'>
258-
{this.props.downButtonBadge}
259-
</span>
260-
}
261-
</div>
262-
]
252+
</div>
263253
}
264254
</div>
265255
);

0 commit comments

Comments
 (0)