react-chat-ui - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

lib/ChatBubble.js

@@ -21,2 +21,30 @@ 'use strict';
 
+var styles = {
+  chatbubble: {
+    backgroundColor: "#03b4f4",
+    borderRadius: 20,
+    display: 'block',
+    float: 'right',
+    marginTop: 1,
+    marginBottom: 1,
+    maxWidth: 425,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 14,
+    paddingRight: 14
+  },
+  recipientChatbubble: {
+    clear: 'both',
+    float: 'left',
+    marginLeft: 45,
+    backgroundColor: '#ccc'
+  },
+  p: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '300',
+    margin: 0
+  }
+};
+
 var ChatBubble = function (_Component) {
@@ -102,11 +130,23 @@ _inherits(ChatBubble, _Component);
     value: function render() {
-      return _react2.default.createElement(
-        'div',
-        { className: 'chatbubble' },
-        _react2.default.createElement(
-          'p',
-          null,
-          this._parse_for_styles(this.state.message)
-        )
-      );
+      if (this.props.recipient) {
+        return _react2.default.createElement(
+          'div',
+          { style: Object.assign({}, styles.chatbubble, styles.recipientChatbubble) },
+          _react2.default.createElement(
+            'p',
+            { style: styles.p },
+            this._parse_for_styles(this.state.message)
+          )
+        );
+      } else {
+        return _react2.default.createElement(
+          'div',
+          { style: styles.chatbubble },
+          _react2.default.createElement(
+            'p',
+            { style: styles.p },
+            this._parse_for_styles(this.state.message)
+          )
+        );
+      }
     }
@@ -113,0 +153,0 @@ }]);

lib/ChatFeed.js

@@ -29,2 +29,19 @@ 'use strict';
 
+var styles = {
+  recipient: {
+    marginTop: 10,
+    marginBottom: 10,
+    position: 'relative'
+  },
+
+  img: {
+    borderRadius: 100,
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    width: 36,
+    zIndex: 100
+  }
+};
+
 var ChatFeed = function (_Component) {
@@ -60,2 +77,5 @@ _inherits(ChatFeed, _Component);
     }
+
+    // Determine whether to render a group of messages or a single message
+
   }, {
@@ -73,3 +93,3 @@ key: '_renderGroup',
           _ChatBubble2.default,
-          null,
+          { recipient: curr.type },
           curr.message
@@ -80,7 +100,10 @@ );
         'div',
-        { key: Math.random().toString(36), className: 'recipient' },
-        _react2.default.createElement('img', { src: '../assets/me.jpg' }),
+        { key: Math.random().toString(36), style: styles.recipient },
+        _react2.default.createElement('img', { src: '../assets/me.jpg', style: styles.img }),
         message_nodes
       );
     }
+
+    // Render the message list as chat bubbles
+
   }, {
@@ -97,7 +120,7 @@ key: '_renderMessages',
             'div',
-            { key: Math.random().toString(36), className: 'recipient' },
-            _react2.default.createElement('img', { src: '../assets/me.jpg' }),
+            { key: Math.random().toString(36), style: styles.recipient },
+            _react2.default.createElement('img', { src: '../assets/me.jpg', style: styles.img }),
             _react2.default.createElement(
               _ChatBubble2.default,
-              null,
+              { recipient: 1 },
               curr.message
@@ -114,3 +137,3 @@ )
               _ChatBubble2.default,
-              null,
+              { recipient: 0 },
               curr.message
@@ -124,7 +147,7 @@ )
           'div',
-          { key: Math.random().toString(36), className: 'recipient' },
-          _react2.default.createElement('img', { src: '../assets/me.jpg' }),
+          { key: Math.random().toString(36), style: styles.recipient },
+          _react2.default.createElement('img', { src: '../assets/me.jpg', style: styles.img }),
           _react2.default.createElement(
             _ChatBubble2.default,
-            null,
+            { recipient: 1 },
             '...'
@@ -131,0 +154,0 @@ )

lib/index.js

@@ -8,7 +8,7 @@ 'use strict';
 
-var _ChatBubble2 = require('./ChatBubble.js');
+var _ChatBubble2 = require('./ChatBubble');
 
 var _ChatBubble3 = _interopRequireDefault(_ChatBubble2);
 
-var _ChatFeed2 = require('./ChatFeed.js');
+var _ChatFeed2 = require('./ChatFeed');
 
@@ -15,0 +15,0 @@ var _ChatFeed3 = _interopRequireDefault(_ChatFeed2);

package.json

 {
   "name": "react-chat-ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "A library of React components for building chat UI's",
@@ -5,0 +5,0 @@ "repository": "brandonmowat/react-chat-ui",

No alert changes

Improved metrics

Total package byte prevSize

27510

126.35%

Number of package files

10

42.86%

Lines of code

722

176.63%

No dependency changes