Merge pull request #44 from Detaysoft/next

Next Version 0.7.0
Detaysoft · Oct 30, 2017 · 992de83 · 992de83
2 parents 1f6d329 + 78cb9dd
commit 992de83
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -96,7 +96,7 @@ import { MessageBox } from 'react-chat-elements'
 | ---- | ---- | ---- | ---- |
 | id | i (index) | string | message box id |
 | position | left | string | message box position |
-| type | text | string | message type (text, photo, file) |
+| type | text | string | message type (text, photo, file, location, spotify) |
 | text | none | string | message text |
 | title | none | string | message title |
 | titleColor | none | string(color) | message title color |
@@ -109,7 +109,7 @@ import { MessageBox } from 'react-chat-elements'
 | onTitleClick | none | function | message title on click event |
 | onForwardClick | none | function | message forward on click event |
 | forwarded | none | boolean | message forward icon |
-| statu | none | string | message statu info (waiting, sent, received, read) |
+| status | none | string | message status info (waiting, sent, received, read) |
 | notch | true | boolean | message box notch |
 | avatar | none | url | message box avatar url |
 | renderAddCmp | none | function (component) | adding custom components to message box |
@@ -428,6 +428,8 @@ import { LocationMessage } from 'react-chat-elements'
 | ---- | ---- | ---- | ---- |
 | src | none | image | image src |
 | apiKey | none | string | google staticmap api key |
+| zoom | 14 | int | google staticmap zoom level |
+| markerColor | red | string | google staticmap marker color |
 | data | {} | object | message data |
 | target | _blank | string | image a tag target prop |
 | onOpen | none | function | image on open |

