Skip to content

Commit d91acee

Browse files
esracoskunesracoskun
authored
Merge pull request #161 from Detaysoft/drag-drop
chatlist drag added
2 parents 7244d27 + bb6fabd commit d91acee

File tree

5 files changed

+191
-84
lines changed

5 files changed

+191
-84
lines changed

‎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: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ function App() {
3535
const [messageList, setMessageList] = useState([]);
3636
const [chatSource, setChatSource] = useState([]);
3737
const [meetingSource, setMeetingSource] = useState([]);
38+
const [isShowChild, setIsShowChild] = useState(false);
39+
const [preview, setPreview] = useState(false);
3840

3941
useEffect(() => {
4042
addMessage(8);
@@ -268,6 +270,7 @@ function App() {
268270
var list = messageList;
269271
list.push(random('message', mtype));
270272
setMessageList(list);
273+
clearRef();
271274
forceUpdate();
272275
}
273276

@@ -316,7 +319,11 @@ function App() {
316319
<ChatList
317320
dataSource={chatSource}
318321
onClickMute={({...props}) => console.log(props)}
319-
onClickVideoCall={({...props}) => console.log(props)} />
322+
onClickVideoCall={({...props}) => console.log(props)}
323+
onDragEnter={(e, id) => console.log(id, 'onDragEnter')}
324+
onDragLeave={(e, id) => console.log(id, 'onDragLeave')}
325+
onDrop={(e, id) => console.log(e, id, 'onDrop')}
326+
onDragComponent={(id)=> <div className="on-drag-mlist">{loremIpsum({ count: 4, units: 'words' })}</div>} />
320327
:
321328
<MeetingList
322329
onMeetingClick={console.log}
@@ -349,7 +356,45 @@ function App() {
349356
className='message-list'
350357
lockable={true}
351358
downButtonBadge={10}
352-
dataSource={messageList} />
359+
dataSource={messageList}
360+
sendMessagePreview={true}
361+
isShowChild={isShowChild}
362+
customProps={{
363+
onDragEnter: (e) => {
364+
e.preventDefault()
365+
console.log('onDragEnter')
366+
setIsShowChild(true);
367+
}
368+
}} >
369+
{
370+
preview ?
371+
<div
372+
className="on-drag-mlist"
373+
onClick={()=> {
374+
setIsShowChild(false);
375+
setPreview(false);
376+
}}>preview click and finish</div>
377+
:
378+
<div
379+
className="on-drag-mlist"
380+
onDragOver={(e) => {
381+
e.preventDefault()
382+
console.log('onDragOver')
383+
}}
384+
onDragLeave={(e) => {
385+
e.preventDefault()
386+
console.log('onDragLeave')
387+
setIsShowChild(false);
388+
}}
389+
onDrop={(e) => {
390+
e.preventDefault()
391+
console.log(e.dataTransfer.files, 'onDrop')
392+
setPreview(true);
393+
}}>
394+
{loremIpsum({ count: 4, units: 'words' })}
395+
</div>
396+
}
397+
</MessageList>
353398

354399
<Input
355400
placeholder="Mesajınızı buraya yazınız."

‎src/ChatItem/ChatItem.js‎

Lines changed: 116 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { MdVideoCall, MdVolumeOff, MdVolumeUp } from 'react-icons/lib/md';
1414
function ChatItem(props) {
1515
const [onHoverTool, setOnHoverTool] = useState(false);
1616
const statusColorType = props.statusColorType;
17+
const [onDrag, setOnDrag] = useState(false);
1718

1819
const handleOnMouseEnter = () => {
1920
setOnHoverTool(true);
@@ -32,102 +33,138 @@ function ChatItem(props) {
3233
props.onClick();
3334
}
3435

36+
const onDragOver = (e) => {
37+
e.preventDefault();
38+
if (props.onDragOver instanceof Function)
39+
props.onDragOver(e, props.id)
40+
}
41+
42+
const onDragEnter = (e) => {
43+
e.preventDefault();
44+
if (props.onDragEnter instanceof Function)
45+
props.onDragEnter(e, props.id)
46+
if (!onDrag)
47+
setOnDrag(true);
48+
}
49+
50+
const onDragLeave = (e) => {
51+
e.preventDefault();
52+
if (props.onDragLeave instanceof Function)
53+
props.onDragLeave(e, props.id)
54+
if (onDrag)
55+
setOnDrag(false);
56+
}
57+
58+
const onDrop = (e) => {
59+
e.preventDefault();
60+
if (props.onDrop instanceof Function)
61+
props.onDrop(e, props.id)
62+
if (onDrag)
63+
setOnDrag(false);
64+
}
65+
3566
return (
3667
<div
68+
key={props.id}
3769
className={classNames('rce-container-citem', props.className)}
3870
onClick={handleOnClick}
3971
onContextMenu={props.onContextMenu}>
40-
<div className='rce-citem'>
41-
<div className={classNames(
42-
'rce-citem-avatar',
43-
{
44-
'rce-citem-status-encircle': statusColorType === 'encircle',
45-
}
46-
)}>
47-
<Avatar
48-
src={props.avatar}
49-
alt={props.alt}
50-
className={statusColorType === 'encircle' ? 'rce-citem-avatar-encircle-status' : ''}
51-
size='large'
52-
letterItem={props.letterItem}
53-
sideElement={
54-
props.statusColor &&
55-
<span
56-
className='rce-citem-status'
57-
style={statusColorType === 'encircle' ? {
58-
border: `solid 2px ${props.statusColor}`
59-
} : {
60-
backgroundColor: props.statusColor,
61-
}}>
62-
{props.statusText}
63-
</span>
64-
}
65-
onError={props.onAvatarError}
66-
lazyLoadingImage={props.lazyLoadingImage}
67-
type={classNames('circle', {'flexible': props.avatarFlexible})}/>
68-
</div>
69-
70-
<div className='rce-citem-body'>
71-
<div className='rce-citem-body--top'>
72-
<div className='rce-citem-body--top-title'>
73-
{props.title}
74-
</div>
75-
<div className='rce-citem-body--top-time'>
76-
{
77-
props.date &&
78-
!isNaN(props.date) &&
79-
(
80-
props.dateString ||
81-
format(props.date)
82-
)
72+
<div className="rce-citem"
73+
onDragOver={onDragOver}
74+
onDragEnter={onDragEnter}
75+
onDragLeave={onDragLeave}
76+
onDrop={onDrop}>
77+
{
78+
!!props.onDragComponent && onDrag &&
79+
props.onDragComponent(props.id)
80+
}
81+
{((onDrag && !props.onDragComponent) || !onDrag) && [
82+
<div className={classNames("rce-citem-avatar", { 'rce-citem-status-encircle': statusColorType === 'encircle' })}>
83+
<Avatar
84+
src={props.avatar}
85+
alt={props.alt}
86+
className={statusColorType === 'encircle' ? 'rce-citem-avatar-encircle-status' : ''}
87+
size="large"
88+
letterItem={props.letterItem}
89+
sideElement={
90+
props.statusColor &&
91+
<span
92+
className='rce-citem-status'
93+
style={statusColorType === 'encircle' ? {
94+
border: `solid 2px ${props.statusColor}`
95+
} : {
96+
backgroundColor: props.statusColor,
97+
}}>
98+
{props.statusText}
99+
</span>
83100
}
101+
onError={props.onAvatarError}
102+
lazyLoadingImage={props.lazyLoadingImage}
103+
type={classNames('circle', {'flexible': props.avatarFlexible})}/>
84104
</div>
85-
</div>
105+
,
106+
<div className="rce-citem-body">
107+
<div className="rce-citem-body--top">
108+
<div className="rce-citem-body--top-title">
109+
{props.title}
110+
</div>
111+
<div className="rce-citem-body--top-time">
112+
{
113+
props.date &&
114+
!isNaN(props.date) &&
115+
(
116+
props.dateString ||
117+
format(props.date)
118+
)
119+
}
120+
</div>
121+
</div>
86122

87-
<div className='rce-citem-body--bottom'>
88-
<div className='rce-citem-body--bottom-title'>
89-
{props.subtitle}
90-
</div>
91-
<div className='rce-citem-body--bottom-tools' onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
92-
{
93-
props.showMute &&
94-
<div className='rce-citem-body--bottom-tools-item'
95-
onClick={props.onClickMute}>
123+
<div className="rce-citem-body--bottom">
124+
<div className="rce-citem-body--bottom-title">
125+
{props.subtitle}
126+
</div>
127+
<div className="rce-citem-body--bottom-tools" onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
96128
{
97-
props.muted === true &&
98-
<MdVolumeOff />
129+
props.showMute &&
130+
<div className="rce-citem-body--bottom-tools-item"
131+
onClick={props.onClickMute}>
132+
{
133+
props.muted === true &&
134+
<MdVolumeOff />
135+
}
136+
{
137+
props.muted === false &&
138+
<MdVolumeUp />
139+
}
140+
</div>
99141
}
100142
{
101-
props.muted === false &&
102-
<MdVolumeUp />
143+
props.showVideoCall &&
144+
<div className="rce-citem-body--bottom-tools-item"
145+
onClick={props.onClickVideoCall}>
146+
<MdVideoCall />
147+
</div>
103148
}
104149
</div>
105-
}
106-
{
107-
props.showVideoCall &&
108-
<div className='rce-citem-body--bottom-tools-item'
109-
onClick={props.onClickVideoCall}>
110-
<MdVideoCall />
150+
<div className="rce-citem-body--bottom-tools-item-hidden-hover">
151+
{
152+
props.showMute &&
153+
props.muted &&
154+
<div className="rce-citem-body--bottom-tools-item">
155+
<MdVolumeOff />
156+
</div>
157+
}
111158
</div>
112-
}
113-
</div>
114-
<div className='rce-citem-body--bottom-tools-item-hidden-hover'>
115-
{
116-
props.showMute &&
117-
props.muted &&
118-
<div className='rce-citem-body--bottom-tools-item'>
119-
<MdVolumeOff />
159+
<div className="rce-citem-body--bottom-status">
160+
{
161+
props.unread > 0 &&
162+
<span>{props.unread}</span>
163+
}
120164
</div>
121-
}
122-
</div>
123-
<div className='rce-citem-body--bottom-status'>
124-
{
125-
props.unread > 0 &&
126-
<span>{props.unread}</span>
127-
}
128165
</div>
129166
</div>
130-
</div>
167+
]}
131168
</div>
132169
</div>
133170
);

‎src/ChatList/ChatList.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,21 @@ function ChatList(props) {
2929
{
3030
props.dataSource.map((x, i) => (
3131
<ChatItem
32-
id={x.id || i}
3332
key={i}
33+
id={x.id || i}
3434
lazyLoadingImage={props.lazyLoadingImage}
3535
{...x}
3636
onAvatarError={(e) => onAvatarError(x, i, e)}
3737
onContextMenu={(e) => onContextMenu(x, i, e)}
3838
onClick={(e) => onClick(x, i, e)}
3939
onClickMute={(e) => props.onClickMute(x, i, e)}
40-
onClickVideoCall={(e) => props.onClickVideoCall(x, i, e)}/>
40+
onClickVideoCall={(e) => props.onClickVideoCall(x, i, e)}
41+
onDragOver={props.onDragOver}
42+
onDragEnter={props.onDragEnter}
43+
onDrop={props.onDrop}
44+
onDragLeave={props.onDragLeave}
45+
onDragComponent={props.onDragComponent}
46+
/>
4147
))
4248
}
4349
</div>
@@ -51,6 +57,11 @@ ChatList.defaultProps = {
5157
mute: null,
5258
onClickMute: null,
5359
onClickVideoCall: null,
60+
onDragOver: () => void(0),
61+
onDrop: () => void(0),
62+
onDragEnter: () => void(0),
63+
onDragLeave: () => void(0),
64+
onDragComponent: null
5465
};
5566

5667
export default ChatList;

‎src/MessageList/MessageList.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,11 @@ export default function MessageList(props) {
145145

146146
return (
147147
<div
148-
className={classNames(['rce-container-mlist', props.className])}>
148+
className={classNames(['rce-container-mlist', props.className])} {...props.customProps}>
149+
{
150+
!!props.children && props.isShowChild &&
151+
props.children
152+
}
149153
<div
150154
ref={props.referance}
151155
onScroll={onScroll}

0 commit comments

Comments
 (0)