Skip to content

Commit 57042b2

Browse files
abdurrahmanekrabdurrahmanekr
committed
MessageBox cmp has been added.
1 parent 2c96f67 commit 57042b2

6 files changed

Lines changed: 313 additions & 35 deletions

File tree

‎example-native/App.js‎

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@
66

77
import React, { Component } from 'react';
88
import {
9-
Platform,
10-
StyleSheet,
11-
Text,
12-
View
9+
Platform,
10+
StyleSheet,
11+
Text,
12+
View,
13+
ScrollView,
1314
} from 'react-native';
1415

15-
import { ChatItem } from '../native';
16+
import { ChatItem, MessageBox, } from '../native';
1617

1718
export default class App extends Component<{}> {
1819
constructor(props) {
@@ -45,31 +46,8 @@ export default class App extends Component<{}> {
4546
switch (type) {
4647
case 'message':
4748
var type = this.token();
48-
var statu = 'waiting';
49-
switch (type) {
50-
case 0:
51-
type = 'photo';
52-
statu = 'sent';
53-
break;
54-
case 1:
55-
type = 'file';
56-
statu = 'sent';
57-
break;
58-
case 2:
59-
type = 'system';
60-
statu = 'received';
61-
break;
62-
case 3:
63-
type = 'location';
64-
break;
65-
case 4:
66-
type = 'spotify';
67-
break;
68-
default:
69-
type = 'text';
70-
statu = 'read';
71-
break;
72-
}
49+
var status = 'waiting';
50+
type = 'text';
7351

7452
return {
7553
position: (this.token() >= 1 ? 'right' : 'left'),
@@ -91,7 +69,7 @@ export default class App extends Component<{}> {
9169
latitude: '37.773972',
9270
longitude: '-122.431297',
9371
},
94-
statu: statu,
72+
status: status,
9573
date: new Date(),
9674
dateString: new Date().toString(),
9775
avatar: require('./assets/chat-user.png'),
@@ -118,8 +96,21 @@ export default class App extends Component<{}> {
11896
arr.push(i);
11997

12098
var chatSource = arr.map(x => this.random('chat'));
99+
var messageSource = arr.map(x => this.random('message'));
121100
return (
122-
<View style={{flex: 1, marginTop: 10}}>
101+
<ScrollView
102+
style={{
103+
flex: 1,
104+
marginTop: 10,
105+
backgroundColor: '#ccc',
106+
}}>
107+
{
108+
messageSource.map((x, i) => (
109+
<MessageBox
110+
key={i}
111+
{...x}/>
112+
))
113+
}
123114
{
124115
chatSource.map((x, i) => (
125116
<ChatItem
@@ -131,7 +122,7 @@ export default class App extends Component<{}> {
131122
avatar={require('./assets/chat-user.png')}/>
132123
))
133124
}
134-
</View>
125+
</ScrollView>
135126
);
136127
}
137128
}

‎native/Avatar/Avatar.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,15 @@ import {
88

99
export class Avatar extends Component {
1010
render() {
11+
const size = this.props.size;
12+
1113
return (
1214
<View style={styles.rceAvatarContainer}>
1315
<Image
14-
style={styles.rceAvatarDefault}
16+
style={[
17+
styles.rceAvatarDefault,
18+
size && { width: size.width, height: size.height },
19+
]}
1520
source={this.props.src} />
1621
{this.props.sideElement}
1722
</View>
@@ -21,7 +26,7 @@ export class Avatar extends Component {
2126

2227
Avatar.defaultProps = {
2328
type: 'default',
24-
size: 'default',
29+
size: null,
2530
src: '',
2631
alt: '',
2732
sideElement: null,

‎native/MessageBox/MessageBox.js‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import React, { Component } from 'react';
2+
import styles from './MessageBoxStyle.js';
3+
4+
import Avatar from '../Avatar/Avatar';
5+
6+
import {
7+
View,
8+
Text,
9+
Image,
10+
} from 'react-native';
11+
12+
export class MessageBox extends Component {
13+
14+
render() {
15+
var positionCls = [
16+
styles.rceMbox,
17+
this.props.position === 'right' && styles.rceMboxRight,
18+
];
19+
var thatAbsoluteTime = this.props.type !== 'text' && this.props.type !== 'file' && !(this.props.type === 'location' && this.props.text);
20+
21+
return (
22+
<View
23+
style={styles.rceContainerMbox}
24+
onClick={this.props.onClick}>
25+
26+
{
27+
this.props.type === 'system' ?
28+
null
29+
:
30+
<View
31+
style={[
32+
positionCls,
33+
]}>
34+
<View
35+
style={styles.rceMboxBody}>
36+
{
37+
(this.props.title || this.props.avatar) &&
38+
<View
39+
style={[
40+
styles.rceMboxTitle,
41+
this.props.type === 'text' && styles.rceMboxTitleClear,
42+
]}
43+
onClick={this.props.onTitleClick}>
44+
<View
45+
style={styles.rceMboxTitleAvatar}>
46+
{
47+
this.props.avatar &&
48+
<Avatar
49+
size={{
50+
width: 30,
51+
height: 30,
52+
}}
53+
src={this.props.avatar}/>
54+
}
55+
</View>
56+
<View>
57+
{
58+
this.props.title &&
59+
<Text
60+
style={[
61+
styles.rceMboxTitleText,
62+
this.props.titleColor && { color: this.props.titleColor },
63+
]}>{this.props.title}</Text>
64+
}
65+
</View>
66+
</View>
67+
}
68+
69+
{
70+
this.props.type === 'text' &&
71+
<Text
72+
style={styles.rceMboxText}>
73+
{this.props.text}
74+
</Text>
75+
}
76+
77+
<View
78+
style={[
79+
styles.rceMboxTime,
80+
thatAbsoluteTime && styles.rceMboxTimeBlock
81+
]}>
82+
<Text
83+
style={styles.rceMboxTimeText}>
84+
{
85+
this.props.date &&
86+
!isNaN(this.props.date) &&
87+
(
88+
this.props.dateString ||
89+
moment(this.props.date).fromNow()
90+
)
91+
}
92+
</Text>
93+
{
94+
this.props.status &&
95+
<Text
96+
style={styles.rceMboxStatus}>
97+
{this.props.status}
98+
{
99+
// this.props.status === 'waiting' &&
100+
// <MdIosTime />
101+
}
102+
103+
{
104+
// this.props.status === 'sent' &&
105+
// <MdCheck />
106+
}
107+
108+
{
109+
// this.props.status === 'received' &&
110+
// <IoDoneAll />
111+
}
112+
113+
{
114+
// this.props.status === 'read' &&
115+
// <IoDoneAll color='#4FC3F7'/>
116+
}
117+
</Text>
118+
}
119+
</View>
120+
</View>
121+
</View>
122+
}
123+
</View>
124+
);
125+
}
126+
}
127+
128+
MessageBox.defaultProps = {
129+
position: 'left',
130+
type: 'text',
131+
text: '',
132+
title: null,
133+
titleColor: null,
134+
onTitleClick: null,
135+
onForwardClick: null,
136+
date: new Date(),
137+
data: {},
138+
onClick: null,
139+
onOpen: null,
140+
onDownload: null,
141+
forwarded: false,
142+
status: null,
143+
dateString: 'tarih',
144+
notch: true,
145+
avatar: null,
146+
renderAddCmp: null,
147+
};
148+
149+
export default MessageBox;

‎native/MessageBox/MessageBoxStyle.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import {
2+
StyleSheet,
3+
} from 'react-native';
4+
5+
export default StyleSheet.create({
6+
rceContainerMbox: {
7+
display: 'flex',
8+
flexDirection: 'column',
9+
overflow: 'hidden',
10+
minWidth: 200,
11+
},
12+
13+
rceMbox: {
14+
backgroundColor: 'white',
15+
borderRadius: 5,
16+
// boxShadow: 1px 1px 1px 1px rgba(0, 0, 0, .2),
17+
borderTopLeftRadius: 0,
18+
marginLeft: 20,
19+
marginRight: 5,
20+
marginTop: 3,
21+
flexDirection: 'column',
22+
marginBottom: 3,
23+
paddingTop: 7,
24+
paddingLeft: 9,
25+
paddingBottom: 8,
26+
paddingRight: 9,
27+
minWidth: 140,
28+
},
29+
30+
rceMboxBody: {
31+
margin: 0,
32+
padding: 0,
33+
position: 'relative',
34+
},
35+
36+
rceMboxRight: {
37+
marginLeft: 5,
38+
marginRight: 20,
39+
borderTopRightRadius: 0,
40+
borderTopLeftRadius: 5,
41+
},
42+
43+
rceMboxText: {
44+
fontSize: 13.6,
45+
},
46+
47+
rceMboxTime: {
48+
position: 'absolute',
49+
right: -4,
50+
bottom: -5,
51+
display: 'flex',
52+
alignItems: 'center',
53+
flexDirection: 'row',
54+
},
55+
56+
rceMboxTimeText: {
57+
textAlign: 'right',
58+
color: '#ccc',
59+
fontSize: 12,
60+
},
61+
62+
rceMboxTimeBlock: {
63+
/*position: relative,*/
64+
right: 0,
65+
bottom: 0,
66+
left: 0,
67+
marginRight: -6,
68+
marginLeft: -6,
69+
paddingTop: 5,
70+
paddingRight: 3,
71+
paddingBottom: 2,
72+
// backgroundColor: linear-gradient(to top, rgba(0,0,0,0.33), transparent),
73+
borderBottomLeftRadius: 5,
74+
borderBottomRightRadius: 5,
75+
},
76+
77+
rceMboxClearPadding: {
78+
paddingBottom: 3,
79+
},
80+
81+
rceMboxRceMboxClearNotch: {
82+
borderRadius: 5,
83+
},
84+
85+
rceMboxTitle: {
86+
margin: 0,
87+
marginBottom: 8,
88+
display: 'flex',
89+
flexDirection: 'row',
90+
alignItems: 'center',
91+
},
92+
93+
rceMboxTitleAvatar: {
94+
display: 'flex',
95+
marginRight: 5,
96+
},
97+
98+
rceMboxTitleText: {
99+
fontWeight: '500',
100+
fontSize: 13,
101+
color: '#4f81a1',
102+
},
103+
104+
rceMboxTitleClear: {
105+
marginBottom: 5,
106+
},
107+
108+
rceMboxStatus: {
109+
textAlign: 'right',
110+
marginLeft: 3,
111+
fontSize: 15,
112+
},
113+
114+
rceMboxTitleRceAvatarContainer: {
115+
marginRight: 5,
116+
},
117+
118+
});

0 commit comments

Comments
 (0)