lbry-desktop/ui/js/component/common.js

137 lines
3.7 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
import lbry from '../lbry.js';
2017-02-10 00:29:22 +01:00
import $clamp from 'clamp-js-main';
2016-04-10 02:00:56 +02:00
2016-11-22 21:19:08 +01:00
//component/icon.js
export let Icon = React.createClass({
propTypes: {
icon: React.PropTypes.string.isRequired,
2016-11-18 09:01:36 +01:00
className: React.PropTypes.string,
fixed: React.PropTypes.bool,
},
2016-04-10 02:00:56 +02:00
render: function() {
const {fixed, className, ...other} = this.props;
const spanClassName = ('icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') +
this.props.icon + ' ' + (this.props.className || ''));
return <span className={spanClassName} {... other}></span>
2016-04-10 02:00:56 +02:00
}
});
2016-11-22 21:19:08 +01:00
export let TruncatedText = React.createClass({
2016-08-04 10:08:12 +02:00
propTypes: {
lines: React.PropTypes.number,
height: React.PropTypes.string,
auto: React.PropTypes.bool,
2016-08-04 10:08:12 +02:00
},
getDefaultProps: function() {
return {
lines: null,
height: null,
auto: true,
2016-08-04 10:08:12 +02:00
}
},
componentDidMount: function() {
// Manually round up the line height, because clamp.js doesn't like fractional-pixel line heights.
// Need to work directly on the style object because setting the style prop doesn't update internal styles right away.
this.refs.span.style.lineHeight = Math.ceil(parseFloat(getComputedStyle(this.refs.span).lineHeight)) + 'px';
$clamp(this.refs.span, {
clamp: this.props.lines || this.props.height || 'auto',
});
},
2016-08-04 10:08:12 +02:00
render: function() {
return <span ref="span" className="truncated-text">{this.props.children}</span>;
2016-08-04 10:08:12 +02:00
}
});
2016-11-22 21:19:08 +01:00
export let BusyMessage = React.createClass({
propTypes: {
message: React.PropTypes.string
},
render: function() {
return <span>{this.props.message} <span className="busy-indicator"></span></span>
}
});
2016-04-10 02:00:56 +02:00
var creditAmountStyle = {
color: '#216C2A',
fontWeight: 'bold',
fontSize: '0.8em'
}, estimateStyle = {
fontSize: '0.8em',
2016-04-10 02:00:56 +02:00
color: '#aaa',
};
2016-11-22 21:19:08 +01:00
export let CurrencySymbol = React.createClass({
render: function() { return <span>LBC</span>; }
});
2016-11-22 21:19:08 +01:00
export let CreditAmount = React.createClass({
2016-04-10 02:00:56 +02:00
propTypes: {
amount: React.PropTypes.number,
precision: React.PropTypes.number
2016-04-10 02:00:56 +02:00
},
render: function() {
var formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision ? this.props.precision : 1);
2016-04-10 02:00:56 +02:00
return (
<span className="credit-amount">
<span style={creditAmountStyle}>{formattedAmount} {parseFloat(formattedAmount) == 1.0 ? 'credit' : 'credits'}</span>
{ this.props.isEstimate ? <span style={estimateStyle}> (est)</span> : null }
2016-04-10 02:00:56 +02:00
</span>
);
}
});
var addressStyle = {
fontFamily: '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
};
2016-11-22 21:19:08 +01:00
export let Address = React.createClass({
propTypes: {
address: React.PropTypes.string,
},
render: function() {
return (
<span style={addressStyle}>{this.props.address}</span>
);
}
});
2016-11-11 13:56:55 +01:00
2016-11-22 21:19:08 +01:00
export let Thumbnail = React.createClass({
2017-02-08 22:15:45 +01:00
_defaultImageUri: lbry.imagePath('default-thumb.svg'),
2016-11-11 13:56:55 +01:00
_maxLoadTime: 10000,
_isMounted: false,
2016-11-11 13:56:55 +01:00
propTypes: {
src: React.PropTypes.string,
2016-11-11 13:56:55 +01:00
},
handleError: function() {
if (this.state.imageUrl != this._defaultImageUri) {
this.setState({
imageUri: this._defaultImageUri,
});
}
},
getInitialState: function() {
return {
imageUri: this.props.src || this._defaultImageUri,
};
},
componentDidMount: function() {
this._isMounted = true;
2016-11-11 13:56:55 +01:00
setTimeout(() => {
if (this._isMounted && !this.refs.img.complete) {
2016-11-11 13:56:55 +01:00
this.setState({
imageUri: this._defaultImageUri,
});
}
}, this._maxLoadTime);
},
componentWillUnmount: function() {
this._isMounted = false;
},
2016-11-11 13:56:55 +01:00
render: function() {
return <img ref="img" onError={this.handleError} {... this.props} src={this.state.imageUri} />
2016-11-11 13:56:55 +01:00
},
});