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

import React from 'react';
import lbry from '../lbry.js';

//component/icon.js
export class Icon extends React.Component {
  static propTypes = {
    icon: React.PropTypes.string.isRequired,
    className: React.PropTypes.string,
    fixed: React.PropTypes.bool,
  }

  static defaultProps = {
    lines: null
  }

  render() {
    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>
  }
}

export class TruncatedText extends React.Component {
  static propTypes = {
    lines: React.PropTypes.number,
  }

  render() {
    return <span className="truncated-text" style={{ WebkitLineClamp: this.props.lines }}>{this.props.children}</span>;
  }
}

export class BusyMessage extends React.Component {
  static propTypes = {
    message: React.PropTypes.string,
  }

  render() {
    return <span>{this.props.message} <span className="busy-indicator"></span></span>
  }
}

export class CurrencySymbol extends React.Component {
  render() {
    return <span>LBC</span>;
  }
}

export class CreditAmount extends React.Component {
  static propTypes = {
    amount: React.PropTypes.number.isRequired,
    precision: React.PropTypes.number,
    isEstimate: React.PropTypes.bool,
    label: React.PropTypes.bool,
    showFree: React.PropTypes.bool,
    look: React.PropTypes.oneOf(['indicator', 'plain']),
  }

  static defaultProps = {
    precision: 1,
    label: true,
    showFree: false,
    look: 'indicator',
  }

  render() {
    const formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision);
    let amountText;
    if (this.props.showFree && parseFloat(formattedAmount) == 0) {
      amountText = 'free';
    } else if (this.props.label) {
      amountText = formattedAmount + (parseFloat(formattedAmount) == 1 ? ' credit' : ' credits');
    } else {
      amountText = formattedAmount;
    }

    return (
      <span className={`credit-amount credit-amount--${this.props.look}`}>
        <span>
          {amountText}
        </span>
        { this.props.isEstimate ? <span className="credit-amount__estimate" title="This is an estimate and does not include data fees">*</span> : null }
      </span>
    );
  }
}

let addressStyle = {
  fontFamily: '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
};
export class Address extends React.Component {
  static propTypes = {
    address: React.PropTypes.string,
  }

  constructor(props) {
    super(props);

    this._inputElem = null;
  }

  render() {
    return (
      <input className="input-copyable" type="text" ref={(input) => { this._inputElem = input; }}
             onFocus={() => { this._inputElem.select(); }} style={addressStyle} readOnly="readonly" value={this.props.address}></input>
    );
  }
}

export class Thumbnail extends React.Component {
  static propTypes = {
    src: React.PropTypes.string,
  }

  handleError() {
    if (this.state.imageUrl != this._defaultImageUri) {
      this.setState({
        imageUri: this._defaultImageUri,
      });
    }
  }

  constructor(props) {
    super(props);

    this._defaultImageUri = lbry.imagePath('default-thumb.svg')
    this._maxLoadTime = 10000
    this._isMounted = false

    this.state = {
      imageUri: this.props.src || this._defaultImageUri,
    };
  }

  componentDidMount() {
    this._isMounted = true;
    setTimeout(() => {
      if (this._isMounted && !this.refs.img.complete) {
        this.setState({
          imageUri: this._defaultImageUri,
        });
      }
    }, this._maxLoadTime);
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    const className = this.props.className ? this.props.className : '',
          otherProps = Object.assign({}, this.props)
    delete otherProps.className;
    return <img ref="img" onError={this.handleError} {...otherProps} className={className} src={this.state.imageUri} />
  }
}