lbry-desktop/js/component/common.js

106 lines
2.5 KiB
JavaScript
Raw Normal View History

2016-04-10 02:00:56 +02:00
//component/icon.js
var Icon = React.createClass({
propTypes: {
style: React.PropTypes.object,
2016-08-07 17:27:00 +02:00
fixed: React.PropTypes.bool,
},
2016-04-10 02:00:56 +02:00
render: function() {
var className = 'icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') + this.props.icon;
return <span className={className} style={this.props.style}></span>
2016-04-10 02:00:56 +02:00
}
});
2016-08-04 10:08:12 +02:00
var TruncatedText = React.createClass({
propTypes: {
2016-08-07 17:27:00 +02:00
limit: React.PropTypes.number,
2016-08-04 10:08:12 +02:00
},
getDefaultProps: function() {
return {
limit: 250,
}
},
render: function() {
var text = this.props.children;
var limit = this.props.limit;
return <span>{text.slice(0, limit) + (text.length > limit ? ' ...' : '')}</span>;
}
});
var BusyMessage = React.createClass({
propTypes: {
message: React.PropTypes.string
},
render: function() {
return <span>{this.props.message} <span className="busy-indicator"></span></span>
}
});
2016-07-26 14:01:54 +02:00
var toolTipStyle = {
position: 'absolute',
2016-07-27 12:24:10 +02:00
zIndex: '1',
2016-07-26 14:01:54 +02:00
top: '100%',
left: '-120px',
width: '260px',
padding: '15px',
border: '1px solid #aaa',
2016-07-27 12:24:10 +02:00
backgroundColor: '#fff',
2016-07-26 14:01:54 +02:00
fontSize: '14px',
};
var ToolTip = React.createClass({
propTypes: {
open: React.PropTypes.bool.isRequired,
onMouseOut: React.PropTypes.func
},
render: function() {
return (
<div className={this.props.open ? '' : 'hidden'} style={toolTipStyle} onMouseOut={this.props.onMouseOut}>
{this.props.children}
</div>
);
}
});
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',
};
var CurrencySymbol = React.createClass({
render: function() { return <span>LBC</span>; }
});
2016-04-10 02:00:56 +02:00
var CreditAmount = React.createClass({
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',
};
var Address = React.createClass({
propTypes: {
address: React.PropTypes.string,
},
render: function() {
return (
<span style={addressStyle}>{this.props.address}</span>
);
}
});