cefc-view-transactiondetails/src/TransactionDetails.js

CEFC-UI Component

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cns from 'classnames';
import { DIRECTION } from './Decorator';

class TransactionDetails extends Component {

  getDirColor = (dir) => {
    const { prefix } = this.props;

    if (dir === DIRECTION[1]) {

      return `${prefix}_stockRaise`;
    }

    return (dir === DIRECTION[2]) ? `${prefix}_stockDown` : '';
  }

  renderDetails = (transactionDetails) => {
    const { prefix, className } = this.props;
    const clsName = cns({
      [`${prefix}_container`]: true,
    }, className);

    return (
      <ul className={clsName}>
        <li key="title">
          <span className={`${prefix}_price-1`}>时间</span>
          <span className={`${prefix}_price-2 ${prefix}_equal-price ${prefix}_price_val`} >成交价</span>
          <span className={`${prefix}_price-3`}>成交量</span>
        </li>
        {transactionDetails.map((info, index) => {
          return (
            <li key={`${prefix}-${index}`}>
              <span className={`${prefix}_price-1`}>{info.time}</span>
              <span className={`${prefix}_price-2 ${prefix}_equal-price ${info.price === '--' ? '' : `${prefix}_price_val`}`} >{info.price}</span>
              <span className={`${prefix}_price-3`}>{info.amount}<span className={this.getDirColor(info.direction)}>{info.direction}</span></span>
            </li>);
        })}
      </ul>
    );
  }

  render() {
    return this.renderDetails(this.props.transactionDetails)
  }
}

TransactionDetails.propTypes = {
  prefix: PropTypes.string,
  className: PropTypes.string,
  transactionDetails: PropTypes.array
};

TransactionDetails.defaultProps = {
  prefix: 'cv-trandts',
  transactionDetails: []
};

export default TransactionDetails;