Skip to content

Commit 0b65c37

Browse files
kursatsmsekkursatsmsek
committed
rce-mlist drag process added.
1 parent 9727343 commit 0b65c37

5 files changed

Lines changed: 129 additions & 51 deletions

File tree

‎example/App.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,13 @@ button {
5050
height: 50px;
5151
background: red;
5252
}
53+
54+
.on-drag-mlist {
55+
width: 100%;
56+
height: 100%;
57+
background-color: #e2f3f5;
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
z-index: 999;
62+
}

‎example/App.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -326,10 +326,10 @@ export class App extends Component {
326326
dataSource={chatSource}
327327
onClickMute={({...props}) => console.log(props)}
328328
onClickVideoCall={({...props}) => console.log(props)}
329-
onDragOver={(e, id) => console.log(id, 'onDragOver')}
329+
onDragEnter={(e, id) => console.log(id, 'onDragEnter')}
330330
onDragLeave={(e, id) => console.log(id, 'onDragLeave')}
331331
onDrop={(e, id) => console.log(e, id, 'onDrop')}
332-
onDragComponent={(id)=> <div>{'component ' + id}</div>} />
332+
onDragComponent={(id)=> <div className="on-drag-mlist">{loremIpsum({ count: 4, units: 'words' })}</div>} />
333333
:
334334
<MeetingList
335335
onMeetingClick={console.log}
@@ -362,8 +362,11 @@ export class App extends Component {
362362
className='message-list'
363363
lockable={true}
364364
downButtonBadge={10}
365-
dataSource={this.state.messageList} />
366-
365+
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>} />
367370
<Input
368371
placeholder="Mesajınızı buraya yazınız."
369372
defaultValue=""

‎src/ChatItem/ChatItem.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export class ChatItem extends Component {
2323
this.handleOnMouseEnter = this.handleOnMouseEnter.bind(this);
2424
this.handleOnMouseLeave = this.handleOnMouseLeave.bind(this);
2525
this.handleOnClick = this.handleOnClick.bind(this);
26+
this.onDragEnter = this.onDragEnter.bind(this);
2627
this.onDragOver = this.onDragOver.bind(this);
2728
this.onDragLeave = this.onDragLeave.bind(this);
2829
this.onDrop = this.onDrop.bind(this);
@@ -53,11 +54,16 @@ export class ChatItem extends Component {
5354
e.preventDefault();
5455
if (this.props.onDragOver instanceof Function)
5556
this.props.onDragOver(e, this.props.id)
57+
}
58+
59+
onDragEnter(e) {
60+
e.preventDefault();
61+
if (this.props.onDragEnter instanceof Function)
62+
this.props.onDragEnter(e, this.props.id)
5663
if (!this.state.onDrag)
5764
this.setState({ onDrag: true })
5865
}
5966

60-
6167
onDragLeave (e) {
6268
e.preventDefault();
6369
if (this.props.onDragLeave instanceof Function)
@@ -84,6 +90,7 @@ export class ChatItem extends Component {
8490
onContextMenu={this.props.onContextMenu}>
8591
<div className="rce-citem"
8692
onDragOver={this.onDragOver}
93+
onDragEnter={this.onDragEnter}
8794
onDragLeave={this.onDragLeave}
8895
onDrop={this.onDrop}>
8996
{

‎src/ChatList/ChatList.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export class ChatList extends Component {
4141
onClickMute={(e) => this.props.onClickMute(x, i, e)}
4242
onClickVideoCall={(e) => this.props.onClickVideoCall(x, i, e)}
4343
onDragOver={this.props.onDragOver}
44+
onDragEnter={this.props.onDragEnter}
4445
onDrop={this.props.onDrop}
4546
onDragLeave={this.props.onDragLeave}
4647
onDragComponent={this.props.onDragComponent} />
@@ -58,8 +59,9 @@ ChatList.defaultProps = {
5859
mute: null,
5960
onClickMute: null,
6061
onClickVideoCall: null,
61-
onDrop: () => void(0),
6262
onDragOver: () => void(0),
63+
onDrop: () => void(0),
64+
onDragEnter: () => void(0),
6365
onDragLeave: () => void(0),
6466
onDragComponent: null
6567
};

‎src/MessageList/MessageList.js‎

Lines changed: 101 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,15 @@ export class MessageList extends Component {
1414
this.state = {
1515
scrollBottom: 0,
1616
downButton: false,
17+
onDrag: false,
1718
};
1819

1920
this.loadRef = this.loadRef.bind(this);
2021
this.onScroll = this.onScroll.bind(this);
22+
this.onDragEnter = this.onDragEnter.bind(this);
23+
this.onDragOver = this.onDragOver.bind(this);
24+
this.onDragLeave = this.onDragLeave.bind(this);
25+
this.onDrop = this.onDrop.bind(this);
2126
}
2227

2328
checkScroll() {
@@ -160,55 +165,101 @@ export class MessageList extends Component {
160165
this.props.onMeetingLinkClick(item, i, e);
161166
}
162167

168+
onDragOver(e) {
169+
e.preventDefault();
170+
if (this.props.onDragOver instanceof Function)
171+
this.props.onDragOver(e)
172+
}
173+
174+
onDragEnter(e) {
175+
e.preventDefault();
176+
if (this.props.onDragEnter instanceof Function)
177+
this.props.onDragEnter(e)
178+
if (!this.state.onDrag)
179+
this.setState({ onDrag: true })
180+
}
181+
182+
183+
onDragLeave (e) {
184+
e.preventDefault();
185+
if (this.props.onDragLeave instanceof Function)
186+
this.props.onDragLeave(e)
187+
if (this.state.onDrag)
188+
this.setState({ onDrag: false })
189+
}
190+
191+
onDrop (e) {
192+
e.preventDefault();
193+
if (this.props.onDrop instanceof Function)
194+
this.props.onDrop(e)
195+
if (this.state.onDrag)
196+
this.setState({ onDrag: false })
197+
}
198+
163199
render() {
164200
return (
165201
<div
166-
className={classNames(['rce-container-mlist', this.props.className])}>
167-
<div
168-
ref={this.loadRef}
169-
onScroll={this.onScroll}
170-
className='rce-mlist'>
171-
{
172-
this.props.dataSource.map((x, i) => (
173-
<MessageBox
174-
key={i}
175-
{...x}
176-
onOpen={this.props.onOpen && ((e) => this.onOpen(x, i, e))}
177-
onPhotoError={this.props.onPhotoError && ((e) => this.onPhotoError(x, i, e))}
178-
onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
179-
onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
180-
onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
181-
onReplyClick={this.props.onReplyClick && ((e) => this.onReplyClick(x, i, e))}
182-
onReplyMessageClick={this.props.onReplyMessageClick && ((e) => this.onReplyMessageClick(x, i, e))}
183-
onRemoveMessageClick={this.props.onRemoveMessageClick && ((e) => this.onRemoveMessageClick(x, i, e))}
184-
onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
185-
onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
186-
onMeetingMoreSelect={this.props.onMeetingMoreSelect && ((e) => this.onMeetingMoreSelect(x, i, e))}
187-
onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))}
188-
onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))}
189-
onMeetingTitleClick={this.props.onMeetingTitleClick}
190-
onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick}
191-
onMeetingLinkClick={this.props.onMeetingLinkClick && ((e) => this.onMeetingLinkClick(x, i, e))}
192-
/>
193-
))
194-
}
195-
</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}>
207+
{
208+
!!this.props.onDragComponent && this.state.onDrag &&
209+
this.props.onDragComponent()
210+
}
196211
{
197-
this.props.downButton === true &&
198-
this.state.downButton &&
199-
this.props.toBottomHeight !== '100%' &&
200-
<div
201-
className='rce-mlist-down-button'
202-
onClick={this.toBottom.bind(this)}>
203-
<FaChevronDown/>
204-
{
205-
this.props.downButtonBadge &&
206-
<span
207-
className='rce-mlist-down-button--badge'>
208-
{this.props.downButtonBadge}
209-
</span>
210-
}
211-
</div>
212+
((this.state.onDrag && !this.props.onDragComponent) || !this.state.onDrag) &&
213+
[
214+
<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}>
222+
{
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+
))
245+
}
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+
]
212263
}
213264
</div>
214265
);
@@ -231,6 +282,11 @@ MessageList.defaultProps = {
231282
toBottomHeight: 300,
232283
downButton: true,
233284
downButtonBadge: null,
285+
onDragOver: () => void(0),
286+
onDrop: () => void(0),
287+
onDragEnter: () => void(0),
288+
onDragLeave: () => void(0),
289+
onDragComponent: null,
234290
};
235291

236292
export default MessageList;

0 commit comments

Comments
 (0)