Skip to content

Commit e6b5269

Browse files
abdurrahmanekrabdurrahmanekr
committed
Merge branch 'next' of https://github.com/detaysoft/react-chat-elements into refs-features
2 parents 0f384f9 + b544448 commit e6b5269

9 files changed

Lines changed: 75 additions & 43 deletions

File tree

‎README.md‎

Lines changed: 2 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 |

‎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/LocationMessage/LocationMessage.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.rce-mbox-location {
22
position: relative;
33
width: 250px;
4-
height: 150px;
54
overflow: hidden;
65
display: flex;
76
align-items: center;
@@ -15,3 +14,9 @@
1514
.rce-mbox-location-img {
1615
width: 100%;
1716
}
17+
18+
.rce-mbox-location-text {
19+
width: 250px;
20+
margin-left: -6px;
21+
margin-right: -6px;
22+
}

‎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+
const DEFAULT_MARKER_COLOR = 'red';
9+
const DEFAULT_ZOOM_LEVEL = 14;
10+
611
export class LocationMessage extends Component {
712
constructor(props) {
813
super(props);
914

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

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-
};
35+
return className;
1936
}
2037

2138
render() {
2239
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>
40+
<div>
41+
<a
42+
onClick={this.props.onOpen}
43+
target={this.props.target}
44+
href={this.props.href || this.props.src || this.buildURL(MAP_URL)}
45+
className={this.className()}>
46+
<img className='rce-mbox-location-img'
47+
src={
48+
this.props.src ||
49+
this.buildURL(STATIC_URL)
50+
}/>
51+
</a>
52+
{
53+
this.props.text &&
54+
<div className="rce-mbox-text rce-mbox-location-text">
55+
{this.props.text}
56+
</div>
57+
}
58+
</div>
3559
);
3660
}
3761
}
3862

3963
LocationMessage.defaultProps = {
4064
target: '_blank',
41-
apiKey: null,
65+
apiKey: '',
4266
}
4367

4468
export default LocationMessage;

‎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();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ exports[`MessageBox component should render without issues 1`] = `
1919
>
2020
a few seconds ago
2121
<span
22-
className="rce-mbox-statu"
22+
className="rce-mbox-status"
2323
>
2424
<IoAndroidDoneAll
2525
color="#4FC3F7"

0 commit comments

Comments
 (0)