Skip to content

Commit 992de83

Browse files
abdurrahmanekrabdurrahmanekr
authored
Merge pull request #44 from Detaysoft/next
Next Version 0.7.0
2 parents 1f6d329 + 78cb9dd commit 992de83

12 files changed

Lines changed: 108 additions & 55 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ import { MessageBox } from 'react-chat-elements'
9696
| ---- | ---- | ---- | ---- |
9797
| id | i (index) | string | message box id |
9898
| position | left | string | message box position |
99-
| type | text | string | message type (text, photo, file) |
99+
| type | text | string | message type (text, photo, file, location, spotify) |
100100
| text | none | string | message text |
101101
| title | none | string | message title |
102102
| titleColor | none | string(color) | message title color |
@@ -109,7 +109,7 @@ import { MessageBox } from 'react-chat-elements'
109109
| onTitleClick | none | function | message title on click event |
110110
| onForwardClick | none | function | message forward on click event |
111111
| forwarded | none | boolean | message forward icon |
112-
| statu | none | string | message statu info (waiting, sent, received, read) |
112+
| status | none | string | message status info (waiting, sent, received, read) |
113113
| notch | true | boolean | message box notch |
114114
| avatar | none | url | message box avatar url |
115115
| renderAddCmp | none | function (component) | adding custom components to message box |
@@ -428,6 +428,8 @@ import { LocationMessage } from 'react-chat-elements'
428428
| ---- | ---- | ---- | ---- |
429429
| src | none | image | image src |
430430
| apiKey | none | string | google staticmap api key |
431+
| zoom | 14 | int | google staticmap zoom level |
432+
| markerColor | red | string | google staticmap marker color |
431433
| data | {} | object | message data |
432434
| target | _blank | string | image a tag target prop |
433435
| onOpen | none | function | image on open |

