From d7b4d06e317365fb2892342b5c1e4e13f1831f4d Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Thu, 11 Aug 2016 20:16:14 +0200
Subject: [PATCH] Refactored Title and fixed placeholder text

---
 .../Layout/components/Title/Title.js          | 53 ++++++++++---------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/frontend/components/Layout/components/Title/Title.js b/frontend/components/Layout/components/Title/Title.js
index b82cd7220..e5a6a7b17 100644
--- a/frontend/components/Layout/components/Title/Title.js
+++ b/frontend/components/Layout/components/Title/Title.js
@@ -5,34 +5,37 @@ import styles from './Title.scss';
 import classNames from 'classnames/bind';
 const cx = classNames.bind(styles);
 
-const Title = (props) => {
-  let title;
-  if (props.truncate) {
-    title = _truncate(props.children, props.truncate);
-  } else {
-    title = props.children;
+class Title extends React.Component {
+  static propTypes = {
+    children: React.PropTypes.string,
+    truncate: React.PropTypes.number,
+    placeholder: React.PropTypes.string,
   }
 
-  let usePlaceholder;
-  if (props.children === null && props.placeholder) {
-    title = props.placeholder;
-    usePlaceholder = true;
-  }
+  render() {
+    let title;
+    if (this.props.truncate) {
+      title = _truncate(this.props.children, this.props.truncate);
+    } else {
+      title = this.props.children;
+    }
 
-  return(
-    <span
-      title={ props.children }
-      className={ cx(styles.title, { untitled: usePlaceholder })}
-    >
-      { title }
-    </span>
-  );
+    let usePlaceholder;
+    if (this.props.children === null && this.props.placeholder) {
+      title = this.props.placeholder;
+      usePlaceholder = true;
+    }
+
+    return(
+      <span
+        title={ this.props.children }
+        className={ cx(styles.title, { untitled: usePlaceholder })}
+      >
+        { title || this.props.placeholder }
+      </span>
+    );
+
+  }
 };
 
-Title.propTypes = {
-  children: React.PropTypes.string,
-  truncate: React.PropTypes.number,
-  placeholder: React.PropTypes.string,
-}
-
 export default Title;