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

242 lines
5.3 KiB
JavaScript
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
2017-06-15 21:30:56 +02:00
import ReactDOMServer from "react-dom/server";
2017-06-06 23:19:12 +02:00
import lbry from "../lbry.js";
2017-06-15 21:30:56 +02:00
import ReactMarkdown from "react-markdown";
2016-04-10 02:00:56 +02:00
2016-11-22 21:19:08 +01:00
//component/icon.js
2017-06-08 06:42:19 +02:00
export class Icon extends React.PureComponent {
2017-05-17 10:10:25 +02:00
static propTypes = {
icon: React.PropTypes.string.isRequired,
2016-11-18 09:01:36 +01:00
className: React.PropTypes.string,
fixed: React.PropTypes.bool,
2017-06-06 23:19:12 +02:00
};
2017-05-17 10:10:25 +02:00
render() {
2017-06-06 23:19:12 +02:00
const { fixed, className } = this.props;
const spanClassName =
"icon " +
("fixed" in this.props ? "icon-fixed-width " : "") +
this.props.icon +
" " +
(this.props.className || "");
return <span className={spanClassName} />;
2016-04-10 02:00:56 +02:00
}
2017-05-17 10:10:25 +02:00
}
2016-04-10 02:00:56 +02:00
2017-06-08 06:42:19 +02:00
export class TruncatedText extends React.PureComponent {
2017-05-17 10:10:25 +02:00
static propTypes = {
lines: React.PropTypes.number,
2017-06-06 23:19:12 +02:00
};
2017-05-17 10:10:25 +02:00
2017-05-19 18:17:19 +02:00
static defaultProps = {
2017-06-06 23:19:12 +02:00
lines: null,
};
2017-05-19 18:17:19 +02:00
2017-05-17 10:10:25 +02:00
render() {
2017-06-06 23:19:12 +02:00
return (
<span
className="truncated-text"
style={{ WebkitLineClamp: this.props.lines }}
>
{this.props.children}
</span>
);
2016-08-04 10:08:12 +02:00
}
2017-05-17 10:10:25 +02:00
}
2017-06-17 19:59:18 +02:00
export class TruncatedMarkdown extends React.PureComponent {
static propTypes = {
lines: React.PropTypes.number,
};
static defaultProps = {
lines: null,
};
transformMarkdown(text) {
// render markdown to html string then trim html tag
let htmlString = ReactDOMServer.renderToStaticMarkup(
<ReactMarkdown source={this.props.children} />
);
var txt = document.createElement("textarea");
txt.innerHTML = htmlString;
return txt.value.replace(/<(?:.|\n)*?>/gm, "");
}
render() {
let content = this.props.children && typeof this.props.children === "string"
? this.transformMarkdown(this.props.children)
: this.props.children;
return (
<span
className="truncated-text"
style={{ WebkitLineClamp: this.props.lines }}
>
{content}
</span>
);
}
}
2017-06-08 06:42:19 +02:00
export class BusyMessage extends React.PureComponent {
2017-05-17 10:10:25 +02:00
static propTypes = {
message: React.PropTypes.string,
2017-06-06 23:19:12 +02:00
};
2016-08-04 10:08:12 +02:00
2017-05-17 10:10:25 +02:00
render() {
2017-06-06 23:19:12 +02:00
return (
<span>{this.props.message} <span className="busy-indicator" /></span>
);
}
2017-05-17 10:10:25 +02:00
}
2017-06-08 06:42:19 +02:00
export class CurrencySymbol extends React.PureComponent {
2017-05-17 10:10:25 +02:00
render() {
return <span>LBC</span>;
}
}
2017-06-08 06:42:19 +02:00
export class CreditAmount extends React.PureComponent {
2017-05-17 10:10:25 +02:00
static propTypes = {
2017-04-13 20:52:26 +02:00
amount: React.PropTypes.number.isRequired,
precision: React.PropTypes.number,
isEstimate: React.PropTypes.bool,
label: React.PropTypes.bool,
showFree: React.PropTypes.bool,
2017-06-06 23:19:12 +02:00
look: React.PropTypes.oneOf(["indicator", "plain"]),
};
2017-05-17 10:10:25 +02:00
static defaultProps = {
precision: 1,
label: true,
showFree: false,
2017-06-06 23:19:12 +02:00
look: "indicator",
};
2017-05-17 10:10:25 +02:00
render() {
2017-06-06 23:19:12 +02:00
const formattedAmount = lbry.formatCredits(
this.props.amount,
this.props.precision
);
let amountText;
if (this.props.showFree && parseFloat(formattedAmount) == 0) {
2017-06-06 23:19:12 +02:00
amountText = __("free");
} else if (this.props.label) {
2017-06-06 23:19:12 +02:00
amountText =
formattedAmount +
" " +
(parseFloat(formattedAmount) == 1 ? __("credit") : __("credits"));
} else {
amountText = formattedAmount;
}
2016-04-10 02:00:56 +02:00
return (
<span className={`credit-amount credit-amount--${this.props.look}`}>
2017-04-13 20:52:26 +02:00
<span>
{amountText}
2017-04-13 20:52:26 +02:00
</span>
2017-06-06 23:19:12 +02:00
{this.props.isEstimate
? <span
className="credit-amount__estimate"
title={__("This is an estimate and does not include data fees")}
>
*
</span>
: null}
2016-04-10 02:00:56 +02:00
</span>
);
}
2017-05-17 10:10:25 +02:00
}
2017-05-17 10:10:25 +02:00
let addressStyle = {
2017-06-06 23:19:12 +02:00
fontFamily:
'"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
};
2017-06-08 06:42:19 +02:00
export class Address extends React.PureComponent {
2017-05-17 10:10:25 +02:00
static propTypes = {
address: React.PropTypes.string,
2017-06-06 23:19:12 +02:00
};
2017-05-17 10:10:25 +02:00
constructor(props) {
super(props);
this._inputElem = null;
}
render() {
return (
2017-06-06 23:19:12 +02:00
<input
className="input-copyable"
type="text"
ref={input => {
this._inputElem = input;
}}
onFocus={() => {
this._inputElem.select();
}}
style={addressStyle}
readOnly="readonly"
value={this.props.address}
/>
);
}
2017-05-17 10:10:25 +02:00
}
2016-11-11 13:56:55 +01:00
2017-06-08 06:42:19 +02:00
export class Thumbnail extends React.PureComponent {
2017-05-17 10:10:25 +02:00
static propTypes = {
src: React.PropTypes.string,
2017-06-06 23:19:12 +02:00
};
2017-05-17 10:10:25 +02:00
handleError() {
2016-11-11 13:56:55 +01:00
if (this.state.imageUrl != this._defaultImageUri) {
this.setState({
imageUri: this._defaultImageUri,
});
}
2017-05-17 10:10:25 +02:00
}
constructor(props) {
super(props);
2017-06-06 23:19:12 +02:00
this._defaultImageUri = lbry.imagePath("default-thumb.svg");
this._maxLoadTime = 10000;
this._isMounted = false;
2017-05-17 10:10:25 +02:00
this.state = {
2016-11-11 13:56:55 +01:00
imageUri: this.props.src || this._defaultImageUri,
};
2017-05-17 10:10:25 +02:00
}
componentDidMount() {
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);
2017-05-17 10:10:25 +02:00
}
componentWillUnmount() {
this._isMounted = false;
2017-05-17 10:10:25 +02:00
}
render() {
2017-06-06 23:19:12 +02:00
const className = this.props.className ? this.props.className : "",
otherProps = Object.assign({}, this.props);
2017-04-17 14:27:39 +02:00
delete otherProps.className;
2017-06-06 23:19:12 +02:00
return (
<img
ref="img"
onError={() => {
this.handleError();
}}
{...otherProps}
className={className}
src={this.state.imageUri}
/>
);
2017-05-17 10:10:25 +02:00
}
}