Typing Indicators

ts/components/ConversationListItem.md

@@ -112,6 +112,40 @@
 </util.LeftPaneContext>
 ```
 
+#### Is typing
+
+```jsx
+<util.LeftPaneContext theme={util.theme}>
+  <div>
+    <ConversationListItem
+      phoneNumber="(202) 555-0011"
+      conversationType={'direct'}
+      unreadCount={4}
+      lastUpdated={Date.now() - 5 * 60 * 1000}
+      isTyping={true}
+      onClick={() => console.log('onClick')}
+      i18n={util.i18n}
+    />
+  </div>
+  <div>
+    <ConversationListItem
+      phoneNumber="(202) 555-0011"
+      conversationType={'direct'}
+      unreadCount={4}
+      lastUpdated={Date.now() - 5 * 60 * 1000}
+      isTyping={true}
+      lastMessage={{
+        status: 'read',
+      }}
+      onClick={() => console.log('onClick')}
+      i18n={util.i18n}
+    />
+  </div>
+</util.LeftPaneContext>
+```
+
+#### Selected
+
 #### With unread
 
 ```jsx

ts/components/ConversationListItem.tsx

@@ -5,6 +5,8 @@ import { Avatar } from './Avatar';
 import { MessageBody } from './conversation/MessageBody';
 import { Timestamp } from './conversation/Timestamp';
 import { ContactName } from './conversation/ContactName';
+import { TypingAnimation } from './conversation/TypingAnimation';
+
 import { Localizer } from '../types/Util';
 
 interface Props {
@@ -19,6 +21,7 @@ interface Props {
   unreadCount: number;
   isSelected: boolean;
 
+  isTyping: boolean;
   lastMessage?: {
     status: 'sending' | 'sent' | 'delivered' | 'read' | 'error';
     text: string;
@@ -118,9 +121,9 @@ export class ConversationListItem extends React.Component<Props> {
   }
 
   public renderMessage() {
-    const { lastMessage, unreadCount, i18n } = this.props;
+    const { lastMessage, isTyping, unreadCount, i18n } = this.props;
 
-    if (!lastMessage) {
+    if (!lastMessage && !isTyping) {
       return null;
     }
 
@@ -134,14 +137,18 @@ export class ConversationListItem extends React.Component<Props> {
               : null
           )}
         >
-          <MessageBody
-            text={lastMessage.text || ''}
-            disableJumbomoji={true}
-            disableLinks={true}
-            i18n={i18n}
-          />
+          {isTyping ? (
+            <TypingAnimation i18n={i18n} />
+          ) : (
+            <MessageBody
+              text={lastMessage && lastMessage.text ? lastMessage.text : ''}
+              disableJumbomoji={true}
+              disableLinks={true}
+              i18n={i18n}
+            />
+          )}
         </div>
-        {lastMessage.status ? (
+        {lastMessage && lastMessage.status ? (
           <div
             className={classNames(
               'module-conversation-list-item__message__status-icon',

ts/components/conversation/TypingAnimation.md

@@ -0,0 +1,22 @@
+### Conversation List
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <TypingAnimation i18n={util.i18n} />
+</util.ConversationContext>
+```
+
+### Dark background
+
+Note: background color is 'steel'
+
+```jsx
+<div
+  style={{
+    backgroundColor: '#6b6b78',
+    padding: '2em',
+  }}
+>
+  <TypingAnimation color="light" i18n={util.i18n} />
+</div>
+```

ts/components/conversation/TypingAnimation.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { Localizer } from '../../types/Util';
+
+interface Props {
+  i18n: Localizer;
+  color?: string;
+}
+
+export class TypingAnimation extends React.Component<Props> {
+  public render() {
+    const { i18n, color } = this.props;
+
+    return (
+      <div className="module-typing-animation" title={i18n('typingAlt')}>
+        <div
+          className={classNames(
+            'module-typing-animation__dot',
+            'module-typing-animation__dot--first',
+            color ? `module-typing-animation__dot--${color}` : null
+          )}
+        />
+        <div className="module-typing-animation__spacer" />
+        <div
+          className={classNames(
+            'module-typing-animation__dot',
+            'module-typing-animation__dot--second',
+            color ? `module-typing-animation__dot--${color}` : null
+          )}
+        />
+        <div className="module-typing-animation__spacer" />
+        <div
+          className={classNames(
+            'module-typing-animation__dot',
+            'module-typing-animation__dot--third',
+            color ? `module-typing-animation__dot--${color}` : null
+          )}
+        />
+      </div>
+    );
+  }
+}

ts/components/conversation/TypingBubble.md

@@ -0,0 +1,38 @@
+### In message bubble
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <li>
+    <TypingBubble conversationType="direct" i18n={util.i18n} />
+  </li>
+  <li>
+    <TypingBubble color="teal" conversationType="direct" i18n={util.i18n} />
+  </li>
+</util.ConversationContext>
+```
+
+### In message bubble, group conversation
+
+```jsx
+<util.ConversationContext theme={util.theme}>
+  <li>
+    <TypingBubble color="red" conversationType="group" i18n={util.i18n} />
+  </li>
+  <li>
+    <TypingBubble
+      color="purple"
+      authorName="First Last"
+      conversationType="group"
+      i18n={util.i18n}
+    />
+  </li>
+  <li>
+    <TypingBubble
+      avatarPath={util.gifObjectUrl}
+      color="blue"
+      conversationType="group"
+      i18n={util.i18n}
+    />
+  </li>
+</util.ConversationContext>
+```

ts/components/conversation/TypingBubble.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { TypingAnimation } from './TypingAnimation';
+import { Avatar } from '../Avatar';
+
+import { Localizer } from '../../types/Util';
+
+interface Props {
+  avatarPath?: string;
+  color: string;
+  name: string;
+  phoneNumber: string;
+  profileName: string;
+  conversationType: string;
+  i18n: Localizer;
+}
+
+export class TypingBubble extends React.Component<Props> {
+  public renderAvatar() {
+    const {
+      avatarPath,
+      color,
+      name,
+      phoneNumber,
+      profileName,
+      conversationType,
+      i18n,
+    } = this.props;
+
+    if (conversationType !== 'group') {
+      return;
+    }
+
+    return (
+      <div className="module-message__author-avatar">
+        <Avatar
+          avatarPath={avatarPath}
+          color={color}
+          conversationType="direct"
+          i18n={i18n}
+          name={name}
+          phoneNumber={phoneNumber}
+          profileName={profileName}
+          size={36}
+        />
+      </div>
+    );
+  }
+
+  public render() {
+    const { i18n, color } = this.props;
+
+    return (
+      <div className={classNames('module-message', 'module-message--incoming')}>
+        <div
+          className={classNames(
+            'module-message__container',
+            'module-message__container--incoming',
+            `module-message__container--incoming-${color}`
+          )}
+        >
+          <div className="module-message__typing-container">
+            <TypingAnimation color="light" i18n={i18n} />
+          </div>
+          {this.renderAvatar()}
+        </div>
+      </div>
+    );
+  }
+}