diff --git a/example/App.js b/example/App.js
@@ -62,19 +62,19 @@ export class App extends Component {
         switch (type) {
             case 'message':
                 var type = this.token();
-                var statu = 'waiting';
+                var status = 'waiting';
                 switch (type) {
                     case 0:
                         type = 'photo';
-                        statu = 'sent';
+                        status = 'sent';
                         break;
                     case 1:
                         type = 'file';
-                        statu = 'sent';
+                        status = 'sent';
                         break;
                     case 2:
                         type = 'system';
-                        statu = 'received';
+                        status = 'received';
                         break;
                     case 3:
                         type = 'location';
@@ -84,7 +84,7 @@ export class App extends Component {
                         break;
                     default:
                         type = 'text';
-                        statu = 'read';
+                        status = 'read';
                         break;
                 }
 
@@ -108,7 +108,7 @@ export class App extends Component {
                         latitude: '37.773972',
                         longitude: '-122.431297',
                     },
-                    statu: statu,
+                    status: status,
                     date: new Date(),
                     dateString: moment(new Date()).format('HH:mm'),
                     avatar: `data:image/png;base64,${this.photo()}`,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

diff --git a/src/ChatList/ChatList.js b/src/ChatList/ChatList.js
@@ -20,7 +20,9 @@ export class ChatList extends Component {
 
     render() {
         return (
-            <div className={classNames('rce-container-clist', this.props.className)}>
+            <div
+                ref={this.props.cmpRef}
+                className={classNames('rce-container-clist', this.props.className)}>
                 {
                     this.props.dataSource.map((x, i) => (
                         <ChatItem

diff --git a/src/LocationMessage/LocationMessage.css b/src/LocationMessage/LocationMessage.css
@@ -15,3 +15,10 @@
 .rce-mbox-location-img {
     width: 100%;
 }
+
+.rce-mbox-location-text {
+    padding: 5px 0;
+    width: 250px;
+    margin-left: -6px;
+    margin-right: -6px;
+}
diff --git a/src/LocationMessage/LocationMessage.js b/src/LocationMessage/LocationMessage.js
@@ -3,42 +3,66 @@ import './LocationMessage.css';
 
 const classNames = require('classnames');
 
+const STATIC_URL = 'https://maps.googleapis.com/maps/api/staticmap?markers=color:MARKER_COLOR|LATITUDE,LONGITUDE&zoom=ZOOM&size=270x200&scale=2&key=KEY';
+const MAP_URL = 'https://www.google.com/maps/search/?api=1&query=LATITUDE,LONGITUDE&zoom=ZOOM';
+
 export class LocationMessage extends Component {
     constructor(props) {
         super(props);
 
-        const {
-            latitude,
-            longitude,
-        } = this.props.data || {};
+        this.className = this.className.bind(this);
+    }
+
+    buildURL(url) {
+        var center = this.props.data || {};
+
+        return url.replace('LATITUDE', center.latitude)
+                  .replace('LONGITUDE', center.longitude)
+                  .replace('MARKER_COLOR', this.props.markerColor)
+                  .replace('ZOOM', this.props.zoom)
+                  .replace('KEY', this.props.apiKey);
+    }
+
+    className() {
+        var className = classNames('rce-mbox-location', this.props.className);
+
+        if (this.props.text) {
+            className = classNames(className, 'rce-mbox-location-has-text');
+        }
 
-        var key = this.props.apiKey ? ('&key=' + this.props.apiKey): '';
-        this.state = {
-            url: 'https://maps.googleapis.com/maps/api/staticmap?markers=color:red|'+latitude+','+longitude+'&zoom=14&size=270x200&scale=2' + key,
-        };
+        return className;
     }
 
     render() {
         return (
-            <a
-                onClick={this.props.onOpen}
-                target={this.props.target}
-                href={this.props.href || this.props.src || this.state.url}
-                className={classNames('rce-mbox-location', this.props.className)}>
-                <img
-                    className='rce-mbox-location-img'
-                    src={
-                        this.props.src ||
-                        this.state.url
-                    }/>
-            </a>
+            <div className='rce-container-lmsg'>
+                <a
+                    onClick={this.props.onOpen}
+                    target={this.props.target}
+                    href={this.props.href || this.props.src || this.buildURL(MAP_URL)}
+                    className={this.className()}>
+                    <img className='rce-mbox-location-img'
+                        src={
+                            this.props.src ||
+                            this.buildURL(STATIC_URL)
+                        }/>
+                </a>
+                {
+                    this.props.text &&
+                    <div className="rce-mbox-text rce-mbox-location-text">
+                        {this.props.text}
+                    </div>
+                }
+            </div>
         );
     }
 }
 
 LocationMessage.defaultProps = {
     target: '_blank',
-    apiKey: null,
+    apiKey: '',
+    zoom: 14,
+    markerColor: 'red',
 }
 
 export default LocationMessage;
diff --git a/src/LocationMessage/__tests__/__snapshots__/LocationMessage.js.snap b/src/LocationMessage/__tests__/__snapshots__/LocationMessage.js.snap
@@ -1,14 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LocationMessage component should render without issues 1`] = `
-<a
-  className="rce-mbox-location"
-  href="https://maps.googleapis.com/maps/api/staticmap?markers=color:red|undefined,undefined&zoom=14&size=270x200&scale=2"
-  target="_blank"
+<div
+  className="rce-container-lmsg"
 >
-  <img
-    className="rce-mbox-location-img"
-    src="https://maps.googleapis.com/maps/api/staticmap?markers=color:red|undefined,undefined&zoom=14&size=270x200&scale=2"
-  />
-</a>
+  <a
+    className="rce-mbox-location"
+    href="https://www.google.com/maps/search/?api=1&query=undefined,undefined&zoom=14"
+    target="_blank"
+  >
+    <img
+      className="rce-mbox-location-img"
+      src="https://maps.googleapis.com/maps/api/staticmap?markers=color:red|undefined,undefined&zoom=14&size=270x200&scale=2&key="
+    />
+  </a>
+</div>
 `;
diff --git a/src/MessageBox/MessageBox.css b/src/MessageBox/MessageBox.css
@@ -159,7 +159,7 @@
     margin-bottom: 5px;
 }
 
-.rce-mbox-statu {
+.rce-mbox-status {
     margin-left: 3px;
     font-size: 15px;
 }

diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js
@@ -23,7 +23,7 @@ const classNames = require('classnames');
 export class MessageBox extends Component {
     render() {
         var positionCls = classNames('rce-mbox', { 'rce-mbox-right': this.props.position === 'right' });
-        var thatAbsoluteTime = this.props.type !== 'text' && this.props.type !== 'file';
+        var thatAbsoluteTime = this.props.type !== 'text' && this.props.type !== 'file' && !(this.props.type === 'location' && this.props.text);
 
         return (
             <div
@@ -93,7 +93,10 @@ export class MessageBox extends Component {
                                         target={this.props.target}
                                         href={this.props.href}
                                         apiKey={this.props.apiKey}
-                                        src={this.props.src} />
+                                        src={this.props.src}
+                                        zoom={this.props.zoom}
+                                        markerColor={this.props.markerColor}
+                                        text={this.props.text} />
                                 }
 
                                 {
@@ -137,25 +140,25 @@ export class MessageBox extends Component {
                                         )
                                     }
                                     {
-                                        this.props.statu &&
-                                        <span className='rce-mbox-statu'>
+                                        this.props.status &&
+                                        <span className='rce-mbox-status'>
                                             {
-                                                this.props.statu === 'waiting' &&
+                                                this.props.status === 'waiting' &&
                                                 <MdIosTime />
                                             }
 
                                             {
-                                                this.props.statu === 'sent' &&
+                                                this.props.status === 'sent' &&
                                                 <MdCheck />
                                             }
 
                                             {
-                                                this.props.statu === 'received' &&
+                                                this.props.status === 'received' &&
                                                 <IoDoneAll />
                                             }
 
                                             {
-                                                this.props.statu === 'read' &&
+                                                this.props.status === 'read' &&
                                                 <IoDoneAll color='#4FC3F7'/>
                                             }
                                         </span>
@@ -205,7 +208,7 @@ MessageBox.defaultProps = {
     onOpen: null,
     onDownload: null,
     forwarded: false,
-    statu: null,
+    status: null,
     dateString: null,
     notch: true,
     avatar: null,

diff --git a/src/MessageBox/__tests__/MessageBox.js b/src/MessageBox/__tests__/MessageBox.js
@@ -5,7 +5,7 @@ import MessageBox from '../MessageBox';
 
 describe('MessageBox component', () => {
   it('should render without issues', () => {
-    const component = shallow(<MessageBox statu='read'/>);
+    const component = shallow(<MessageBox status='read'/>);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();

diff --git a/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap b/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap
@@ -19,7 +19,7 @@ exports[`MessageBox component should render without issues 1`] = `
       >
         a few seconds ago
         <span
-          className="rce-mbox-statu"
+          className="rce-mbox-status"
         >
           <IoAndroidDoneAll
             color="#4FC3F7"

diff --git a/src/MessageList/MessageList.js b/src/MessageList/MessageList.js
@@ -15,7 +15,10 @@ export class MessageList extends Component {
     }
 
     componentDidUpdate() {
-        var e = this.refs.mlist;
+        var e = this.mlistRef;
+        if (!e)
+            return;
+
         var bottom = this.getBottom(e);
         if (this.props.toBottomHeight === '100%' || bottom < this.props.toBottomHeight) {
             // scroll to bottom
@@ -28,8 +31,10 @@ export class MessageList extends Component {
     }
 
     componentWillReceiveProps() {
+        if (!this.mlistRef)
+            return;
         this.setState({
-            scrollBottom: this.getBottom(this.refs.mlist),
+            scrollBottom: this.getBottom(this.mlistRef),
         });
     }
 
@@ -62,10 +67,16 @@ export class MessageList extends Component {
             this.props.onForwardClick(item, i, e);
     }
 
+    loadRef(ref) {
+        this.mlistRef = ref;
+        if (this.props.cmpRef instanceof Function)
+            this.props.cmpRef(ref);
+    }
+
     render() {
         return (
             <div
-                ref='mlist'
+                ref={this.loadRef.bind(this)}
                 onScroll={this.props.onScroll}
                 className={classNames(['rce-container-mlist', this.props.className])}>
                 {