Skip to content

Commit 2c96f67

Browse files
abdurrahmanekrabdurrahmanekr
committed
ChatItem edited.
1 parent 591eaf5 commit 2c96f67

7 files changed

Lines changed: 189 additions & 68 deletions

File tree

‎example-native/App.js‎

Lines changed: 114 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,122 @@ import {
1515
import { ChatItem } from '../native';
1616

1717
export default class App extends Component<{}> {
18+
constructor(props) {
19+
super(props);
20+
21+
this.state = {
22+
show: true,
23+
messageList: [],
24+
};
25+
}
26+
27+
getRandomColor() {
28+
var letters = '0123456789ABCDEF';
29+
var color = '#';
30+
for (var i = 0; i < 6; i++) {
31+
color += letters[Math.floor(Math.random() * 16)];
32+
}
33+
return color;
34+
}
35+
36+
token() {
37+
return (parseInt(Math.random() * 10 % 6));
38+
}
39+
40+
photo(size) {
41+
return require('./assets/chat-user.png')
42+
}
43+
44+
random(type) {
45+
switch (type) {
46+
case 'message':
47+
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+
}
73+
74+
return {
75+
position: (this.token() >= 1 ? 'right' : 'left'),
76+
forwarded: true,
77+
type: type,
78+
theme: 'white',
79+
view: 'list',
80+
title: 'consectetur adipisicing elit',
81+
titleColor: this.getRandomColor(),
82+
text: type === 'spotify' ? 'spotify:track:7wGoVu4Dady5GV0Sv4UIsx' : 'Ab beatae odit deleniti dolor numquam nisi, non laboriosam sequi',
83+
data: {
84+
uri: require('./assets/chat-user.png'),
85+
status: {
86+
click: false,
87+
loading: 0,
88+
},
89+
width: 300,
90+
height: 300,
91+
latitude: '37.773972',
92+
longitude: '-122.431297',
93+
},
94+
statu: statu,
95+
date: new Date(),
96+
dateString: new Date().toString(),
97+
avatar: require('./assets/chat-user.png'),
98+
};
99+
case 'chat':
100+
return {
101+
id: String(Math.random()),
102+
avatar: `data:image/png;base64,${this.photo()}`,
103+
avatarFlexible: true,
104+
statusColor: 'lightgreen',
105+
alt: 'dolore voluptate facilis nobis officia commodi quia',
106+
title: 'dolore voluptate facilis nobis officia commodi quia',
107+
date: new Date(),
108+
subtitle: 'eligendi quaerat nam ipsam tempora.',
109+
unread: parseInt(Math.random() * 10 % 3),
110+
dateString: new Date().toString(),
111+
};
112+
}
113+
}
114+
18115
render() {
116+
var arr = [];
117+
for (var i = 0; i < 5; i++)
118+
arr.push(i);
119+
120+
var chatSource = arr.map(x => this.random('chat'));
19121
return (
20-
<View style={{flex: 1}}>
21-
<ChatItem
22-
title='React Chat Element'
23-
subtitle='Hello there!'
24-
avatar={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
122+
<View style={{flex: 1, marginTop: 10}}>
123+
{
124+
chatSource.map((x, i) => (
125+
<ChatItem
126+
key={i}
127+
title={x.title}
128+
unread={i || 1}
129+
statusColor='lightgreen'
130+
subtitle={x.subtitle}
131+
avatar={require('./assets/chat-user.png')}/>
132+
))
133+
}
25134
</View>
26135
);
27136
}

‎example-native/assets/chat-user.png‎

5.94 KB
Loading

‎example-native/package.json‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
{
2-
"name": "example",
3-
"version": "0.0.1",
4-
"private": true,
5-
"scripts": {
6-
"start": "node node_modules/react-native/local-cli/cli.js start",
7-
"test": "jest"
8-
},
9-
"dependencies": {
10-
"react": "16.0.0-beta.5",
11-
"react-native": "0.49.5"
12-
},
13-
"devDependencies": {
14-
"babel-jest": "21.2.0",
15-
"babel-preset-react-native": "4.0.0",
16-
"jest": "21.2.1",
17-
"react-test-renderer": "16.0.0-beta.5"
18-
},
19-
"jest": {
20-
"preset": "react-native"
21-
}
22-
}
2+
"name": "example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"start": "node node_modules/react-native/local-cli/cli.js start",
7+
"test": "jest"
8+
},
9+
"dependencies": {
10+
"moment": "^2.19.1",
11+
"react": "16.0.0-beta.5",
12+
"react-native": "0.49.5"
13+
},
14+
"devDependencies": {
15+
"babel-jest": "21.2.0",
16+
"babel-preset-react-native": "4.0.0",
17+
"jest": "21.2.1",
18+
"react-test-renderer": "16.0.0-beta.5"
19+
},
20+
"jest": {
21+
"preset": "react-native"
22+
}
23+
}

