Mentions/commands

docs/components.json

@@ -888,8 +888,8 @@
               },
               "description": {
                 "name": "node",
-                "description": "The command's description",
-                "required": true
+                "description": "Optional command description",
+                "required": false
               },
               "param": {
                 "name": "node",
@@ -900,7 +900,7 @@
           }
         },
         "required": true,
-        "description": "The list of commands. Must be an array of objects containing the following:\n{ title: Node, description: Node, param: Node (optional) }"
+        "description": "The list of commands. Must be an array of objects containing the following:\n\n{ title: Node, description: Node (optional), param: Node (optional), avatar: String (optional) }"
       },
       "value": {
         "type": {

docs/src/components/commands.jsx

@@ -69,7 +69,8 @@ class CommandsDoc extends Component {
     const commands = [
       {
         title: '/collapse',
-        description: 'collapse all images'
+        description: 'collapse all images',
+        avatar: 'https://avatars0.githubusercontent.com/u/14125280?v=3&s=400'
       },
       {
         title: '/giphy',
@@ -101,6 +102,20 @@ class CommandsDoc extends Component {
         description: 'mute the channel'
       }
     ];
+    const mentions = [
+      {
+        title: '@IanCStewart',
+        avatar: 'https://avatars0.githubusercontent.com/u/14125280?v=3&s=400'
+      },
+      {
+        title: '@sjaakluthart',
+        avatar: 'https://avatars1.githubusercontent.com/u/6596471?v=3&s=400'
+      },
+      {
+        title: '@larstadema',
+        avatar: 'https://avatars2.githubusercontent.com/u/16486197?v=3&s=400'
+      },
+    ];
 
     return (
       <article className="doc">
@@ -123,9 +138,17 @@ class CommandsDoc extends Component {
               onMouseOver={this.handleMouseOver}
               onSelect={this.handleSelect}
             />
+            <Commands
+              header="Mentions"
+              style={style.commands}
+              value={this.state.value}
+              commands={mentions}
+              onMouseOver={this.handleMouseOver}
+              onSelect={this.handleSelect}
+            />
             <MessageInput
               onChange={this.changeValue}
-              placeholder="Type / to view and filter the commands"
+              placeholder="Type / to view and filter the commands, type @ to filter mentions"
               value={this.state.command || this.state.value}
               sendMessage={() => {}}
               style={style.messageInput}

src/commands/index.jsx

@@ -8,20 +8,25 @@ import isEmpty from 'lodash/isEmpty';
 import onClickOutside from 'react-onclickoutside';
 import themeable from '../themeable';
 import getStyles from './get-styles';
+import Avatar from '../avatar';
+import styles from './styles';
 
 const propTypes = {
   /** Text to display in the header */
   header: PropTypes.node,
   /** The list of commands. Must be an array of objects containing the following:
-  * { title: Node, description: Node, param: Node (optional) }
+  *
+  * { title: Node, description: Node (optional), param: Node (optional), avatar: Node (optional) }
   */
   commands: PropTypes.arrayOf(PropTypes.shape({
     /** The command to execute */
     title: PropTypes.node.isRequired,
-    /** The command's description */
-    description: PropTypes.node.isRequired,
+    /** Optional command description */
+    description: PropTypes.node,
     /** Optional command parameter */
-    param: PropTypes.node
+    param: PropTypes.node,
+    /** Optional command avatar */
+    avatar: PropTypes.node,
   })).isRequired,
   /** Filter commands based on input value */
   value: PropTypes.string.isRequired,
@@ -158,18 +163,33 @@ class Commands extends Component {
         <header style={getStyles.header(color, headerStyle)}>{header}</header>
         <section style={getStyles.commands()}>
           {map(this.state.commands, command => (
-            <p
+            <div
               onMouseOver={event => onMouseOver(event, command.title)}
               style={getStyles.command()}
               key={command.title}
               onClick={event => this.handleSelect(event, command.title)}
             >
-              <span>
+              <span style={styles.titleContainer}>
+                {
+                  command.avatar
+                  ? <div style={styles.avatarContainer}>
+                    {
+                      typeof command.avatar === 'string'
+                      ? <Avatar image={command.avatar} style={styles.avatar} />
+                      : command.avatar
+                    }
+                  </div>
+                  : null
+                }
                 <strong style={getStyles.title(titleStyle)}>{command.title}</strong>
                 {command.param ? <span style={paramStyle}>[{command.param}]</span> : null}
               </span>
-              <span style={getStyles.description(descriptionStyle)}>{command.description}</span>
-            </p>
+              {
+                command.description
+                ? <span style={getStyles.description(descriptionStyle)}>{command.description}</span>
+                : null
+              }
+            </div>
           ))}
         </section>
       </section>

src/commands/styles.js

@@ -15,16 +15,19 @@ export default {
     backgroundColor: colors.theme,
     color: colors.white,
     transition: 'background .3s ease-in-out',
-    padding: '10px',
+    padding: '8px',
+    height: '40px',
     fontSize: '16px',
+    lineHeight: '24px',
+    boxSizing: 'border-box',
     fontWeight: 'inherit'
   },
   commands: {
     height: 'calc(100% - 40px)',
     overflowY: 'scroll'
   },
   command: {
-    padding: '10px 20px 10px 10px',
+    padding: '8px 16px 8px 8px',
     margin: 0,
     fontSize: '14px',
     cursor: 'pointer',
@@ -44,12 +47,27 @@ export default {
   title: {
     fontWeight: 'bolder',
     marginRight: '5px',
-    fontSize: '14px'
+    fontSize: '14px',
+    lineHeight: '14px'
   },
   description: {
     fontStyle: 'italic',
     fontWeight: 'inherit',
     fontSize: '14px',
+    lineHeight: '14px',
     float: 'right'
+  },
+  titleContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  avatarContainer: {
+    width: '30px',
+    height: '30px',
+    marginRight: '8px'
+  },
+  avatar: {
+    width: '100%',
+    height: '100%'
   }
 };