‎example/App.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,19 @@ export class App extends Component {
6262
switch (type) {
6363
case 'message':
6464
var type = this.token();
65-
var statu = 'waiting';
65+
var status = 'waiting';
6666
switch (type) {
6767
case 0:
6868
type = 'photo';
69-
statu = 'sent';
69+
status = 'sent';
7070
break;
7171
case 1:
7272
type = 'file';
73-
statu = 'sent';
73+
status = 'sent';
7474
break;
7575
case 2:
7676
type = 'system';
77-
statu = 'received';
77+
status = 'received';
7878
break;
7979
case 3:
8080
type = 'location';
@@ -84,7 +84,7 @@ export class App extends Component {
8484
break;
8585
default:
8686
type = 'text';
87-
statu = 'read';
87+
status = 'read';
8888
break;
8989
}
9090

@@ -108,7 +108,7 @@ export class App extends Component {
108108
latitude: '37.773972',
109109
longitude: '-122.431297',
110110
},
111-
statu: statu,
111+
status: status,
112112
date: new Date(),
113113
dateString: moment(new Date()).format('HH:mm'),
114114
avatar: `data:image/png;base64,${this.photo()}`,

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-chat-elements",
3-
"version": "0.6.1",
3+
"version": "0.7.0",
44
"description": "Reactjs chat components",
55
"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
66
"main": "dist/main.js",

‎src/ChatList/ChatList.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ export class ChatList extends Component {
2020

2121
render() {
2222
return (
23-
<div className={classNames('rce-container-clist', this.props.className)}>
23+
<div
24+
ref={this.props.cmpRef}
25+
className={classNames('rce-container-clist', this.props.className)}>
2426
{
2527
this.props.dataSource.map((x, i) => (
2628
<ChatItem

‎src/LocationMessage/LocationMessage.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,10 @@
1515
.rce-mbox-location-img {
1616
width: 100%;
1717
}
18+
19+
.rce-mbox-location-text {
20+
padding: 5px 0;
21+
width: 250px;
22+
margin-left: -6px;
23+
margin-right: -6px;
24+
}

‎src/LocationMessage/LocationMessage.js‎

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,66 @@ import './LocationMessage.css';
33

44
const classNames = require('classnames');
55

6+
const STATIC_URL = 'https://maps.googleapis.com/maps/api/staticmap?markers=color:MARKER_COLOR|LATITUDE,LONGITUDE&zoom=ZOOM&size=270x200&scale=2&key=KEY';
7+
const MAP_URL = 'https://www.google.com/maps/search/?api=1&query=LATITUDE,LONGITUDE&zoom=ZOOM';
8+
69
export class LocationMessage extends Component {
710
constructor(props) {
811
super(props);
912

10-
const {
11-
latitude,
12-
longitude,
13-
} = this.props.data || {};
13+
this.className = this.className.bind(this);
14+
}
15+
16+
buildURL(url) {
17+
var center = this.props.data || {};
18+
19+
return url.replace('LATITUDE', center.latitude)
20+
.replace('LONGITUDE', center.longitude)
21+
.replace('MARKER_COLOR', this.props.markerColor)
22+
.replace('ZOOM', this.props.zoom)
23+
.replace('KEY', this.props.apiKey);
24+
}
25+
26+
className() {
27+
var className = classNames('rce-mbox-location', this.props.className);
28+
29+
if (this.props.text) {
30+
className = classNames(className, 'rce-mbox-location-has-text');
31+
}
1432

15-
var key = this.props.apiKey ? ('&key=' + this.props.apiKey): '';
16-
this.state = {
17-
url: 'https://maps.googleapis.com/maps/api/staticmap?markers=color:red|'+latitude+','+longitude+'&zoom=14&size=270x200&scale=2' + key,
18-
};
33+
return className;
1934
}
2035

2136
render() {
2237
return (
23-
<a
24-
onClick={this.props.onOpen}
25-
target={this.props.target}
26-
href={this.props.href || this.props.src || this.state.url}
27-
className={classNames('rce-mbox-location', this.props.className)}>
28-
<img
29-
className='rce-mbox-location-img'
30-
src={
31-
this.props.src ||
32-
this.state.url
33-
}/>
34-
</a>
38+
<div className='rce-container-lmsg'>
39+
<a
40+
onClick={this.props.onOpen}
41+
target={this.props.target}
42+
href={this.props.href || this.props.src || this.buildURL(MAP_URL)}
43+
className={this.className()}>
44+
<img className='rce-mbox-location-img'
45+
src={
46+
this.props.src ||
47+
this.buildURL(STATIC_URL)
48+
}/>
49+
</a>
50+
{
51+
this.props.text &&
52+
<div className="rce-mbox-text rce-mbox-location-text">
53+
{this.props.text}
54+
</div>
55+
}
56+
</div>
3557
);
3658
}
3759
}
3860

3961
LocationMessage.defaultProps = {
4062
target: '_blank',
41-
apiKey: null,
63+
apiKey: '',
64+
zoom: 14,
65+
markerColor: 'red',
4266
}
4367

4468
export default LocationMessage;

‎src/LocationMessage/__tests__/__snapshots__/LocationMessage.js.snap‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`LocationMessage component should render without issues 1`] = `
4-
<a
5-
className="rce-mbox-location"
6-
href="https://maps.googleapis.com/maps/api/staticmap?markers=color:red|undefined,undefined&zoom=14&size=270x200&scale=2"
7-
target="_blank"
4+
<div
5+
className="rce-container-lmsg"
86
>
9-
<img
10-
className="rce-mbox-location-img"
11-
src="https://maps.googleapis.com/maps/api/staticmap?markers=color:red|undefined,undefined&zoom=14&size=270x200&scale=2"
12-
/>
13-
</a>
7+
<a
8+
className="rce-mbox-location"
9+
href="https://www.google.com/maps/search/?api=1&query=undefined,undefined&zoom=14"
10+
target="_blank"
11+
>
12+
<img
13+
className="rce-mbox-location-img"
14+
src="https://maps.googleapis.com/maps/api/staticmap?markers=color:red|undefined,undefined&zoom=14&size=270x200&scale=2&key="
15+
/>
16+
</a>
17+
</div>
1418
`;

‎src/MessageBox/MessageBox.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@
159159
margin-bottom: 5px;
160160
}
161161

162-
.rce-mbox-statu {
162+
.rce-mbox-status {
163163
margin-left: 3px;
164164
font-size: 15px;
165165
}

‎src/MessageBox/MessageBox.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const classNames = require('classnames');
2323
export class MessageBox extends Component {
2424
render() {
2525
var positionCls = classNames('rce-mbox', { 'rce-mbox-right': this.props.position === 'right' });
26-
var thatAbsoluteTime = this.props.type !== 'text' && this.props.type !== 'file';
26+
var thatAbsoluteTime = this.props.type !== 'text' && this.props.type !== 'file' && !(this.props.type === 'location' && this.props.text);
2727

2828
return (
2929
<div
@@ -93,7 +93,10 @@ export class MessageBox extends Component {
9393
target={this.props.target}
9494
href={this.props.href}
9595
apiKey={this.props.apiKey}
96-
src={this.props.src} />
96+
src={this.props.src}
97+
zoom={this.props.zoom}
98+
markerColor={this.props.markerColor}
99+
text={this.props.text} />
97100
}
98101

99102
{
@@ -137,25 +140,25 @@ export class MessageBox extends Component {
137140
)
138141
}
139142
{
140-
this.props.statu &&
141-
<span className='rce-mbox-statu'>
143+
this.props.status &&
144+
<span className='rce-mbox-status'>
142145
{
143-
this.props.statu === 'waiting' &&
146+
this.props.status === 'waiting' &&
144147
<MdIosTime />
145148
}
146149

147150
{
148-
this.props.statu === 'sent' &&
151+
this.props.status === 'sent' &&
149152
<MdCheck />
150153
}
151154

152155
{
153-
this.props.statu === 'received' &&
156+
this.props.status === 'received' &&
154157
<IoDoneAll />
155158
}
156159

157160
{
158-
this.props.statu === 'read' &&
161+
this.props.status === 'read' &&
159162
<IoDoneAll color='#4FC3F7'/>
160163
}
161164
</span>
@@ -205,7 +208,7 @@ MessageBox.defaultProps = {
205208
onOpen: null,
206209
onDownload: null,
207210
forwarded: false,
208-
statu: null,
211+
status: null,
209212
dateString: null,
210213
notch: true,
211214
avatar: null,

‎src/MessageBox/__tests__/MessageBox.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import MessageBox from '../MessageBox';
55

66
describe('MessageBox component', () => {
77
it('should render without issues', () => {
8-
const component = shallow(<MessageBox statu='read'/>);
8+
const component = shallow(<MessageBox status='read'/>);
99

1010
expect(component.length).toBe(1);
1111
expect(toJson(component)).toMatchSnapshot();

0 commit comments

Comments
 (0)