‎native/Avatar/Avatar.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export class Avatar extends Component {
1111
return (
1212
<View style={styles.rceAvatarContainer}>
1313
<Image
14+
style={styles.rceAvatarDefault}
1415
source={this.props.src} />
1516
{this.props.sideElement}
1617
</View>

‎native/Avatar/AvatarStyle.js‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,21 @@ import {
44

55
export default StyleSheet.create({
66
rceAvatarContainer: {
7-
overflow: 'hidden',
87
display: 'flex',
98
justifyContent: 'center',
109
alignItems: 'center',
11-
overflow: 'hidden',
1210
},
1311

14-
rceAvatarContainerRceAvatar: {
15-
width: '100%',
16-
height: '100%',
12+
rceAvatarDefault: {
13+
width: 50,
14+
height: 50,
1715
},
1816

1917
rceAvatarContainerFlexibleRceAvatar: {
2018
height: 'auto',
2119
width: '100%',
2220
},
2321

24-
rceAvatarContainerDefault: {
25-
width: '25px',
26-
height: '25px',
27-
},
28-
2922
rceAvatarContainerRounded: {
3023
borderRadius: 5,
3124
},

‎native/ChatItem/ChatItem.js‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,39 +25,48 @@ export class ChatItem extends Component {
2525
size="large"
2626
sideElement={
2727
this.props.statusColor &&
28-
<Text className='rce-citem-status' style={[styles.rceCitemStatus, {backgroundColor: this.props.statusColor}]}>
29-
{this.props.statusText}
30-
</Text>
28+
<View
29+
style={[styles.rceCitemStatus, {backgroundColor: this.props.statusColor}]}>
30+
<Text>
31+
{this.props.statusText}
32+
</Text>
33+
</View>
3134
}
3235
type={'circle' && {'flexible': this.props.avatarFlexible}}/>
3336
</View>
3437

3538
<View style={styles.rceCitemBody}>
3639
<View style={styles.rceCitemBodyTop}>
37-
<View>
38-
<Text style={styles.rceCitemBodyTopTitle}>
39-
{this.props.title}
40-
</Text>
41-
</View>
42-
<Text style={styles.rceCitemBodyTopTime}>
40+
<Text
41+
ellipsizeMode='tail'
42+
numberOfLines={1}
43+
style={styles.rceCitemBodyTopTitle}>
44+
{this.props.title}
45+
</Text>
46+
<Text
47+
style={styles.rceCitemBodyTopTime}
48+
ellipsizeMode='tail'
49+
numberOfLines={1}>
4350
{
4451
this.props.date &&
4552
!isNaN(this.props.date) &&
4653
(
4754
this.props.dateString ||
48-
'Moment(this.props.date).fromNow()'
55+
(this.props.date).toString()
4956
)
5057
}
5158
</Text>
5259
</View>
5360

5461
<View style={styles.rceCitemBodyBottom}>
55-
<View>
56-
<Text style={styles.rceCitemBodyTopTitle}>
57-
{this.props.subtitle}
58-
</Text>
59-
</View>
60-
<View style={styles.rceCitemBodyBottomStatus}>
62+
<Text
63+
ellipsizeMode='tail'
64+
numberOfLines={1}
65+
style={styles.rceCitemBodyTopTitle}>
66+
{this.props.subtitle}
67+
</Text>
68+
<View
69+
style={styles.rceCitemBodyBottomStatus}>
6170
{
6271
this.props.unread > 0 &&
6372
<Text

‎native/ChatItem/ChatItemStyle.js‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,15 @@ export default StyleSheet.create({
3838
rceCitemStatus: {
3939
width: 20,
4040
height: 20,
41-
bottom: 10,
42-
right: 10,
41+
bottom: -1,
42+
right: -1,
4343
position: 'absolute',
4444
borderRadius: 10,
4545
display: 'flex',
4646
alignItems: 'center',
4747
justifyContent: 'center',
4848
backgroundColor: '#ccc',
49+
overflow: 'hidden',
4950
},
5051

5152
rceCitemAvatarImg: {
@@ -75,49 +76,56 @@ export default StyleSheet.create({
7576

7677
rceCitemBodyTop: {
7778
display: 'flex',
79+
flexDirection: 'row',
80+
alignItems: 'center',
81+
justifyContent: 'space-between',
7882
},
7983

8084
rceCitemBodyBottom: {
8185
marginTop: 4,
8286
display: 'flex',
87+
flexDirection: 'row',
88+
alignItems: 'center',
89+
justifyContent: 'space-between',
8390
},
8491

8592
rceCitemBodyTopTitle: {
8693
flex: 1,
87-
// whiteSpace: 'nowrap',
88-
// textOverflow: 'ellipsis',
8994
overflow: 'hidden',
90-
},
91-
92-
rceCitemBodyTopTitle: {
9395
fontSize: 16,
9496
},
9597

9698
rceCitemBodyBottomTitle: {
99+
flex: 1,
97100
color: '#555',
98101
fontSize: 15,
99102
},
100103

101104
rceCitemBodyTopTime: {
102105
fontSize: 12,
103106
color: 'rgba(0,0,0,0.4)',
107+
marginLeft: 5,
108+
maxWidth: 100,
109+
justifyContent: 'flex-start',
104110
},
105111

106112
rceCitemBodyBottomStatus: {
113+
display: 'flex',
114+
width: 18,
115+
height: 18,
107116
marginLeft: 3,
117+
backgroundColor: 'red',
118+
alignItems: 'center',
119+
justifyContent: 'center',
120+
borderRadius: 9,
121+
overflow: 'hidden',
108122
},
109123

110124
rceCitemBodyBottomStatusText: {
111-
width: 18,
112-
height: 18,
113-
fontSize: 12,
125+
textAlign: 'center',
114126
color: 'white',
115127
fontWeight: 'bold',
116-
textAlign: 'center',
117-
alignItems: 'center',
118-
justifyContent: 'center',
119-
display: 'flex',
120-
borderRadius: 9,
121-
backgroundColor: 'red',
128+
fontSize: 12,
129+
backgroundColor: 'transparent',
122130
},
123131
});

0 commit comments

Comments
 (0)