Skip to content

Commit 9727343

Browse files
kursatsmsekkursatsmsek
committed
chatlist drag added
1 parent 2adfb6e commit 9727343

3 files changed

Lines changed: 135 additions & 83 deletions

File tree

‎example/App.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,11 @@ export class App extends Component {
325325
<ChatList
326326
dataSource={chatSource}
327327
onClickMute={({...props}) => console.log(props)}
328-
onClickVideoCall={({...props}) => console.log(props)} />
328+
onClickVideoCall={({...props}) => console.log(props)}
329+
onDragOver={(e, id) => console.log(id, 'onDragOver')}
330+
onDragLeave={(e, id) => console.log(id, 'onDragLeave')}
331+
onDrop={(e, id) => console.log(e, id, 'onDrop')}
332+
onDragComponent={(id)=> <div>{'component ' + id}</div>} />
329333
:
330334
<MeetingList
331335
onMeetingClick={console.log}

‎src/ChatItem/ChatItem.js‎

Lines changed: 121 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,15 @@ export class ChatItem extends Component {
1717
super(p);
1818
this.state = {
1919
onHoverTool: false,
20+
onDrag: false,
2021
};
2122

2223
this.handleOnMouseEnter = this.handleOnMouseEnter.bind(this);
2324
this.handleOnMouseLeave = this.handleOnMouseLeave.bind(this);
2425
this.handleOnClick = this.handleOnClick.bind(this);
26+
this.onDragOver = this.onDragOver.bind(this);
27+
this.onDragLeave = this.onDragLeave.bind(this);
28+
this.onDrop = this.onDrop.bind(this);
2529
}
2630

2731
handleOnMouseEnter() {
@@ -45,6 +49,31 @@ export class ChatItem extends Component {
4549
this.props.onClick();
4650
}
4751

52+
onDragOver(e) {
53+
e.preventDefault();
54+
if (this.props.onDragOver instanceof Function)
55+
this.props.onDragOver(e, this.props.id)
56+
if (!this.state.onDrag)
57+
this.setState({ onDrag: true })
58+
}
59+
60+
61+
onDragLeave (e) {
62+
e.preventDefault();
63+
if (this.props.onDragLeave instanceof Function)
64+
this.props.onDragLeave(e, this.props.id)
65+
if (this.state.onDrag)
66+
this.setState({ onDrag: false })
67+
}
68+
69+
onDrop (e) {
70+
e.preventDefault();
71+
if (this.props.onDrop instanceof Function)
72+
this.props.onDrop(e, this.props.id)
73+
if (this.state.onDrag)
74+
this.setState({ onDrag: false })
75+
}
76+
4877
render() {
4978
const statusColorType = this.props.statusColorType;
5079

@@ -53,97 +82,108 @@ export class ChatItem extends Component {
5382
className={classNames('rce-container-citem', this.props.className)}
5483
onClick={this.handleOnClick}
5584
onContextMenu={this.props.onContextMenu}>
56-
<div className="rce-citem">
57-
<div className={classNames(
58-
"rce-citem-avatar",
59-
{
60-
'rce-citem-status-encircle': statusColorType === 'encircle',
61-
}
62-
)}>
63-
<Avatar
64-
src={this.props.avatar}
65-
alt={this.props.alt}
66-
className={statusColorType === 'encircle' ? 'rce-citem-avatar-encircle-status' : ''}
67-
size="large"
68-
letterItem={this.props.letterItem}
69-
sideElement={
70-
this.props.statusColor &&
71-
<span
72-
className='rce-citem-status'
73-
style={statusColorType === 'encircle' ? {
74-
border: `solid 2px ${this.props.statusColor}`
75-
} : {
76-
backgroundColor: this.props.statusColor,
77-
}}>
78-
{this.props.statusText}
79-
</span>
80-
}
81-
onError={this.props.onAvatarError}
82-
lazyLoadingImage={this.props.lazyLoadingImage}
83-
type={classNames('circle', {'flexible': this.props.avatarFlexible})}/>
84-
</div>
85-
86-
<div className="rce-citem-body">
87-
<div className="rce-citem-body--top">
88-
<div className="rce-citem-body--top-title">
89-
{this.props.title}
90-
</div>
91-
<div className="rce-citem-body--top-time">
92-
{
93-
this.props.date &&
94-
!isNaN(this.props.date) &&
95-
(
96-
this.props.dateString ||
97-
format(this.props.date)
98-
)
99-
}
85+
<div className="rce-citem"
86+
onDragOver={this.onDragOver}
87+
onDragLeave={this.onDragLeave}
88+
onDrop={this.onDrop}>
89+
{
90+
!!this.props.onDragComponent && this.state.onDrag &&
91+
this.props.onDragComponent(this.props.id)
92+
}
93+
{
94+
((this.state.onDrag && !this.props.onDragComponent) || !this.state.onDrag) && [
95+
<div className={classNames(
96+
"rce-citem-avatar",
97+
{
98+
'rce-citem-status-encircle': statusColorType === 'encircle',
99+
}
100+
)}>
101+
<Avatar
102+
src={this.props.avatar}
103+
alt={this.props.alt}
104+
className={statusColorType === 'encircle' ? 'rce-citem-avatar-encircle-status' : ''}
105+
size="large"
106+
letterItem={this.props.letterItem}
107+
sideElement={
108+
this.props.statusColor &&
109+
<span
110+
className='rce-citem-status'
111+
style={statusColorType === 'encircle' ? {
112+
border: `solid 2px ${this.props.statusColor}`
113+
} : {
114+
backgroundColor: this.props.statusColor,
115+
}}>
116+
{this.props.statusText}
117+
</span>
118+
}
119+
onError={this.props.onAvatarError}
120+
lazyLoadingImage={this.props.lazyLoadingImage}
121+
type={classNames('circle', {'flexible': this.props.avatarFlexible})}/>
100122
</div>
101-
</div>
123+
,
124+
<div className="rce-citem-body">
125+
<div className="rce-citem-body--top">
126+
<div className="rce-citem-body--top-title">
127+
{this.props.title}
128+
</div>
129+
<div className="rce-citem-body--top-time">
130+
{
131+
this.props.date &&
132+
!isNaN(this.props.date) &&
133+
(
134+
this.props.dateString ||
135+
format(this.props.date)
136+
)
137+
}
138+
</div>
139+
</div>
102140

103-
<div className="rce-citem-body--bottom">
104-
<div className="rce-citem-body--bottom-title">
105-
{this.props.subtitle}
106-
</div>
107-
<div className="rce-citem-body--bottom-tools" onMouseEnter={this.handleOnMouseEnter} onMouseLeave={this.handleOnMouseLeave}>
108-
{
109-
this.props.showMute &&
110-
<div className="rce-citem-body--bottom-tools-item"
111-
onClick={this.props.onClickMute}>
141+
<div className="rce-citem-body--bottom">
142+
<div className="rce-citem-body--bottom-title">
143+
{this.props.subtitle}
144+
</div>
145+
<div className="rce-citem-body--bottom-tools" onMouseEnter={this.handleOnMouseEnter} onMouseLeave={this.handleOnMouseLeave}>
112146
{
113-
this.props.muted === true &&
114-
<MdVolumeOff />
147+
this.props.showMute &&
148+
<div className="rce-citem-body--bottom-tools-item"
149+
onClick={this.props.onClickMute}>
150+
{
151+
this.props.muted === true &&
152+
<MdVolumeOff />
153+
}
154+
{
155+
this.props.muted === false &&
156+
<MdVolumeUp />
157+
}
158+
</div>
115159
}
116160
{
117-
this.props.muted === false &&
118-
<MdVolumeUp />
161+
this.props.showVideoCall &&
162+
<div className="rce-citem-body--bottom-tools-item"
163+
onClick={this.props.onClickVideoCall}>
164+
<MdVideoCall />
165+
</div>
119166
}
120167
</div>
121-
}
122-
{
123-
this.props.showVideoCall &&
124-
<div className="rce-citem-body--bottom-tools-item"
125-
onClick={this.props.onClickVideoCall}>
126-
<MdVideoCall />
168+
<div className="rce-citem-body--bottom-tools-item-hidden-hover">
169+
{
170+
this.props.showMute &&
171+
this.props.muted &&
172+
<div className="rce-citem-body--bottom-tools-item">
173+
<MdVolumeOff />
174+
</div>
175+
}
127176
</div>
128-
}
129-
</div>
130-
<div className="rce-citem-body--bottom-tools-item-hidden-hover">
131-
{
132-
this.props.showMute &&
133-
this.props.muted &&
134-
<div className="rce-citem-body--bottom-tools-item">
135-
<MdVolumeOff />
177+
<div className="rce-citem-body--bottom-status">
178+
{
179+
this.props.unread > 0 &&
180+
<span>{this.props.unread}</span>
181+
}
136182
</div>
137-
}
138-
</div>
139-
<div className="rce-citem-body--bottom-status">
140-
{
141-
this.props.unread > 0 &&
142-
<span>{this.props.unread}</span>
143-
}
183+
</div>
144184
</div>
145-
</div>
146-
</div>
185+
]
186+
}
147187
</div>
148188
</div>
149189
);

‎src/ChatList/ChatList.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,11 @@ export class ChatList extends Component {
3939
onContextMenu={(e) => this.onContextMenu(x, i, e)}
4040
onClick={(e) => this.onClick(x, i, e)}
4141
onClickMute={(e) => this.props.onClickMute(x, i, e)}
42-
onClickVideoCall={(e) => this.props.onClickVideoCall(x, i, e)}/>
42+
onClickVideoCall={(e) => this.props.onClickVideoCall(x, i, e)}
43+
onDragOver={this.props.onDragOver}
44+
onDrop={this.props.onDrop}
45+
onDragLeave={this.props.onDragLeave}
46+
onDragComponent={this.props.onDragComponent} />
4347
))
4448
}
4549
</div>
@@ -54,6 +58,10 @@ ChatList.defaultProps = {
5458
mute: null,
5559
onClickMute: null,
5660
onClickVideoCall: null,
61+
onDrop: () => void(0),
62+
onDragOver: () => void(0),
63+
onDragLeave: () => void(0),
64+
onDragComponent: null
5765
};
5866

5967
export default ChatList;

0 commit comments

Comments
 (0)