Merge branch 'Kikobeats-patch-1' into dev

* Kikobeats-patch-1:
  Small fixes
  Update AppBar.js
  Add possibility to render component as AppBar title

Author: javivelasco

components/app_bar/AppBar.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import classnames from 'classnames';
+import cn from 'classnames';
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers';
 import InjectIconButton from '../button/IconButton';
@@ -32,7 +32,10 @@ const factory = (IconButton) => {
         scrollHide: PropTypes.string,
         title: PropTypes.string,
       }),
-      title: PropTypes.node,
+      title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+      ]),
     };
 
     static defaultProps = {
@@ -66,16 +69,16 @@ const factory = (IconButton) => {
       }
     }
 
-    initializeScroll = () => {
+    initializeScroll() {
       window.addEventListener('scroll', this.handleScroll);
       const { height } = this.rootNode.getBoundingClientRect();
       this.curScroll = window.scrollY;
       this.setState({ height });
-    };
+    }
 
-    endScroll = () => {
+    endScroll() {
       window.removeEventListener('scroll', this.handleScroll);
-    };
+    }
 
     handleScroll = () => {
       const scrollDiff = this.curScroll - window.scrollY;
@@ -96,35 +99,46 @@ const factory = (IconButton) => {
         theme,
         title,
       } = this.props;
-      const className = classnames(theme.appBar, {
+
+      const className = cn(theme.appBar, {
         [theme.fixed]: this.props.fixed,
         [theme.flat]: this.props.flat,
         [theme.scrollHide]: this.state.hidden,
       }, this.props.className);
 
+      const renderedTitle = typeof title === 'string'
+        ? <h1 className={cn(theme.title)}>{title}</h1>
+        : title;
+
+      const renderedLeftIcon = leftIcon && (
+        <IconButton
+          inverse
+          className={cn(theme.leftIcon)}
+          onClick={onLeftIconClick}
+          icon={leftIcon}
+        />
+      );
+
+      const renderedRightIcon = rightIcon && (
+        <IconButton
+          inverse
+          className={cn(theme.rightIcon)}
+          onClick={onRightIconClick}
+          icon={rightIcon}
+        />
+      );
+
       return (
         <header
           className={className}
           data-react-toolbox="app-bar"
           ref={(node) => { this.rootNode = node; }}
         >
           <div className={theme.inner}>
-            {leftIcon && <IconButton
-              inverse
-              className={classnames(theme.leftIcon)}
-              onClick={onLeftIconClick}
-              icon={leftIcon}
-            />
-            }
-            {title && <h1 className={classnames(theme.title)}>{title}</h1>}
+            {renderedLeftIcon}
+            {renderedTitle}
             {children}
-            {rightIcon && <IconButton
-              inverse
-              className={classnames(theme.rightIcon)}
-              onClick={onRightIconClick}
-              icon={rightIcon}
-            />
-            }
+            {renderedRightIcon}
           </div>
         </header>
       );

components/app_bar/readme.md

@@ -36,7 +36,7 @@ The `AppBar` component provides properties for the common use cases of `title`,
 | `fixed`            | `Bool`     | `false` | Determine if the bar should have position `fixed` or `relative`.|
 | `flat`             | `Bool`     | `false` | If true, the AppBar doesn't show a shadow.|
 | `theme`            | `Object`   | `null`  | Classnames object defining the component style.|
-| `title`            | `Element`  | `null`  | Title used for the appbar.|
+| `title`            | `String|Element`  | `null`  | Title used for the appbar.|
 | `leftIcon`         | `String|Element`   | `null`  | Left icon.|
 | `onLeftIconClick`  | `Function` | `null`  | Called on left icon click event.|
 | `rightIcon`        | `String|Element`   | `null`  | Right icon.|