Merge pull request #71 from lbryio/clampjs
Switch TruncatedText component to use clamp.js
This commit is contained in:
commit
584a1d7d6a
3 changed files with 17 additions and 6 deletions
1
dist/index.html
vendored
1
dist/index.html
vendored
|
@ -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.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/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/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/jquery.js"></script>
|
||||||
<script src="./js/mediaelement/mediaelement-and-player.min.js"></script>
|
<script src="./js/mediaelement/mediaelement-and-player.min.js"></script>
|
||||||
<script src="./js/lbry.js?i=0"></script>
|
<script src="./js/lbry.js?i=0"></script>
|
||||||
|
|
|
@ -13,17 +13,27 @@ var Icon = React.createClass({
|
||||||
|
|
||||||
var TruncatedText = React.createClass({
|
var TruncatedText = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
limit: React.PropTypes.number,
|
lines: React.PropTypes.number,
|
||||||
|
height: React.PropTypes.string,
|
||||||
|
auto: React.PropTypes.bool,
|
||||||
},
|
},
|
||||||
getDefaultProps: function() {
|
getDefaultProps: function() {
|
||||||
return {
|
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() {
|
render: function() {
|
||||||
var text = this.props.children;
|
var text = this.props.children;
|
||||||
var limit = this.props.limit;
|
return <span ref="span">{text}</span>;
|
||||||
return <span>{text.slice(0, limit) + (text.length > limit ? ' ...' : '')}</span>;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -122,7 +122,7 @@ var SearchResultRow = React.createClass({
|
||||||
<div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div>
|
<div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div>
|
||||||
<h3 style={titleStyle}>
|
<h3 style={titleStyle}>
|
||||||
<a href={'/?show=' + this.props.name}>
|
<a href={'/?show=' + this.props.name}>
|
||||||
<TruncatedText {...this.props.compact ? {limit: 50} : {}}>
|
<TruncatedText lines={3}>
|
||||||
{this.props.title}
|
{this.props.title}
|
||||||
</TruncatedText>
|
</TruncatedText>
|
||||||
</a>
|
</a>
|
||||||
|
@ -132,7 +132,7 @@ var SearchResultRow = React.createClass({
|
||||||
<DownloadLink streamName={this.props.name} button="text" />
|
<DownloadLink streamName={this.props.name} button="text" />
|
||||||
</div>
|
</div>
|
||||||
<p style={searchRowDescriptionStyle}>
|
<p style={searchRowDescriptionStyle}>
|
||||||
<TruncatedText {... this.props.compact ? {limit: 123} : {}}>
|
<TruncatedText lines={3}>
|
||||||
{this.props.description}
|
{this.props.description}
|
||||||
</TruncatedText>
|
</TruncatedText>
|
||||||
</p>
|
</p>
|
||||||
|
|
Loading…
Add table
Reference in a new issue