From cd3fefc838caacaec140190765a39f4a029d4ab4 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Tue, 4 Apr 2017 23:54:04 +0200
Subject: [PATCH 1/3] Add possibility to render component as AppBar title

---
 components/app_bar/AppBar.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index 6e6aec44..17c292d4 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -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 = {
@@ -48,7 +51,7 @@ const factory = (IconButton) => {
       if (this.props.scrollHide) {
         this.initializeScroll();
       }
-    }
+    };
 
     componentWillReceiveProps(nextProps) {
       if (!this.props.scrollHide && nextProps.scrollHide) {
@@ -58,13 +61,13 @@ const factory = (IconButton) => {
       if (this.props.scrollHide && !nextProps.scrollHide) {
         this.endScroll();
       }
-    }
+    };
 
     componentWillUnmount() {
       if (this.props.scrollHide) {
         this.endScroll();
       }
-    }
+    };
 
     initializeScroll = () => {
       window.addEventListener('scroll', this.handleScroll);
@@ -85,6 +88,15 @@ const factory = (IconButton) => {
       this.setState({ hidden });
       this.curScroll = window.scrollY;
     };
+  
+    renderTitle = () => {
+      const {title} = this.props
+      if (!title) return;
+      if (typeof(title) === 'function') return title;
+      return (
+        <h1 className={classnames(theme.title)}>{title}</h1>
+      )
+    };
 
     render() {
       const {
@@ -116,7 +128,7 @@ const factory = (IconButton) => {
               icon={leftIcon}
             />
             }
-            {title && <h1 className={classnames(theme.title)}>{title}</h1>}
+            {renderTitle(title)}
             {children}
             {rightIcon && <IconButton
               inverse

From 4ef719ad329db2f86f9333536d1f3611016ad09a Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Tue, 4 Apr 2017 23:55:27 +0200
Subject: [PATCH 2/3] Update AppBar.js

---
 components/app_bar/AppBar.js | 42 +++++++++++++++++++-----------------
 components/app_bar/readme.md |  2 +-
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index 17c292d4..d7d9176f 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -35,7 +35,7 @@ const factory = (IconButton) => {
       title: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.element,
-      ])
+      ]),
     };
 
     static defaultProps = {
@@ -51,7 +51,7 @@ const factory = (IconButton) => {
       if (this.props.scrollHide) {
         this.initializeScroll();
       }
-    };
+    }
 
     componentWillReceiveProps(nextProps) {
       if (!this.props.scrollHide && nextProps.scrollHide) {
@@ -61,44 +61,46 @@ const factory = (IconButton) => {
       if (this.props.scrollHide && !nextProps.scrollHide) {
         this.endScroll();
       }
-    };
+    }
 
     componentWillUnmount() {
       if (this.props.scrollHide) {
         this.endScroll();
       }
-    };
+    }
 
-    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 = () => {
+    handleScroll() {
       const scrollDiff = this.curScroll - window.scrollY;
       const hidden = scrollDiff < 0
         && window.scrollY !== undefined
         && window.scrollY > this.state.height;
       this.setState({ hidden });
       this.curScroll = window.scrollY;
-    };
-  
-    renderTitle = () => {
-      const {title} = this.props
-      if (!title) return;
-      if (typeof(title) === 'function') return title;
-      return (
-        <h1 className={classnames(theme.title)}>{title}</h1>
-      )
-    };
+    }
+
+    renderTitle() {
+      const { props } = this;
+      const { title, theme } = props;
+      if (!title) return undefined;
+
+      return typeof (title) === 'string'
+        ? <h1 className={classnames(theme.title)}>{title}</h1>
+        : React.createElement(title, props);
+    }
 
     render() {
+      const { props, renderTitle } = this;
       const {
         children,
         leftIcon,
@@ -107,7 +109,7 @@ const factory = (IconButton) => {
         rightIcon,
         theme,
         title,
-      } = this.props;
+      } = props;
       const className = classnames(theme.appBar, {
         [theme.fixed]: this.props.fixed,
         [theme.flat]: this.props.flat,
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 0ecf083e..1070cfe3 100644
--- a/components/app_bar/readme.md
+++ b/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.|

From 56a730e5164d6b6db5b32654f05483d15cbcf552 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 6 Apr 2017 10:28:44 +0200
Subject: [PATCH 3/3] Small fixes

---
 components/app_bar/AppBar.js | 62 ++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index d7d9176f..85e90c6e 100644
--- a/components/app_bar/AppBar.js
+++ b/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';
@@ -80,27 +80,16 @@ const factory = (IconButton) => {
       window.removeEventListener('scroll', this.handleScroll);
     }
 
-    handleScroll() {
+    handleScroll = () => {
       const scrollDiff = this.curScroll - window.scrollY;
       const hidden = scrollDiff < 0
         && window.scrollY !== undefined
         && window.scrollY > this.state.height;
       this.setState({ hidden });
       this.curScroll = window.scrollY;
-    }
-
-    renderTitle() {
-      const { props } = this;
-      const { title, theme } = props;
-      if (!title) return undefined;
-
-      return typeof (title) === 'string'
-        ? <h1 className={classnames(theme.title)}>{title}</h1>
-        : React.createElement(title, props);
-    }
+    };
 
     render() {
-      const { props, renderTitle } = this;
       const {
         children,
         leftIcon,
@@ -109,13 +98,36 @@ const factory = (IconButton) => {
         rightIcon,
         theme,
         title,
-      } = props;
-      const className = classnames(theme.appBar, {
+      } = this.props;
+
+      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}
@@ -123,22 +135,10 @@ const factory = (IconButton) => {
           ref={(node) => { this.rootNode = node; }}
         >
           <div className={theme.inner}>
-            {leftIcon && <IconButton
-              inverse
-              className={classnames(theme.leftIcon)}
-              onClick={onLeftIconClick}
-              icon={leftIcon}
-            />
-            }
-            {renderTitle(title)}
+            {renderedLeftIcon}
+            {renderedTitle}
             {children}
-            {rightIcon && <IconButton
-              inverse
-              className={classnames(theme.rightIcon)}
-              onClick={onRightIconClick}
-              icon={rightIcon}
-            />
-            }
+            {renderedRightIcon}
           </div>
         </header>
       );