Merge pull request #13 from sevenleaps/master

Master
sevenleaps · Apr 2, 2017 · 3c2b4e7 · 3c2b4e7
2 parents d0bcf99 + 8e143ce
commit 3c2b4e7
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 9 deletions.
diff --git a/src/Chat.js b/src/Chat.js
@@ -9,13 +9,16 @@ const defaultStyle = {
     overflow: 'hidden',
     height: '340px',
   },
-  inputDiv: {
+  conversation: {
+    height: '300px',
+  },
+  textInputContainer: {
     height: '40px',
     width: '100%',
     backgroundColor: '#efefef',
     borderRadius: '5px',
   },
-  input: {
+  textInput: {
     margin: '8px',
     width: 'calc(100% - 20px)',
     height: 'calc(100% - 20px)',
@@ -49,12 +52,14 @@ class Chat extends React.Component {
     }
   }
   render() {
-    const style = StyleSheet.create(assignDeep({}, defaultStyle, this.props.styles || {}));
+    const chatStyles = assignDeep({}, defaultStyle, this.props.styles || {});
+    const style = StyleSheet.create(chatStyles);
+
     return (
       <div className={css(style.chat)}>
-        <Conversation height={300} historicMessages={this.state.historicMessages} messages={this.state.messages} turnOffLoop />
-        <div className={css(style.inputDiv)}>
-          <input type="text" onKeyPress={this.keyPress} className={css(style.input)} placeholder="Type your message here..." />
+        <Conversation styles={chatStyles} historicMessages={this.state.historicMessages} messages={this.state.messages} turnOffLoop />
+        <div className={css(style.textInputContainer)}>
+          <input type="text" onKeyPress={this.keyPress} className={css(style.textInput)} placeholder="Type your message here..." />
         </div>
       </div>
     );

diff --git a/src/Conversation.js b/src/Conversation.js
@@ -126,16 +126,18 @@ class Conversation extends React.Component {
     const isInbound = isTyping && inbound;
     const isOutbound = isTyping && !inbound;
 
-    const style = StyleSheet.create(assignDeep({}, defaultStyle, {
+    const chatStyles = assignDeep({}, defaultStyle, {
       conversation: {
         height: this.props.height || defaultStyle.conversation.height,
       },
-    }, this.props.styles || {}));
+    }, this.props.styles || {});
+    const style = StyleSheet.create(chatStyles);
+
     return (
       <div className={css(style.conversation)}>
         <ImageLoader messages={this.props.messages} />
         <div className={css(style.messages)}>
-          <Messages key={this.state.reset} height={this.props.height} messages={this.state.messages} />
+          <Messages key={this.state.reset} height={style.conversation.height} messages={this.state.messages} />
         </div>
         <div className={css(isInbound && style.inbound, isOutbound && style.outbound, !isTyping && style.noTyping)}>
           {isTyping && <Typing styles={typingStyles} />}

diff --git a/src/stories/chat.js b/src/stories/chat.js
@@ -24,4 +24,49 @@ storiesOf('Chat', module)
       <Chat historicMessages={historicMessages} messages={messagesForConversation} turnOffLoop />
     </div>
   );
+})
+.add('Chat configured styles and ends at the last message and allows the user to add messages', () => {
+  const messagesForConversation = [
+    {
+      message: 'Press enter to write a message',
+      inbound: true,
+      backColor: 'white',
+      duration: 1000,
+    },
+  ];
+  const historicMessages = [
+    {
+      message: 'Type in the input box below',
+      inbound: true,
+      backColor: 'white',
+    },
+  ];
+  const styles = {
+    chat: {
+      height: '480px',
+    },
+    conversation: {
+      height: '400px',
+    },
+    container: {
+      bottom: '1%',
+    },
+    messages: {
+      height: '99%',
+    },
+    noTyping: {
+      height: '2%',
+    },
+    textInputContainer: {
+      height: '80px',
+    },
+    textInput: {
+      fontSize: '2em',
+    },
+  };
+  return (
+    <div>
+      <Chat historicMessages={historicMessages} messages={messagesForConversation} turnOffLoop styles={styles} />
+    </div>
+  );
 });