From 5925f11083fba073e742b18a7eb6d3da1eda6814 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 21 Oct 2016 06:28:42 -0400
Subject: [PATCH] Switch TruncatedText component to use clamp.js

---
 dist/index.html        |  1 +
 js/component/common.js | 18 ++++++++++++++----
 js/page/discover.js    |  4 ++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 96b9c1c52..3ecc0a4d2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -23,6 +23,7 @@
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.7.4/polyfill.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.min.js"></script>
       <script src="./js/mediaelement/jquery.js"></script>
       <script src="./js/mediaelement/mediaelement-and-player.min.js"></script>
       <script src="./js/lbry.js?i=0"></script>
diff --git a/js/component/common.js b/js/component/common.js
index ed15aac93..a751d4d8c 100644
--- a/js/component/common.js
+++ b/js/component/common.js
@@ -13,17 +13,27 @@ var Icon = React.createClass({
 
 var TruncatedText = React.createClass({
   propTypes: {
-    limit: React.PropTypes.number,
+    lines: React.PropTypes.number,
+    height: React.PropTypes.string,
+    auto: React.PropTypes.bool,
   },
   getDefaultProps: function() {
     return {
-      limit: 250,
+      lines: null,
+      height: null,
+      auto: true,
     }
   },
+  componentDidMount: function() {
+    console.log('span is', this.refs.span);
+    console.log('type of lines is', typeof this.props.lines)
+    $clamp(this.refs.span, {
+      clamp: this.props.lines || this.props.height || 'auto',
+    });
+  },
   render: function() {
     var text = this.props.children;
-    var limit = this.props.limit;
-    return <span>{text.slice(0, limit) + (text.length > limit ? ' ...' : '')}</span>;
+    return <span ref="span">{text}</span>;
   }
 });
 
diff --git a/js/page/discover.js b/js/page/discover.js
index 0663175cb..89db1d7fa 100644
--- a/js/page/discover.js
+++ b/js/page/discover.js
@@ -122,7 +122,7 @@ var SearchResultRow = React.createClass({
             <div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div>
             <h3 style={titleStyle}>
               <a href={'/?show=' + this.props.name}>
-                <TruncatedText {...this.props.compact ? {limit: 50} : {}}>
+                <TruncatedText lines={3}>
                   {this.props.title}
                 </TruncatedText>
               </a>
@@ -132,7 +132,7 @@ var SearchResultRow = React.createClass({
               <DownloadLink streamName={this.props.name} button="text" />
             </div>
             <p style={searchRowDescriptionStyle}>
-              <TruncatedText {... this.props.compact ? {limit: 123} : {}}>
+              <TruncatedText lines={3}>
                 {this.props.description}
               </TruncatedText>
             </p>